개요 미션 기간 Repository PR & Review github page storybook 페이먼츠 미션 1단계 23-04-18 - 23-04-23 Repo PR & Review 💳 페이먼츠 📚스토리북 미션 회고 리액트 온보딩 미션이 끝나고 두 번째 미션인 페이먼츠 미션이 시작되었다. 페이먼츠 미션은 총 3단계로 이루어져 있다. 지금까지는 2단계가 마지막이었는데, 3단계까지 있는 것을 보니 하나의 서비스에 대해서 더 많은 고민을 할 수 있게 될 것 같다. 페이먼츠 미션의 필수 요구 사항은 다음과 같다. 1. Storybook으로 UI 컴포넌트 렌더링 2. REQUIREMENTS.md에 요구 사항 도출 3. 재사용 가능한 Component 작성 📚 Storybook 새로운 키워드가 등장했다. 바로 S..
개요 미션 기간 Repository PR & Review github page 점심 뭐 먹지 미션 1단계 23-04-14 - 23-04-17 Repo PR & Review 🍚 점심 뭐 먹지 미션회고 2단계 미션의 필수 요구 사항은 1단계와 동일하지만 프로그래밍 요구사항은 다음과 같이 수정되었다. 1. Step1의 Class Component를 Function Component로 마이그레이션 한다. 2. Custom Hooks을 이용하여 재사용 가능한 기능을 분리한다. 이에 따라 Function Component와 Custom Hooks에 초점을 두어 미션을 진행했다. Function Component으로 마이그레이션 하는 과정은 크게 어렵지 않았다. 똑같은 작업을 반복하는 것이기 때문에 금방 완료할 수 ..
🚀 레벨 인터뷰란? 레벨 인터뷰는 해당 레벨의 모든 미션이 끝난 뒤, 6명의 페어끼리 뭉쳐 코치 한 분이랑 함께 해당 레벨에 배운 개념을 인터뷰를 통해 되돌아볼 수 있는 하나의 과제이다. 레벨 인터뷰의 목표는 다음과 같다. 학습한 내용에 대한 자신의 현재 상태를 파악한다. 자신이 알고 있는 지식을 말로 표현한다. 현재 자신의 학습 상태에 대한 메타인지를 기른다. 위와 같은 목표를 도달 하기 위해 크루들은 각자 레벨 로그를 작성하여 이를 같은 조 크루들에게 공유를 해야 한다. 📝 레벨 로그 레벨 로그는 A4용지 한 장 분량으로 작성을 해야 한다. 다음은 내가 구글 Docs를 이용하면 작성한 레벨 로그이다. 레벨 1 레벨 로그 FE 레벨1 레벨로그 자동차 경주 1. 자바스크립트 모듈 시스템 모듈 시스템: 모..
개요 미션 기간 Repository PR & Review github page 영화 리뷰 1단계 23-03-17 - 23-03-27 Repo PR & Review 🎬 영화 리뷰 🚀 미션 회고 영화 리뷰의 2단계 미션 목표는 다음과 같다. 영화 상세정보 조회 API에서 제공하는 항목을 활용하여 상세 정보를 보여주는 모달 창을 구현한다. 키보드의 ESC 키를 누르면 모달 창을 닫을 수 있는 등 사용성을 고려한다. 별점 매기기 사용자는 영화에 대해 별점을 줄 수 있으며 새로고침하더라도 사용자가 남긴 별점은 유지되어야 한다. 별점은 5개로 구성되어 있으며 한 개당 2점이며 1점 단위는 고려하지 않는다. UI⁄UX 개선하기 영화 목록과 영화 상세 정보가 뜨는 모달창에 대한 반응형 레이아웃을 구성한다. 영화 목록에..
개요 미션 기간 Repository PR & Review github page 영화 리뷰 1단계 23-03-14 - 23-03-16 Repo PR Review 🎬 영화 리뷰 🚀 미션 회고 드디어 마지막 미션이 시작되었다. 지금까지 시간이 어떻게 흘러갔는지 모르겠다. 하루하루가 너무 빠르고 일주일은 금방 지나갔다. 벌써 마지막 미션이라는 것이 아쉬웠다. 물론 레벨 2에 가면 또 다른 미션이 기다리고 있지만 빠르게 흘러가는 시간은 애석하게만 느껴진다. 영화 리뷰 1단계 미션의 목표는 다음과 같다. API 연동을 위한 테스트 환경 경험 실제 동작하는 API를 통한 비동기 통신 UX 경험 개선을 위한 더 보기(페이징) 구현 역할과 책임에 따라 관심사를 분리할 수 있는 마지막 기회 앞으로 실제 현업에 나가서 백엔..
개요 미션 기간 Repository PR & Review github page 점심 뭐 먹지 2단계 23-03-04 - 23-03-13 Repo PR Review 🍚 점심 뭐 먹지 🚀 미션 회고 이번 미션의 목표였던 UI를 컴포넌트 단위로 생각하고 개발하는 연습 재사용할 수 있는 컴포넌트를 고민해 보기 사용자 관점에서 중요하다고 생각하는 기능을 스스로 정의하고 E2E 테스트로 검증해 보기 (2단계) 3가지에 도달할 수 있도록 많은 고민을 하였다. 특히 리액트가 아닌 바닐라자바스크립트에선 컴포넌트에 대해 한 번도 생각을 한 적이 없기 때문에 처음에는 어떤 식으로 접근을 해야 할지 감이 잡히지 않았다. 컴포넌트의 역할이 무엇인지를 스스로 생각하고 정의 내리는 것이 이번 미션의 핵심 포인트였지 않나 싶다. E..
개요 미션 기간 Repository PR & Review github page 점심 뭐 먹지 1단계 23-02-28 - 23-03-03 Repo PR Review 🍚 점심 뭐 먹지 🚀 미션 진행 과정 레벨 1의 세 번째 미션의 제목은 점심 뭐 먹지이다. 카테고리, 이름, 캠퍼스로 부터 거리, 설명, 참고 링크와 같은 음식점에 대한 값을 바탕으로 음식점 목록을 생성하고 이를 카테고리별로 필터링을 하고 이름순, 거리순으로 정렬하는 기능을 만드는 것 까지가 1단계였다. 엄청 심플해 보였다! 하지만.. 타입스크립트를 도입해야 했고, 컴포넌트 단위로 모듈화 하여 개발, 컴포넌트 단위 테스트도 함께 고민하여 미션 속에서 이를 녹여내야 했었다. 타입스크립트! 오케이 지금 티처캔 프로잭트를 진행하면서 잘은 아니지만 어..
개요 미션 기간 Repository PR & Review github page 행운의 로또 2단계 23-02-17 - 23-02-27 Repo PR & Review 🎱 행운의 로또 🖼️ 도메인 로직은 그대로, UI는 변경 프리코스의 미션부터 지금까지의 미션은 콘솔에서 화면을 띄우고 콘솔에서 입력값과 출력값을 다루는 것이었다. 이번 행운의 로또 2단계에선 콘솔이 아니라 웹에 직접 화면을 그리는 미션이었다. 단, 1단계에서 작성하였던 도메인 로직은 최대한 수정하지 않으면서 UI를 변경할 수 있는 로직을 추가해야 했다. 때문에 먼저 도메인 로직을 아예 건들지 않으면서 미션을 수행하였다. 해당 과정을 거치면서 로또를 관리하는 객체가 더 필요하다는 것을 느끼게 되었다. // LottoWebGame.js buyLo..
개요 미션 기간 Repository PR & Review 행운의 로또 1단계 23-02-14 - 23-02-16 Repo PR & Review 🚀 미션 진행 과정 레벨 1의 두 번째 미션은 콘솔 기반의 행운의 로또 게임을 구현하는 것이다. 로또 게임은 이전 프리코스에서 진행이 되었던 미션 중 하나여서 큰 부담감 없이 시작할 수 있었다. 하지만 새롭게 추가된 프로그래밍 요구 사항 중 TDD로 구현하는 것이 있었기 때문에, 한 번도 이를 이용한 적이 없었던 나에겐 어려움으로 다가왔다. 뿐만 아니라 함수(메서드)의 들여 쓰기 depth를 1단계로 해야 했기에 고민할 부분이 많이 생겼다. TDD로 구현하기 위해 우선 페어와 함께 기능 목록을 작성한 후 어떤 기능을 TDD로 구현할 수 있일까 고민을 하였다. 첫 ..
개요 미션 기간 Repository PR & Review 자동차 경주 1단계 23-02-10 - 23-02-13 Repo PR & Review 🚀 미션 회고 첫 번째 미션의 2단계는 추가된 기능 구현이 없고 공통 피드백 및 코드 리뷰를 바탕으로 코드를 리팩터링 하는 것으로 진행하였다. 아마 우테코의 시스템에 적응하는 온보딩 미션이라 간단했다고 생각한다. 두 번째 미션부터는 step2가 무려 주말 포함 9일이니 과연 어떤 어려움이 있을까 두근거린다. 🛠️ 리팩터링 feat: 자동차 이름이 공백일 경우 에러 반환하기 feat: 자동차의 최종 위치를 구하기 feat: 자동차의 이동를 결정하는 숫자 배열 만들기 refactor: 도메인 로직과 UI 로직 폴더 분리하기 refactor: ES6 모듈 적용하기 re..