Watch Now – 노마드 코더 Nomad Coders nomadcoders.co ❓ 상황 React를 이용해 트위터를 클론코딩하기 전에 hooks에 대해 사전학습이 필요하다는 얘기로 hooks를 공부하기 시작했다. ✨ 느낀점 👍 알게 된 점 특정 조건이 걸린 useInput만들기 const {value} = event.target;은 onChange될때 해당 이벤트가 발생한 태그의 value값을 받는겠다는 의미이다. 유효성 검사 함수를 통해 willUpdate의 값이 true냐 false로 바뀐다. willUpdate가 true일때는 setValue함수로 value값을 넘겨주어 input값이 입력이 되지만, willUpdate가 false가 되면 input에 value값을 넘겨주지 않게된다. 결과적으..

✨ 느낀 점 👍 알게 된 점 영화API 크롤링하기 const getMovies = async() => { const json = await ( await fetch( `url주소` ) ).json(); } 위의 코드로 url주소에 있는 데이터를 json이라는 변수에 넣었다. json을 콘솔창에 띄우면 data안에 내가 찾고자 하는 movies 가 있다. 찾는 방법은 다음과 같다. const [movies, setMovies] = useState([]); . . . . setMovies(json.data.movies); json에서 data키값안에 movies키값을 전부 movies에 넣게 되었다. map함수로 빼낸 데이터 중, 값이 있는것만 선별하기 내가 찾는 genres의 데이터가 없으면 에러가 뜨는 ..

✨ 느낀 점 ❓ 궁금한 점 className이 변수인 경우 css를 어떻게 적용시키지? css파일을 통째로 import 해서 적용시켰다. 어찌어찌 css를 적용시켰지만, 그 결과로 코드는 난잡해졌다. 💢 어려웠던 점 라이브러리 없이 슬라이드를 도저히 못 만들겠다. 라이브러리를 이용하여 캐러셀을 만들어보려고 시도한 게 10번은 넘은 거 같다. 그 시간 동안 많은 시행착오를 겪었지만, 결과적으로 라이브러리를 사용하여 이미지 슬라이드를 만들게 되었다. JavaScript를 이용해 이미지 슬라이드를 만드는 방법은 이해했는데 React로 만드는 방법은 모르겠다. 정교한 반응형 웹을 어떻게 만들지? 반응형 웹에 대해 내가 배운 것은 단 한가지였다. 내가 배운 대로 Navigation 배너는 순조롭게 개발을 완료했지..

✨ 느낀 점 👍 알게 된 점 useState에 값 추가하는 방법 setState함수로 변숫값을 바꾸는 방법은 총 2가지이다. 1. setState에 바로 값을 집어넣기 2. setState에 함수를 넣어 기존 배열을 복사하고, 새로운 값을 넣으면 된다. map함수는 배열의 하나하나 빼낼 수 있다. map함수로 배열안에 있는 값을 하나씩 빼내어 태그에 값 하나당 태그를 만들어 낼 수 있다. 주의사항으로는 map함수를 이용해 태그를 생성할 때는 key값이 필요한데, map함수로 빼낸 값에 key값이 없으면 map의 두 번째 매개변수를 index로 지정하고, index를 태그 안의 key값으로 넣으면 된다.

✨ 느낀 점 👍 알게 된 점 UseEffect를 사용하면 deps에 넣는것에 따라 실행 횟수를 조절할 수 있다. useEffect(함수, [deps]); [deps]안에 useState의 변수를 넣으면, 변수가 변할때마다 useEffect에 넣은 함수가 실행된다. 만약 빈 배열인경우에는 mount될때 딱 한번만 실행된다. useEffect(() => {}, [deps]); 추가적으로 useEffect안에 넣을 함수는 미리 함수를 정의한것을 넣을 수 있지만, 현장에서는 정의한 함수를 쓰지않고 바로 함수를 작성해 넣는다고 한다. cleanup function은 useEffect가 unmount될때 실행된다. 1. useEffect가 mount(실행)되면 useEffect의 첫번째 매개변수인 함수가 실행된다...