'🚀 우아한테크코스' 카테고리의 글 목록 (2 Page)

레벨2 페이먼츠 - Step3

2023.05.15

개요 미션 기간 Repository PR & Review github page storybook 페이먼츠 미션 1단계 23-05-02 - 23-05-08 Repo PR & Review 💳 페이먼츠 📚스토리북 미션회고 페이먼츠 미션의 마지막 단계의 필수 요구사항은 다음과 같다. 1. 사용하던 모달을 분리해서 npm으로 배포하고, 그 라이브러리를 집접 import 해서 사용하기 2. 문서로서 스토리북을 고도화하기 위해 리팩터링 3. '카드를 등록 중입니다.' 스피너 추가 2, 3번의 요구사항보다 1번 요구사항에 초점을 두고 3단계를 진행하였다. 간략히 말하자면 스토리북은 7 버전으로 업데이트를 한 뒤, autodocs 기능을 사용하였. '카드를 등록 중입니다.' 스피너는 피그마에 있는 요구사항을 그대로 반영..

🚀 우아한테크코스/Level2

레벨2 페이먼츠 - Step2

2023.05.09

개요 미션 기간 Repository PR & Review github page storybook 페이먼츠 미션 1단계 23-04-24 - 23-05-01 Repo PR & Review 💳 페이먼츠 📚스토리북 미션회고 페이먼츠 2단계 미션의 필수 요구사항은 다음과 같다. 1. 주요 컴포넌트에 대한 Storybook 상호 작용 테스트 2. Controlled & Uncontrolled Components에 입각하여 Form 핸들링 3. Context API를 활용하여 전역 상태 관리 및 계층 재구성 이중 가장 부족했던 부분은 Storybook 상호 작용 테스트이다. 현재 스토리북을 보면 컴포넌트가 개별적으로만 테스트하고 있다. 여러 컴포넌트를 묶어 상호 작용 테스트는 미흡하다고 할 수 있다. 부족한 것을 알..

🚀 우아한테크코스/Level2

레벨2 페이먼츠 - Step1

2023.04.24

개요 미션 기간 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..

🚀 우아한테크코스/Level2

레벨2 다시, 점심 뭐 먹지 - Step 2

2023.04.21

개요 미션 기간 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으로 마이그레이션 하는 과정은 크게 어렵지 않았다. 똑같은 작업을 반복하는 것이기 때문에 금방 완료할 수 ..

🚀 우아한테크코스/Level2

레벨2 다시, 점심 뭐 먹지 - Step 1

2023.04.14

개요 미션 기간 Repository PR & Review github page 점심 뭐 먹지 미션 1단계 23-04-11 - 23-04-13 Repo PR & Review 🍚 점심 뭐 먹지 🚀 미션 회고 레벨 2의 첫 번째 미션은 레벨 1에서 이미 했었던 점심 뭐 먹지 미션이다. 자바스크립트로 구현을 했던 레벨 1의 점심 뭐 먹지 미션을 이번에는 리액트로 구현을 해야 했다. 점심 뭐 먹지 미션은 다음과 같은 두 단계로 이루어져 있다. Class Component로 구현 Function Component로 구현 이중 Class Component로 점심 뭐 먹지의 1단계를 진행하였다. React를 몇 번 다루어본 적이 있지만 Class Component를 직접 다루었던 적은 없었기 때문에 기대반 걱정반의 감..

🚀 우아한테크코스/Level1

레벨1 - 인터뷰

2023.04.14

🚀 레벨 인터뷰란? 레벨 인터뷰는 해당 레벨의 모든 미션이 끝난 뒤, 6명의 페어끼리 뭉쳐 코치 한 분이랑 함께 해당 레벨에 배운 개념을 인터뷰를 통해 되돌아볼 수 있는 하나의 과제이다. 레벨 인터뷰의 목표는 다음과 같다. 학습한 내용에 대한 자신의 현재 상태를 파악한다. 자신이 알고 있는 지식을 말로 표현한다. 현재 자신의 학습 상태에 대한 메타인지를 기른다. 위와 같은 목표를 도달 하기 위해 크루들은 각자 레벨 로그를 작성하여 이를 같은 조 크루들에게 공유를 해야 한다. 📝 레벨 로그 레벨 로그는 A4용지 한 장 분량으로 작성을 해야 한다. 다음은 내가 구글 Docs를 이용하면 작성한 레벨 로그이다. 레벨 1 레벨 로그 FE 레벨1 레벨로그 자동차 경주 1. 자바스크립트 모듈 시스템 모듈 시스템: 모..

