본문 바로가기

분류 전체보기

(99)
NODE_ENV와 REACT_APP_ 환경변수란? + 깃허브 토큰 예제 🤔 환경변수란? 환경변수는 프로젝트 전체에서 참조할 수 있는 변수 만들 수 있어 편리하게 이용된다. 환경변수로 변수를 선언하시면 JS파일 내에서 지역변수로 선언한 것 과같이 변수를 참조해 올 수 있다. 기본적으로 NODE_ENV라는 환경변수가 있고, 필요에따라 REACT_APP_으로 시작하는 다른 환경 변수들도 설정할 수 있다. 이 둘에 대한 이야기는 아래에서 각각 더 자세히 다룬다. 💡 NODE_ENV는 현재의 모드를 가르킨다 Node.js의 express 서버를 실행할 때 필요한 변수이다. NODE.ENV는 지금 돌아가고 있는 어플리케이션의 모드를 특성화 시키는 환경변수이다. 보통은 'development'와 'production' 이 두가지 문자열로 등장한다. 아래의 코드를 보면 어떤 식으로 쓰이는..
getItemFromTwoSortedArrays 문제 뜯어보기 🔍 문제보기 문제: 길이가 m, n이고 오름차순으로 정렬되어 있는 자연수 배열들을 입력받아 전체 요소 중 k번째 요소를 리턴해야 합니다. 입력: 인자1 : arr1 인자2 : arr2 인자3 : k 자연수를 요소로 갖는 배열 arr1.length는 m 자연수를 요소로 갖는 배열 arr2.length는 n number 타입의 0 이상의 정수 출력: number 타입을 리턴해야 합니다. 주의사항: 두 배열의 길이의 합은 1,000,000 이하입니다. 어떤 배열 arr의 k번째 요소는 arr[k-1]을 의미합니다. 입출력 예시: let arr1 = [1, 4, 8, 10]; let arr2 = [2, 3, 5, 9]; let result = getItemFromTwoSortedArrays(arr1, arr2,..
powerSet 문제 뜯어보기 🔍 문제보기 문제: 하나의 집합을 의미하는 문자열을 입력받아 각 문자를 가지고 만들 수 있는 모든 부분집합을 리턴해야 합니다. 입력: 인자1 : N string 타입의 공백이 없는 알파벳 소문자 문자열 출력: 배열(arr)을 리턴해야 합니다. arr[i]는 각 부분집합의 원소로 구성된 문자열 주의사항: arr[i]는 각 부분집합을 구성하는 원소를 연결한 문자열입니다. arr[i]는 알파벳 순서로 정렬되어야 합니다. 집합은 중복된 원소를 허용하지 않습니다. 부분집합은 빈 문자열을 포함합니다. arr은 사전식 순서(lexical order)로 정렬되어야 합니다. 입출력 예시: let output1 = powerSet('abc'); console.log(output1); // ['', 'a', 'ab', 'a..
비전공자도 공부하는 컴퓨터 공학 기초 📌 컴퓨터 = 하드웨어 + 소프트웨어 컴퓨터는 하드웨어와 소프트 웨어가 합쳐진 것이다. 하드웨어란 전자 회로 및 기계 장치로 되어 있어 입출력 장치, 중앙처리 장치(CPU), 기억장치 등으로 구성된다. 소프트웨어는 하드웨워 위에서 하드웨어를 제어하며 작업을 수행하는 프로그램이다. 📌 기본구성 요소 출력장치(I/O) 처리된 데이터를 사람이 이해할 수 있는 형태로 출력하는 물리적인 장치 예시) 모니터, 프린터, 스피커 중앙처리장치(CPU) CPU = 산술/논리 연산 장치(ALU) + 제어 장치 + 레지스터 제어장치: 각종 장치의 컨트롤 센터. 프로그램에 따라 명령과 제어 신호를 생성하여 장치들의 동작을 제어한다. 레지스터: CPU의 메모리, CPU에서 사용하는 데이터를 일시적으로 저장하는 장소 저장장치 저장..
orderOfPresentation 문제 뜯어보기 🔍 문제보기 문제: 말썽꾸러기 김코딩은 오늘도 장난을 치다가 조별 발표 순서가 담긴 통을 쏟고 말았습니다. 선생님께서는 미리 모든 발표 순서의 경우의 수를 저장해 놓았지만 김코딩의 버릇을 고치기 위해 문제를 내겠다고 말씀하셨습니다. 김코딩은 모든 조별 발표 순서에 대한 경우의 수를 차례대로 구한 뒤 발표 순서를 말하면 이 발표 순서가 몇 번째 경우의 수인지를 대답해야 합니다. 총 조의 수 N과 선생님이 말씀하시는 발표 순서 k가 주어질 때, 김코딩이 정답을 말 할 수 있게 올바른 리턴 값을 구하세요. 모든 경우의 수가 담긴 배열은 번호가 작을수록 앞에 위치한다고 가정합니다. ex) N = 3일경우, [[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]] 입력: 인자1 :..
웹팩 기본 구조 📌 시작하며 웹팩과 번들의 필요성과 개념에 대한 설명은 링크를 참조 🤔 웹팩의 핵심 개념들 웹팩을 다룬다는 것은 webpack.config.js 파일을 이해하고 작성하는게 사실상 전부다. webpack.config.js 파일만 잘 작성해 놓으면 번들링이 성공적으로 되고 빌드가 완료되는데 이 webpack.config.js파일에 옵션이 너무 많고 복잡해서 생소한 부분이 많다. 일단 웹팩 공식문서에서 제시하는 핵심개념들은 아래와 같다. (각 링크를 클릭하면 공식문서로 넘어간다) Entry(엔트리) Output(출력) Loaders(로더) Plugins(플러그인) Mode(모드) Browser Compatibility(브라우저 호환성) 💡 웹팩의 모양 웹팩 설정 파일의 아주 간단한 모습은 아래와 같다. 아래는..
번들링과 웹팩, 무엇이고 왜 필요할까? 🎀 번들링(bundling)이란 '묶는다'는 뜻을 가지고 있으며, 사용자에게 웹 애플리케이션을 제공하기 위해 기능별로 모듈화 했던 파일들을 하나로 묶어주는 작업을 말한다. 🤔 번들링은 왜 필요할까 구체적인 사례로 들자면 아래의 것들을 들 수 있다. 여러개의 js파일을 사용할때 변수간 충돌을 막을 수 있다. 파일을 불러오는 횟수를 줄일 수 있어서 인터넷 속도가 느릴 때에도 좋다. 유지보수를 위해 공백이나 주석을 지우지 않아도 배포용 코드에서만 뺄 수 있다. 배포 코드를 암호화하여 안전하게 만들 수 있다. 요약해서 말하자면, 번들링은 웹 애플리케이션의 빠른 로딩 속도와 높은 성능을 위해서 필요하다. 여러개의 파일들이 있다면 그만큼 서버에 요청하고 응답받는 횟수가 많아진다. 그러면 당연히 페이지가 로딩되는 시..
[코드스테이츠 FE 부트캠프 40기] 섹션3 회고 🏔나의 목표 되새기기 요즘들어 많이 드는 생각이 좋은데에 취직하는 것도 중요하고, 다 좋지만 즐기면서 오래 갈 수 있는 개발자가 되고 싶다. 아무리 내가 이분야에 인정받더라도 항상 조바심을 느끼고 남들하고 비교하기 시작하면 일하는 동안 너무 힘들것 같다. 일하는 기간이 1~2년도 아니고 엄청 오래해야되는데 그럼 내 인생이 너무 불쌍해 질것이다 ㅜ 그래서 내가 즐길 수 있는 만큼내에서만 최선을 다하자는 생각! 정직하게 성실히 걸어가고 그 이외엔 비교하거나 집착하지 말자라고 요즘 부쩍 다짐하고 있다. 👍🏻KEEP 풀었던 데일리코딩 문제는 아무리 어려워도 꼭 이해하고 넘어가고, 어려웠던 문제는 명확하게 블로깅하고 넘어간일 섹션3들어오면서 데일리코딩 문제가 너무 어려워졌는데, 더군다나 아침시간이어서 눈비비면서 ..
rotatedArraySearch 문제 뜯어보기 🔍 문제보기 문제: 부분적으로 오름차순 정렬*된 정수의 배열(rotated)과 정수(target)를 입력받아 target의 인덱스를 리턴해야 합니다. 부분적으로 정렬된 배열: 배열을 왼쪽 혹은 오른쪽으로 0칸 이상 순환 이동할 경우 완전히 정렬되는 배열 예시: [4, 5, 6, 0, 1, 2, 3]은 왼쪽으로 3칸 또는 오른쪽으로 4칸 순환 이동할 경우 완전히 정렬됩니다. 입력: 인자1 : rotated 인자1 : target number 타입을 요소로 갖는 배열 rotated[i]는 정수 number 타입의 정수 출력: number 타입을 리턴해야 합니다. 주의사항: rotated에 중복된 요소는 없습니다. target이 없는 경우, -1을 리턴해야 합니다. 입출력 예시: let output = rot..
treeBFS 문제 뜯어보기 🔍 문제보기 문제: 임의의 tree를 구성하는 노드 중 하나의 Node 객체를 입력받아, 해당 노드를 시작으로 너비 우선 탐색(BFS, Breadth First Search)을 합니다. 이 때, 탐색되는 순서대로 노드의 값이 저장된 배열을 리턴해야 합니다. 입력: 인자1 : node 'value', 'children' 속성을 갖는 객체 (Node) 'node.value'는 number 타입 'node.children'은 Node를 요소로 갖는 배열 출력: 배열을 리턴해야 합니다. 주의사항: 생성자 함수(Node)와 메소드(addChild)는 변경하지 않아야 합니다. 입출력 예시: let root = new Node(1); let rootChild1 = root.addChild(new Node(2)); l..