setting

Next.js 프레임워크 기반에서 환경세팅 하기 위한 방법을 기재해본다.  일단 Nextjs 를 설치한다. 설치하기 전 공홈에서 system requirement를 확인한다.  (https://nextjs.org/docs/getting-started/installation ) 그리고 npx create-next-app@latest 입력하여 nextjs를 깐다 ( 설치 시 조건은 아래와 같이 진행 ) TypeScript, Eslint는 사용하기 때문에 무조건 Yes 하고 나머지는 사용자 기호에 맞게 사용하면 될 듯 싶다.  자 이제 air-bnb lint 규칙을 적용하여 코드를 짜고 싶기 때문에  1. eslint-config-airbnb 와 관련 dependency2. eslint-config-airbn..

한동안 개인적으로 하고 있는 일이 있어서 글을 쓰지 못했는데 ... 오랜만에 글을 올리네요 오늘 다룰 내용은 Package manage Yarn 입니다 Yarn berry 라고도 불리는데요 Yarn Berry 는 Yarn의 최신버전을 의미합니다. 정확히 Yarn의 몇 버전부터 Yarn berry라고 부르는지는 기억은 안나네요. 그럼 본론으로 넘어가 Yarn 세팅 방법에 대해 알아볼까요? Yarn 이란? yarn은 페이스북에 만든 package manger로 npm을 개선해서 만들었다. npm 보다 속도, 안정성, 보안성 측면에서 우수하다고 한다. 자세한 사항은 공식 홈페이지와 자료를 찾아보자. Yarn 세팅 방법 1. Node 설치 일단 corepack이라는 package가 필요한데 기본적으로 corep..

들어가기에 앞서 다른 사람들과 협업을 하다보면 프로젝트별로 설정을 하지 않으면 개발자마다 사용하는 에디터 사용환경이 다 제각각이라 혼선이 오는 경우가 상당히 많습니다. 이런 혼선을 피하기 위해서 보통 프로젝트별로 사용환경 설정하는데요. 오늘은 그 사용환경 중 prettier를 프로젝트별로 설정하는 방법에 대해 소개합니다. 참고로 이 방법은 vscode를 이용할 때를 기준으로 작성했습니다만. 다른 에디터도 크게 다를 것 같진 않습니다. 설정방법 1. 프로젝트에서 locally 하게 prettier 설치 프로젝트 루트경로로 이동해서 install 하면 됩니다. ( -g 전역 설치가 아닙니다. ) npm, yarn, pnpm 등 원하는 pacakge manager 이용하면 됩니다. ( 공식 홈페이지 참조 : ..

윈도우 기준으로 작성합니다. 1. cmd 관리자권한으로 실행 2. cmd 창에서 프로젝트 최상단 path로 이동 3. corepack enable 입력 -> 해당 명령어는 프로젝트에서 yarn을 사용할 수 있도록 세팅됩니다. 4. vscode 해당 프로젝트 cmd[powershell]에서 yarn create next-app 을 하고 나면 next 프로젝트 생성 완료 참고 https://yarnpkg.com/getting-started/install Installation | Yarn Yarn's in-depth installation guide. yarnpkg.com https://nextjs.org/docs/pages/api-reference/create-next-app API Reference: c..

NVM Node version Manger의 약자로 NVM을 이용하면 원할 때 Node version을 자유롭게 변경 할 수 있다. NVM 설치법 일단 하단 공식 github에 접속하여 install 을 확인해보면 https://github.com/nvm-sh/nvm GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions - GitHub - nvm-sh/nvm: Node Version Man..

Vite+React+Ts+Lint+Pretteir 를 통해 Fe 세팅을 해보았다. 요즘 웹팩대신 빠른 vite많이 사용한다고 하여 vite를 이용하여 세팅을 해보았다. Npm create vite@latest를 통해 프로젝트 생성 ( 현재 react 18.2.0 version ) 후 ( vite 공식 홈페이지 참조: https://ko.vitejs.dev/guide/ ) 설정한 프론트 환경설정 file Tsconfig.json - { "target": "ES6", // compile 시 어떤 버전의 자바스크립트 버전으로 compile 할지 "lib": ["ES6", "ES2020", "DOM", "DOM.Iterable"], // ts->js로 컴파일 할때 필요한 라이브러리 "skipLibCheck": ..

배경 이번에 회사에서 리액트로 리팩토링을 하게 되는데 컴포넌트를 편리하게 관리할 수 있는 방법이 있을까 고민하다 스토리북을 알게 되었다. 스토리북?🤔 공식홈페이지(https://storybook.js.org/)를 들어가서 쭉 읽어보니 스토리북을 사용하면 아래와 같은 장점들이 있다고 소개 된다! (두구두구) 📝 Develop UIs that are more durable Isolate components and pages and track their use cases as stories. Verify hard-to-reach edge cases of UI. Use addons to mock everything a component needs—context, API requests, device featur..

"2023 토스 Next" 에 지원(채용 테스트)을 했는데 시험전 시험 test 환경을 미리 체험 할 수 있다고 하며 이메일이 왔다. 두근 거리는 마음으로 메일을 열었는데 본인 컴퓨터에서 yarn install yarn start yarn test 명령어가 제대로 먹는지 확인해보라고 했다... 회사에서 npm만 이용해서 처음에 yarn이 뭔지 몰랐다 🙄 ( 토스에서는 yarn을 쓰나보다 .. ) 그래서 찾아보니 Yarn은 Node.js 자바스크립트 런타임 환경을 위해 페이스북이 2016년 개발한 소프트웨어 패키지 시스템이다. npm 패키지 관리자의 대안으로서 Yarn은 페이스북, Exponent, 구글, Tilde의 협업으로 대형 코드의 일관성, 보안, 성능 문제를 해결하고자 개발되었다. ▶️그냥 npm..