들어가기 전 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. 고등학교..
새로운 버전의 티처캔에서 타이머를 구현하게 되었다. 이전 버전에서도 타이머를 구현했기에 큰 어려움은 없었으나 이전 버전에서 미처 발견하지 못한 문제와 타이머 폰트 크기에 대한 문제가 생겨 이에 대해 기록을 남기고자 한다. 1. 백그라운드에서의 타이머 첫 번재 문제는 '백그라운드에서의 타이머'라고 할 수 있다. 타이머가 실행 중인 탭이 아닌 다른 탭으로 이동되었을 때(탭이 비활성화되었을 때), 타이머를 구현하기 위해 사용한 'setInterval'함수는 백그라운드의 탭의 자원 사용을 최소화하기 위해 'setInterval'의 콜백 함수의 호출 시간이 지정된 시간보다 늦어질 수 있다. 즉 예를 들어, 1000ms 마다 콜백 함수를 호출하는 것을 원했으나 그보다 더 긴 시간인 2000ms마다 호출되는 것이..
이전 챕터에서 Schedule, Date Picker을 만들었지만 월(month)을 이동할 수 없어 이전, 다음 달을 볼 수 없는 아쉬움이 있었습니다. 이번 챕터에서는 이를 개선하고자 Shift Month Button을 만들어보겠습니다. 1. Calendar class에 기능 추가하기 Calendar class의 private filed을 보면 #year, #month가 있습니다. 이를 바탕으로 현재 년, 월에 해당하는 날에 대한 데이터를 getCalendarStorage() 메서드에서 만들고 있습니다. 때문에 월(month)을 이동하기 위해선 #month 값을 업데이트해야 합니다. 이와 관련된 로직을 Calendar class에 다음과 같이 추가합니다. // Calendar.ts shiftMonth =..
프로젝트를 본격적으로 시작하기 전 기본적인 웹팩 설정을 마무리하였다. 하지만 여러 가지의 이유로 인해 웹팩 설정을 추가하거나 수정해야 하는 경우가 생긴다. 현재 진행 중인 프로젝트의 경우 폰트를 추가하고, 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,..
