강의내용과 똑같이 작성하고 실행해 보았고 혹시나 해서 깃헙에서 코드 가져와 실행했음에도 모달이 부드럽게 사라지는 것은 되지만 부드럽게 나타나는 것은 잘 되지 않았습니다. 혹시 어떻게 해결 할 수 있을까요?

index.html에 설정하는 Font Awesome 태그는 기존버전태그(5.x) 대신 (<link.... ) 제가 강의를 듣고 있는 시점기준(8월 2일) 현재버전태그(6.1.2) 로 사용하시면 될 듯 싶습니다. (저는 요걸로 해결했습니다.)   <script defer src="https://use.fontawesome.com/releases/v6.1.2/js/all.js" integrity="sha384-11X1bEJVFeFtn94r1jlvSC7tlJkV2VJctorjswdLzqOJ6ZvYBSZQkaQVXG0R4Flt" crossorigin="anonymous"></script>   <TodoInput.vue> plus icon 태그: <i class="fa-solid fa-plus addBtn"></i>   6버전 CDN에 대한 내용은 아래 공식사이트 주소 들어가서 보시면 됩니다~ https://fontawesome.com/v6/docs/web/use-with/wordpress/install-manually

/**/ import React from "react"; const styles = {     wrapper: {         margin : 9,         padding : 9,         display : "flex",         flexDirection: "row",         border: "1px solid grey",         borderRadius : 15     },     messageText: {         color: "black"         ,fontSize : 15     }, }; class Notification extends React.Component{     constructor(props){         super(props);         this.setState = {};             }     render(){         return(             <div style={styles.wrapper}>                 <span style={styles.messageText}>{this.props.message}</span>             </div>         );     } } export default Notification; /**/ import React from "react"; import Notification from "./Notification" const reservedNotifications = [         {         message : "안녕하세요, 오늘 일정을 알려드립니다.",             },     {         message : "안녕하세요, 오늘 점심을 알려드립니다.",             },     {         message : "안녕하세요, 오늘 저녁을 알려드립니다.",             }, ]; var timer ; class NotificationList extends React.Component{     constructor(props){         super(props)         this.state = {             notificationarr : [{                 message : "안녕하세요 ."                             }] ,         }     }     componentDidMount(){         const { notificationarr } = this.state;                          timer = setInterval(() => {                         if(notificationarr && notificationarr.length < reservedNotifications.length){                 const index = notificationarr.length;                 console.log(index);                 notificationarr.push(reservedNotifications[index]);                 this.setState({                     notification: notificationarr,                 });             }else{                                 clearInterval(timer);                 return;             }         },  1000);     }     render() {         return(             <div>                 {  this.state.notificationarr.map((notification) => {                                         return<Notification message={notification.message} />                 })}             </div>         );     } } export default NotificationList

안녕하세요, 강의 너무 잘 듣고있습니다.   다름이 아니라 현재 만들고 있는 웹페이지를 열 때 로딩 시간이 너무 오래 걸리는데 혹시 head단의 메타데이터 작성부분에서 로딩을 오래 걸리게 하는 요소가 있는 것인지 궁금합니다. 아니라면 이유를 모르겠어요 ㅠㅠ   제가 따로 html파일을 간단하게 만들어서 브라우저로 열때는 로딩이 길지 않아서요!

styled-components를 적용하려면 꼭 스타일을 위한 component를 만든다음에 그걸로 감싸야하나요?  그렇게 사용하다보면 리액트 콤포넌트와 스타일 콤포넌트가 섞여서 헷갈리지 않을까요?

    before , after 의 텍스트 스타일이 다르게 나옵니다 이건 뭐가 문제일까요 ... ?      

현재 웹개발중인 초급 개발자입니다. 현재 개발이 마무리 단계에서 웹서버랑 통신?!이 안되는 듯합니다.  로컬서버에서는 오류없이 실행이 되는데 웹서버에서는 현재 실행이 안되고 있습니다.  Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 라고 콘솔창에 이렇게 오류가 표시됩니다. 원인을 모르겠습니다. 어디를 수정해야하는지... 현재 apache2로 웹서버를 연동하고 있습니다.

우선 웹라이브러리 파트의 Link태그 적용 강의에서   후반부에 useParams 를 사용하게 되는데,   이부분부터 무언가 오류가 발생하네요..   1. 메인화면 들어갔을때 오류화면     2. 상품클릭했을때 콘솔로그     상품을 클릭했을때 변경된 주소까지는잘 적용 되고,   useParams 를 사용하기 전까지는 정상 작동 했는데,   product 폴더의 index.js 에 useParams 만 넣으면 위처럼 오류가 발생합니다   이전에 소스에서는 문제가 안생겼군요 ㅠㅠ   import { useParams } from "react-router-dom"; function ProductPage() { const { id } = useParams(); return <h1>상품 상세 페이지 {id} 상품</h1>; } export default ProductPage;     오타가 있나 싶어서 소스자료 복붙해도 마찮가지여서 문의로 남깁니다...   react-router-dom 설치 할때 버전을 확인 못하고   그냥 설치했다가 나중에 확인해서 5.2 버전으로 다시 설치했는데,       package.json 에는 5.2버전으로 정상적으로 보여지긴 하는데   오류내용이 버전이 충돌이 나서 그런건가 싶기도 하고.. 해결 방법이 있을까요? ㅠㅠ  

결과값이 이상해서요 마지막에 push한게 앞쪽 console.log에 반영이 되는거 같아요 다른영상들 보고 테스트 및 메모 한것들도 전부 콘솔찍어보면 저런식으로 되는거 같습니다   replit에 따로 설정한부분이있나요?

