🥞 오늘 한 일
- 리액트 심화 강의
- 1-9 ~ 1-11 수강
- 리액트 심화 개인과제
- json-server 서버 셋업
- axios로 지출 create 요청하고 Transtack Query로 응답값 관리
- 스탠다드반 수업
- 심화주차 복습#1 - axios, json-server, Tanstack Query
- 우리는 왜 React를 배울까요? 특강
리액트 심화 개인과제
강의를 듣고 json-server 서버 셋업을 완료하고, create 기능까지 제작했다.
오늘 목표치는 CRUD를 전부 해내는 것이었으나, 아쉽게도 create밖에 달성하지 못 했다. 그래도 잘 모르겠는 부분은 해설 영상이 있고, 내일은 수업도 없으니 찬찬히 해내면 무사히 필수 구현 사항은 전부 해낼 수 있을 것 같다!
🍽️ 문제 해결
간단한 문제들
- json-server가 열리지 않는 문제
=> 새로운 터미널을 열어서 json-server를 열어주니 해결되었다. 강의 자료를 다시 보니, react 프로젝트를 연 터미널과 다른 터미널에서 json-server를 열라고 되어있어서, 같은 터미널이었던 문제가 맞았다.
🍪 배운 것
리액트 심화 강의
- tanstack query
- 등장배경
- 기본 사용법
- 복습, SWR, 데이터 흐름
스탠다드반 수업
- jwt 인증서버 (REST API 사용법 확인)
- axios 기본 사용법
- json-server CRUD
- axios
- custom instance
- interceptor
- Tanstack Query
- 셋업
- useQuery
- useMutation
우리는 왜 React를 배울까요? 특강
프론트엔드를 먼저 배우게 될 때의 이점
- 간단한 백엔드 기능을 구현할 수 있어, 웹 개발 전반에 걸쳐 탄탄한 기초를 다질 수 있다.
- 풀스택 개발자가 되기에도 용이하다.
로드맵 AtoZ
- 기본기 (html css js)
- 프레임워크, 라이브러리 (git, github, react)
- 고급 기술
- 상태관리 (redux(시장에서 많이 필요로 하니 꼭 알아야한다.), zustand)
- API 통신 (Restful API, GraphQL, Axios, Fetch API)
- 서버 사이드 렌더링 (Next.js)
- 테스트
- 배포 및 운영
- CI/CD
- 호스팅
- 심화 학습
우리가 현대 프론트엔드 시장에서 굴러가는 굵직한 기술을 알고, 심화된 기술들의 이름 정도는 아는 것이 중요하다.
취업할 때 프로젝트의 완성도가 중요하다고 생각할 수 있지만, 더 중요한 건 눈 앞에 보이는 결과물보다는 내재적인 로직. 어떤 생각을 가지고 어떤 로직을 왜 짰는지에 대한 것이 더 중요하다.
현실적인 로드맵 (최소 기준)
- 리액트를 주로 이용하여 프론트엔드 프로젝트를 개발한다.
- 원활한 스타일링을 위해 styled components를 사용한다. (또는 tailwind)
- 페이지 이동 시 react router dom을 사용한다.
- 전역에서 관리해야할 state가 있으면 RTK를 사용한다. (또는 zustand)
- 서버에 데이터 fetching을 요청하기 위해 axios를 사용한다. (또는 fetch)
- json server는 가상의 백엔드이다. 다시 말해 별개의 서버. 데이터를 주고받기 위해 axios를 쓰는 것.
- 서버로부터 가져온 값을 전역으로 관리해야 하면 Tanstack Query를 사용한다.
supabase나 firebase는 프로젝트 할 때 그때그때만 공부해라. 실무에서 활용도는 떨어지는 편이다.
🍴 돌아보기
점심 시간이 끝나갈 때쯤 갑자기 정전이 되어, 급하게 카페로 가서 수업을 들었다. 확실히 집이 아닌 곳에서 모니터 한 개로 캠프 진행을 하려고 하니 불편했고, 산만함에 집중도 잘 되지 않는 어려움을 겪었다. 가끔 카페에 가서 캠프 진행을 할까 싶은 마음이 있었는데, 개인적으로 혼자 zep에도 접속 안 하고 작업을 할 때면 괜찮을 것 같지만, 캠프 진행 중에는 집이 제일 편할 것 같다...
🍳 내일 할 일
- 리액트 심화 개인과제
- 완성
- 해설 기반 수정
- 리액트 심화 강의 수강
웹 프론트엔드 개발자