본문 바로가기

IT193

Node 버전 간편하게 관리하기 개요 개발하다보면, 프로젝트 마다 node version을 다르게 가져가야 하는 상황이 온다. 어떤건 v12, 또 어떤건 v14.. node 초보인 나는 이 상황을 어떻게 해야할지 난감했다.. 분명 python, java처럼 쉽게 변경할 수 있는 무언가가 있을거라 확신했다. 구글링으로 간편하게 node 버전을 변경할 수 있는 방법을 찾아 짧게 정리한다. 현 노드 버전 확인 which node /Users/user/.nvm/versions/node/v14.19.0/bin/node node --version v14.19.0 노드 설치 v12 중 최신 버전 설치 nvm install v12 설치된 노드 확인 nvm ls v12.14.1 v14.19.0 system default -> 12.14.1 (-> v1.. 2023. 6. 23.
pnpm 기본 개념 특징 disk 공간 절약 및 설치 속도 향상 yarn npm에 비해 빠름 이유는 패키지를 복사해서 사용하는 대신에 Hard link를 사용하기 때문. 그렇기에 공간도 덜 차지 패키지의 버전 하나는 한개의 복사본만 존재하고 그 파일의 링크를 node_modules에 추가 만약 lodash 사용하는 100개의 프로젝트가 있다면 npm이나 yarn은 100개의 Lodash를 가지고 되지만, pnpm은 한 개의 Lodash만 갖게 된다. flat하지 않는 node_modules npm과 yarn은 의존성 설치 시 모든 페키지가 root으로 hoisted되어, 직접적으로 의존성을 추가하지 않는 페키지도 사용할 수가 있다. pnpm는 직접 의존성을 추가한 페키지만 root에 추가될 수 있도록 symlink를 사용한.. 2023. 6. 23.
eslint & prettier 적용하기 개요 eslint와 prettier가 무엇이고 왜 설치해야하는지 알아보자. 마지막으로 적용까지 해보면서 눈으로 확인해보자. eslint 한마디로 요약하자면, 코드 정적 분석 툴이다. 코드가 문법에 맞게 코딩이 되어 있는지, 내가 세팅한 규칙에 위반되어 있지 않은지 확인해주는 툴이다. 개발할 때 필수로 설치하는 툴이다. prettier 내가 짠 코드를 좀더 깔끔하게 정리해주는 코드이다. 각자 깔끔의 기준이 다르기에 하나로 통일할때 사용한다. 코딩 컨벤션 용도로 사용하고 eslint와 같이 사용하여 시너지 효과를 낸다. eslint에 pretter를 plugin으로 추가하여 eslint 돌릴 때 prettier도 같이 돌아가게끔 설정할 수 있다. 설치 npm i -D eslint prettier eslint.. 2023. 6. 23.
Sentry 개념 정리 장점 두가지 - 소스 맵과 연동하여 릴리즈 환경에서도 소스코드의 어느 위치에서 에러가 발생했는지 상세하게 파악 가능. 릴리즈 배포에서는 코드가 알아보고 힘들기 때문 (map 파일 미포함 및 난독화) - Breadcrumbs 기능 제공. 즉, 이슈 발생하면 UI 클릭이나 Ajax요청과 같이 사용자가 무슨 활동을 하다가 에러 발생했는지 파악 가능 사용해보고 느낀점 FE에서 필수 툴이라고 말할정도로 운영 시 꼭 필요한 모니터링 툴이다. Production에 배포하면 JS파일은 minified되어서 사람이 알아보기 힘들고, 축약된 코드에 대한 에러 로그도 알아보기 힘들다. Sentry가 이 부분을 해결해주기 때문이다. 유료라는 부분이 아쉽지만 대안은 딱히 찾을 수 없다. minified를 안하면 위의 문제점은 .. 2023. 6. 23.
Web - Largest Contentful Paint 개념 뷰포트에서 가장 큰 콘텐츠 요소가 표시되는 시점을 측정1 해당 시점에 따라 UX에 엄청난 영향을 끼칩니다. 느리면 느릴 수록 사용자가 메인 컨텐츠를 보기에 많은 시간을 기다려야 하기 때문이죠. 예를 들면, 영상을 보는 페이지에 접근한다고 가정해봅시다. 영상을 보기 위해 페이지에 접근 후 영상은 로딩중이고 그 외의 UI만 노출되고 있다면 사용자는 영상이 보여지기 전까지 기다려야 하는 상황입니다. 다른 UI는 의미가 없죠. 이래서 LCP가 중요합니다. 성능 기준 좋음 ~ 2.5sec 성능 개선 필요 2.5 sec ~ 4.0 sec 나쁨 4.0 sec ~ 개선 방법 SSR CSR로만 되어 있다면 SSR를 고려해볼 필요가 있다. 느린 서버 응답 시간 Time to First Byte를 확인해 볼 필요가 있.. 2023. 6. 23.
React - Code splitting using 'Loadable' 요약 code splitting은 서비스 출시 전에 꼭 챙겨야 하는 기술이다. 이걸 적용하지 않으면, 사용하지 않는 모든 페이지에 대한 코드를 다운로드하고, 페이지가 그려지기 때문에 처음 페이지 접속 시 유저가 오랫동안 기다려야 하기 때문이다. 물론 요즘 인터넷이 빨라서 참을 수 없을 만큼은 아니지만, 해당 기술을 적용하기 전과 후를 비교해보면 확실히 알 수 있을 것이다. 동작 방식 /home 에 접근시, 해당 페이지에서 꼭 필요한 파일들만 받아와서 페이지를 그려준다. 그리고 다른 path로 페이지 이동 시 해당 path에 필요한 파일을 추가로 받아 페이지를 그린다. 적용 위치 해당 기술은 SSR(Server Side Rendering)에서와 CSR(Client Side Rendering) 모두 적용이 .. 2023. 6. 23.

티스토리툴바