김도리의 개발자로서 성장기

ESLint ECMAScript + Linter 자바스크립트 코드에서 발견된 문제 패턴을 식별하기 위한 정적 코드 분석 도구 대부분의 프로그래밍 언어에는 컴파일 과정에서 수행되는 Linter가 내장되어 있음 인터프리터 언어인 자바스크립트는 Linter가 내장되어 있지 않아 런타임 환경에서 에러 발생 확률이 높다. 다양한 방식으로 구현할 수 있는 코드 방식을 일관성있게 구현할 수 있도록 잡아주는 것이 ESLint의 역할 Lint란? 소스코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운 구조체 등에 표시(flag)를 달아주는 행위 Prettier formatter 스타일을 교정하기 위함 깔끔한 코드와 협업을 위해 일관성 있는 코드 스타일을 유지하는 것이 매우 중요한데 ESLint가 코드 퀄리티..

JavaScript와 ECMAScript의 차이 JavaScript는 1996년에 만들어 졌고, JavaScript의 표준화를 위해 1997년에 ECMAScript가 만들어졌다. ECMAScript는 스크립팅 언어를 어떻게 만들어야 하는지를 설명하는 일종의 설명서라 생각하면 되고, JavaScript는 ECMAScript를 사양을 바탕으로 만들어진 언어이다. ECMAScript ECMA 인터내셔널이라는 정보 통신에 대한 표준을 제정하는 비영리 표준화 기구에서 표준을 제정한다. 스크립트 언어가 준수해야 하는 규칙, 세부사항 및 지침을 제공한다. JavaScript ECMAScript 사양을 준수하는 범용 스크립트 언어 ECMAScript 버전 ES5, ES6, ES2020 등 ES6 Promise, Cla..

env 개발할 때 개발팀만 알아야하는 프라이빗한 값들(git에 올라가면 안되는 값)이 있다. 예시) 라이브러리 API KEY, 포트, DB관련 정보 등,, 환경변수 파일을 외부에 만들어 API_KEY 등을 저장시켜 소스코드 내에 하드코딩하지 않고 사용하는 방법이다. 설치 npm install --save dotenv .env 프로젝트 루트 경로에 .env 파일을 생성하고 작성한다. REACT_APP_API_KEY=MY_API_KEY REACT_APP_SERVER_PORT=3030 REACT_APP_DB_HOST=localhost REACT_APP_DB_USER=root REACT_APP_DB_PASSWORD=MY_DB_PASSWORD React에서 .env를 사용하려면 변수명이 REACT_APP으로 시작..

JWT JSON Web Token의 약자로, 데이터가 JSON으로 이루어져 있는 토큰이다. 로그인 이후 서버가 만들어주는 문자열이다. 이 문자열에는 사용자의 로그인 정보가 들어있고, 해당 정보가 서버에서 발급되었음을 증명하는 서명이 들어있다. 사용자가 로그인을 하면 서버에서 사용자에게 해당 사용자의 정보를 지니고 있는 토큰을 발급해주고, 추후 사용자가 다른 API를 요청할 때 발급받은 토큰과 함께 요청하게 된다. 그럼 서버는 해당 토큰이 유효한지 검사하고, 결과에 따라 작업을 처리하고 응답한다. 모든 API에 토큰을 넣는다는 것이 아니라 본인임을 증명해야하는 API들에 토큰을 넣어 통신해야 한다. 예시) 내 정보 수정, 장바구니 조회 등 const headers = { accept: 'applicatio..

localStorage 브라우저가 가지고 있는 임시 저장 공간 새로고침을 하면 JS 파일들은 모두 처음부터 다시 읽어들이기 때문에 당연하게 모든 state의 데이터는 초기화 됨 state에 저장된 데이터가 초기화되는 것이 싫다면 모두 DB에 저장하면 되는데 별도의 서버나 DB가 없다면 localStorage에 저장하는 방법이 있다. localStorage는 브라우저에 몰래 정보를 저장할 때 사용할 수 있는 공간이다. localStorage 확인 크롬에서 개발자도구를 켜서 Application 탭에 들어가면 좌측 Storage 하위 목록인 Local Storage를 확인할 수 있다. 문법 // 데이터 추가 localStorage.setItem('키값', '데이터'); // 데이터 조회 localStorag..

redux 리액트 상태 관리 라이브러리 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 더욱 효율적으로 관리할 수 있다. 컴포넌트간 공동의 상태에 접근해야 할 때 여러 컴포넌트를 거치지 않고 손쉽게 접근할 수 있다. Context API를 통해서도 동일한 작업을 할 수 있다. 리덕스를 사용하면 상태를 더욱 체계적으로 관리할 수 있기에 대규모의 프로젝트에서는 리덕스를 사용하는 편이 더 좋다. 코드의 유지 보수성을 높여주고, 작업 효율도 극대화해준다. 1. 액션 (Action) 상태에 어떠한 변화가 필요하면 발생하는 것 { type: 'ADD_TODO', data: { id: 1, text: 리덕스 배우기' } } type에 액션의 이름을 넣고, 그 외의 값들은 마음대로 넣을 수 있다. 2. 액션..

useEffect 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. (클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합쳤다고 봐도 무방하다.) import { useEffect } from 'react'; useEffect(() => { ... }); 이렇게 사용하면 렌더링 될 때마다 ... 코드가 실행된다. 화면에 맨 처음 렌더링될 때(마운트)만 실행하고 싶을 때 useEffect(() => { ... }, []); 함수의 두번째 파라미터로 빈 배열을 넣어주면 된다. (단, 개발 환경에서만 useEffect가 두번 호출 될 수 있다.) 특정 값이 업데이트될 때만 실행하고 싶을 때 특정 값이 바뀔때마다 특정 작업을 수행해야 ..

Hooks 리액트 v16.8에 새로 도입된 기능 useState 함수형 컴포넌트에서도 상태 관리를 할 수 있게 해줌 1. 배열 비구조화 할당 배열 안에 들어있는 값을 쉽게 추출할 수 있도록 해주는 문법 const array = [1, 2]; const one = array[0]; const two = array[1]; 다음 코드는 array 안에 있는 값을 one과 two에 담아주는 코드이다. 이를 배열 비구조화 할당을 사용하면 const array = [1, 2]; const [one, two] = array; 이렇게 표현할 수 있다. 2. useState 사용하기 import { useState } from 'react'; import 구문을 통해 불러오며 아래와 같이 사용한다. const [valu..