🚀 우아한테크코스/Level1

레벨1 영화 리뷰 - step2

2023.04.14

개요 미션 기간 Repository PR & Review github page 영화 리뷰 1단계 23-03-17 - 23-03-27 Repo PR & Review 🎬 영화 리뷰 🚀 미션 회고 영화 리뷰의 2단계 미션 목표는 다음과 같다. 영화 상세정보 조회 API에서 제공하는 항목을 활용하여 상세 정보를 보여주는 모달 창을 구현한다. 키보드의 ESC 키를 누르면 모달 창을 닫을 수 있는 등 사용성을 고려한다. 별점 매기기 사용자는 영화에 대해 별점을 줄 수 있으며 새로고침하더라도 사용자가 남긴 별점은 유지되어야 한다. 별점은 5개로 구성되어 있으며 한 개당 2점이며 1점 단위는 고려하지 않는다. UI⁄UX 개선하기 영화 목록과 영화 상세 정보가 뜨는 모달창에 대한 반응형 레이아웃을 구성한다. 영화 목록에..

🚀 우아한테크코스/Level1

레벨1 영화 리뷰 - step1

2023.04.14

개요 미션 기간 Repository PR & Review github page 영화 리뷰 1단계 23-03-14 - 23-03-16 Repo PR Review 🎬 영화 리뷰 🚀 미션 회고 드디어 마지막 미션이 시작되었다. 지금까지 시간이 어떻게 흘러갔는지 모르겠다. 하루하루가 너무 빠르고 일주일은 금방 지나갔다. 벌써 마지막 미션이라는 것이 아쉬웠다. 물론 레벨 2에 가면 또 다른 미션이 기다리고 있지만 빠르게 흘러가는 시간은 애석하게만 느껴진다. 영화 리뷰 1단계 미션의 목표는 다음과 같다. API 연동을 위한 테스트 환경 경험 실제 동작하는 API를 통한 비동기 통신 UX 경험 개선을 위한 더 보기(페이징) 구현 역할과 책임에 따라 관심사를 분리할 수 있는 마지막 기회 앞으로 실제 현업에 나가서 백엔..

🚀 우아한테크코스/Level1

레벨1 점심 뭐 먹지 - step2

2023.04.14

개요 미션 기간 Repository PR & Review github page 점심 뭐 먹지 2단계 23-03-04 - 23-03-13 Repo PR Review 🍚 점심 뭐 먹지 🚀 미션 회고 이번 미션의 목표였던 UI를 컴포넌트 단위로 생각하고 개발하는 연습 재사용할 수 있는 컴포넌트를 고민해 보기 사용자 관점에서 중요하다고 생각하는 기능을 스스로 정의하고 E2E 테스트로 검증해 보기 (2단계) 3가지에 도달할 수 있도록 많은 고민을 하였다. 특히 리액트가 아닌 바닐라자바스크립트에선 컴포넌트에 대해 한 번도 생각을 한 적이 없기 때문에 처음에는 어떤 식으로 접근을 해야 할지 감이 잡히지 않았다. 컴포넌트의 역할이 무엇인지를 스스로 생각하고 정의 내리는 것이 이번 미션의 핵심 포인트였지 않나 싶다. E..

🚀 우아한테크코스/Level1

레벨1 점심 뭐 먹지 - step1

2023.04.14

개요 미션 기간 Repository PR & Review github page 점심 뭐 먹지 1단계 23-02-28 - 23-03-03 Repo PR Review 🍚 점심 뭐 먹지 🚀 미션 진행 과정 레벨 1의 세 번째 미션의 제목은 점심 뭐 먹지이다. 카테고리, 이름, 캠퍼스로 부터 거리, 설명, 참고 링크와 같은 음식점에 대한 값을 바탕으로 음식점 목록을 생성하고 이를 카테고리별로 필터링을 하고 이름순, 거리순으로 정렬하는 기능을 만드는 것 까지가 1단계였다. 엄청 심플해 보였다! 하지만.. 타입스크립트를 도입해야 했고, 컴포넌트 단위로 모듈화 하여 개발, 컴포넌트 단위 테스트도 함께 고민하여 미션 속에서 이를 녹여내야 했었다. 타입스크립트! 오케이 지금 티처캔 프로잭트를 진행하면서 잘은 아니지만 어..

티스토리툴바