안녕하세요 jwtsecretkey 관련하여 질문드립니다. jwtsecretkey는 강의에 나와있는대로 그대로 사용했고, host는 AWS EC2에 명시된 퍼블릭 IP주소, User명에는 mysql 사용자명, port는 3306, password는 mysql 접속 시 비밀번호, 그리고 사용할 database명까지 입력을 해주었으나  localhost로 접속 시, Cannot get이라는 창만 계속해서 뜹니다. 혹시 이런경우에는 jwtsecretkey를 제것을 따로 생성하지 않아서 발생하는 문제인지 알고 싶습니다. 만약 jwtsecretkey의 문제라면 어떻게 생성하면되는지 알려주시면 감사하겠습니다. 

- 본 강의 영상 학습 관련 문의에 대해 답변을 드립니다. (어떤 챕터 몇분 몇초를 꼭 기재부탁드립니다)- 이외의 문의등은 평생강의이므로 양해를 부탁드립니다- 현업과 병행하는 관계로 주말/휴가 제외 최대한 3일내로 답변을 드리려 노력하고 있습니다- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.   안녕하세요! 질 좋은 강의 너무 잘 듣고 있습니다. 따로 권한을 받아서 볼 수 있는 강의 자료도 정말 잘 정리되어 있어 공부하기 수월해요!! 감사드립니다. 강의자료에 대해서 여쭤볼게있는데요.     1. 권한은 수업과 동일하게 기한제한없이 볼 수 있는건가요?   2. 개인적인 궁금증으로써.. 보통 초보(혹은 중급)개발자분들은 이러한 모든 css특징들을 모두 외우시는지, 아니면 이러한 기능이 필요해! 할때 구글검색을 하며(혹은 강의자료) 그때그때 꺼내쓰는건지 궁금합니다

콘솔에 var tmp = 10; 과 같이 변수 선언한 경우에 undefined가 결과로 나오는데 왜 그런건가요?   초기화 하지 않고 선언만 한 경우에는 null이, 초기화한 경우에는 초기화한 값이 나올거라고 생각했었어요.

강의를 보며 그대로 따라했는데    const query = req.query;   console.log("QUERY : ", query);   를 추가했을때 터미널에 node server.js를 하면 에러가 납니다ㅜㅜ

Counter 함수를 정의하고 상태가 변화하면서 리렌더링 되는지 확인하려고 console을 찍어봤는데 영상과 다르게 두 번 찍히더라구요. App.js에서 Counter 컴포넌트를 두 번 정의하지도 않았는데 console이 두 번 찍히는 경우는 어떤게 잘못된걸까요? 소스 코드는 선생님과 동일합니다.    

_.go( Images.fetch(), Images.tepl, $.el, $.append($.qs('body')), _.tap( $.findAll('img'), L.map(img => { const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { new Promise((resolve, reject) => { img.onload = () => resolve(img) img.src = img.getAttribute('lazy-src') img.onerror = () => reject() }).catch(_ => { img.src = 'https://images.chosun.com/resizer/u9nJRxs0BbtjygJ4HzKukecXnOk=/464x0/smart/cloudfront-ap-northeast-1.images.arcpublishing.com/chosun/UVBJZL3RXAB36BDSHVM3MW2WNY.jpg' }) $.addClass('fade-in', img) } }) }) return () => observer.observe(img) }), C.takeAllWithLimit(8), _.each(_ => _) ), $.findAll('.remove'), $.on('click', async ({currentTarget}) => { await Ui.confirm('정말 삭제하시겠습니까?') && _.go( currentTarget, $.closest('.image'), $.remove ) } ) )뷰 포트에 보이는 이미지 엘리먼트만 이미지를 로드해주고 싶은데 이렇게 코드를 작성해도 괜찮을까요? 더 좋은 방법이 있다면 알고 싶습니다!

(사진)

안녕하세요 강의 잘 듣고있습니다. 저장소 체크아웃 이후에 설정까지 수업대로 한후에 npm t를 입력하니 아래와 같은 오류가 나는데 혹시 어떤게 문제가 있는지 봐주실수 있으신가요?

d위 이미지처럼 가로 스크롤이 생기는 데 overflow-x: hidden 기능이 적용되지 않아서 생기는 문제일까요?

강의 초반부에 말씀하신 웹서비스는 동시성을 보장에 대해 헷갈려서 질문 드립니다. 제가 이해 하기로는 여러사람이 하나의 ID에 대해 수정을 할때, 중간에 수정된 최근정보를 제공하는것이 좋기때문에, 페이지 진입시 Id값을 이용해 최신 정보를 불러와야한다.라는 뜻으로 이해하는것이 맞을까요? 그리고 그 최신데이터 보장은 페이지의 성격에 따라 협의를 봐야한다?라고 이해하면 되는것일까요?   그리고 지금 강의 들으면서 드는 질문인데, 강의 초반부에 페이지 컴포넌트는 드라이하게 작성하는것이 좋다고 말씀하시면서 비즈니스 로직(form submit등)이 없이 작성하고 비즈니스 로직은 components안에서 작성하는것이 좋다고 하셨는데, 이번에 view폴더에있는 MainPage.vue에는 비즈니스로직을 작성을 하신 이유가 있을까요?

useMemo 강의 잘 듣고 있습니다. 그런데, useMemo(() => { //생략 }, [data.length]); 한 것과   useEffect(() => { //생략 }, [data.length]); 한 것과 차이가 있을까요?   제가 생각했을때는 둘이 같이 작동할 것 같은데.. 어떻나요?