- 우아한테크코스 프론트엔드 6기 활동 저장소
- 활동 기간 : 24.02.13 - 24.11.29
- 레벨 1 활동 기간 : 24.02.13 - 24.04.05
- vanila Javascript, Typescript, jest, cypress를 활용하여 미션 진행
| No. | Project | Repository | PR | 회고 |
|---|---|---|---|---|
| 1 | 자동차 경주 게임 | javascript-racingcar-step1 | PR | 1_1 회고 |
| javascript-racingcar-step2 | PR | |||
| 2 | 로또 | javascript-lotto-step1 | PR | 1_2 회고 |
| javascript-lotto-step2 | PR | |||
| 3 | 점심 뭐 먹지 | javascript-lunch-step1 | PR | 1_3 회고 |
| javascript-lunch-step2 | PR | |||
| 4 | 영화 리뷰 | javascript-movie-review-step1 | PR | 1_4 회고 |
| javascript-movie-review-step2 | PR |
- 레벨 2 활동 기간 : 24.04.16 - 24.06.14
- react, tanstack-query, recoil, emotion, storybook, msw, jest, RTL을 활용하여 미션 진행
| No. | Project | Repository | PR | 회고 |
|---|---|---|---|---|
| 1 | 페이먼츠 | react-payments-step1 | PR | 2_1 회고 |
| storybook | react-payments-step2 | PR | ||
| 2 | 페이먼츠 모듈 | react-modules-step1 | PR | 2_2 회고 |
| modal, hooks, storybook | react-modules-step2 | PR | ||
| 3 | 장바구니 | react-shopping-cart-step1 | PR | 2_3 회고 |
| react-shopping-cart-step2 | PR | |||
| 4 | 상품 목록 | react-shopping-products-step1 | PR | 2_4 회고 |
| react-shopping-products-step2 | PR | |||
| 방학 | 영화 리뷰(react) | react-movie-review |
- 레벨 3 활동 기간 : 24.07.02 - 24.08.23
- 2주를 하나의 스프린트 주기로 설정하여 총 4번의 스프린트 진행
| 서비스명 | 서비스 링크 | Repository |
|---|---|---|
| 땅콩 🥜 | https://ddangkong.kr | 2024-ddangkong |
| figma 디자인 | 땅콩팀 figma 링크 | - |
| No. | 스프린트별 핵심 기능 목표 | 회고 |
|---|---|---|
| 1차 데모데이 | 대화주제 제공 | 1차 데모데이 회고 |
| 2차 데모데이 | 방 생성 + 싱글 플레이 | 2차 데모데이 회고 |
| 3차 데모데이 | 멀티 플레이 (단판) | 3차 데모데이 회고 |
| 4차 데모데이 | 멀티 플레이 + 게임 여러번 진행 + 방설정 + 방장 역할 구분 | 4차 데모데이 회고 |
- 레벨 4 활동 기간 : 24.09.02 - 24.11.01
- 성능 최적화, 웹 접근성, SSR 학습 진행
- 4주를 하나의 스프린트 주기로 설정하여 총 2번의 스프린트 진행
| No. | Repository | PR |
|---|---|---|
| 미션 | 성능 최적화 | PR |
| 미션 | 접근성 개선 | PR |
| 미션 | SSR 1단계 | 1단계 PR |
| 미션 | SSR 2단계 | 2단계 PR |
| 땅콩 | 땅콩 성능 개선기(wiki) | - |
| 땅콩 | 땅콩 접근성 개선기(wiki) | - |
| No. | 스프린트별 핵심 기능 목표 | - |
|---|---|---|
| 5차 데모데이 | 사용자 피드백 반영 + 에러 핸들링 | - |
| 6차 데모데이 | 쿠키 도입으로 재접속 가능 | - |
- 주제 : 리액트 컴포넌트 라이프사이클
- youtube 영상 : [10분 테코톡] 마루의 리액트 컴포넌트 LIFECYCLE
- 발표 내용 정리 : 발표 내용을 정리한 개인 기술 블로그
- 함수 컴포넌트의 생명주기를 이해하며, 언제 어떤 작업을 수행해야 하는지 이해
- 리액트 렌더링의 render, commit, 브라우저 렌더링을 구분하여 리액트 렌더링 최적화 방법 이해
- useEffect의 활용 예시, 잘 사용하는 예시, 미션에 적용해본 예시를 설명하며 잘 사용하는 방법
- useEffect와 useLayoutEffect의 차이를 이해하며, 직접 예시를 구현하여 UX 개선 사례 설명
| 레벨 | PR 링크 | 글 링크 | 유연성 강화 목표 |
|---|---|---|---|
| 1 | 레벨 1 글쓰기 PR | 바로가기 | 우테코 환경에 던져지기 |
| 2 | 레벨 2 글쓰기 PR | 바로가기 | 이제는 나에게 집중해보자 |
| 3 | 레벨 3 글쓰기 PR | 바로가기 | 설득력 있는 말하기 |
| No. | Study | Repository |
|---|---|---|
| 1 | 함수형 코딩 | 스터디 저장소 링크 |
| 2 | 리액트 + CS 발표 스터디 | 자료 공유 노션 링크 |
| 3 | 알고리즘 스터디 | 스터디 규칙 이미지, solved.ac |
| 4 | 기술 토론 스터디 | 자료 공유 노션 링크 |