이번 주에는?
- 프로젝트 진행
A: 백엔드 api 연결, CSS 레이아웃 공부
B: 타입스크립트, Next.js 공부
새롭게 배운 것 & 배워야 할 것
- Next.js, TS 사용하기
→ 타입스크립트의 '타입 안정성'
브라우저에서 이해하는 것은 자바스크립트임. 따라서 타입스크립트 코드는 컴파일시 자바스크립트 코드로 변환하게 된다. 이때, 작성된 코드에 문제가 없는지 확인해서 문제가 있을 경우 변환되지 않는다.
⇒ 즉, “보호장치”의 역할. 컴파일 이후 런타임 도중 타입에 대한 제약 부재로 발생 가능한 '런타임 에러'를 방지하게 된다.
ex) 함수의 경우 입력값의 데이터 타입과 개수에 대해 보호장치를 만들 수 있음
- 하단 메뉴바 만들기
❗ 전체 container의 width가 정해진 상태에서 메뉴바를 자식 컴포넌트로 넣으면서 width를 100%로 설정했더니 부모 영역 안에 맞게 들어가지 않음
- react-router-dom:
<Link>,<useNavigator>
→ 둘의 차이는?
useNavigator는 이벤트 핸들러 함수를 통해 실행되기 때문에 보다 복잡한 로직 구현 가능
- 프론트의 API 호출 (feat. react-hook-form)
→ 프론트엔드와 백엔드가 연결되려면?
(로컬에서 진행하는 테스트 단계 기준) 프론트엔드에서는 package.json에 proxy 설정이 되어야 하고 백엔드에서 CORS 세팅이 되어야 함.
→ react-hook-form과의 연계
기존에 react-hook-form을 사용해 실시간으로 유효성 검사를 진행하도록 구현했는데, input 컴포넌트 자체에 에러 조건과 에러 메시지를 설정해 두기만 하면 됐기 때문에 별개의 버튼을 통해 작동하는 '중복 ID/닉네임 검사'를 이 로직에 어떻게 끼워야 할지 고민이었음.
1) 버튼을 눌렀을 때, input field에 달린 조건이 검증되고 만약 유효하지 않은 값이라면 작동하지 않아야 함
2) 아니라면 input field에 입력 중인 값을 가져와 (라이브러리에서 제공하는 getValues를 활용할 수 있었다) api 호출 후 response 받기
(* 여기부터는 미완...)
3) 응답으로 받은 값에 따라
사용 가능한 ID/닉네임임을 알리거나,
사용 불가한 ID/닉네임임을 알리고 다시 입력을 요청하거나 (라이브러리에서 제공하는 setError를 활용 가능할 듯)
예외 처리
4) 사용 가능한 값으로 인증된 이후 값이 변화하면 재인증 필요. 제출시 인증이 필요한 field는 모두 인증된 상태인지 확인되어야 함
(* 여기는 어떻게 구현해야 할지 아직 고민 중이다. ID, 닉네임, 메일 이렇게 세 개 필드라 state를 사용할까 생각 중...)
❗ 비동기 함수? await? then?
- JS로 백준 풀기
→ 백준에서는 node.js 사용, 입력값을 받기 위해 readline 가져와 별도로 인터페이스 정의해야 함
셀프 피드백
→ 지난 주에 비해 좀 더 많은 걸 했지만 해야 할 태스크가 산발적이라 실질적으로 프로젝트 진도를 많이 나가지 못한 부분이 아쉽다.
→ 목표의 우선 순위를 결정하고 확실히 해결할 부분을 결정해야겠다.
다음 주 솔루션 💡
-
매일 목표 시간을 3시간으로 설정하고, 개인 공부 시간을 최소 1시간으로 잡는다.
-
다음 주 목표!
1) Next.JS 강의 수강 후 담당한 컴포넌트 완성하기
2) 회원가입 파트는 백엔드와 테스트 결과 공유한 이후 인증 부분 완성
3) CSS 레이아웃 공부해서 마이페이지 UI 재구성 + 완성
