우아한테크코스 6기 활동 기록 저장소입니다.
- 기간: 총 10개월 (2024년 2월 13일 ~ 진행 중...)
| 레벨 | 링크 | 레벨 별 유연성 강화 목표 |
|---|---|---|
| 1 | 레벨 1 글쓰기 미션 | 실천 가능한 작은 목표를 세우고, 꾸준하지 못할 수도 있음을 받아들이기 |
| 2 | 레벨 2 글쓰기 미션 | 현재 내가 처한 상황에 적응하는 능력 키우기 |
| 3 | 레벨 3 글쓰기 미션 | 팀의 성장이 곧 나의 성장이었다 |
| 4 | 레벨 4 글쓰기 미션: 테크니컬 라이팅 | 리액트를 중심으로 알아보는 클라이언트의 상태와 상태관리 |
- 2024.02.13 ~ 2024.04.05
레벨1의 목표는 '프로그래밍 기본' 역량을 탄탄하게 쌓는 것입니다.
- 작은 규모의 어플리케이션들을 만들어보면서 JavaScript/TypeScript 언어의 주요 문법들을 깊이 있게 학습한다.
- 유지보수하기 좋은 코드의 필요성을 경험하고, 어떻게 하면 유지보수하기 좋은 코드를 작성할 수 있을지 고민하고 적용해본다.
- E2E 테스트와 단위 테스트 코드를 작성해보고, 이를 기반으로 리팩터링하며 테스트 코드의 필요성을 경험해본다.
- 주어진 디자인을 웹 표준을 준수하는 UI로 구현해보고, 프론트엔드 개발자로서 고려해야 할 UX에 대해 고민해본다.
| name | PR | pair | reviewer |
|---|---|---|---|
| 자동차 경주 게임 step1 | Link | 빙봉(@Yoonkyoungme) | 케빈(@JeongBin0227) |
| 자동차 경주 게임 step2 | Link | - | 케빈(@JeongBin0227) |
| 행운의 로또 step1 | Link | 헤인(@Hain-tain) | 브콜(@Tanney-102) |
| 행운의 로또 step2 | Link | - | 브콜(@Tanney-102) |
| 점심 뭐 먹지 step1 | Link | 해시(@dle234) | 하루(@365kim) |
| 점심 뭐 먹지 step2 | Link | - | 하루(@365kim) |
| 영화 리뷰 step1 | Link | 포메(@novice0840) | 블링(@uk960214) |
| 영화 리뷰 step2 | Link | - | 블링(@uk960214) |
-
관련 블로그 포스트
- 2024.04.16 ~ 2024.06.14
레벨2의 1차적인 목표는 'React'에 대한 두려움을 스스로 쪼개고 정복해 나가는 과정입니다. 그리고 궁극적으로는 기술 학습에 대한 두려움을 정복해 나가는 것입니다. > 이를 위해 우리는 이런 과정을 함께 경험할꺼에요.
- 레벨1보다 복잡한 규모의 어플리케이션을 React와 TypeScript를 이용해 만들어본다.
- 스토리북을 통하여, 컴포넌트 단위로 피드백을 받기 위한 테스트의 필요성을 경험해본다.
- 유지보수하기 좋은 코드의 필요성을 경험하고, 어떻게 하면 유지보수하기 좋은 코드를 작성할 수 있을지 고민하고 적용해본다.
- 주어진 디자인을 웹 표준을 준수하는 UI로 구현해보고, 프론트엔드 개발자로서 고려해야 할 UX에 대해 고민해본다.
| name | PR | pair | reviewer |
|---|---|---|---|
| 리액트 페이먼츠 step1 | Link | 에프이(@chysis) | 피터(@iborymagic) |
| 리액트 페이먼츠 step2 | Link | - | 피터(@iborymagic) |
| 리액트 모듈 step1 | Link | 시모(@simorimi) | 케빈(@JeongBin0227) |
| 리액트 모듈 step2 | Link | - | 케빈(@JeongBin0227) |
| 리액트 장바구니 step1 | Link | 리안(@ooherin) | 블링(@uk960214) |
| 리액트 장바구니 step2 | Link | - | 블링(@uk960214) |
| 리액트 상품목록 step1 | Link | 아르(@seongjinme) | 브콜(@Tanney-102) |
| 리액트 상품목록 step2 | Link | - | 브콜(@Tanney-102) |
- 2024.07.02 ~ 2024.09.02
프론트엔드, 백엔드 크루들이 하나의 팀을 이루고 함께 서비스를 개발하고 운영하는 경험을 하는 것을 목표로 한다.
- 함께: 팀으로 협업하는 경험
- 개발
- 개발 프로세스를 기반으로 프로젝트를 진행하는 경험
- 하나의 서비스를 실제 사용자가 쓸 수 있도록 개발하고 배포하는 경험 -> 문제를 해결하기 위한 기술 학습 및 적용
- 운영
- 실 사용자가 있는 서비스를 유지보수하는 경험
사람과 사람 사이의 ‘만남’은 정말 흔한 일이다.
하지만, 대면이든 비대면이든 만남 전에 결정해야하는 사항들이 너무 많다. 시간, 장소 등등
특히 만남에 참여하는 사람들이 더 많아질수록 언제 어디서 어떻게 만날 것인지 결정하는데 너무 체력이 많이 든다.
만나면 잘 놀지만, 만나기 전에 결정해야 하는 것들이 너무 많고 귀찮다. 특히 사람이 많아질수록
만나기 전, 만남을 결정하는 과정을 더 편하고 간결하게 해주는 것을 우리가 해결하는 문제로 정한다.
만남을 결정하는 과정을 편하게 할 수 있는 요소 중 만남 시간을 빠르게 결정해주는 것을 목표로 한다.
-
시간 테이블 위에 마우스를 올리거나 클릭하면 참여자들을 확인할 수 있는 툴팁 UI 제공 (PR 링크 1)
- 특정 시간을 어떤 사람들이 선택했는지 알려주면 의사 결정에 도움이 될 것이라는 생각을 바탕으로 툴팁을 통해 정보 제공
- 다른 상황에서도 툴팁 UI를 재사용하기 쉽게 8가지 방향으로 렌더링될 수 있도록 모듈화
-
약속 날짜의 범위를 편하게 결정할 수 있도록 달력 UI 제공 (PR 링크 1, PR 링크 2, PR 링크 3)
- render props 패턴과 Context API를 활용하여 달력과 관련된 데이터를 그리는 영역과 UI를 그리는 영역을 구분
- 사용자의 피드백을 바탕으로 공휴일 텍스트를 추가하고 시작, 끝 날짜만 선택하면 사이의 모든 날짜가 선택되도록 개선
-
약속 생성을 위한 입력을 3단계로 나누고, 지역 상태로 각 입력 단계의 상태를 관리 (PR 링크)
- 모바일 사용자의 편의성을 높이기 위해 스크롤 없이 단계별로 입력하도록 개선
-
사용자가 약속 시간 등록 및 수정을 편하게 할 수 있도록 드래그 기능 제공
- HTML
<table />태그 내부에서 발생하는 이벤트를 바탕으로 2차원 배열에서 인덱스를 파악 - 데스크톱과 모바일 환경 모두 지원할 수 있도록 mouse, touch 이벤트 활용
- 사용자 피드백을 바탕으로 참여 불가능한 시간으로 선택할 수 있는 기능 추가 구현
- HTML
- 배포 자동화 (PR 링크)
- 백엔드 팀원들과의 원활한 협업과 개발 편의성을 위해 프론트엔드 리소스 배포 자동화를 진행 (문서화 링크)
- 작업 현황 디스코드 알람 자동화 (PR 링크)
- PR, Code Review, issue 생성 시 팀원들이 빠르게 확인하고 피드백을 줄 수 있도록 디스코드를 활용한 알람 자동화 진행
- 2024.09.03 ~ 2024.11.01
레거시 코드를 리팩터링하면서 안정적으로 서비스를 운영해 보는 경험
수박 겉핥기 식의 다양한 지식 습득이 아니라 한 분야에 대한 깊이 있는 지식 습득
현장과 비슷한 환경에서 업무의 우선순위를 정하고 일과 학습을 병행하는 경험
+) 레벨4의 공통 목표 = '사용자 경험'
기술을 사용해서 사용자 경험을 한 단계 더 개선하는 방법을 학습하는 것
‘사용자 경험’을 기준으로 문제를 정의하고 정의한 문제에 맞는 해결책을 새롭게 학습하고 도입할 수 있는 나만의 학습 지도를 만든다.
사용자 경험을 중점으로 아래 내용들을 학습한다.
- 성능: 서비스의 성능 개선이 필요할 때, 직접 문제를 정의하고 정의한 문제에 맞는 해결책을 도입할 수 있다.
- 웹 접근성: 서비스의 접근성 개선이 필요할 때, 직접 문제를 정의하고 정의한 문제에 맞는 해결책을 도입할 수 있다.
- 서버 사이드 렌더링: CSR과 SSR 렌더링 방식의 특징을 이해하고, 주어진 상황에 적합한 렌더링 방식을 선택할 수 있다. 또한, 이를 리액트 앱과 함께 적용할 수 있다.
| name | PR | pair | reviewer |
|---|---|---|---|
| 웹 성능 개인 미션 | Link | - | 쑤쑤(@soosoo22) |
| 웹 접근성 개인 미션 | Link | - | 리안(@ooherin) |
| 서버 사이드 렌더링 개인 미션 step1 | Link | - | 초코(@00kang) |
| 서버 사이드 렌더링 개인 미션 step2 | 진행 중... | - | 초코(@00kang) |