안녕하세요. 소플님. 강의 정말 잘 듣고 있습니다. 컴포넌트 합성과 추출에서 props에 관련하여 질문이 있어 질문을 드립니다. // Component 추출 전 function Comment(props){ return ( <div className = "comment"> <div className = "user-info"> <img className = "avatar" src = {props.author.avatarUrl}, alt = {props.author.name} /> <div className = "user-info-name"> {props.author.name} </div> </div> <div className = "comment-text"> {props.text} </div> <div className = "comment-date"> {formatDate(props.date)} </div> </div> ); } 첫 코드가 Component를 추출하기 전의 코드이고 /* Component 추출 후 */ // 1. Avatar Component 추출 function Avatar(props){ return( <img className = "avatar" src = {props.user.avatarUrl}, alt = {props.user.name} {/* 재사용성을 측면을 높이기 위해 보편적인 단어인 user를 사용 */} /> ); } // 2. UserInfoName Component 추출 function UserInfoName(props){ return( <div className = "user-info-name"> {props.user.name} </div> ); } // 3. UserInfo 추출하기 function UserInfo(props){ return( <div className = "user-info"> {/* 이미 추출한 Avatar Component도 적용 */} <Avatar user = {props.user} /> {/* 이미 추출한 UserInfoName Component도 적용 */} <UserInfoName user = {props.user}/> </div> ); } // 4. CommentText 추출하기 function CommentText(props){ return( <div className = "comment-text"> {props.text} </div> ); } // 5. CommentDate 추출하기 function CommentDate(props){ return( <div className = "comment-date"> {formatDate(props.date)} </div> ); } // 6. 추출한 Component들로 Comment 재합성 function Comment(props){ return( <div className = "comment"> <UserInfo user = {props.user}/> <CommentText text = {props.text}/> <CommentDate date = {props.date}/> </div> ); } 이 코드가 강의에서 작성해주신 코드를 제 나름대로 완성한 컴포넌트를 추출한 형태입니다. userData가 아래의 형태라고 가정하겠습니다. const commentData = { user: { avatarUrl: "https://example.com/avatar.jpg", // 아바타 이미지 URL name: "Soaple" // 사용자 이름 }, text: "안녕 리액트!", date: new Date() // 댓글 작성 날짜 }; 처음 Comment Component에 Props로는 CommentData 자체가 전달될 것이고, 그 다음 UserInfo의 props로는 props.user, 여기서는 아래의 commentData.user가 전달이 되는 것까지는 논리적 흐름대로 이해를 했습니다. // UserInfo가 받은 props(commentData.user) user: { avatarUrl: "https://example.com/avatar.jpg", name: "Soaple" } 그런데 Avatar의 props로는 props.user가 전달되어야 하는데 그렇게 되면 Avatar에 전달하는 props가 commentData.user.user가 되어 전달할 수 없지 않나요? UserInfoName도 commentData.user.user 가 되어 이상하다는 생각이 드는데... chatGPT나 뤼튼과 AI에 물어봐도 이상이 없는 정상 코드라는 답변을 받았습니다. React에서 props가 굉장히 중요하다고 강조하신 만큼 이 부분은 꼭 집고 넘어가야겠다는 생각이 듭니다. 답변 부탁드립니다!
동일한 폴더 내에 있는 파일 중 style.scss만 css로 컴파일 하고 싶습니다 하단의 Watch Sass 클릭하여 컴파일 진행시 style.scss 뿐 아니라 common.scss도 동시에 css로 컴파일 되어 방법을 찾다 문의 남깁니다 하나의 파일만 컴파일 가능한지 궁금합니다
- 본 강의 영상 학습 관련 문의에 대해 답변을 드립니다. (어떤 챕터 몇분 몇초를 꼭 기재부탁드립니다) - 이외의 문의등은 평생강의이므로 양해를 부탁드립니다 - 현업과 병행하는 관계로 주말/휴가 제외 최대한 3일내로 답변을 드리려 노력하고 있습니다 - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 강의 영상에서 알려주신 사이트인데, 자료에서는 서비스 종료로 유사 사이트 안내 되어 있었어요. 제가 궁금해서 구글에서 'properties for the flex container' 로 검색해서 이미지탭에서 발견하여서 링크 공유드립니다. https://codepen.io/osublake/pen/dMLQJr 항상 좋은 자료 제공해주시는 강사님 감사합니다~~
■ 질문 남기실 때 꼭! 참고해주세요. - 먼저 유사한 질문이 있었는지 검색해주세요. - 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다. - HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요. - 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.
svg 파일로 트럼프카드 뒷면과 앞면엔 데이터패킷을 받아서 거기에 해딩하는 svg 파일을 매치시키려고 하고 있습니다 카드가 뒤집어지는 플립효과를 구현하고 싶은데 그중에서 마지막 카드를 뒤집을때 긴장감을 주기위해 실제로 카드게임을 할때처럼 카드 끝자락을 조금씩 들추면서 확인하듯 그런 방식으로 표현하고 싶은데 방법이 있을까요?
createRoot도 잘 되어있고 하는데도 이 에러가 뜹니다.. import Clock from "./chapter_04/Clock"; const root = ReactDOM.createRoot(document.getElementById("root")); setInterval(() => { root.render( <React.StrictMode> <Clock /> </React.StrictMode> ); }, 1000); reportWebVitals(); ERROR react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function TypeError: react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function at http://localhost:3000/static/js/bundle.js:114:49
안녕하세요 선생님 카페24로 웹 호스팅을 완료했는데 문제가 생겨 글 남깁니다. 제 포트폴리오에 scrolla.js를 적용했는데요 비주얼 스튜디오 라이브 서버에서는 정상 작동되는데 cafe24로 호스팅한 사이트에서는 작동이 안돼요 라이브 서버에서는 정상적으로 작동하는데 웹 호스팅 했을 때 작동이 안되는 경우도 있나요? 있다면 어떤 경우인지 알 수 있을까요?
안녕하세요 강의 너무너무 잘 듣고 있습니다. 아무 지식도 없이 쓰려니까 너무 막막했는데 강의 감사합니다 ! 섹션 14를 만들었는데 cloneWrap에 border-radius를 주니까 테두리 밖 색상이 계속 바뀌면서 보이네요 이 부분을 제거하고 싶어서요:) 혹시 가능한 방법이 있을까요 ? 답변 주시면 감사하겠습니다~!
■ 질문 남기실 때 꼭! 참고해주세요. - 먼저 유사한 질문이 있었는지 검색해주세요. - 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다. - HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요. - 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.
before after 활용 실전 퍼블리싱 03 강의에서, a의 before 클래스에 의해 fa 클래스인 sns 이모티콘이 가려졌었는데 이게 왜 position: relative 로 해결되는 건지 궁금합니다. 그리고 a:before와 fa는 둘다 a의 자식클래스로 이해하여서 위 같은 경우 z-index로 fa가 위로 오도록 하면 해결할 수 있지 않을까 하고 생각하여 해보았는데, 왜 이 방법으로는 해결되지 않는건지 모르겠습니다.
선생님 안녕하세요. 강의를 들으면 scss 를 작성하고 watching sass 로 css를 만들어내잖아요. 근데 제가 퍼블리싱을 해서 개발자에게 넘겨줄 때도 똑같이 style.scss 와 style.css를 모두 넘겨줘야하는 건가요? 아님 style.scss만 넘겨주면 되는 걸까요? (넘 초보적인 질문일수도 있으나 ..^^;;) 감사합니다.
