전체 글84 [Next, vitest] Next.js에 vitest 적용해보기(기록용) 목차 개요next.js를 통해 개발을 하던 중 vitest를 사용해 테스팅을 해보고싶었다 그래서 처음부터 설정까지를 다시 복기하려고한다. 사용 버전nextjs : 15.0.3react : "^18" 설치https://nextjs.org/docs/app/building-your-application/testing/vitest Testing: Vitest | Next.jsLearn how to set up Vitest with Next.js for Unit Testing.nextjs.orgnext.js 15버전을 통해 개발할거기때문에 버전에맞는 공식문서에서 vitest를 어떻게 사용하라하는지 문서를 확인하였다. vitest.config.mts 파일 제작공식문서에선 해당 파일을 root에 만들라고한다.. 2024. 12. 4. [fork, nvm] fork와 환경변수충돌(?) 기록용 목차 개요개발을하면서 커밋을하고 fork앱에서 push를 할 때 생긴 일이 있는데 husky의 pre-push 를 할때 아래와 같이 파일을 세팅하였는데pnpm이 없다라고하는 일이 일어났었다.pnpm lintpnpm tsc husky 이슈를 찾아보기https://github.com/fork-dev/Tracker/issues/311 Pre-commit hook can't find node · Issue #311 · fork-dev/TrackerHey there, I'm using husky to run a pre-commit hook on my repo, and everything runs correctly in my terminal when I run git commit -m "some messa.. 2024. 12. 2. [npm] npm 회원가입 목차https://www.npmjs.com/ npm | HomeBring the best of open source to you, your team, and your company Relied upon by more than 17 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free npm Registry has become the center of Javawww.npmjs.com 회원가입 하기https://www.npmjs.com/signup npm | Sign Up www.npmjs.com회원가입 폼에서 등록한 이메일로 온 password입.. 2024. 12. 1. [turbo, tailwind] TurboRepo에 HeadlessUI를 사용해보기(기록용) 목차 서론여러 프로젝트를 개발하다보면 여러 디자인들이 필요한 경우가 많다. MUI나 Antd, BootStrap 등 그 디자인을 이쁘게 맞춰주는 프레임워크, 라이브러리 들이 있지만 한계치는 존재한다. 그래서 그 부분을 해결할 라이브러리를 찾던중 tailwindlabs에서 만든 headlessui라는 라이브러리를 찾게 되었다. HeadlessUI?https://github.com/tailwindlabs/headlessui GitHub - tailwindlabs/headlessui: Completely unstyled, fully accessible UI components, designed to integrate beautifully with TaCompletely unstyled, fully acce.. 2024. 12. 1. [TS]@types 목차 @types란타입스크립트 프로젝트에서 외부 라이브러리의 타입 정보를 제공하기 위해 사용되는 타입 정의 패키지의 표준 네임스페이스.타입스크립트는 타입 정보를 포함하지 않는 일반 자바스크립트 라이브러리로도 사용할 수 있는데, 이 때 타입 정보를 @types 패키지로 별도로 제공하여 타입 안정성을 유지할 수 있게 해준다. @types의 역할과 사용 방식 1. 타입 정의 제공@types 패키지는 DefinitelyTyped라는 오픈 소스 프로젝트를 통해 관리되며, 타입스크립트 커뮤니티가 유지 보수한다.@types 네임스페이스 하위에는 유명한 자바스크립트 라이브러리들의 타입 정의 파일들이 들어 있으며, 라이브러리명과 동일한 이름을 가진다.예를 들어, lodash라는 자바스크립트 라이브러리를 타입스크립트에서.. 2024. 11. 2. 엠비언트 타입(Ambient Type)(.d.ts) 목차 엠비언트 타입이란?코드 외부에서 정의된 객체, 라이브러리, 전역 변수 등의 타입을 명시하기 위해 사용주로 타입 정의 파일(.d.ts)로 제공되며, 외부 모듈이나 브라우저 API 같은 것을 사용할 때 타입을 명확히 하기 위해 사용함. 이 방식으로 타입스크립트 코드가 특정 환경의 정의를 알 수 있도록 돕고, 타입 안정성을 유지할 수 있게 한다..d.ts 확장자를 가진 파일에서는 타입 선언만 할 수 있으며 값을 표현할 수는 없다. 엠비언트 타입의 주요 사용 사례외부 라이브러리 정의 : @types 패키지를 통해 사용되는 외부 라이브러리의 타입을 정의한다.전역 객체 정의 : 프로젝트에서 정의한 전역 변수, 함수, 객체의 타입을 명시할 때 활용 한다.모듈 보강 : 외부 모듈에 새로 추가된 API나 보강할 .. 2024. 11. 2. [git,husky] husky, lint-staged는 무엇인가? 목차 Husky를 알기에 앞서Husky를 알기에 앞서 일단 "git hook"이라는 것을 알아야한다.git hook?git hook은 git의 특정 이벤트가 발생하는 것에 반응하여 자동으로 실행하는 스크립트이다. ex) commit, push git hook의 단점- 설정이 까다롭다.- 팀원들이 사전에 레포지토리를 clone을 받고 정식 절차를 거쳐야 hook이 실행됨을 보장한다. 위의 단점을 커버하는 방법?git hook을 반드시 적용하게 끔 할 수있는 방법이 있을까?이럴 때 사용하는게 husky라고 한다. Husky?https://typicode.github.io/husky/ Husky typicode.github.io위는 허스키에대한 홈페이지 이다.내용을보면 자동으로 커밋메시지, 코드 등을 .. 2024. 8. 13. [TS,라이브러리] Effect-TS 알아보기 목차 서론https://www.youtube.com/shorts/2W1fQH0wEe4https://www.youtube.com/shorts/MzFCHctD0lMhttps://www.youtube.com/shorts/MzFCHctD0lM 제로초 선생님의 유튜브를 보는 도중 effect라는 라이브러리의 존재를 알게 되었다. 제로초 선생님의 말을 빌리자면 타입스크립트의 새로운 표준이 될 수 있는 라이브러리라고 한다. Effect 라이브러리란?Effect는 개발자들에게 복잡하고, 동기,비동기 한 프로그램에 도움을주고자 한 강력한 TS라이브러리라고한다. Docshttps://effect.website/https://effect.website/docs/introductionhttps://github.com.. 2024. 7. 28. [TS] 커스텀 유틸리티 타입 활용하기 목차 커스텀 유틸리티 타입?타입스크립트로 프로젝트를 진행하다 보면 표현하기 힘든 타입을 마주할 때가 있다. 원하는 타입을 정확하게 설정해야만 해당 컴포넌트, 함수의 안전성과 사용성을 높일 수 있지만 타입스크립트에서 제공하는 유틸리티 타입만으로는 표현하는데 한계가 있다.이럴때 유틸리티 타입을 활용한 커스텀 유틸리티 타입을 제작해서 사용하면 된다. 커스텀 유틸리티 타입 종류유틸리티 함수를 활용해 styled-components의 중복 타입 선언 피하기리액트 컴포넌트를 구현할 때 여러 옵션을 props로 받아 유연한 컴포넌트로 만들 수 있다.ex) background-color, size 등등이와 같은 props는 styled-components에 전달되며 styled-components에도 해당 타입을.. 2024. 7. 28. [vscode, prettier] vscode에서 프리티어 자동저장 시키기 목차 vscode에서 prettier를 자동 적용 시키게해보자프로젝트 내부에서 사용하고있는 .prettierrc파일이 있다. 하지만 파일을 저장할때 저장이안되는 이슈가있었다. 적용방법익스텐션 설치익스텐션 Prettier - Code formatter를 설치해준다. 프로젝트 루트에 .prettierrc파일 추가프로젝트 루트에 해당 세팅을 추가해준다. VScode 세팅에 Default Formatter 설정맥기준 [command + , ] 명령어를 통해서 설정을 열어준다.그리고 default formatter를 검색후 우측의 Editor: Default Formatter에 Pretteir를 적용해준다. VSCode 파일저장시 프리티어 설정되게 설정format on save 검색Editor : Forma.. 2024. 7. 12. 이전 1 2 3 4 ··· 9 다음
