개요 미션 기간 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으로 마이그레이션 하는 과정은 크게 어렵지 않았다. 똑같은 작업을 반복하는 것이기 때문에 금방 완료할 수 ..
1. 구조적 타이핑의 관점에서 살펴보기 다음과 같은 코드가 있습니다. type Vector2D = { x: number; y: number; }; type Vector3D = { x: number; y: number; z: number; }; const calculateNorm = (p: Vector2D) => { return Math.sqrt(p.x * p.x + p.y * p.y); }; Vector2D와 Vector3D 타입이 있습니다. calculateNorm 함수도 있는데요. 이 함수는 Vector2D 타입의 매개변수를 받습니다. 때문에 Vector3D 타입의 매개변수를 허용하지 않아야 합니다. 하지만 구조적 타이핑 관점에서 본다면 다음의 코드는 문제가 없습니다. 이를 해결하기 위해선 어떻게 해..
개요 미션 기간 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를 직접 다루었던 적은 없었기 때문에 기대반 걱정반의 감..
🚀 레벨 인터뷰란? 레벨 인터뷰는 해당 레벨의 모든 미션이 끝난 뒤, 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로 구현할 수 있일까 고민을 하였다. 첫 ..
