CRA에서 모든 환경 변수는 REACT_APP이라는 prefix가 붙어야한다. 만약 내가 PORT = 4000이라고 .env에 정의한다고 하면, REACT_APP_PORT = 4000 라고 선언해야 정상적으로 값을 읽어올 수 있는 것이다. 그리고 따로 dotenv를 설치해서 사용하지 않아도 node_modules에 dotienv-expand라는 라이브러리가 CRA에 종속되어 있는 것같다. (정상동작) 만약 dev, prod 개발환경을 나누고 싶으면 package.json에 "start:stage": "REACT_APP_ENV=production && react-scripts start", "start:dev": "REACT_APP_ENV=development && react-scripts start", ..

1. 설치 npm install -g json-server를 해준다. (yarn이 아니고 npm으로 해주어야 버그없이 bash에서 환경변수로 바로사용할 수 있다.) 2. db.json 파일 생성. 관리하고 싶은 json형식으로 db.json을 생성한다. 3. 따로 node로 셋팅해줄 필요없이 json-server --watch db.json --port 3001 으로 서버를 실행할 수 있다. 4. 그 뒤로는 우리가 알고있는 GET/DELETE/PUT/POST등의 RESTful API 방식을 이용하여 사용할 수 있다.

옛날부터 웹 프론트엔드 개발영역을 거의 지배하다 싶이, 모든 영역에서 쓰이던 제이쿼리는 국내 개발공부를 하는데 있어서 거의 쓰이지 않는 라이브러리가 되었다. 유명한 오픈소스 프론트엔드 프레임워크인 부트스트랩이 버전 5부터 제이쿼리에 대한 의존성을 제거하겠다고 발표까지 했다. 물론, 인기가 떨어진다고해도 점유율은 압도적으로 높긴하다. - 제이쿼리란? 제이쿼리는 "적게 작성하고, 많은 것을 하자."라는 모토로 2006년 미국에서 탄생했다. - 제이쿼리의 장점은? 1. 웹페이지 상에서 엘리먼트를 쉽게 찾고 조작할 수 있다. 2. 거의 모든 웹브라우저에 대응할 정도로 호환성이 매우 뛰어나다. 3. 네트워크, 애니메이션 등 다양한 기능을 제공한다. 4. 메소드 체이닝 등 짧고 유지관리가 용이한 코드 작성을 지원한..

1. 엔트리 : 번들링하고 싶은 파일들을 선언하는 것. 웹팩은 엔트리를 통해서 필요한 모듈들을 로딩하고, 하나의 파일로 묶는다. 즉, 의존성 그래프의 시작점이 엔트리이다. 2. 아웃풋 : 번들링되고 만들어질 파일에 대한 정보 명시 엔트리에 설정한 자바스크립트 파일을 시작으로 의존되어 있는 모든 모듈을 하나로 묶는다. 번들된 결과물을 처리할 위치는 output에 기록한다. 3. 로더 : 번들링을 진행하며, 실행되는 함수. 웹팩은 모든 파일을 모듈로 관리한다. (css, font, img 등등 모두.) 근데 웹팩은 사실상 자바스크립트만 알고 있으므로, 다른 파일들을 웹팩이 이해하게끔 변경시켜주어야한다. 그게 로더의 역할이다. ex) babel-loader + 특정 파일에 대해서 여러개의 로더를 사용하는 경우..

웹팩이란 모듈 번들러이다. (모듈 번들러는 웹 어플리케이션을 구성하는 HTML, CSS, JS, IMG 등을 모두 각각의 모듈로 생각하고 이를 조합해서 병합된 하나의 결과물을 만드는 도구) - 일반적인 모듈 모듈은 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 의미한다. JS로 치면, 아래와 같은 코드가 모듈이다! // math.js function sum(a,b) { return a+b; } function substract(a,b) { return a-b; } const pi = 3.14; export {sum, substract, pi}; 그러니까 위 math.js 처럼 비슷한 기능들을 하나의 의미있는 파일로 관리하면 모듈이 되는 것이다. - 웹팩에서의 모듈 웹팩에서 지칭하는 모듈이라는 개..

HTML은 Hypertext Markup Language는 웹 개발 언어이지만, HTML로 구현된 웹 페이지에서는 기본적으로 서로 다른 브라우저에서도 동일하게 표시되어야 한다. 하지만 개별 브라우저들의 작동방식이 서로 달라서 사실상 그렇지 못했다. (크로스 브라우징 문제) 그래서 다른 브라우저간에도 동일하게 웹 페이지가 표시될 수 있도록 웹 개발 규칙이 정해지고, 이 과정에서 나온 표준화된 웹 개발 언어가 HTML5이다. (html1,2,3,4도 있는데 html5가 가장 최신이다.) + (html6이 나온다는 소식이 작년에 있었는데, 사실 무근이라고 들었다.) HTML5 기본 구조는 HTML과 크게 다르지 않다. 추가된 주요 기능을 보자면 1. 표준 코덱 및 영상 Player 내장 : 브라우저 내에 영상..

로컬 스토리지와 세션 스토리지는 HTML5에서 추가된 저장소이다. 둘다 간단한 키와 값을 저장할 수 있다. 로컬 스토리지와 세션 스토리지의 차이점은 데이터의 영구성이다. 로컬스토리지의 데이터는 사용자가 지우지 않는 이상, 계속 브라우저에 남게된다. 하지만 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거된다. 지속적으로 필요한 데이터 (자동 로그인)등은 로컬 스토리지에 저장하고, 잠깐 동안 필요한 정보 (일회성 로그인 정보 등)은 세션 스토리지에 저장하면 된다. 그리고 쿠키라는 것이 있는데, 쿠키도 키-값 형태의 저장소이며, 만료기한을 가지고 있다. document.cookie로 현재 쿠키정보를 확인할 수 있다. (httponly 플래그로 자바스크립트에서 쓸 수 없게 막아둔 쿠키는 볼 수 ..

App객체를 만들었고 new App()을 하자마자 내가 작성한 어플리케이션 코드가 구동된다고 생각해보자. 사실상 App만 할당해주면, 그 안에 선언된 코드들이 실행되어 새로고침할때마다 모든 것이 새로 시작된다! ex) export.defualt new App(); 근데 이런 방식은 좋지 않다. 왜냐하면 이는 해당 객체를 범용적으로 사용할 수 없게하고, 추후에 메모리 해제를 동적으로 할 수 없고, 내부의 변수나 함수를 사용할 수도 없기 때문이다. 리뷰어님 피드백 발췌 이렇게 구현하게 되면 파일 안에서만 객체단위의 커뮤니케이션이 이루어질 수 있습니다. 그렇다는 것은 굳이 class가 아니라, function으로 만들고 function을 export만 해도 된다는 이야기 입니다. export 시 객체를 생성하..