초보 개발자의 일기

들어가며프론트엔드 프로젝트를 하다 보면 ESLint + Prettier 조합은 거의 필수처럼 쓰입니다.그럼 이 조합을 사용하면 되는데 왜 제가 이것을 적용했을까요?Biome에 대하여Biome은 Rust로 개발된 올인원 웹 툴체인입니다.Formatter + Linter + Code Actions 기능을 하나로 통합빠른 속도: Rust 기반이라 Prettier·ESLint보다 훨씬 빠름간단한 설정: 플러그인 잔뜩 설치할 필요 없이 바로 사용 가능에디터 통합: VS Code 같은 에디터에서 자동 포맷·린트·import 정리 지원호환성: Prettier와 높은 호환성, ESLint 규칙도 상당수 지원https://biomejs.dev/ BiomeFormat, lint, and more in a fraction ..

오늘은 새로 프로젝트를 세팅하다 보면 예상치 못한 에러가 한 번씩 튀어나옵니다.저는 최근에 Next.js 15 + React 19 + Tailwind 4 조합으로 환경을 맞추다가 당황스러운 오류를 만났습니다.'JSX.IntrinsicElements' 인터페이스가 없으므로 JSX 요소는 암시적으로 'any' 형식입니다.제 프로젝트에 존재하는 tsx 모든 파일에 이런 오류가 발생하였습니다. 처음에는 단순히 import 문제인가 했는데, 계속 파고들다 보니 원인은 Yarn 3.4.1과 TypeScript 5 버전의 충돌이었습니다.타입스크립트를 인식하지 못해 저 에러가 발생했던 거죠.해결 방법 제가 찾은 가장 간단한 해결책은 TypeScript 버전을 낮추는 것이었습니다.기존: typescript@5.x수정: ..

Pinia란?Pinia는 Vue3에 필요한 Composition API 기반으로 사용할 수 있는 상태 관리라이브러리입니다.기존 Vue에서 사용하던 상태관리는 Vuex였는데 Pinia가 공식적으로 추천하는 상태 관리 라이브러리가 되었습니다. 이번 프로젝트에서 Nuxt3를 적용하기 때문에 Pinia를 채택해 공부하는 중입니다. https://pinia.vuejs.kr/ Vue 3의 공식 Store | Vue.js를 위한 직관적인 스토어직관적이고 타입 안전한 가벼운 그리고 유연한 Vue 스토어pinia.vuejs.kr  Pinia의 장점타입스크립트 기반으로 타입에 대한 안정성이 보장이 된다.가벼운 용량모듈식 디자인으로 모듈화Devtools 지원시작해보기설치yarn add pinia 스토어 설정/store/in..

this는 함수가 호출될 때 정해진다!! 자바스크립트의 this는 다른 언어의 this와는 다르다. this를 콘솔에 찍어보자. 그럼 이렇게 window가 찍히게 되는데 this는 기본적으로 window다. 여기서 window란? window 객체란 window 객체는 웹 브라우저의 창을 나타내는 객체로, 대부분의 웹 브라우저에서 지원하고 있다. 1. 브라우저 안의 모든 요소들이 소속된 객체로, 최상위에 있기 때문에 어디서든 접근이 가능하다고 해서 전역 객체라고도 부른다. 2. 일반적으로 우리가 열고 있는 브라우저의 창을 의미하고, 이 창을 제어하는 다양한 메서드를 제공한다. globalThis js 환경에서는 window node 환경에서는 global이다. 하지만 최근에 globalThis로 합쳐지게..

경고 내용 Warning: `fetch` is not available. Please supply a custom `fetchFn` property to use `fetchBaseQuery` on SSR environments. jest 초기 설정 후 컴포넌트 랜더과정에서 이런 경고를 보았다. 해결법 whatwg-fetch를 설치하여 import "whatwg-fetch"; 사용 중인 파일 제일 윗 라인에 추가해 해결하였다. https://www.npmjs.com/package/whatwg-fetch whatwg-fetch A window.fetch polyfill.. Latest version: 3.6.20, last published: 2 months ago. Start using whatwg-fet..

1. jest 환경 설정 npm install --save-dev jest @types/jest ts-jest jest-environment-jsdom @testing-library/react @testing-library/dom @testing-library/jest-dom npm --save-dev babel-jest @babel/core @babel/preset-env babel.config.cjs module.exports = { presets: [ ['@babel/preset-env', {targets: {node: 'current'}}], '@babel/preset-typescript', ["@babel/preset-react", {"runtime": "automatic"}] ], }; jes..

테스트코드란? 1. 테스트 코드의 작성의 목적 정확성 및 신뢰성 확보 테스팅의 주요 목적은 코드가 올바르게 작동하는지 확인하는 것이다. 다양한 조건 및 입력에서 React 컴포넌트와 코드가 예상대로 작동하는지 확인한다. 수월한 리팩토링 프로젝트가 성장하면 리팩토링이 필요하다 리팩토링 전 테스트코드를 작성하면 최소한의 기준이 만들어진다. 변경사항 또는 최적화가 예상치 못한 버그를 초래하지 않도록 한다. 2. 테스트 코드의 작성의 장점 문서화 및 이해 명확하게 작성된 테스트 코드는 문서의 형태를 이룬다. 내가 작성한 코드가 기획의도를 확실히 반영하는지 확인 가능 기획 내용을 잘 반영하였는지 확인 가능 기획자와의 소통의 도구로도 사용할 수 있다. 다른 개발자들이 테스트코드를 보고 컴포넌트나 함수의 예상되는 동..

호이스팅 자바스크립트에서 코드를 위에서 아래로 읽어가기 전, 변수, 함수, 클래스 등의 선언부를 먼저 읽어 들이는 작업을 말한다. var는 호이스팅이 되면 const x = "x"; console.log(z); var y='gege'; var y; const x = "x"; console.log(z); y='gege'; 이렇게 호이스팅이 된다. 해결법 애초에 호이스팅을 안되게 코드를 작성하는 것이 훨씬 좋다. 이렇게 코드를 고려해서 작성하기 어려우면 eslint를 활용하여 호이스팅 안되게 규칙을 정해 오류를 알려주게 하여 코드를 작성하면 좋다! TDZ TDZ => Temporal Dead Zone 한글로 직역하면 일시적인 사각지대 선언보다 더 위에서 변수에 접근을 하는 것 코드로 예를 들자면 const ..