들어가기 전 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의..
1. 개요 우테코 5기의 서류 지원 일정은 10월 17일 오후 3시부터 일주일 후인 24일 오전 10시까지이다. 현재(24일 20시) 기준으로 서류 지원이 끝난 상태이다. 마무리한 상황에서 우테코 5기의 서류 지원은 어땠는지 간단하게 글로 남긴다. 2. 미리 생각해 볼 질문들 우테코 홈 페이지의 지원하기 파트에 미리 생각해 볼 질문들이 올라와져 있다. 총 4가지의 질문이고 이 그대로 서류 지원의 질문으로 나왔다. 그래서 미리 생각했던 내용을 차근히 정리할 수 있었다. 미리 생각해 볼 질문들 프로그래밍의 학습 과정은? 프로그래머가 되려는 이유는 무엇인가요? 마음이 끌리는 무엇인가에 긴 시간 동안 몰입해 본 경험이 있나요? 우아한테크코스에 참여하려는 이유는 무엇인가요? 3. 나의 작성 내용 3-1. 고등학교..
viewport에 따라 컴포넌트의 길이가 변할 때 취해야 할 작업이 종종 존재한다. 이전 과거를 떠오르면 달력 컴포넌트, Tabs 컴포넌트를 만들 때가 이에 해당한다. 조금 더 자세한 예시를 들자면 다음과 같다. 위는 Tabs 컴포넌트이다. Panel1부터 Panel10까지 모두 viewport 내에서 확인할 수 있다. 하지만 가로의 길이를 줄이다 보면 Panel10부터 화면에서 사라지게 될 것이다. 때문에 가려지는 것을 방지하기 위해 추가 작업이 필요하다. Tabs의 컴포넌트같은 경우엔 화살표를 추가하여 사용자가 화살표를 클릭하여 보이지 않는 Panel를 찾는 것이 해결방법이 될 것이다. 이와 같은 기능을 구현하기 위해선 가로(혹은 세로)의 사이즈가 변하는 것을 감지할 수 있어야 한다. 어떻게 감지할 ..
이전 챕터에서 Schedule, Date Picker을 만들었지만 월(month)을 이동할 수 없어 이전, 다음 달을 볼 수 없는 아쉬움이 있었습니다. 이번 챕터에서는 이를 개선하고자 Shift Month Button을 만들어보겠습니다. 1. Calendar class에 기능 추가하기 Calendar class의 private filed을 보면 #year, #month가 있습니다. 이를 바탕으로 현재 년, 월에 해당하는 날에 대한 데이터를 getCalendarStorage() 메서드에서 만들고 있습니다. 때문에 월(month)을 이동하기 위해선 #month 값을 업데이트해야 합니다. 이와 관련된 로직을 Calendar class에 다음과 같이 추가합니다. // Calendar.ts shiftMonth =..
프론트엔드 성능 베이스캠프는 우아한테크코스 레벨 4 웹 성능 미션을 바탕으로 마주한 문제를 해결한 과정을 다룬다. 그중 첫 번째는 요청 크기 줄이기이다. 요청 크기라고 하면 다음과 같은 것들을 생각할 수 있다. 소스코드 이미지와 같은 assets 파일 폰트 이 중 소스코드와 이미지와 같은 assets 파일의 크기를 줄여보도록 한다. 성능 테스트에 사용되고 개선되는 코드는 여기에서 확인할 수 있다. 또한 해당 시리즈에서는 특별히 언급을 하지 않는 이상 성능 측정 환경은 dev 환경이다. 1. 소스코드 크기 줄이기 1-1. 기존 소스코드 크기 서비스를 실행하게 되면 bundle.js가 불러와진다. bundle.js 크기를 비교하기 전 package.json의 scripts를 다음과 같이 수정하자. { "sc..
프로젝트를 본격적으로 시작하기 전 기본적인 웹팩 설정을 마무리하였다. 하지만 여러 가지의 이유로 인해 웹팩 설정을 추가하거나 수정해야 하는 경우가 생긴다. 현재 진행 중인 프로젝트의 경우 폰트를 추가하고, png, jpg와 같은 asset 그리고 라우팅으로 인해 웹팩 설정을 추가하고 수정을 해야 했다. 웹팩으로 리액트 시작하기 세 번째 파트에서는 이러한 문제를 해결하는 과정을 다룬다. 1. 폰트 적용하기 폰트 가져오기 서비스에 적용하고 싶은 폰트의 otf파일을 다운받고 프로젝트 내 폴더로 옮긴다. 이후 이를 바탕으로 새로운 @font-face을 만든다. @font-face는 .css파일에서 만든다. /* src/fonts/font.css */ @font-face { font-family: 'S-Core ..
1. 타입 흐름 유지하기 타입 정보가 그대로 유지되면서 타입 흐름이 계속 전달되는 것은 개발자로 하여금 타입 체크에 대한 신경을 줄일 수 있게 도와준다. 직접 루프를 구현하는 것보다 내장된 함수형 기법과 로대시 같은 유틸리티 라이브러리를 사용하는 것이 타입 정보를 그대로 유지하는데 적합하다. 타입 정보가 그대로 유지되는 것엔 다음과 같은 장점을 가지고 있다. 타입 흐름을 개선한다. 가독성을 높인다. 명시적인 타입 구문의 필요성을 줄인다. 몇 가지 예시를 통해 절차형 프로그래밍, 함수형 프로그래밍 그리고 로대시를 통해 구현하여 어떤 특징이 있는지 살펴보자. 2. CSV 데이터 파싱하기 다음과 같은 CSV 데이터가 있다. 이를 파싱해보자. const csvData = `연도,제조사,모델,설명,가격 1997,..
