🤓 슬기로운 개발생활 🤓 슬기로운 개발생활

Creact-React-App 리액트에서도 es6 등 최신 문법을 사용하기 때문에 웹팩과 바벨이 필요하다. 웹팩은 파일들을 하나로 묶어 빌드시켜주기 위해 필요하고, 바벨은 최신 자바스크립트 문법도 구형 브라우저에서 잘 동작할 수 있도록 해주기 위해 필요하다. 하지만 create-react-app, CRA를 사용하면 이러한 개발 환경을 알아서 세팅해주기 때문에 우리가 웹팩과 바벨 세팅을 하지 않아도 된다. CRA없이 직접 React 프로젝트 시작하기 CRA가 작동되는 원리를 알기 위해 CRA없이 직접 개발 환경을 구축해보자. 1. 필요한 폴더, 파일들 생성하기 직접 creact-react-app으로 리액트 프로젝트를 시작하면 아래와 같은 폴더 구조를 볼 수 있다. 여기서 public 폴더는 정적 파일(ht..

Jest 초기 세팅 Jest는 간단한 자바스크립트 테스트 프레임워크이다. babel, typescript, node, react, angular, vue 등을 사용하는 여러 프로젝트와 함께 사용할 수 있다. 1. installing Jest using npm npm install --save-dev jest 2. 예제 파일 sum.js 생성 //sum.js function sum(a,b){ return a + b; } module.exports = sum; 3. 테스트 예제 파일 sum.test.js 생성 이 때 __test__ 디렉토리 안에 있는 파일이나 test.js로 끝나는 파일들은 모두 테스트 파일로 인식한다. const sum = require('./sum'); test('add 1 + 2 to..

function a(){ let b = 10; function c(){ console.log(b); } c(); } a(); console.log(b); 위의 코드가 실행될 때 자바스크립트 엔진이 돌아가는 과정은 다음과 같다. 1. 먼저 전역 스코프에 위치하고 있는 변수 a를 담고, 변수 a에는 정의되어있는 함수를 할당한다. 2. 그 다음 a 함수가 호출되고 전역 컨텍스트에서 a가 실행되어 let b = 10 코드가 실행된다. 3. 이제 call stack memory에 a함수가 저장된 것과 마찬가지로 식별자 b와 c가 callstack에 저장된다(b : 10, c : function(){}). 4. 다음 c함수가 호출되고 console.log(b)를 만난다. 현재 활성화 상태인 c 컨텍스트에서 b를 검..

스코프(scope) 스코프란 쉽게 말해 변수의 유효범위이다. function start(){ for (let i = 0; i < 5; i++){ console.log(i); } console.log(i); } start(); 위의 코드를 실행 시켜보면 for 문 안에 console.log(i) 는 잘 실행된 반면, for 문 밖의 console.log(i)는 i가 정의되어 있지 않다고 에러가 뜬 것을 볼 수 있다. 그 이유는 i가 for 문 안에서만 유효한 변수이기 때문이다. 위의 오류를 해결하고 싶다면 아래와 같이 변수를 아예 밖에서 선언하여 스코프의 범위를 for문 밖으로 확장시킬 수 있다. function start(){ let i = 0; for(i = 0; i < 5; i++){ console...

기본형과 참조형을 구분하는 기준 데이터 타입의 종류는 크게 기본형과 참조형 2가지로 나뉜다. 기본형과 참조형을 구분 짓는 가장 큰 점은 실제 값 전체 복사 vs 실제 값이 들어있는 주소 값 복사이다. - 기본형 (copy value of a) let a = 1; let b = a; a += 10; console.log(a) //11 console.log(b) //1 위의 코드를 살펴보면 a의 값이 변하더라도 b의 값은 그대로 인 것을 볼 수 있다. let b = a; 코드를 통해 a값 전체가 복사되어 b라는 변수에 담겼다. a, b는 서로 영향을 받지 않고 독립적으로 존재하는 것을 볼 수 있다. 기본형 데이터가 저장될 때는 아래와 같은 순서로 저장된다. 1. 변수 영역에서 빈 공간(@1003 : 임의의 ..

병합 정렬(merge sort) 병합 정렬 또는 합병 정렬은 비교 기반의 정렬 알고리즘이다. 예를 들어, 정렬된 두 개의 배열이 있다고 하자. let arr1 = [4,6,7,8]; let arr2 = [1,5,6,7]; let result = []; 정렬된 두 배열을 하나의 배열로 합치기 위해서는 어떻게 해야할까? 가장 빠른 방법은 이미 두 배열이 정렬된 상태이기 때문에 가장 작은 값끼리 비교를 하는 것이다. 여기서 말하는 가장 작은 값은 0번째 인덱스에 위치한 원소이다. 처음에는 4와 1을 비교하는데 1이 4보다 작으므로 result에 1이 먼저 들어가게 된다. 4 > 1 result.push(1); 그 다음 비교대상은 4와 1의 다음 숫자인 5이다. 4 < 5 result.push(4); 더 작은 ..

연결 리스트(Linked List) 연결 리스트는 크기가 동적인 자료구조로, 자료구조를 구성하는 요소인 노드(Node)의 연결로 이루어진 자료구조이다. 연결 리스트에 값이 들어올 때마다 노드를 만들어 저장하게 된다. 노드(Node) 노드는 자료구조를 구성하는 요소들을 가리키는 데, 노드의 구성은 크게 링크, 데이터 필드로 구성되어있다. 리스트(List) 자료구조 연결 리스트를 이해하기 전에 리스트 자료구조를 이해해보자. List는 Dynamic Array로 동적인 어레이를 뜻한다. 데이터가 들어올 때마다 동적으로 메모리를 할당하는 자료구조이다. 리스트 자료구조가 아닌 정적인 어레이(배열) 를 사용하면 딱 우리가 지정해준 만큼의 공간을 사용해야 한다. 그렇기 때문에 인덱스 번호를 사용하여 관리하기 쉽다는 ..

웹 개발을 공부할 때 자주 등장하는 단어 '웹팩', 웹팩이란 무엇일까? 하나의 웹 페이지를 만들기 위해서는 .sass파일(css), .js파일, .html파일, .jpg 이미지 파일 등 수많은 파일이 생겨난다. naver.com 페이지에 접속하더라도 굉장히 많은 JS,CSS, Img 파일들을 불러오는 것을 확인할 수 있다. 하지만 이렇게 많은 파일을 서버와 계속 통신하며 받아올 경우, 렌더링 속도가 느려질 것이다. 또한, 같은 변수명을 사용하는 다른 파일이 있다면, 덮어씌워지는 등 문제점이 생긴다. 바로 위의 문제를 해결하기 위해서 도입된 개념은 모듈(module)이다. 스크립트의 타입을 모듈로 바꾼 후, export, import를 사용해서 같은 변수를 가지고 있더라도 각각 분리해서 사용할 수 있다. ..