github dependabot alert 라이브러리 하나 추가하고 깃허브에 푸시했는데 갑자기 dependabot alert 여러개가 와다닥 떴다. 그 중 몇개는 서버에서 쓰는 jsonwebtoken의 버전을 upgrade하라는 alert였다. 그래서 jsonwebtoken을 latest 버전으로 업그레이드해주었더니 해결되었다. 사라지지 않는 nth-check alert Inefficient Regular Expression Complexity in nth-check Upgrade nth-check to fix 1 Dependabot alert in client/yarn.lock Upgrade nth-check to version 2.0.1 or later. For example: nth-check@^2..

한 번쯤은 build한 결과물을 열어서 내가 작성한 코드가 어떻게 변환되어 있는지 확인해보자. 프론트엔드 또한 인프라 환경에 관심을 가져야 한다. 특히 웹 서비스의 많은 부분이 컨테이너 기반으로 돌아가기 때문에 도커는 언제든지 공부해두면 무조건 도움이 된다! redux는 flux 패턴을 자바스크립트로 표현한 구현체라고 생각하면 된다. redux-thunk는 까보면 53줄 밖에 안된다.(코드 보기 전부터 겁먹지 말자) React Query뿐만 아니라 SWR 등의 캐시 패러다임의 라이브러리들이 채택하고 있는 전략이 stale-while-revalidate이다. stale-while-revalidate로 최신 상태 유지(꼭 읽어보기) stale-while-revalidate는 1) 캐시된 응답이 오래될 수도 ..

함수 오버로드 몇몇 자바스크립트 함수는 다양한 인수의 개수, 타입을 통해 호출될 수 있다. (eg. Date를 생성하고 인수로 타임스탬프 하나만 받을 수도 있고 월, 일, 연도를 받는 함수를 만들 수도 있다.) 타입스크립트에서는 이를 오버로드 시그니처를 작성함으로써 묘사할 수 있다. 그러기 위해 함수 시그니처 몇 개(보통 2개 이상)를 적은 후 함수 본문을 작성하면 된다. function makeDate(timestamp: number): Date; // 오버로드 시그니처 1 function makeDate(m: number, d: number, y: number): Date; // 오버로드 시그니처 2 function makeDate(mOrTimestamp: number, d?: number, y?: ..

https://www.typescriptlang.org/ko/docs/handbook/2/functions.html Documentation - More on Functions TypeScript에서 함수가 어떻게 동작하는지 알아봅시다. www.typescriptlang.org 함수 타입 표현식 함수를 설명하는 가장 간단한 방법은 함수 타입 표현식이다. function greeter(fn: (a: string) => void) { fn("Hello, World"); } function printToConsole(s: string) { console.log(s); } greeter(printToConsole); (a: string) => void는 문자열 타입 a를 하나의 매개변수로 가지고 반환값이 없는 ..

원티드에서 진행하는 프리온보딩 프론트엔드 챌린지를 듣게 되었다. 사실 이전에 프리온보딩 코스를 수료했었기 때문에 굳이 또 챌린지를 할 생각은 없었다. 하지만 챌린지는 전에 들었던 교육과는 이름만 비슷하지 방식은 완전 다르기도 하고, 계속 혼자 공부하는 것보다 다른 사람과 함께 하는 것이 좋을 거라고 생각해서 신청했다. (강의 기간이 2주로 짧기 때문에 부담도 적었다.) 사전과제로는 간단한 회원가입/로그인, 투두리스트를 만들었다. 신청을 늦게하기도 했고, 그 사이에 기술 과제들이 많아서 거의 사전과제를 못했다. 아직 초반이니 빨리 만들고 추가 과제도 해야겠다. 과제는 이 레포지토리에서 진행할 예정! 오늘은 간단하게 커리큘럼 및 목표 등을 설명하고 사전 과제 코드리뷰를 진행했다. 아래는 그 내용 정리. 강의..

달력 구현에 어떤 라이브러리를 쓸까 고민하다가 가장 무난하고 많이 쓰이는 react-datepicker를 적용해보았다. React Datepicker 설치, 적용하기 라이브러리 설치 yarn add react-datepicker date-fns yarn add -D @types/react-datepicker // or npm install react-datepicker date-fns npm install --save-dev @types/react-datepicker react-datepicker를 설치해준다. 헤더 부분을 커스텀할 때 date-fns를 사용하기 때문에 같이 설치해주었다. typescript를 사용하는 경우 devDependencies에 @types/react-datepicker를 같이 ..

2022년이 되고 설레는 마음으로 목표를 세웠던 게 엊그제같은데 벌써 2023년이 밝았다. 공부도 하고 놀기도 하고 다채로운 경험을 한 해였던 것 같다. 생각해보면 이룬 것이 많이 없긴 하지만 그래도 그동안 느낀 점들을 정리해보려 한다. 2022년을 돌아보면.. 1. 국비지원 교육 수료 내가 했던 프로젝트 중 제대로 된 프로젝트라고는 졸업 작품으로 했던 개인 프로젝트밖에 없었다. 그러다보니 팀 프로젝트는 어떻게 진행해야 하는지는 잘 몰랐다. 그래서 졸업을 하고 바로 취업을 하기보다 국비지원 교육을 들으면서 팀 프로젝트 경험을 쌓아야겠다고 생각했다. 교육을 듣고 총 3번의 프로젝트를 하면서 팀 협업은 어떻게 해야하고, git은 어떻게 쓰는지 알 수 있었다. 프로젝트를 하면서 개발 얘기를 같이 할 동료들도 ..