묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
시퀄라이즈 질문입니다!
const fullPost = await Post.findOne({ where: { id: post.id }, include: [{ model: Image, }, { model: Comment, include: [{ model: User, // 댓글 작성자 attributes: ['id', 'nickname'], }], }, { model: User, // 게시글 작성자 attributes: ['id', 'nickname'], }, { model: User, // 좋아요 누른 사람 as: 'Likers', attributes: ['id'], }] }); 노드 서버에서 fullPost를 보내주는데 이때 게시글 작성자는 User 이름으로 좋아요나 댓글 작성자는 Likers, Comments 이름으로 보내지는 것으로 확인되는데 이게 User는 무조건 로우가 하나인 객체 값을 가지고 Likers, Comments는 배열로 객체 요소를 여러 개 가져서 시퀄라이즈에서 자동으로 's'를 붙여서 보내는 식으로 이해하면 될까요?? p.s. 질문하면서 생각이 난건데 시퀄라이즈에서 관계를 정의할 때 Post는 User(게시글 작성자)에 대해 belongsTo이고,Likers, Comments, Images 같은 경우는 belongsToMany이거나 hasMany이기 때문에 시퀄라이즈에서 's'를 붙여서 보내고 배열 형태로 객체 요소들을 넣어서 보내는 것이라고 이해하면 될까요? 아래 mainPosts 요소 하나 올립니다!
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
모던 웹을 위한 웹접근성, 크로스 브라우징, 이미지 포맷 이해
화면이 없이 소리만 나옵니다.
-
미해결[개정판] 딥러닝 컴퓨터 비전 완벽 가이드
Mmdetection 학습 중 unexpected keyword가 발생했습니다
현재 제공해주신 코드 바탕으로 mmdetection에서 ssd300 모델을 학습시키는 실습을 진행 중입니다. 그런데 train용 데이터셋을 생성하는 코드에서 아래와 같은 오류가 나타납니다. # train용 Dataset 생성. datasets = [build_dataset(cfg.data.train)] TypeError: DisasterDataset: __init__() got an unexpected keyword argument 'times' 제가 대충 찾아본 결과 config 파일 내 data 부분에서 repeatdataset에 times라는 인수가 있고, 이 부분에 문제가 있다고 합니다.(저는 지금 파일을 수정해서 disasterdataset으로 바뀌고 times=5 인수만 남아있는 상태) data = dict( samples_per_gpu=8, workers_per_gpu=3, train=dict( type='DisasterDataset', times=5, dataset=dict( type='CocoDataset', ann_file='data/coco/annotations/instances_train2017.json', img_prefix='data/coco/train2017/', (출처: https://github.com/open-mmlab/mmdetection/issues/5980) 그래서 cfg를 수정하면서 이 부분을 없애거나 주석처리 해서 해결하고자 하는데, 아래처럼 cfg내 요소를 수정할 수는 있는데, 없애거나 주석처리 하는 방법은 모르겠습니다. cfg.data.train.type = 'DisasterDataset' cfg.data.train.data_root = '/content/train/' cfg.data.train.ann_file = 'xBD_train.json' cfg.data.train.img_prefix = 'images 이 문제를 해결하는 방법에 대해 답변 듣고싶습니다. 이 repeatdataset 부분(코드에서는 data 밑 disasterdataset)을 수정하는 방법 이외에도 다른 방법이 있다면 꼭 배우고 싶습니다. 늘 좋은 강의 잘 듣고 있습니다. 감사합니다. 맨 아래는 문제가 생긴 cfg 전체 파일을 작성합니다. input_size = 300 model = dict( type='SingleStageDetector', backbone=dict( type='SSDVGG', depth=16, with_last_pool=False, ceil_mode=True, out_indices=(3, 4), out_feature_indices=(22, 34), init_cfg=dict( type='Pretrained', checkpoint='open-mmlab://vgg16_caffe')), neck=dict( type='SSDNeck', in_channels=(512, 1024), out_channels=(512, 1024, 512, 256, 256, 256), level_strides=(2, 2, 1, 1), level_paddings=(1, 1, 0, 0), l2_norm_scale=20), bbox_head=dict( type='SSDHead', in_channels=(512, 1024, 512, 256, 256, 256), num_classes=4, anchor_generator=dict( type='SSDAnchorGenerator', scale_major=False, input_size=300, basesize_ratio_range=(0.15, 0.9), strides=[8, 16, 32, 64, 100, 300], ratios=[[2], [2, 3], [2, 3], [2, 3], [2], [2]]), bbox_coder=dict( type='DeltaXYWHBBoxCoder', target_means=[0.0, 0.0, 0.0, 0.0], target_stds=[0.1, 0.1, 0.2, 0.2])), train_cfg=dict( assigner=dict( type='MaxIoUAssigner', pos_iou_thr=0.5, neg_iou_thr=0.5, min_pos_iou=0.0, ignore_iof_thr=-1, gt_max_assign_all=False), smoothl1_beta=1.0, allowed_border=-1, pos_weight=-1, neg_pos_ratio=3, debug=False), test_cfg=dict( nms_pre=1000, nms=dict(type='nms', iou_threshold=0.45), min_bbox_size=0, score_thr=0.02, max_per_img=200)) cudnn_benchmark = True dataset_type = 'DisasterDataset' data_root = '/content/train/' img_norm_cfg = dict(mean=[123.675, 116.28, 103.53], std=[1, 1, 1], to_rgb=True) train_pipeline = [ dict(type='LoadImageFromFile'), dict(type='LoadAnnotations', with_bbox=True), dict( type='Expand', mean=[123.675, 116.28, 103.53], to_rgb=True, ratio_range=(1, 4)), dict( type='MinIoURandomCrop', min_ious=(0.1, 0.3, 0.5, 0.7, 0.9), min_crop_size=0.3), dict(type='Resize', img_scale=(300, 300), keep_ratio=False), dict(type='RandomFlip', flip_ratio=0.5), dict( type='PhotoMetricDistortion', brightness_delta=32, contrast_range=(0.5, 1.5), saturation_range=(0.5, 1.5), hue_delta=18), dict( type='Normalize', mean=[123.675, 116.28, 103.53], std=[1, 1, 1], to_rgb=True), dict(type='DefaultFormatBundle'), dict(type='Collect', keys=['img', 'gt_bboxes', 'gt_labels']) ] test_pipeline = [ dict(type='LoadImageFromFile'), dict( type='MultiScaleFlipAug', img_scale=(300, 300), flip=False, transforms=[ dict(type='Resize', keep_ratio=False), dict( type='Normalize', mean=[123.675, 116.28, 103.53], std=[1, 1, 1], to_rgb=True), dict(type='ImageToTensor', keys=['img']), dict(type='Collect', keys=['img']) ]) ] data = dict( samples_per_gpu=8, workers_per_gpu=3, train=dict( type='DisasterDataset', times=5, dataset=dict( type='CocoDataset', ann_file='data/coco/annotations/instances_train2017.json', img_prefix='data/coco/train2017/', pipeline=[ dict(type='LoadImageFromFile'), dict(type='LoadAnnotations', with_bbox=True), dict( type='Expand', mean=[123.675, 116.28, 103.53], to_rgb=True, ratio_range=(1, 4)), dict( type='MinIoURandomCrop', min_ious=(0.1, 0.3, 0.5, 0.7, 0.9), min_crop_size=0.3), dict(type='Resize', img_scale=(300, 300), keep_ratio=False), dict(type='RandomFlip', flip_ratio=0.5), dict( type='PhotoMetricDistortion', brightness_delta=32, contrast_range=(0.5, 1.5), saturation_range=(0.5, 1.5), hue_delta=18), dict( type='Normalize', mean=[123.675, 116.28, 103.53], std=[1, 1, 1], to_rgb=True), dict(type='DefaultFormatBundle'), dict(type='Collect', keys=['img', 'gt_bboxes', 'gt_labels']) ]), data_root='/content/train/', ann_file='xBD_train.json', img_prefix='images'), val=dict( type='DisasterDataset', ann_file='xBD_train.json', img_prefix='images', pipeline=[ dict(type='LoadImageFromFile'), dict( type='MultiScaleFlipAug', img_scale=(300, 300), flip=False, transforms=[ dict(type='Resize', keep_ratio=False), dict( type='Normalize', mean=[123.675, 116.28, 103.53], std=[1, 1, 1], to_rgb=True), dict(type='ImageToTensor', keys=['img']), dict(type='Collect', keys=['img']) ]) ], data_root='/content/train/'), test=dict( type='DisasterDataset', ann_file='xBD_test.json', img_prefix='images', pipeline=[ dict(type='LoadImageFromFile'), dict( type='MultiScaleFlipAug', img_scale=(300, 300), flip=False, transforms=[ dict(type='Resize', keep_ratio=False), dict( type='Normalize', mean=[123.675, 116.28, 103.53], std=[1, 1, 1], to_rgb=True), dict(type='ImageToTensor', keys=['img']), dict(type='Collect', keys=['img']) ]) ], data_root='/content/test/')) evaluation = dict(interval=10, metric=['bbox']) optimizer = dict(type='Adam', lr=0.0001, weight_decay=0.0001) optimizer_config = dict() lr_config = dict( policy='step', warmup=None, warmup_iters=500, warmup_ratio=0.001, step=[16, 22]) runner = dict(type='EpochBasedRunner', max_epochs=30) checkpoint_config = dict(interval=10) log_config = dict( interval=10, hooks=[ dict(type='TextLoggerHook', interval=10), dict( type='WandbLoggerHook', interval=1, init_kwargs=dict(project='xBD', name='test')) ]) custom_hooks = [ dict(type='NumClassCheckHook'), dict(type='CheckInvalidLossHook', interval=50, priority='VERY_LOW') ] dist_params = dict(backend='nccl') log_level = 'INFO' load_from = '/content/mmdetection/checkpoints/mask_rcnn_r101_fpn_1x_coco_20200204-1efe0ed5.pth' resume_from = None workflow = [('train', 1)] opencv_num_threads = 0 mp_start_method = 'fork' auto_scale_lr = dict(enable=False, base_batch_size=64) work_dir = '/content/drive/MyDrive/xBD/log_task1' seed = 0 gpu_ids = range(0, 1) device = 'cuda'
-
미해결스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
회원가입 등록시 데이터가 안들어옴
안녕하세요 좋은 강의 잘 보고 있습니다. 코드를 열심히 따라 치고 하고 있는데,[회원 웹 기능 -등록]강의에서 , 이름을 입력하면 그 값이 들어오고 redirect로 /로 넘어가야하는데 넘어가지 않습니다. aaa라는 이름을 넣고 등록을 누르면 사진과 같이 등록 폼 초기화가 되고 url만 바뀌는것을 볼 수 있습니다. http는 get으로 보내지는것 같습니다 코드는 강사님과 열심히 비교 해봤을 때 문제가 없어보이는데 무엇이 문제일까요 계속 해결해보다가...질문 남깁니다.
-
미해결[개정판] 딥러닝 컴퓨터 비전 완벽 가이드
training 할때 오류가 발생하는데.. 왜이럴까요 ㅠㅠ
항상 좋은강의 잘듣고 있습니다. necleus 데이터를 학습시키는 중에 아래 처럼 오류가 나요ㅜ train이 잘 돌다가 데이터로더쪽에 오류가 나는데.. 검색해봐도 잘모르겠어요 ㅜㅜ 데이터 변환할때 이런 오류가 뜨던데 이것때문인거 같기도 하고.. 도와주세요 ㅜ
-
미해결최신 딥러닝 기술 Vision Transformer 개념부터 Pytorch 구현까지
Fine tuning 관련하여 질문 드립니다.
안녕하세요! 항상 강의 잘 듣고 있습니다! 다름이 아니라 현재 파일에 포함된 vit.ipynb 파일에서는 train 부분에서 pretrain이 1로 설정되어 있어서 제공된 model.pth을 사용하여 파인 튜닝하게 되는데 해당 모델은 어떤 데이터를 어떤 방식으로 학습시킨 모델인가요? 그리고 보통 트랜스포머를 사용할때 아주 큰 데이터셋에 pretrain 시킨 모델을 가져와서 더 작은 데이터셋에 대해 파인 튜닝하여 사용한다고 이해하였습니다. 이 과정에서 image resize, MLP 헤드 부분을 클래스 수에 맞게 교체한다고 작성되어 있는데 여기서 헤드 부분을 교체한다는게 k에 해당하는 MHA의 헤드 수 인가요 아니면 cifar 10의 10개의 num_class인가요? 이외에도 파인튜닝이 더 필요한 부분이 있는지 궁금하고 또 파인튜닝과 관련된 추가적인 자료 알고계신게 있는지 궁금합니다. 마지막으로 파인튜닝하여 사용할때 pretrained된 트랜스포머의 구조와 사용하려고 하는 트랜스포머의 구조가 일치해야 하는데, 어떻게 때와 목적에 맞는 pretrained 모델을 구하는지도 알려주실 수 있으실까요? 감사합니다!
-
미해결스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
store에 대한 궁금증!!!!꼭 답변 부탁드립니다.ㅠㅠ
[질문 템플릿]1. 강의 내용과 관련된 질문인가요? 예2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 예3. 질문 잘하기 메뉴얼을 읽어보셨나요? 예[질문 내용] @AfterEachpublic void afterEach(){ repository.clearStore();} 여기서 clearStore를 하잖아요. public void clearStore(){ store.clear();} clearStore는 이것이구요!! 근데 store는 그냥 private static Map<Long, Member> store = new HashMap<>(); 이러한 Map일뿐이고이걸 cleare했을 뿐이잖아요!! 근데 왜 이걸 지운다고해서 DB 저장 된(save()메소드로 인해 저장된 값인 "spring1", "spring2") 값이 자동으로 지울 수 있는 건가요??
-
미해결따라하며 배우는 NestJS
암호화 전 생성한 계정과 암호화 후 생성한 계정에 따라 로그인이 되고 안됩니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. heyho 23814 로 로그인 하니 에러 발생, harry로 로그인 하니 됩니다. 정상적인거 같은데 왜 이런 현상이 나타나는지 궁금합니다. bcrypt 모듈을 사용하면서 암호가 decrypt되는 과정을 거쳐야만 하게돼서 그전 생성한 계정의 암호화 되지 않은 password를 사용할 수 없게 된 것인가요?
-
미해결[개념부터 실습까지] 추천 시스템 입문편
train / test 구분하여 생기는 문제에 대해서
user_profile에 저장한 intercept와 coefficient 값들은 train 데이터셋을 통해서 얻었기때문에, test셋에 있는 user가 train set에는 없는 경우가 있을 수 있을 것 같은데 이렇게하면, user_profile.loc[user] 라는 코드는 존재하지 않는 index에 대한 참조가 되기에 Key Error가 발생할 것으로 보입니다. 이를 미리 확인해보고 싶은데, Key Error를 미리 확인하는 방법을 못찾겠네요... 이를 확인하는 코드와 처리하는 방법이 궁금해요 그리고
-
미해결[개정판] 파이썬 머신러닝 완벽 가이드
GridSearchCV 관련 내용문의
안녕하세요. 개정판 책의 내용 중 GridSearchCV에 대해 공부를 하다가 궁금한 점이 생겨 질문 남깁니다. cross_val_score() API는 cross_validation을 할때 Stratified KFold를 사용한다고 말씀해주셨는데, GridSearchCV의 파라미터인 cv에 KFold나 StratifiedKFold를 사용하지 않고 단순 폴딩 개수만 지정한다면 어떤 방식으로 cross_validation을 수행하는지 궁금합니다. 또 하나 질문으로는 cv=KFold or StratifidedKFold를 사용해도 괜찮은지와 유의사항이 있는지도 궁금합니다. 항상 좋은 강의 및 자료에 감사합니다!
-
미해결Do it! 자바 프로그래밍 입문 with 은종쌤
13:28 for 문 안에 : 은 뭔가요
for(Customer customer : customerList){ 여기서 : 은 왜 쓰인건가요 ?
-
미해결[개정판] 파이썬 머신러닝 완벽 가이드
GridSearchCV 관련 내용문의
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 강의 내용을 질문할 경우 몇분 몇초의 내용에 대한 것인지 반드시 기재 부탁드립니다. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요. 개정판 책의 GridSearchCV에 대해서 공부를 하다가 궁금한 점이 생겨 문의 드립니다.
-
미해결
해외에서 휴대폰 인증 불가
결제를 하기전 핸드폰 인증이 필요한데 해외 번호를 입력해도 인증 번호가 오지 않아서 결제를 할수 없습니다. 확인 부탁드리겠습니다.
-
미해결Three.js로 시작하는 3D 인터랙티브 웹
Subdivision surface 하면 Cube가 보이지 않습니다.
안녕하세요. 캐릭터 몸통만들기 강좌에서 Cube 에서 Add Modifier - Subdivision surface 선택하게 되면 아래 그림처럼 Cube가 보이지 않습니다. Subdivision surface 선택했을 때 동영상처럼 보이지 않고 아래 이미지처럼 보이지 않습니다. 그래서 학습을 따라 할 수 없습니다. Blender 3.1 버전입니다. 어떻게 해야 보이는지 조언 부탁드립니다. 스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
WinSCP 연결 문제
선생님 수업 잘 듣고 있습니다! WinSCP 연결 중에 문제가 생겨서요 아래와 같이 "인증에 실패하였습니다"라고 뜨고 연결이 안되고 있네요ㅜㅠ 여기 파트가 제게는 유난히 생소하다보니, 검색을 통한 해결도 쉽지 않은 상황이라 질문 남겨봅니다. 부탁드리겠습니다!
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
비로그인 상태에서 댓글 입력하면 댓글폼 개수만큼 alert가 발생합니다!
import React, { useCallback, useEffect } from 'react'; import PropTypes from 'prop-types'; import { Form, Input, Button } from 'antd'; import { useDispatch, useSelector } from 'react-redux'; import useInput from '../hooks/useInput'; import { ADD_COMMENT_REQUEST, ADD_COMMENT_RESET } from '../reducers/post'; const CommentForm = ({ post }) => { const dispatch = useDispatch(); const { addCommentDone, addCommentLoading, addCommentError } = useSelector((state) => state.post); const [commentText, onChangeCommentText, setCommentText] = useInput(''); useEffect(() => { if (addCommentDone) { setCommentText(''); } }, [addCommentDone]); useEffect(() => { if (addCommentError) { alert(addCommentError); dispatch({ type: ADD_COMMENT_RESET }); } }, [addCommentError]); const onSubmitComment = useCallback(() => { dispatch({ type: ADD_COMMENT_REQUEST, data: { content: commentText, postId: post.id }, }); }, [commentText]); return ( <Form onFinish={onSubmitComment}> <Form.Item style={{ position: 'relative', margin: 0 }}> <Input.TextArea value={commentText} onChange={onChangeCommentText} rows={4} /> <Button style={{ position: 'absolute', right: 0, bottom: -40, zIndex: 1 }} type="primary" htmlType="submit" loading={addCommentLoading}ß > 댓글 입력 </Button> </Form.Item> </Form> ); }; CommentForm.propTypes = { post: PropTypes.object.isRequired, }; export default CommentForm; 위 코드는 CommentForm 컴포넌트인데 비로그인 상태에서 댓글 입력 버튼을 클릭하면 ADD_COMMENT_FAILURE 액션이 실행되고 alert(addCommentError)를 알람 설정했습니다! 근데 이때 댓글폼을 세 개 열어 놓고 댓글 입력 버튼을 클릭하면 세 번 알람이 되더라구요..ㅠㅠㅠ 혹시 한 번만 알람되도록 설정하는 방법이 있을까하고 여쭤봅니다...ㅠADD_COMMENT_RESET은 그냥 addCommentError: false로 바꿔주는 것 말고는 없습니다. 그리고 이번에 라이브러리 최신화한 것 감사합니다! 강의 내용은 아니지만 다름이 아니라 intersection 폴더에서 컴포넌트들 화살표 함수에서 함수 선언식으로 바꾸셨던데 이유가 있을까요??
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요.
안녕하세요. 수강을 듣다가 emotion이란 라이브러리도 소개해주셔서 강의 중간에 알려주신 npm trends로 비교하여 styled-components대신 @emotion/styled 라는 라이브러리를 사용하게 됐습니다. 그런데 @emotion/styled에 강의의 Global 태그 역할을 하는 함수나 컴포넌트가 따로 없는거 같아서, @emotion/react 설치 후 Global컴포넌트와, css함수를 이용하여 Global 속성 값 styles에 css 함수로 강의와 같은 스타일을 만들어 넣어줌으로 같은 기능을 하게 만들었습니다. 제가 궁금한건 @emotion/styled만을 통해 강의와 같은 기능을 하는 Global컴포넌트?를 만들수 있는지 그리고 안된다면 제가 한 방법이 괜찮은 접근 방법인지 궁금합니다. 감사합니다.
-
미해결스프링 MVC 2편 - 백엔드 웹 개발 활용 기술
multipartform 강의 학습하다가 궁금한게 있어서 질문드립니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form method="post" enctype="multipart/form-data" action="/upload"> <input name="aaa" type="text" /> <input name="userfile" type="file" /> <input type="submit" value="upload" /> </form> </body> </html> ------WebKitFormBoundarygCwbywkEMPBbSIDX Content-Disposition: form-data; name="aaa" 우디 ------WebKitFormBoundarygCwbywkEMPBbSIDX Content-Disposition: form-data; name="userfile"; filename="" Content-Type: application/octet-stream ------WebKitFormBoundarygCwbywkEMPBbSIDX-- <============================= 아래 질문 =============================>멀티파트 폼 학습하다가 인터넷 검색해보니 멀티파트 폼으로 하면 모든것에 인코딩을 하지 않는 다고나와 있었습니다.그러면 text를 한글로 보낸것을 인코딩 처리 어떻게 하나 싶어 구글로 실험해봤습니다.실험방법은 택스트만 보내고 파일은 보내지 않았습니다.(파일을 같이 보내면 메세지 바디가 안나오더라구요) f12눌러서 payload부분 살펴봤습니다. 결과는 위와 같은 내용이었으며 우디라는 한글이 인코딩 시킨게 나올지 알았는데 아니더라구요... 당연히 utf-8로 인코딩 해서 보내는거 맞겠죠??
-
미해결자바(Java) 알고리즘 문제풀이 입문: 코딩테스트 대비
8개 방향 문의드립니다.
dx = new int[]{1,0,-1,0}; dy = new int[]{-1,0,1,0};이렇게 하면 대각선도 포함되서 오류였는데 상하좌우 대각선 다 포함해서 돌때는 배열에 순서상관없이 각 합이 0으로만 끝나면 될까요? 선생님 안녕하세요! 상하좌우 대각선 방향문의드립니다. 기존에 상하좌우 방향만 구해야했을땐 dx = new int[]{1,0,-1,0}; dy = new int[]{-1,0,1,0}; 식으로하면 대각선방향도 포함되어서 오류가났는데, 이번 문제는 대각선도 포함히니까 dx[],dy[] 안에 넣는숫자이 순서는 상관없을까요 ?
-
미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
자식 컴포넌트의 스타일을 부모 컴포넌트에서 수정할 때에 대한 질문
안녕하세요! 캡틴판교님의 강의를 전부 수강하고 또 새로운 강의를 기다리고 있는 1인입니다. 바로 질문들어가겠습니다 최근에 고민중인게 다양한 화면에서 쓸 수 있게 만든 컴포넌트를 만들었지만, 화면에 따라 디자인이 조금씩 달라져서 그걸 각각 부모에서 조정하지 않으면 안되는 상황일 때, 캡틴판교님은 부모에서 자식 컴포넌트에 따로 class를 붙여서 디자인을 조정해 주시나요? 저는 따로 클래스를 붙이지 않고 그 자식컴포넌트의 루트태그에 붙여놓은 클래스를 바로 이용해서 합니다. 예를들면 bookThumbnailLink라는 컴포넌트가 있고 <template> <nuxt-link class="book-thumbnail-link" :class="styles" :to="to"> <book-thumbnail :size="size" :src="src" :loading="loading" :alt="alt" /> </nuxt-link> </template> <script> import { defineComponent, computed } from '@nuxtjs/composition-api' import BookThumbnail from '@/components/BookThumbnail.vue' export default defineComponent({ components: { BookThumbnail, }, props: { }, setup(props) {} <style lang="scss" scoped> .book-thumbnail-link { display: inline-flex; flex-direction: column; text-decoration: none; } </style> 위의 bookThumbnailLink의 리스트인 bookThumbnailLinkList 컴포넌트에서 자식 컴포넌트의 스타일을 수정할 때 book-thumbmail-link라는 클래스를 바로 이용하는 방법입니다. <template> <div class="book-thumbnail-link-list"> <BookThumbnailLink v-for="(book, i) in bookList" ></BookThumbnailLink> </div> </template> <script> import { defineComponent } from '@nuxtjs/composition-api' import BookThumbnailLink from './BookThumbnailLink.vue' export default defineComponent({ components: { BookThumbnailLink, }, setup() {}, }) </script> <style lang="scss" scoped> .book-thumbnail-link-list { display: flex; .book-thumbnail-link { display: flex; } } </style> 주위에 조언을 구할만한 곳이 없어서 질문드립니다!! 혹시 어떻게 부모에서 자식컴포넌트의 스타일을 수정하시나요?