들어가기 전 21년 말, react-router-dom을 사용할 땐 v6.3이었다. 현재는 메이저 버전은 동일하지만 v6.4를 기점으로 기존에 없던 새로운 기능이 추가되어 이를 소개하고자 한다. 아래의 사진에서 보는 것과 같이 React Router 공식 문서에서도 v6.4에 대해 무엇이 새로운지 소개하고 있다. React Router 공홈 바로가기 현재 react-router-dom의 최신 버전은 v6.11.1이다. 얼마나 자주 업데이트 되는지 궁금해서 Version History를 찾아봤는데, v6.11.1은 현재기준(23년 5월 16일) 12일 전에 공개가 되었다. 그리고 v6.4.0은 8개월 전인 22년 9월에 공개되었다. 꾸준히 기능이 업데이트되고 있다고 생각한다. 더 재밌는 점은 이전의 v5의..
개요 미션 기간 Repository PR & Review github pages storybook 장바구니 1단계 23-05-09 - 23-05-14 Repo PR & Review 🛍️ 장바구니 📚 스토리북 미션 회고 레벨 2의 세 번째 미션은 장바구니 페이지를 만드는 것이다. 이번 미션을 바탕으로 백엔드와 협업 미션도 진행을 한다. 즉, 서버에 있는 데이터를 받아 상품 목록을 보여주고 장바구니에 상품을 담고, 삭제하는 과정도 구현해야 한다. 이를 위한 본격적인 기능 구현은 2단계에서 진행을 하게 된다. 1단계에서는 장바구니 마크업을 완성하고 상태를 관리하기 위한 빌드업 과정이라고 생각하며 미션에 임했다. 장바구니 1단계 미션의 필수 요구 사항은 다음과 같다. 1. 상품 목록 페이지 상품 목록 페이지에 ..
새로운 버전의 티처캔에서 타이머를 구현하게 되었다. 이전 버전에서도 타이머를 구현했기에 큰 어려움은 없었으나 이전 버전에서 미처 발견하지 못한 문제와 타이머 폰트 크기에 대한 문제가 생겨 이에 대해 기록을 남기고자 한다. 1. 백그라운드에서의 타이머 첫 번재 문제는 '백그라운드에서의 타이머'라고 할 수 있다. 타이머가 실행 중인 탭이 아닌 다른 탭으로 이동되었을 때(탭이 비활성화되었을 때), 타이머를 구현하기 위해 사용한 'setInterval'함수는 백그라운드의 탭의 자원 사용을 최소화하기 위해 'setInterval'의 콜백 함수의 호출 시간이 지정된 시간보다 늦어질 수 있다. 즉 예를 들어, 1000ms 마다 콜백 함수를 호출하는 것을 원했으나 그보다 더 긴 시간인 2000ms마다 호출되는 것이..
프로젝트를 본격적으로 시작하기 전 기본적인 웹팩 설정을 마무리하였다. 하지만 여러 가지의 이유로 인해 웹팩 설정을 추가하거나 수정해야 하는 경우가 생긴다. 현재 진행 중인 프로젝트의 경우 폰트를 추가하고, png, jpg와 같은 asset 그리고 라우팅으로 인해 웹팩 설정을 추가하고 수정을 해야 했다. 웹팩으로 리액트 시작하기 세 번째 파트에서는 이러한 문제를 해결하는 과정을 다룬다. 1. 폰트 적용하기 폰트 가져오기 서비스에 적용하고 싶은 폰트의 otf파일을 다운받고 프로젝트 내 폴더로 옮긴다. 이후 이를 바탕으로 새로운 @font-face을 만든다. @font-face는 .css파일에서 만든다. /* src/fonts/font.css */ @font-face { font-family: 'S-Core ..
개요 미션 기간 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를 직접 다루었던 적은 없었기 때문에 기대반 걱정반의 감..
1. 타입 흐름 유지하기 타입 정보가 그대로 유지되면서 타입 흐름이 계속 전달되는 것은 개발자로 하여금 타입 체크에 대한 신경을 줄일 수 있게 도와준다. 직접 루프를 구현하는 것보다 내장된 함수형 기법과 로대시 같은 유틸리티 라이브러리를 사용하는 것이 타입 정보를 그대로 유지하는데 적합하다. 타입 정보가 그대로 유지되는 것엔 다음과 같은 장점을 가지고 있다. 타입 흐름을 개선한다. 가독성을 높인다. 명시적인 타입 구문의 필요성을 줄인다. 몇 가지 예시를 통해 절차형 프로그래밍, 함수형 프로그래밍 그리고 로대시를 통해 구현하여 어떤 특징이 있는지 살펴보자. 2. CSV 데이터 파싱하기 다음과 같은 CSV 데이터가 있다. 이를 파싱해보자. const csvData = `연도,제조사,모델,설명,가격 1997,..
1. 개요 22년 11월 16일 15시에 4주 차 미션 안내 이메일이 도착했다. 일주일 동안 이루어진 우아한테크코스 프리코스 4주 차 다리 건너기 미션에 대한 간단한 소개와 소감을 작성한다. 2. 미션 소개 프리코스 4주 차의 미션은 다리 건너기 게임을 만드는 것이었다. 오징어 게임의 징검다리 건너기 게임과 같은 규칙의 게임을 직접 만드는 것이다. 오징어 게임과 다른 점은 목숨이 무한개여서 실패를 해도 다시 시도할 수 있는 점이 게임을 진행하는데 부담감을 줄여주었다. 오징어 게임에서의 징검다리 건너기 게임과 다른 점은 실패를 해도 다시 시도할 수 있다는 것이다. 오징어 게임에서는 바로 추락하여 사망을 하지만 다행히 프리코스의 다리 건너기 미션은 그러지 않았다. 그래서 게임에 실패하더라도 무한히 도전을 하..
