초보 개발자의 일기

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 ..

스코프체인 함수에서 어떤 값에 접근이 가능한가? 어떤 값에 접근이 불가능한가?라는 것을 의미한다. { } 블록이 기준이 된다. switch (){ } if (){ } const a = () =>{ } 예시 const x = "x"; function c() { const y = "y"; console.log("c"); function b() { const z = "z"; console.log("b"); c(); } } function a() { const x = "x"; console.log("a"); b(); } a(); c(); 이것을 실행해 보면 이라는 에러가 나온다. anonymous => 파일 전체라고 생각하면 된다. 그 이유는 코드를 보면 나온다. a => anonymous b => c => a..

함수 선언 const add= (a,b) => a+b; function calculator(func, a,b){ return func(a,b); } const onClick = () =>{ return ()=>{ console.log('hello') } } const onClick1 = ()=>()=>{ console.log('hello') } 이렇게 함수를 선언하는 방식이다. 함수 호출 add(3,5); //8 calculator(add,3,5); //8 onClick(); 이렇게 알맞게 선언한 함수를 위 코드처럼 호출할 수 있다. 알맞게 선언한 함수 호출은 함수의 리턴값으로 대체하여도 맞다. JS 알맞은 코드 const onClick = () =>{ return ()=>{ console.log('he..