JSDoc이란? JSDoc은 Javadoc 또는 phpDocumentor와 유사한 javascript용 API 문서 생성기이다. 코드 자체와 함께 소스코드에 직접 문서 주석을 추가한다. VSCode에서 순수한 자바스크립트 소스코드에 @ts-check 를 주석으로 추가하면 typescript처럼 타입 및 에러 체크가 가능하다. 주석을 사용하여 함수에 대해 설명하거나, @ts-check를 이용하면 설명과 어느정도의 에러 체크가 가능하지만, JSDoc의 태그를 사용하여 더 많은 정보를 제공할 수 있다. 예를 들어 함수가 클래스의 생성자인 경우 아래와 같이 사용할 수 있다. /** 이 함수는 Book클래스의 생성자이다. */ function Book(title, author) {} /** * 책을 의미하는 함수..

자바스크립트의 타임존 지원은 다른 언어들에 비해서 부실하다는 이야기가 있다. 사실 크게 와닿지는 않는다. 글로벌 서비스를 진행해본적도 없고.. 생각도 안하고있었기 때문... Timezone이란? 타임존은 동일한 로컬 시간을 따르는 지역(우리나라 같은 경우는 서울이나 부산이나 시간이 똑같다.)을 의미하며, 주로 해당 국가에 의해 법적으로 지정된다. 보통 국가별로 각자의 고유한 타임존을 사용하고 있으며, 미국처럼 면적이 넓은 나라의 경우 지역별로 다른 타임존을 사용하기도 한다. GMT(Greenwich Mean Time) 한국의 타임존은 보통 GMT+09:00 으로 표현한다. 경도 0도에 위치한 영국의 그리니치 천문대를 기준으로 하는 태양 시간을 의미한다. GMT 시간은 1925년 2월 5일부터 사용하기 시..

Nomad 코더 무료강의로 Nestjs를 한번 쭉 진행해봤다. Nestjs는 빠르게 서버를 구성할 수 있고 편리하게 제공되는 여러가지 기능이 있어서 분명 좋은 프래임워크인 것 같았다. 하지만 빠르게 구축 해보려다가 백엔드의 지식이 좀 많이 없는 것 같고 레퍼런스도 적어서 Express로 다시 시작해보려고 한다. 이전에 한번 tutorial을 진행해보았으나, 잘 기억도 안나고 typescript 환경까지 추가해서 해보려고 한다. Node.js란? 유투브, 강의, 블로그 글 등 Express를 들어가기전에 항상 Node.js의 개념부터 시작한다. 뭐 대충 Node.js가 다른 애플리케이션들을 실행할 수 있게 해주는 녀석이다 정도로는 알고 있지만, 저 말은 아직 확 와닿지는 않는다. 공식문서에 따르면 Node..

Backend를 공부해보자 마음먹고 미루고 미루다가 드디어 시작하기로 마음먹었다. Front 공부만하기도 벅차지만 그래도 맛은봐야지 않겠는가 예전에 Django를 이용해서 니꼬쌤 강의를 들으면서 airbnb 클론 코딩을 진행해본적이 있기도 하고, 지금 회사에서 serverless lambda function의 기반을 python으로 두고 있어서 다시 장고나 python 관련 프레임워크로 진행하려고 했으나, 백엔드를 내가 실무를 치고 있는 것도 아니고, Django를 해본지는 너무 오래되기도 했고, 지금 내가 가장 편하게 할 수 있는건 javascript 기반 프레임워크라고 판단돼서 Nest JS를 선택했다. NestJS 특징 사용, 학습이 간단하다. 생산성 향상 및 개발 단순성을 위한 강력한 CLI가 존..

useQuery export function useQuery TQueryFnData TQueryFnData는 useQuery로 실행하는 query function의 반환값을 정하는 제네릭 타입이다. TError TError는 query function의 error 형식을 정하는 제네릭 타입이다. TData TData는 data에 담기는 실질적 type을 뜻한다. useQuery의 select option으로 query function의 데이터를 2차 가공하는 경우에만 사용하는 type이다. 데이터 속성이 query fu..

useMutation query와 달리 mutation은 일반적으로 데이터를 CREATE/UPDATE/DELETE 하거나 서버 부작용을 수행하는데 사용된다. 서버 데이터를 가져오는 것은 reactive하게 동작하는 useQuery를 사용하면 되지만, 서버 데이터를 업데이트하고 생성하고 삭제하는 것은 적절하지 않다. useQuery처럼 onSuccess, onError, onSettled 콜백을 전달할 수 있으며 mutate를 호출했을 때 실행할 onMutate 콜백도 사용할 수 있다. useQuery와 마찬가지로 많은 옵션을 제공하지만 너무 많다. 자세한 내용은 공식문서를 참조하자 const { data, isLoading, mutate, mutateAsync } = useMutation(mutation..

React Query란? React Query는 데이터 Fetching, 캐싱, 동기화 서버 쪽 데이터 업데이트 등을 쉽게 만들어주는 React 라이브러리 이다. Redux, Recoil, Mobx 등의 상태관리 라이브러리들로도 충분히 가능하지만, 클라이언트 쪽의 데이터들을 관리하는데에 있어서 적합할 수는 있어도 서버 쪽의 데이터들을 관리하기에는 여러가지 처리등이 필요한 점들이 있어서 등장하게 되었다. 예를 들어서, 같은 페이지를 바라보고 있는 관리자가 있을 때, 한 관리자가 유저의 데이터를 변경하면, 다른 관리자도 그 유저의 변경된 데이터를 확인할 수 있어야 한다. 설치 최근 v4로 업그레이드 되면서 yarn add react-query or npm i react-query 이었던 설치 command가..

MUI의 모든 컴포넌트들은 기본적으로 style이 지정되어있다. 스타일을 변경하기 위해서 여러가지 방법이 존재한다. class명을 지정해서 css파일을 통한 지정 // test.css .test { backgroundColor:'white'; } // test.jsx const Test = () => { return hi } 컴포넌트 인라인 스타일 조정 // MUI 컴포넌트들에도 inline style을 먹일 수 있다. // ex) // sx와 style의 차이는 이전 글에 https://wonillism.tistory.com/287 [MUI] VS / sx VS style vs mui에 대해 자료를 조사하다보면 성능에 대한 이슈를 종종 찾아볼 수 있다. 그래서 과거의 글들을 찾아보면 Box보다는 div..