44,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결만들면서 배우는 리액트 : 기초
에러메시지가 없을 때, P태그 on, off 관련
안녕하세요, p태그를 에러메시지가 있을 때에만 dom에 추가하고 싶을 때 삼항연사자를 통해 아래 코드처럼 적용하면 될까요? 테스트로 적용해보니 작동은 되는데, 이렇게 하는 것이 맞는 것인지 궁금합니다. { errorMessage === '' ? null : <p style={{ color: "red" }}>{errorMessage}</p> }
- 미해결만들면서 배우는 리액트 : 기초
git hub 404 에러
안녕하세요 선생님! 선생님 말씀대로 GitHub Pages 설정에서 main으로 설정 후 세이브를 눌렀는데도 30분이 지나도 계속 해당 URL 접속 시 계속 404에러가 나타납니다 ㅠㅠㅠ index.html파일도 잘 나타나고 구글링하여 리빌드 및 파일 추가하지 않은 채 빈 내용 커밋 다 해보았는데도 안되어 문의드립니다 ㅠㅠㅠ 접속 url - https://ytk0327.github.io/cat-jjal-maker/
- 미해결만들면서 배우는 리액트 : 기초
안녕하세요 왜 메인카드와 타이틀은 컴포넌트가 아닌 화살표 함수를 이용하셨을까요?
궁금합니다!
- 해결됨만들면서 배우는 리액트 : 기초
리액트에서 addEventListner는 별로 사용하지 않나요?
onclick에 비해 addEventListner('click',eventhandler)의 이점으로 이벤트핸들러를 여러개 계속 더해줄수 있고, 세번째 인자로 버블링 캡처링 조정이 된다는 점이 있다고 들어서 무작정 저는 addEventListner가 더 좋은줄 알고 있었는데요. 강의 중에선 onClick을 많이 쓰는 것 같아 질문드립니당 리액트의 onClick은 addEventListner에 비해 나은 장점이 있나요? 혹은 addEventListner를 쓰면 안될 이유가 있나요?
- 해결됨만들면서 배우는 리액트 : 기초
useState 내부 작동 방식이 궁금하네용
const [counter, setCounter] = React.useState( const로 선언했으니 couter의 값이 바뀌면 안되는건가 싶은데 setCounter 호출을 하면 counter값이 바뀌는게 참 신기하네요
- 미해결만들면서 배우는 리액트 : 기초
state가 어떤 면에서 개발을 용이하게 해주나요?
폼 다루기까지의 강의를 보고있습니다. function handleInputChange(e) { console.log(e); setValue(e.target.value.toUpperCase()); } function handleInputChange(e) { console.log(e); e.target.value = e.target.value.toUpperCase(); } 리액트에 존재하는 state가 개발에 편의성을 분명히 제공할텐데 아직 어느 부분에서 편해지는 건지 감이 잘 안옵니다. +이후로도 모르는 부분이 생길텐데 https://ko.reactjs.org/docs/getting-started.html 요 처음엔 공식문서를 순서대로 한 번 읽으면 좋을까요 아님 모르는 부분이 생길 때마다 가는 것이 나을까요? 다른 자료를 권해주셔도 너무 감사할 것 같아용~~
- 해결됨만들면서 배우는 리액트 : 기초
JS array in JSX
function Favorites({ favorites }) { return ( <ul className="favorites"> {favorites.map((cat) => ( <CatItem img={cat} key={cat} /> ))} </ul> ); } map에 의해서 최종적으로 하나의 array가 return 됐을텐데말이죠.. JS에서의 모양 그대로인 array도 문제없이 화면에 나오네요? 개발자도구를 켜보니 자동으로 각 element가 li 태그에 감싸서 보여지는데 JSX가 담긴 js array를 JSX 안에 삽입하기만 하면 항상 자동으로 다 이루어지는것인가요? 아님 ul태그 안에서만 작동한다거나.. 무슨 조건이 있는 것인가요?
- 미해결만들면서 배우는 리액트 : 기초
작성한 코드가 웹상에 나오지 않아요
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. open with live server을 해도 빈 페이지만 나오길래 검사창을 봤더니. Uncaught ReferenceError: ReactDom is not defined at <anonymous>:156:1 at i (babel.min.js:24:29679) at r (babel.min.js:24:30188) at o (babel.min.js:24:30596) at u (babel.min.js:24:30969) at f (babel.min.js:1:1812) at babel.min.js:1:6287 이런 문구의 에러창이 뜨더라구요. 바벨 설치 문제인가 싶어 강사님 깃헙에 있는 코드까지 그대로 복사해서 가져와 봤지만 달라지는게 없는데... 왜 이럴까요?
- 미해결만들면서 배우는 리액트 : 기초
fetch가 쓰기가 너무 어려워요
fetch 로 open api 서버를 긁어와서 다른 이미지를 써보려고 하는데 정말 너무 안되서요ㅜㅜㅜㅜ 이러한 문제에 대해서 조금 도움을 받을 수 있는 사이트가 있을까요??
- 미해결만들면서 배우는 리액트 : 기초
다른 이미지도 불러오고 싶어요!!
참고하여서 따라 해보고 있는데 제가 다른 open api 서버에서 이미지를 불러와서 그걸 긁어서 cost cat1에 넣으면 고양이라고 하는 이름의 text는 뜨는데 이미지 자체는 불러오지 못 합니다. 제가 이해가 부족하여서 그런것일 수 도 있지만 혹시 고양이 이미지 말고 다른 이미지는 어떻게 불러오려면 어떻게 해야하는지 알려주실 수 있을까요?
- 미해결만들면서 배우는 리액트 : 기초
css 질문
css 기능 넣어보다가 질문이 있어 여쭤봅니다! favorites에 있는 각 li에 마우스 hover가 되면 확대하는 기능을 구현하였는데, 확대했더니 이렇게 옆 사진에 가립니다ㅠ 근데 오른쪽 이미지는 확대하면 왼쪽 이미지에 가려지지 않는 것을 보니, 먼저 저장된 이미지가 나중에 저장된 이미지에 가려지는 것 같습니다. 왜 그런 것인가요?? 어떤걸 수정해야할지 몰라 여쭤보고싶습니다!
- 미해결만들면서 배우는 리액트 : 기초
영상 오류입니다.
영상 오류로 34초부터 깨진 초록색 화면이 나옵니다.
- 미해결만들면서 배우는 리액트 : 기초
추가 기능
완강 후에 혼자 추가 기능을 구현해보고 있는데 질문 드려도 될까요?! 하트를 클릭하고 재클릭했을 때, favorites에서 해당 이미지를 제외시키는 기능을 구현하려고 합니다.(하트 누를 때마다 추가되었다가 삭제되었다가 ..) 그래서 저는 handleHeartClick()에 if(alreadyFavorite)의 경우를 추가해서 favorites 목록에서 해당 이미지를 제외하고, 로컬스토리지에서도 데이터를 삭제하려고 했습니다. 그런데 실행시켜보니 favorites 목록에서는 지워졌는데 로컬스토리지 데이터는 삭제가 안됩니다ㅠ 어떻게 구현해야 할지 모르겠어서 질문 드립니다..!! 밑에는 제가 짠 코드입니다. function handleHeartClick() { if (alreadyFavorite) { const nextFavorites = favorites.filter(favorite => favorite != mainCat); setFavorites(nextFavorites); jsonLocalStorage.removeItem(mainCat); return; } const nextFavorites = [...favorites, mainCat]; setFavorites(nextFavorites); jsonLocalStorage.setItem('favorites', nextFavorites) };
- 미해결만들면서 배우는 리액트 : 기초
useState 초기값 질문
선생님 useState 초기값 설정할때 const [like, setLike] = React.useState(() => { return Number(localStorage.getItem('like')) || 0; }); 이렇게 함수로 넘기면 re-rendering 할 때마다 실행되지 않고 처음 한 번만 실행이 되는 건가요? 이게 그냥 문법이 그런거면 이해하고 넘어가겠는데~ 다른 이유가 있는거면 왜 그렇게 되는지 이해가 잘 되지 않아서요 😂 함수로 넘기면 그렇게 되도록 리액트 내부적으로 처리가 되는건지... ( useEffect가 적용이 되는건지)
- 미해결만들면서 배우는 리액트 : 기초
와~ 선생님 이거 너무 편한데요?
와~ 이렇게 배포하는 방법이 있었네요^^ 선생님, 그런데 gh-pages 브랜치를 따로 만들어서 배포하는 방식과 이 방식의 차이점이 있을까요? 이 방식을 더 권장한다던가, 더 최신의 방법이라던가~ 아무튼 이 방법은 main 브랜치에 바로 적용이되니 push만 해도 변경사항이 바로 적용이 되서 너무 좋네요~
- 미해결만들면서 배우는 리액트 : 기초
useState 업데이트 시점
선생님, submit 했을때 updateMainCat() 함수에서 setFavorites()으로 favorites state를 업데이트 시켜주잖아요? 그런데 favorites 를 console에 찍어보면 update가 안 되어 있거든요? re-렌더링이 되고 나서야 update가 되어있는데~~ 이거 원래 이렇게 동작하는 건가요? 뭔가 좀 이상한게~ 화면은 이미 새 이미지로 바껴있는데 왜 state값은 그대로 일까요?
- 미해결만들면서 배우는 리액트 : 기초
Counter useState의 초기값
선생님 LocalStorage가 비어있을때 counter의 초기값에 React.useState(Number(localStorage.getItem("counter"))) 이렇게 처리가 가능한게 null을 Number로 변환했을때 0 이 되기 때문인거죠? 저는 처음에 React.useState((localStorage.getItem("count"))?Number(localStorage.getItem("count")):0) 이렇게 3항연산자로 썼었는데 , 굳이 안해도 되는거죠? null을 Number처리 하니깐 0이 되더라구요~ undefined는 Nan이 되는데~
- 미해결만들면서 배우는 리액트 : 기초
배포 이후 수정
완강하고 깃헙 페이지에 배포까지 완료하였는데, 이후에 제가 앱을 더 커스터마이징해서 수정본을 다시 반영하고 싶으면 강의에서 하셨던 배포 절차를 그대로 다시하면 되나요? 아니면 푸쉬만 하면 반영이 되는 것인가요??
- 미해결만들면서 배우는 리액트 : 기초
counter, setCounter
안녕하세요! 질문이 있습니다. 연타했을 때 counter와 setCounter가 가리키는 counter가 서로 달라지는 이유가 뭔가요? 처리되는 시간이 연타를 못 따라가서 그런 것인가요..??
- 해결됨만들면서 배우는 리액트 : 기초
클린코드
안녕하세요 진유림님!강의내용과 관련된 질문은 아니지만 진유림님께 질문을 드릴 다른 방법이 없어 여기에 작성하여 조심스럽게 질문 드립니다. 제가 프로젝트를 마무리하고 나면 코드가 직관적이지 않고 기능만 실행하기 위해 짜여진 코드 같아 고민이 있습니다.그래서 로버트 C.마틴의 클린코드 책을 읽고 적용해볼까 고민을 해보았지만, 진유림님의 실무에서 바로 쓰는 Frontend Clean Code 를 보고 프론트엔드에 좀 더 적합한 학습 방법이 있지 않을까 싶어 진유림님이 생각하시는 프론트엔드 클린코드 학습방법에 대해 어떻게 생각하시는 지 궁금하여 질문을 드립니다.