![]()
자바스크립트를 이용할 때 전역변수를 꼭 사용해야 하는 이유가 없다면 지역변수를 사용해야 한다. 왜 그런지는 이번 글에서 알아보자. 1 - 변수의 생명 주기 변수는 선언에 의해 생성되고 할당을 통해 값을 갖게된다. 그리고 생성이 되었으면 소멸하게 되는데 이를 생명 주기(Life cycle)를 갖는다고 한다. 변수에 생명 주기가 없다면 한번 선언된 변수는 프로그램이 종료되기 전까지 메모리 공간을 차지하게된다. 1-1. 지역 변수의 생명주기 변수는 선언된 위치에서 생성되고 소멸한다. 이를 봤을 때 전역 변수의 생명주기는 애플리케이션의 생명주기와 같다는 것을 알 수 있다. 하지만, 함수 내부(지역)에서 선언된 변수는 함수의 호출에는 생성되고 종료되면 소멸한다. function foo () { var x = "l..
jest를 이용해 api를 테스트하기 위해 코드를 작성하고 테스트를 돌려보다가 제목과 같은 에러를 만났다... 위의 에러는 jest 환경에서 ES6 문법을 이용해 import할 때 발생한다고 한다. 특히 axios의 버전이 업그레이드 되어 컴파일 과정에서 ES Commonjs로 컴파일 되지 않으며 발생하는 문제이다. 이러한 문제를 해결하기 위해 StackOverflow의 글을 참고해 해결했다. 우선 @babel/core, @babel/preset-env, @babel/preset-react, babel-jest 를 설치해주자 npm install @babel/core @babel/preset-env @babel/preset-react babel-jest --save-dev 그리고 babel.config...
![]()
새로운 프로젝트를 진행하며 한 컴포넌트에서 많은 이미지를 사용해야하는 기능 구현을 하게되었다. 각 1번, 2번, 3번, 4번 선택지마다 적게는 5개의 이미지 파일, 많게는 7개의 이미지 파일을 사용자에게 보여주어야 한다. 이미지는 이미지 서버에서 GET 요청으로 가져오는 방식으로 구현하려 한다. 이번 프로젝트에서는 MSW를 이용해 테스트 환경을 구축해서 개발한다. http.get("/champions/duelist", async () => { return HttpResponse.json( { "champions": [ { "id": 1, "imageUrl": "https://대충 이미지 서버 주소/valorant/duelist/ZETT.webp" }, { "id": 2, "imageUrl": "https..
타입스크립트를 이용해 새로운 프로젝트를 진행하던 어느날 처음 보는 에러를 마주쳤습니다. element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ duelist: boolean; recon: boolean; sentinels: boolean; controllers: boolean; nodicision: boolean; }'. no index signature with a parameter of type 'string' was found on type '{ duelist: boolean; recon: boolean; sentinels: boolean; controllers: boo..
1. React-Query 란? React-Query란 서버의 데이터를 가져오거나, 캐싱, 값 동기화 및 업데이트, 에러 처리 등 비동기 과정을 쉽게 할 수 있도록 도와주는 라이브러리이다. 1.1 사용 이유 기존 상태 관리 라이브러리(redux 등)는 클라이언트 상태 관리에는 용이하지만, 서버 상태를 관리하기는 어렵다. 클라이언트에서 사용하는 상태가 변할 수 있는 서버의 상태와 다를 수 있기 때문이다. 즉, API 요청과 비동기 데이터 관리를 좀더 쉽게 하기위해 등장한 것이다. React-Query는 서버의 상태를 불러오고, 불러온 상태를 캐싱하며, 지속적으로 동기화하고 업데이트 하는 작업을 도와준다. 또한 기존 상태 관리 라이브러리를 이용하면 서버의 데이터와 클라이언트 데이터를 store에 공존하게 될..
문제 설명 https://school.programmers.co.kr/learn/courses/30/lessons/172927 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 풀이 방법 해당 문제는 정렬을 이용해 풀이를 진행했다. 중요 코드를 살펴보면각 곡괭이의 광물당 피로도를 저장하는 obj, 갖고있는 곡괭이로 캘 수 있는 광물만큼 보관하는 newMinerals, 광물이 담겨있는 배열에 특정 광물의 갯수를 반환해주는 check 함수이다. 이 문제에서는 sort 메서드와 reduce 메서드를 중요하게 사용했다. sort 메서드의 경우는 광물이 담긴 배..
