(React) WIL - 12주차 회고
이번 주 끝낸 일!
- 티스토리 포스팅 = 매일 TIL 일지 (목적, 정리로 세분화)
- Typescript 강의 및 실습 = Todo-List (리펙토링, cra-typescript)
- Project : Develife = 프로젝트 시작 ( 기획 >> 와이어프레임 >> 레이아웃(UI) )
📚 Study review
typescript를 배울 때는 쉽다고 생각했다..
하지만 막상 적용하려고 하니.. state, props 등 작성해줘야 할 타입들이 생각보다 많아서 쉽지않았다.. 또한 web API(onclick, onsubmit, onchange 등) 사용 할 때에 파라미터로 전달하는 데이터에도 타입을 작성해야해서 당황했다.
하지만 여러 자료를 찾아보고 유튜브도 시청하면서 조금이나마 따라 할 수 있게 되었다.
아쉬웠던 점은 강의내용은 타입에 대한 개념과 이론적인 부분이 주된 내용이였는데 갑자기 리펙토링 과제가 주어져 감도 오지 않았다..
어찌 어찌 찾고 찾아서 해결을 했지만 이해가 되지 않아서 마음이 무거웠다.
그래서 유튜브 영상을 보면서 프로젝트 하나를 새로 만들면서 과정을 이해해보기로 했다.
CRA를 typescript로 생성하고, 처음으로 .tsx 파일을 다뤘다.
처음부터 작성을 해보니 천천히 내가 배웠던 내용들을 조금씩 적용해 갈 수 있었다. 캠프에서는 이러한 과정이 없다보니, 강의와 과제의 간극이 느껴졌다.
여러분도 새로 typescript CRA 를 해서 처음부터 만들어보기를 추천한다!
참조 링크!
Create React App - Adding TypeScript
🧱 Project Start
나는 새로운 2조가 되어 '개발2 하고 싶조'가 되었고, 프로젝트에 대한 발제가 끝난 후
첫 프로젝트 회의를 했다.
내용으로는
- 프로젝트 적용 스택 = [깃허브, 리액트, react-query, axios, typescript, Firebase(DB), emotion]
- 과제관리 = 깃허브 프로젝트, 이슈
- 그라운드 룰 (9시, 17시 회의)
- 컨셉
정도를 기획했고, 바로 figma web을 이용해 함께 와이어프레임을 제작하고,
오늘은 각 컴포넌트에서 레이아웃 작업을 하기로 하여 모두 작업을 잘 마쳤다.
계획적이고 책임감 있는 팀장님을 만나 원활하게 프로젝트가 진행되었다.
내 역할로는 메인이 되는 페이지에서 Youtube API를 활용해 react-query를 적용해서 서버통신 작업을 하고, 가져온 데이터를 페이지별 카테고리에 맞게 보여주는 역할이였다.
😥 처음 다뤄보는 youtube API라서 생소한 부분이 많았고, 주말을 이용해 api 메소드를 어떻게 활용해야 할 지 잘 생각해야겠다.
프로젝트 내에서 앞으로 진행 할 작업 내용은
- 리액트 쿼리 세팅(youtube url)
- 서버 요청 메소드 코드작성
- 받아온 데이터 중 '썸네일이미지 url'을 배열 메서드 활용해서 보여주기
- 썸네일이미지 클릭 >> 라우터돔 활용 '상세페이지' 이동
- 상세페이지로 이동할 때 id값 전달하기
p.s
캠프의 최종 프로젝트의 이전 프로젝트여서 그런지 분위기가 다소 다르다고 느꼈다.
전해 듣기로는 프로젝트 진행을 안하고 개인 프로젝트로 전향하는 수강생도 있었고, 다른 문제가 있는 수강생도 있었다.
그치만, 우리조는 조원분들이 학습에 열의가 있어서 참 다행스럽고 안심이 되었다. 또 한분도 그런 분들이 없어서 기뻤다..ㅋㅋㅋㅋ
다들 힘들고 지치겠지만
이 또한 지나가리
얼마 안남았다!!
🦾 빠이팅그.
| 2023년 1월 | 1 week | 2 week | 3 week | 4 week (project) |
|---|---|---|---|---|
| 학습 내용 (프로젝트) | RN 심화 강의 수강중(react-query, firebase 연동 등), 프로젝트(MZL) 진행중 | RN 프로젝트 '왕초보 mz 완성: mz-language' 배포 >> 발표 | 타입스크립트(수강 > 과제 > 복습), TS 프로젝트 'Develife'( 기획 >> 와이어프레임 >> 레이아웃(UI) | |
| 사용 툴 (default : VS code) | npm, RN, expo, react-query, github | npm, RN, expo, react-query, github | react-query, axios, typescript, Firebase(DB), emotion |