전체 글

🧐 문제상황.env 파일에 변경사항을 반영하고 npm run dev 해서 실행하였는데도 변경 전 값으로 유지되고 있음.vite.config.js에서 env 값을 콘솔로그를 찍어보니 변경전으로 값이 나옴import { defineConfig, loadEnv } from 'vite';import react from '@vitejs/plugin-react';import tsconfigPaths from 'vite-tsconfig-paths';export default defineConfig(({ mode }) => { const env = loadEnv(mode, process.cwd()); console.log(env); // env 환경변수 값 확인 로그 return { plugins: [re..

11/23 일 구름유니브에서 진행한 단풍톤 활동에서, 배포를 진행할 때 생겼던 이슈에 대해 정리를 해보겠습니다. 상황 설명프론트 작업이 어느정도 완료 되었을때, Vercel에 배포를 진행하기로 했습니다. Organizations에 팀 레포를 배포를 하기 위해, 개인 레포에 가져와서 배포를 진행했습니다. 레포에는 main, develop, feature/ ... 이렇게 브렌치가 구성이 되어있었는데, develop 브랜치에 모든 작업물들이 반영되어 최신상태여서 main까지는 올리지 않은 상태라 develop 브랜치를 Vercel에 올리기로 하였습니다.  그래서, 포크떠온 개인 레포에 setting > General > default branch를 develop 으로 변경을 하였습니다. **  github의 ..

Chapter 05. 클로저5-1 클로저의 의미 및 원리 이해클로저: 어떤 함수에서 선언한 변수 a를 참조하는 내부함수를 외부로 전달할 경우 외부함수의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상외부 함수의 변수를 참조하는 내부 함수 (1)var outer = function () { var a = 1; var inner = function() { console.log(++a); }; inner();};outer();inner 함수에 a를 선언하지 않았기 때문에 environmentRecord에서 값을 찾지 못하여→ outerEnvironmentReference에 지정된 상위 컨텍스트인 outer의 LexicalEnvironment에 접근하여 a 찾음o..

Chapter04 - 콜백 함수4 - 1 콜백 함수란?콜백 함수: 다른 코드의 인자로 넘겨주는 함수→ 제어권과 관련이 깊다.→ 다른 코드에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수4 - 2 제어권4-2-1 호출 시점setInterval 예제var count = 0;var timer = setInterval(function() { console.log(count); if ( ++count > 4 ) clearInterval(time);}, 300);setInterval 구조var intervalID = scope.setInterval(func,delay[, param1, param2, ...]);매개변수 : func(함수), delay(ms 단위의 숫자) , 나머지(param1, pa..

Chapter 03 - this3-1 상황에 따라 달라지는 this→ this는 함수를 호출할 때 결정된다.→ 함수를 어떤 방식으로 호출하느냐에 따라 값이 달라지는 것3-1-1 전역 공간에서의 this전역 공간에서 this는 전역 객체를 가르킨다.전역 객체는 자바스크립트 런타임 환경에 따라 이름과 정보를 가짐.전역객체 : 전역 컨텍스트 생성 주체(브라우저 : window , node.js : global)(참고) 자바스크립트의 모든 변수는 실은 특정 객체의 프로퍼티(실행 컨텍스트의 LexicalEnvironment) 로서 동작한다.전역변수와 젼역객체(1)var a = 1;console.log(a); // 1console.log(window.a) // 1console.log(this.a) // 1→ 자바스..

2-1 실행 컨텍스트란 ?실행 컨텍스트 : 실행할 코드에 제공할 환경 정보들을 모아놓은 객체→ 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성.→ 콜 스택에 쌓아올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행하는 식( 전체 코드의 환경과 순서를 보장)스택 : 출입구가 하나뿐인 깊은 우물 같은 데이터 구조→ a,b,c,d를 저장했다면 d,c,b,a 순으로 꺼낼 수 밖에 없다. (LIFO)큐 : 양쪽이 모두 열려있는 파이프 구조→ 종류에 따라 양쪽 모두 입력과 출력이 가능하나, 한쪽은 입력만 다른 한쪽은 출력을 담당.→ a,b,c,d,를 저장했다면 a,b,c,d 순으로 꺼낸다.(FIFO) 2-1 실행 컨텍스트와 콜 스텍var a = 1;function ou..