자바스크립트 패키지 매니저 패키지를 프로젝트에 설치, 갱신, 삭제하는데 사용되는 도구를 패키지 매니저라고 한다. 자바스크립트의 패키지 매니저는 npm, yarn이 있다. 두가지 모두 패키지 잠금 기능을 지원한다. npm은 package-lock.json을, yarn은 yarn.lock 파일을 패키지 잠금 파일로 사용한다. 즉, 패키지 잠금 파일은 프로젝트에서 어떤 패키지 매니저를 사용하는지에 따라 달라진다. 패키지 관리 매커니즘 npm을 사용하든 yarn을 사용하든 프로젝트의 메타 정보는 package.json을 통해 관리된다. package.json에는 해당 프로젝트가 의존하고 있는 모든 패키지 이름과 버전이 나열되어 있다. 일반적으로 설치되어야 하는 패키지들은 dependencies에, 개발할 때만 ..

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은 어떻게 쓰는지 알 수 있었다. 프로젝트를 하면서 개발 얘기를 같이 할 동료들도 ..

타입스크립트를 프로젝트에서는 많이 사용해봤지만 개념을 제대로 공부해본 적은 없기 때문에 핸드북 내용을 정리해보려 한다. 자료는 공식 타입스크립트 핸드북과 캡틴판교님의 타입스크립트 핸드북을 참고할 예정. 타입스크립트란? 타입스크립트는 자바스크립트에 타입을 부여한 언어이다. 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 변환해주는 컴파일 과정을 거쳐야 한다. 타입스크립트를 써야 하는 이유 에러의 사전 방지 타입스크립트를 사용하면 에러를 사전에 방지할 수 있다. // math.js function sum(a, b) { return a + b; } 위의 코드는 두 숫자의 합을 구하는 함수 코드이다. sum(10, 20); // 30 sum('10', '20'); //1020 숫자 10과 20을..

https://youtu.be/XXseiON9CV0 유튜브 코딩애플님의 영상을 보았다. JWT 토큰을 간단하게 사용해본 적은 있지만 코딩인생을 끝내고 싶지 않았기 때문에 영상 내용을 간단히 정리해보려 한다. 보통 회원 기능을 구현하는 방식에는 2가지가 있다. 세션 방식 토큰 방식 유저가 로그인을 하면 서버에서 입장권을 발급해주고, 서버에 요청할 때마다 입장권을 제출하면 서버에서 입장권을 확인 후 응답을 해주는 것이 일반적인 과정이다. 세션 방식 세션 방식을 사용하면 입장권에 써있는 정보가 많이 없다. 발급 번호 정도만 존재하고, 서버에서는 해당 번호가 서버에 존재하는지 확인 후 통과시킨다. JWT 방식 입장권에 써있는 정보가 많다. 이메일, 이름, 발급일, 유효기간 등. 입장권을 검사할 때 입장권 자체만..