const는 재할당이 불가하다. 그런데 const에 담긴 객체(object, 배열...)의 경우 수정이 가능하다. 어떻게 가능한 걸까? 우선 var, let, const 차이에 대해 간략하게 알아보자. 목차 var, let, const const에 객체가 담긴 경우 var, let, const var let const 재선언 O X X 재할당 O O X 호이스팅 undefined로 초기화되어 메모리에 저장 초기화되지 않은 상태로 메모리에 저장 초기화되지 않은 상태로 메모리에 저장 유효 범위 (Scope) 함수 스코프 블록 스코프 블록 스코프 const에 객체가 담긴 경우 위 표에서도 알 수 있듯이 const는 재할당이 불가하다. 그런데 const에 담긴 객체는 수정이 가능하다. 이 경우에는 const에 ..
개발 프로젝트를 포트폴리오로 정리할 때 폴더, 파일 구조가 필요할 때가 있다. 이럴 때 tree 명령어를 사용하면 쉽게 출력할 수 있다. 목차 기본 세팅 주요 명령어 my-app ├── client │ ├── public │ │ ├── index.html │ │ └── robots.txt │ └── src │ ├── App.js │ ├── App.scss │ ├── components │ ├── index.js │ ├── index.scss │ └── setupTests.js └── server └── index.js 기본 세팅 tree 설치 npm install -g tree-cli 주요 명령어 기본 명령어 npm tree 특정 폴더 제외 tree -I 폴더명 여러 폴더 제외 tree -I '폴더A|폴..
React, Next.js - Heroku에 Github로 배포하기
Heroku에 배포할 수 있는 방법은 여러 가지인데, 그중에서도 Github와 연결해서 배포하는 방법에 대해 정리하고자 한다. 📎 Heroku Git으로 배포하는 방법 Heroku에 Github로 배포하기 1. package.json에 start와 heroku-postbuild를 세팅해준다. (package.json) "scripts": { "dev": "next dev", "build": "next build", "lint": "next lint", "start": "next start -p $PORT", "heroku-postbuild": "npm run build" }, 2. package.json에 자신이 설치한 node, npm 버전에 맞게 engine을 명시해준다. (package.json) ..
리액트가 언제 재렌더링이 되며, 불필요한 렌더링을 막고 성능을 최적화하기 위해서는 어떻게 해야할 지에 대해 알아보자. 목차 리액트 재렌더링 조건 렌더링 성능 최적화 방법 리액트 재렌더링 조건 1. state(상태) 변경이 있을 때 리액트는 state 변경이 감지되면 재렌더링 한다. 2. 새로운 props가 들어올 때 부모 컴포넌트로부터 새 props가 들어오면 자식 컴포넌트는 재렌더링 된다. 3. 기존 props가 업데이트 됐을 때 부모 컴포넌트로부터 받은 props가 변경되면 props 값을 받은 자식 컴포넌트도 재렌더링 된다. 4. 부모 컴포넌트가 재렌더링 될 때 부모 컴포넌트가 업데이트 되어 재렌더링 되면 자식 컴포넌트도 재렌더링 된다. 렌더링 성능 최적화 방법 과도한 재렌더링은 성능 저하의 원인이..
ES6의 Spread 연산자와 rest 파라미터에 대해 정리해보자. Spread 연산자 이터러블(iterable) 객체를 개별 요소로 분리한다. ✏️ 이터러블 객체는 반복 가능한 객체를 일컫는다. Array, String, Map, Set, DOM 구조가 있다. Object.create나 slice를 사용하지 않고도 배열이나 객체의 복사본을 쉽게 만들 수 있다. console.log(...[1, 2, 3]); // 1, 2, 3 console.log(...'apple'); // a p p l e function fruits(arr) { return [...arr, 'apple'] } fruits(['grape', 'melon', 'lemon']); // ["grape", "melon", "lemon", ..
자바스크립트에서 attribue, property 둘 다 속성의 개념인데 무슨 차이가 있는지 예시와 함께 정리해보자. attributes는 HTML 마크업에 정의되어 있는 것이고, properties는 HTML DOM 트리에 있는 것이다. 즉, attribute는 default 값이 변하지 않으며 property는 변할 수 있다. input을 예시로 들어보겠다. // attribute console.log(input.getAttribute('value')) // 기본값입니다 // property console.log(input.value) // 기본값입니다 input에 "자바스크립트"라고 입력했다면, attribute는 그대로지만 property 값은 변한다. property는 DOM에 존재하며 동적이기..
IIFE (즉시 실행 함수)에 대해 정리해보자. 목차 IIFE란? IIFE 형식 IIFE 사용 이유 IIFE란? IIFE(Immediately Invoked Function Expression)는 '이피'라고 불리며, 즉시 실행 함수를 의미한다. IIFE 형식 IIFE는 (익명함수)와 (함수실행) 두 개의 괄호로 나뉜다. 이 함수는 생성된 후 즉시 실행되고 재사용되지 않기 때문에 보통 익명 함수 형태다. 기본 함수 ( function() { ... } )() 화살표 함수 ( () => { ... } )() IIFE는 함수 선언문이 아니기 때문에 변수에 저장하면, 함수가 저장되는 게 아니라 결과만 저장된다. var test = (function () { var greeting = "hi"; return g..
this는 생성자 혹은 메서드에서 객체를 가리킬 때 사용하는 키워드다. 각 상황에 따라 this가 어떤 객체를 참조하는지 정리해보자. 목차 기본 this 객체에서 this 함수에서 this 객체 생성자 함수에서 this Event handler에서 this bind(), call(), apply() 1. 기본 this this는 기본적으로 window 객체를 참조한다. console.log(this) // window 2. 객체에서 this this는 myColor 객체를 참조한다. const myColor = { color: "blue", checkColor: function() { console.log(this.color); } }; myColor.checkColor(); // blue 3. 함수에서..
[React] react-ga로 리액트와 구글 애널리틱스 연결하기
리액트 프로젝트를 구글 애널리틱스와 연동하여 방문자 추적 등 여러 데이터를 수집하고 활용해보자. 목차 웹사이트 분석이 필요한 이유 리액트와 구글 애널리틱스 연결하기 웹사이트 분석이 필요한 이유 방문자가 사는 지역에 대한 정보를 얻을 수 있다. 내 비즈니스에 더 관심이 있는 연령대를 이해할 수 있다. 방문자가 평균적으로 얼마나 많은 시간 동안 머무르는지 알 수 있다. 신규 사용자를 추적할 수 있다. 애플리케이션에 버그가 있는지 추적할 수 있다. 사용자의 관심에 따라 최적화 할 수 있다. 리액트와 구글 애널리틱스 연결하기 1. 계정 & 속성 생성 1-1. 구글 애널리틱스 페이지에서 계정을 생성한다. 1-2. 홈-관리로 들어가서 속성 만들기를 클릭한다. 1-3. 속성 이름, 보고 시간대, 통화를 설정하고 '고..