들어가기 전 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. 개요 12월 14일 수요일 1차 합격자 발표와 함께 17일 잠실 캠퍼스에서 이루어진 최종 코딩 테스트에 대한 간단한 소개와 소감을 작성한다. 2. 떨리는 1차 합격자 발표 14일 수요일은 우테코 1차 합격자 발표날이다. 시간은 3시이고 모든 참가자에게 메일로 합격과 불합격의 여부를 알려준다. 발표날의 몇 주 전 부터 14일만 생각하면 가슴이 떨려왔다. 당일이 되니 떨리는 가슴은 더욱 요동치기 시작했다. 14일도 어김없이 출근을 하였다. 하지만 이날 만큼은 조퇴를 한 후 물리치료를 받으며 경건한 마음으로 이메일을 기다렸다. 3시가 되는 순간 네이버 메일함을 새로고침을 하였고 3시 1분이 되는 순간 우테코에서 하나의 메일이 발송되었다. 빨리 결과를 보고 싶어 1초의 고민도 없이 바로 이메일을 클릭하였다..
이전 글에서 달력을 만들기 위한 데이터를 만들었습니다. 이번에는 데이터를 활용하여 두 가지 종류의 달력을 만들어 봅니다. 하나는 Schedule입니다. Schedule은 달력에서 특정 데이터를 확인할 수 있습니다. 예를 들면 다음과 같은 달력에 해당합니다. 1. 구글 캘린더(일정을 확인할 수 있다.) 2. 가계부(지출한 금액을 확인할 수 있다.) 위 달력은 모두 특정 데이터를 담은 달력입니다. 또 다른 달력은 Date Picker입니다. 이름 그대로 날짜를 선택할 수 있는 달력입니다. 이는 html의 input 태그를 사용하여 구현할 수도 있는데, 커스튬은 불가능하기 때문에 원하는 UI를 만들기 위해선 처음부터 스스로 만드는 것을 추천합니다. 이번 챕터에는 코드량이 많아 세세한 코드에 대한 설명은 하지 ..
1. 12월 28일의 학교 정말 매우 매우 바빴다. 당장 모레가 졸업식이기 때문에 예행연습을 해야 했고 학생부 정리와 짐 정리도 끝내야 했다. 또한 공로상과 장학금 수여도 오후 2시에 있었기 때문에 이것도 신경을 써야 했다. 사실 이날은 2시에 조퇴를 한 후 경건한 마음으로 우테코 메일을 기다리려고 했다. 하지만 바쁜 학교의 업무 덕에 그럴 여유가 없었다. 오히려 다행인 건가? 너무 바쁘다 보니 시간 가는 줄 몰랐다. 공로상과 장학금 수여가 끝나니 2시 반이 되었고 일찍 조퇴하는 것은 힘들다 생각하여 학교에서 남은 업무를 처리하면서 기다리기로 했다. 시간은 어느덧 2시 55분, 곧 우테코에서 최종 합격에 대한 메일이 발송된다. 일부로 신경을 쓰지 않은 채 업무에 집중을 하고 있었다. 하지만 내 눈은 컴퓨..
이전 챕터에서 Schedule, Date Picker을 만들었지만 월(month)을 이동할 수 없어 이전, 다음 달을 볼 수 없는 아쉬움이 있었습니다. 이번 챕터에서는 이를 개선하고자 Shift Month Button을 만들어보겠습니다. 1. Calendar class에 기능 추가하기 Calendar class의 private filed을 보면 #year, #month가 있습니다. 이를 바탕으로 현재 년, 월에 해당하는 날에 대한 데이터를 getCalendarStorage() 메서드에서 만들고 있습니다. 때문에 월(month)을 이동하기 위해선 #month 값을 업데이트해야 합니다. 이와 관련된 로직을 Calendar class에 다음과 같이 추가합니다. // Calendar.ts shiftMonth =..
1. 유효한 상태 효과적으로 타입을 설계하기 위해서, 유효한 상태만 표현할 수 있는 타입을 만들어 내는 것이 가장 중요하다. 여기서 말하는 유효한 상태란 무엇일까? 유효의 사전적 의미를 살펴보면 다음과 같다. 효력이나 효과가 있음. 즉, 효력이나 효과가 있는 상태가 유효한 상태라고 할 수 있다. 프로그래밍 관점에서 살펴보면 어딘가에 사용될 수 있는 상태이다. 다음과 같은 상태가 있다. interface State { a: string; b: string; c?: string; d?: string; } 이와 같은 상태는 다음과 같이 여러 가지 상태를 포함한다. interface StateOne { a: string; b: string; } interface StateTwo { a: string; b: st..
이전 챕터에서 shift Month Button를 통해 이전과 다음 달로 이동할 수 있게 되었습니다. 그렇다면 다음과 같은 경우엔 어떻게 해야 할까요? 오늘이 2023년 10월 31일인데 2020년 10월의 달력을 보고 싶다. 버튼을 36번 클릭하여 3년 전으로 이동해야 합니다. 너무나 많은 버튼 클릭입니다. 사용성도 많이 떨어집니다. 사용자는 간단하게 자신이 원하는 년(year), 월(month)로 이동하는 것을 바라고 있습니다. 이를 이번 챕터에서 Navigation 기능을 추가하면서 해결합니다. 1. Calendar class에 기능 추가하기 이전 챕터에서는 shiftMonth 메서드를 추가하여 월(month)을 이동할 수 있게 했습니다. 하지만 매개변수로 next, prev, today를 받기 때..
지금까지 하나의 파일(webpack.config.js)에서 환경(dev, prod)에 대한 웹팩을 설정하였다. 환경에 따른 분리가 필요하면 삼항연사자를 사용한다. 아직은 파일이 크지 않아 삼항연산자도 충분하다. 하지만 앞으로 설정이 많아지고 복잡해지면 삼항연산자로 인한 환경 구분은 상당히 피로감을 줄 수 있다. 때문에 환경에 따라 파일을 분리하는 것이 효율적이다. 웹팩으로 리액트 시작하기 네 번째 파트에서는 환경에 분리하여 웹팩을 설정하는 과정을 다룬다. 다음의 글은 웹팩 공식문서를 참고하여 작성했다. Production | 웹팩 Production | 웹팩 웹팩은 모듈 번들러입니다. 주요 목적은 브라우저에서 사용할 수 있도록 JavaScript 파일을 번들로 묶는 것이지만, 리소스나 애셋을 변환하고 번..
새로운 버전의 티처캔에서 타이머를 구현하게 되었다. 이전 버전에서도 타이머를 구현했기에 큰 어려움은 없었으나 이전 버전에서 미처 발견하지 못한 문제와 타이머 폰트 크기에 대한 문제가 생겨 이에 대해 기록을 남기고자 한다. 1. 백그라운드에서의 타이머 첫 번재 문제는 '백그라운드에서의 타이머'라고 할 수 있다. 타이머가 실행 중인 탭이 아닌 다른 탭으로 이동되었을 때(탭이 비활성화되었을 때), 타이머를 구현하기 위해 사용한 'setInterval'함수는 백그라운드의 탭의 자원 사용을 최소화하기 위해 'setInterval'의 콜백 함수의 호출 시간이 지정된 시간보다 늦어질 수 있다. 즉 예를 들어, 1000ms 마다 콜백 함수를 호출하는 것을 원했으나 그보다 더 긴 시간인 2000ms마다 호출되는 것이..
프론트엔드 성능 베이스캠프는 우아한테크코스 레벨 4 웹 성능 미션을 바탕으로 마주한 문제를 해결한 과정을 다룬다. 그중 첫 번째는 요청 크기 줄이기이다. 요청 크기라고 하면 다음과 같은 것들을 생각할 수 있다. 소스코드 이미지와 같은 assets 파일 폰트 이 중 소스코드와 이미지와 같은 assets 파일의 크기를 줄여보도록 한다. 성능 테스트에 사용되고 개선되는 코드는 여기에서 확인할 수 있다. 또한 해당 시리즈에서는 특별히 언급을 하지 않는 이상 성능 측정 환경은 dev 환경이다. 1. 소스코드 크기 줄이기 1-1. 기존 소스코드 크기 서비스를 실행하게 되면 bundle.js가 불러와진다. bundle.js 크기를 비교하기 전 package.json의 scripts를 다음과 같이 수정하자. { "sc..
