리액트... 넌 나에게 모욕감을 줬어
1. 이번 주에 배운 기술이나 개념 중 가장 기억에 남는 3가지는 무엇인가요?
React Hooks (
useState,useEffect): 상태 관리의 기본. 이제class컴포넌트는 안 쓴다고 함.비동기 통신 (
axios): 서버에서 데이터를 가져올 때fetch보다 훨씬 편함.구조 분해 할당:
const { name, age } = user;처럼 코드를 짧게 줄이는 자바스크립트 문법.
2. 이번 주 과정 중 막혔던 문제나 오류가 있었나요? 어떻게 해결했나요? (없다면 가장 인상 깊었던 실습 내용)
[문제 상황] 서버에서 영화 리스트(JSON)를 받아와서 화면에 뿌려주는 기능을 만드는데, 새로고침만 하면 화면이 하얗게 변하면서 에러가 뜸. 콘솔 창에는 Uncaught TypeError: Cannot read properties of undefined (reading 'map')라는 빨간 글씨만 가득함.
[시도한 방법]
1. 오타 확인:
map함수 스펠링 문제인가 싶어서 다시 침. (여전함)2.console.log(data)를 찍어봄: 처음엔undefined가 떴다가 나~중에 데이터가 들어옴.
[최종 해결] 범인은 '타이밍'이었음. 리액트는 화면을 먼저 그리고(Render), 그 뒤에 데이터를 가져오는데(Effect), 데이터가 오기도 전에 빈 깡통(undefined)에다가 map을 돌리니 에러가 난 것임. data && data.map(...) 처럼 조건부 렌더링을 걸어주거나, 초기값을 빈 배열 useState([])로 설정해서 해결함.
3. 이번 주 수업 진도 속도, 강사님의 강의 스타일, 혹은 반 분위기는 어땠나요?
HTML/CSS 할 때까지만 해도 다들 웃고 떠들었는데, 자바스크립트 로직 들어가니까 교실이 독서실처럼 조용해짐. 이번 주 팀 프로젝트로 '넷플릭스 메인화면 클론 코딩'을 시작했는데, 디자이너 친구랑 CSS 1픽셀 때문에 30분 토론함. 그래도 결과물이 눈에 바로 보이니까 백엔드보단 재밌는 듯?
4. 다음 주에는 어떤 부분을 보완하고 싶나요?
1.리덕스(Redux) 개념 이해하기 (상태 관리가 뭔지 아직 감이 안 옴)
2.팀 프로젝트 반응형 디자인(모바일 뷰) 깨지는 것 수정하기
댓글
댓글이 없습니다.
