(React) WIL - 15주차 회고

📝 WIL: Weekly I Learned

 

Work done this week

이번 주 끝낸 일!

1. 티스토리 포스팅 = 매일 TIL 일지 (목표, 오류, 정리로 세분화)
2. Project : 최종 프로젝트 시작 = 최종 프로젝트 시작 ( init )
3. 챌린지 팀 헤커톤 진행 = 2.10 ~ 11일 ( 24시간 )

 

---

소셜 네트워크 (영화)

 

Hackathon review

 

이번 주 가장 인상 깊었던 '헤커톤'에 대해 리뷰 하겠다.

우선 우리는 2월 10일 부터 11일 까지 안양 오피스텔을 대관하여 진행했고,

 

12시에 모여 간단히 식사 후,

 

해커톤 장소로 가서 각자 장비 셋업을 끝내니 2시가 다 되었다.

 

팀장님 주도 하에 디자이너님과 회의를 진행했고,

우선적으로 와이어프레임이 나와서 무난하게 진행 할 수 있을 것 같았다.

 

또한 우리는 디자이너님과의 회의를 마치고,

개발회의를 하여 컴포넌트 별 작업 분담을 했다.

 

나는 포스팅에 필요한

제목, 부제목 과

드롭다운(셀렉트 박스) 컴포넌트를 작업했다.

 

내가 지금까지 해왔던 페이지 별 작업과는 다르게 진행되어서

처음 작업에 어떻게 들어가야될 지 머릿속에 그려지지 않아서 헤메였다..

 

공통으로 사용할 수 있는 컴포넌트이니 component / common 폴더에서

작업을 진행 했고, 

 

셀렉트 박스의 디자인을 빠르게 마치고 작업을 하고 싶은 마음에

라이브러리 'Toast UI select-box' 를 install 했다.

 

하지만 toast ui 는 next 에 대한 지원을 안하고 있어서

ssr 설정 작업을 따로 해줘야 했다..

 

그렇게 작업을 시작했지만 install 했던 select-box 가 인식이 되지 않았고,

문제를 해결하려 한참을 시간허비 했다.

 

옆에서 작업중인 팀원들에게 미안했고

스스로 자책감에 빠져 집중이 되지 않았다...

 

문제 해결이 되지 않아서 라이브러리를 install 했던 commit을 revert 하고

다시 새로운 마음으로 ui부터 작업을 마치고 로직을 붙이기 시작했다.

 

하지만 타입스크립트 작성 한 부분에서 받은 데이터가 number 이거나 string 으로 전달받아야 하는데,

서로 다른 타입이 들어온다면 에러가 생겼다.. 그래서 제네릭으로 타입 지정을 했다.

이 부분에서도 제네릭에 대한 이해가 부족해 작업은 지체되었다.

정말 다행스럽게 우리에게 일용할 양식을 제공해주려고 와 주신 튜터님이 계셔서

1:1 로 제네릭 튜터링을 받았다😂

 

시간이 한정적인 헤커톤에서 혼자 시간낭비를 많이 했다는 생각에

자책을 많이 했던 것 같다.

 

다시 멘탈을 부여잡고, 내가 작업한 DropDown 이라는 컴포넌트가

데이터를 직접 만들어서 넣어줘야 하는 불친절한 컴포넌트라는 생각에

리펙토링을 진행했다.

data 라는 prop 으로 사용 할 데이터를 지정해 준다면,

알아서 선별하여 option을 넣어주는 컴포넌트로 만들어 줬다.

 

위 부분에서는 잘 했다고 생각이 든다.

이후 제목, 부제목 컴포넌트도 완성을 하니

 

오전 11시가 되어 회의를 통해 마무리 되었다.

 

해커톤은 우리가 목표했던 1.0.0 v 배포에서 80~90% 정도 진행되었고,

생각보다 큰 문제 없이 잘 진행되었던 것 같다.

 

나를 돌아보고 챌린지 팀원들의 수준높은 작업을 지켜보면서

지난 시간들을 돌아보며 깊게 학습하지 않은 부분에 대해

반성하게 되었다.

 

이번 해커톤을 통해 다시한번

이런 팀에 들어온 것은 정말 행운이고,

누구나 경험할 수 없는 값진 경험을 하고 있다는 것을 느꼈다.

 

챌린지팀 모두에게 감사하고

시간내어 참석해주신 튜터님에게도 

무한 감사 인사를 드립니다😭

 

---

 

 

난 할 수 있다!

 

마지막까지 챌린지팀 🦾 빠이팅그.

 

---

 

2023년 2월	1 week	2 week (project)	3 week	4 week
학습 내용 (프로젝트)	Next.js 학습 및 실습 (강의) 모던 자바스크립트 발표 및 TIL 정리	유저 플로우 설계,API 설계, 라이브러리 선정, 컴포넌트 설계, DB 설계, 라우팅 설계, 폴더구조 설계, ESLint 설정 >> init 24H 헤커톤 진행
사용 툴 defalut : VS code	Next.js(ssr, ssg, isr) / Typescript	생략.