TIL - 2022.01.14 금요일

오늘 배운 것

---

- 어제 과제를 오전에 조금 더 손본 뒤 제출 완료했다. 게시물 등록 API와 state를 활용해서 자유게시판 폼에 내용을 입력하고 등록을 누르면 데이터가 전송되도록 하는 작업까지 끝났다. 라이브 서버에서 확인 후 Playground에 접속해서 API에 들어간 것 까지 확인하였다. state와 GraphQL-API 사용을 계속 반복했더니 이제 조금 손에 익는 것 같다. 역시 반복 학습만이 살 길이다.

 

- GraphQL 활용 실습 퀴즈를 풀었는데 이유를 모르는 구문 오류가 발생해서 한시간 정도 틀린그림찾기만 했다. 알고 보니 Int로 가야하는 Value가 String으로 전송되어 발생한 문제더라. 이렇게 간단한 걸 놓치다니. 해결한 뒤 조금 허무했지만 그래도 문제의 원인을 스스로 찾아냈다는 점은 뿌듯하다. 늘 개체의 타입을 꼼꼼히 체크하자.

 

- 정적 라우팅과 동적 라우팅에 대해 배웠다. 두 가지의 개념을 익히고 Next.js에서 제공하는 라우터를 통해 라우팅하는 방법을 실습했다. 특히나 동적 라우팅이 정말 신기하다. url을 함수로 쓰다니.. 동적 라우팅을 활용하면 현 단계에서 내가 상상하는 서비스는 대부분 구현이 가능하지 싶다. (물론 백엔드 API가 이미 존재해야 한다는 전제가 있지만 말이다.) React에서 라우팅이 구현되는 방식이 궁금해서 찾아봤는데, 내장된 라우터가 따로 없어서 별도의 라이브러리를 설치해야 한다. 기본적인 원리는 같으니 차후 개인 프로젝트 진행할 때 시도해보면 좋겠다.

 

- '리액트 라우터'라는 녀석을 많이 사용하는 듯. 미래의 나를 위해 괜찮아보이는 블로그를 미리 링크해둔다..

https://velog.io/@pkbird/React-Router-1

React Router(리액트 라우터) - 1

 

- 다이나믹 라우팅과 데이터 조회를 이용하여 실습을 진행했다. 상품 등록 페이지에서 데이터를 입력한 뒤 등록을 누르면, 등록한 제품의 정보를 조회하는 페이지로 이동하도록 만들었다. 그 프로세스는 다음과 같다.

1. 상품 등록 페이지에서 데이터를 입력한 뒤 등록을 누르면 등록된 data의 id값을 따온다.
2. 다이나믹 라우팅을 이용해 [ '상세페이지 url' + id값 ] 으로 이동한다.
3. 데이터 조회 API를 이용해 해당 id값을 가진 제품 정보를 불러온다.
4. useQuery와 gql을 이용해 html에 제품 정보를 노출시킨다.

 

- 오늘은 Javascript에서 활용도가 높은 개념들도 많이 배웠다. Shorthand property, try ~ catch로 예외처리 하는 법, 템플릿 리터럴, 조건부 렌더링과 옵셔널 체이닝까지. 실무에서도 활용도가 높아 보이는 친구들이라 각각 블로그에 포스팅할 예정이다. 개발자는 이 모든걸 외우는 사람이 아니라는 멘토님의 말이 점점 이해간다. 이렇게 수많은 개념들이 있는데 어떻게 다 외워? 언젠가는 활용할 수 있도록 이해하고 부지런히 기록해두는게 최선이다.

 

- 블로그.. 내용을 알차게 채워두면 미니 위키 역할도 충실하게 해줄 것 같다. 현재의 나와 미래의 나를 위해 부지런히 이해하고 쓰자.

 

앞으로 할 것

---

오늘 할 것

- 오늘의 TIL 작성

- 오늘의 메인 이슈들 블로깅하기

 

주말에 할 것

- 라우팅 실습 퀴즈 다시 한 번 해보고 제출하기

- 퀴즈 못한 것 보완해서 재제출하기 (1일차, 2일차 일부, 4일차)

- 자유게시판 상세페이지 만들고 API, 동적 라우팅을 이용해서 게시글 등록 페이지와 연결하기. 등록 페이지에서 정보를 입력하고 submit을 클릭하면 자동으로 게시글의 number 값을 반환해서 해당 게시글의 상세페이지가 뜨도록 만들어야 한다.

- 이 모든 것을 끝낸 뒤, 포스팅 목록에는 리스트업했으나 게시글은 못올린 토픽들 포스팅하기.

 

[포스팅 할 목록]

- 정적 라우팅과 동적 라우팅 : Static-Routing / Dynamic-Routing
- Apollo-Client를 이용하여 API 읽어오는 법 (Query)