210218_TIL

🍎 오늘 한 일

---

✔️ 투두리스트 App 만들어보기
Hooks를 이용해서 할일을 체크하는 todo list 앱을 간단하게 만들어봤다. useState, useCallback, useRef를 사용해봤는데 역시 개념만 봤을 때는 무슨소린가 싶던게 직접 만들어보니까 조금씩 알 것 같았다. 특히 useCallback은 그냥 모든 함수에 습관적으로 써야할 것 같다. + input과 button의 이벤트를 한번에 관리하기 위해 form태그도 써봤는데 onSubmit에 이벤트핸들러 함수를 작성하면 돼서 편한 것 같다.

✔️ SCSS
CSS와 비슷하게 생긴 SCSS를 사용해봤다. 클래스 안에다가 중괄호를 연속해서? 쓰는 식으로 사용하는데 일렬로 나열해서 쓰던 CSS보다 확실히 컴포넌트나 요소들간의 관계나 상태에 따른 스타일을 파악하기가 훨씬 좋았다. 

✔️ react & express 복습
지금까지 배웠던 리액트와 express로 서버 만드는 걸 다시한번 해보며 복습하는 시간을 가졌다. 먼저 공식 가이드부터 쭉 한번씩 다시 훑어보고 간단한 앱을 만들어봤는데, 여러번 만들어보니까 확실히 이제 데이터 흐름이 머리속에 그려지기도 하고 전보다 훨씬 익숙해진 느낌이 들었다. 클라이언트 부분을 리액트로 만들어두고, express를 이용해서 local에 있는 json파일을 서버와 연결시키는 작업도 해봤다. 정말 간단한 코드지만 express는 자꾸 안쓰다보니 까먹는거 같아서 꼭 자주자주 써보는 방향으로 토이 프로젝트를 해봐야겠다..

 

🍎 기억할 것

---

✔️ src 폴더에 components 디렉토리 만들고 컴포넌트들 다 넣기! (암묵적 관습)

✔️react-router-dom으로 라우팅하기
기본적으로 Route 컴포넌트로 라우트를 설정하는데, 경로를 path값으로 설정만 하면 된다. 예를들어 <Route exact path="/" component={Home}/>이런식으로! 이동을 하고 싶을 때는 <a href> 대신 <Link to>를 쓰면 된다. 

 

🍎 더 공부할 것

---

✔️ Hooks로 클론코딩하기