CRA(create-react-app)환경에서 .env, 환경 변수 사용하는 방법

일단 결론적으로 말하면 CRA에 .env가 내장되어 있어 따로 설치가 필요없습니다. .env 파일을 생성한다. pakage.json과 같은 위치에 생성. (변수명) = (변수값) 을 지정하는 데, 변수명 앞에 REACT_APP 을 붙여준다! REACT_APP_API_KEY = "rqe5rqerqerqereqreqrq" //이런식으로 적어준다. 사용할 땐 process.env.REACT_APP_API_KEY로 사용하면 완료. 이 글을 적는 이유는 CRA 환경에서 처음 .env를 사용해 봐서 생각없이 npm i dotenv 설치하고 import 해서 사용하니 오류가 뜨더라. 무슨 이유인지 도통 모르겠어서 열심히 검색해본 결과 새로 설치하면 기존 버전과 달라서 그런지 웹팩 폴리필 설정을 새로 해주어야한다.. ..

• format_list_bulleted Front End/React
• · 2023. 6. 16.
• textsms

백준 JS 자바스크립트 2573번 빙산. BFS

https://www.acmicpc.net/problem/2573 Bfs함수를 따로 만들고, 시간이 한번 지날때 바뀌는 빙산의 모양을 만드는 nextYear함수를 따로 만들어서 공략했습니다. 함수를 따로 만들면 이해하기가 쉽습니다. let fs = require('fs'); let input = fs.readFileSync('/dev/stdin').toString().trim().split("\\n") const [N,M] = input.shift().split(" ").map(Number) let iceberg = input.map(v => v.split(" ").map(Number)) const next = [[1,0],[-1,0],[0,1],[0,-1]] let count = 0 while(true..

• format_list_bulleted 알고리즘/백준
• · 2023. 6. 16.
• textsms

하루 30분 모던 자바스크립트 딥 다이브. 전역 변수의 문제

변수의 생명주기 변수는 호이스팅에 의해 가장 먼저 실행된다 전역 변수가 아닌 지역 변수일 경우, 함수가 실행된 직후 먼저 실행이 된다. 즉 지역 변수의 생명 주기는 함수의 생명 주기와 같다. 하지만 지역 변수가 함수보다 오래 생존하는 경우도 있다. 변수의 생명 주기는 메모리 공간의 확보 > 메모리 공간이 해체 > 가용 메모리 풀에 반환 되는 시점을 말한다. 따라서 변수는 자신이 등록된 스코프가 소멸(메모리 해체)될 때 까지 유효하다. 할당된 메모리 공간은 더 이상 그 누구도 참조하지 않을 때 가비지 콜렉터에 의해 해체> 가용 메모리 풀에 반환된다. 아래의 내용을 이해하자. var x = 'global' function foo(){ console.log(x); var x = 'local' } foo(); ..

• format_list_bulleted 기술 서적/하루 30분 모딥다
• · 2023. 6. 14.
• textsms

백준 JS 1005번 ACM Craft. DP

첫 번째 풀이 DFS + DP 풀이로 접근하면 해결되지 않을까 생각하고 풀었다. let fs = require('fs'); let input = fs.readFileSync('/dev/stdin').toString().trim() .split("\\n"); const T = +input.shift(); class Next{ constructor(){ this.obj = {} } push(X,Y){ if(this.obj[X] === undefined){ this.obj[X] = {before : [], after : []} } this.obj[X].after.push(Y) if(this.obj[Y] === undefined){ this.obj[Y] = {before : [], after : []} } th..

• format_list_bulleted 알고리즘/백준
• · 2023. 6. 9.
• textsms

백준 JS 2565번 전깃줄 DP

첫 번째 풀이 가장 많이 꼬인 전깃줄을 차례로 제거하면서 꼬인 줄이 없을 때 까지 반복한다. let fs = require('fs'); let input = fs.readFileSync('/dev/stdin').toString().trim().split("\\n") const N = +input.shift() let data = input.map(v => v.split(" ").map(Number)) let countArr = Array.from({length:N},(v,i)=>[i,[],0]) for(let i=0; i end2)){ countArr[i][1].push(j) countArr[i][2]++ } } } } let answer = 0; while(true){ const deleteIndex ..

• format_list_bulleted 알고리즘/백준
• · 2023. 6. 9.
• textsms

백준 JS 1520번 내리막 길. DP + DFS

첫 번째 풀이 단순하게 DFS로 풀었다. 이 문제의 경우 DFS로만 풀게되면 시간초과가 나게 되어있다. 시간초과가 나지 않게하기 위해 never라는 배열을 만들어 절대 가지 못하는 길을 체크했다. 그래도 여전히 시간초과가 남. 갈 수 있는 길을 방문 했을 경우 멈추는 것이 아니라 끝까지 방문하는 알고리즘이여서 그런 듯. let fs = require('fs'); let input = fs.readFileSync('/dev/stdin').toString().trim().split("\\n") const [M,N] = input.shift().split(" ").map(Number) const data = input.map(v => v.split(" ").map(Number)) const arr = Arra..

• format_list_bulleted 알고리즘/백준
• · 2023. 6. 9.
• textsms