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

Git Hooks Git과 관련한 어떤 이벤트가 발생했을 때 자동으로 특정 스크립트를 실행하도록 할 수 있는 것 꼭 지켜야 하는 코딩스타일이나 테스트코드, 등등의 정책들을 강제하기 위해 Git Hooks를 사용할 수 있다. commit이나 merge 할 때 클라이언트 훅이 실행되고, push 할 때 서버 훅이 실행된다. Git Hooks을 반드시 적용하게끔 강제하기 위해 만약 프로젝트가 npm을 사용하고 있다면 husky라는 모듈을 사용하자 husky Git Hooks를 보다 쉽게 적용할 수 있는 npm 모듈 husky 설치 npm install --save-dev husky commit 정책 정의하기 .huskyrc 파일에 정의하고자 하는 훅과 실행할 명령어 지정 { "hooks { "pre-commi..

방어적 프로그래밍 방어 코딩이라고도 한다. 예상치 못한 입력에도 계속적인 기능을 할 수 있도록 고안된 방어적 설계의 한 형태 종종 발생하지 않을거라 생각하고 넘어가거나 예외 상황들을 테스트 해봤기 때문에 완벽하다 생각하여 쉽게 오류에 빠진다. 방어적 프로그래밍은 프로그래머가 문제를 예상하고 이를 처리하는 코드를 작성하는 것이다. 0. 버그 없는 코드 유지 테스트 하기 (단위테스트, 꼼꼼한 테스트) 코드 검토하기 (여러 사람과) 신뢰할만한 라이브러리 사용 좋은 코딩 관례 따르기 (구조화 잘 하기) 1. 외부로부터 입력받거나 파라미터로 받는 값, 함수의 리턴값 올바른 데이터 범위인지 유형인지 검사 필요 데이터 체크를 하는 습관을 들여야 한다. 2. 공유 메모리, 쓰레드 데이터가 덮어씌워지거나 데드락에 걸리지..

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..

리액트는 AJAX를 구현하려면 XMLRequest를 사용하거나 다른 HTTP Client를 사용해야 한다. HTTP Client를 내장하고 있는 Angular와 다르게 따로 내장 클래스가 존재하지 않기 때문이다. AJAX (Asynchronous Javascript And XML) 비동기식 자바스크립트와 xml 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 비동기 통신, 클라이언트와 서버간 XML 데이터를 주고받는 기술 비동기 방식 웹페이지를 리로드하지 않고 데이터를 불러오는 방식 서버에 요청한 후 멈추어 있는 것이 아닌 그 프로그램은 계속 돌아감 필요한 부분만 불러와 사용할 수 있다는 장점이 있다. ax..