리액트를 사용하는 어느날 당연하게 주어진 리액트를 과연 어떻게 만들 수 있을까? 라는 생각을 했다. 결국 리액트로 자바스크립트를 기반으로 만들었기 때문에 나도 만들 수 있지 않을까? 이 작업은 얼마나 이어질지 모르겠지만 시작되었다. 리액트 홈페이지 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하세요. 그럼 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링합니다. 일반적으로 상태 (State)가 변경되었을 때 우리는 다시 화면에 변경된 상태를 토대로 그려줘야한다. 이것을 리액트는 아주 쉽게 해준다. 스스로 상태를 관리하는 캡슐화된 컴포넌트를 만드세요. 그리고 이를 조합해 복잡한 UI를 만들어보세요. 컴포넌트 형식으로 한 화면에 나타나야할 정보를 나눠서 개발하고 이를 조합해서..

0. 준비사항 본인은 프로젝트를 구성할 때 express-generator를 사용하기 때문에 먼저 설치를 해야한다. npm i -g express-generator express-generator는 자동으로 express 환경울 구성해주는 멋진 도구이다. 1. npm 프로젝트 생성 // express 프로젝트명 --view=템플릿 express webpackProject --view=ejs cd webpackProject npm i express-generator를 설치하면 express 명령어를 사용할 수 있는데, 원하는 프로젝트명을 입력하고 원하는 템플릿을 입력해주면 된다. 템플릿에는 pug, ejs 등이 있는데, 본인은 pug알못이기 때문에 ejs를 사용해서 설치했다. 명령어를 실행하면 위와 같이 ..

1. Webpack? 우선 웹팩이 무엇일까? 위 이미지에서 보이는 것처럼 여러가지 얽힌 복잡한 파일들을 간단하게 만들어주고 있다. 그래서 Webpack을 모듈 번들러라고 한다. 즉, 여러 개로 나뉘어진 파일들을 묶어서 하나의 파일로 만들어준다. 근데 이런 과정이 왜? 필요할까? 웹 페이지는 다양한 html, js, css, png, ... 등 파일로 구성되어 있다. 그말은 웹페이지가 구성되려면 많은 파일들을 요청해야 한다는 것이다. http/2 커넥션이라면 동시에 여러 파일을 요청할 수 있지만, 현재 많이 사용되고 있는 http/1.1에서는 한번의 요청에 하나의 파일만 받을 수 있다. 즉, 요청 해야하는 파일이 많아지면 그만큼 오래 기다려야해서 비효율적이다. 이러한 요청을 줄이기 위한 방법이 번들러이다...

Express 환경에서 webpack을 적용할 때 app.use(express.static(path.resolve(__dirname, "public"))); 이렇게 설정 해주었다. 그리고 views는 app.set("views", path.join(__dirname, "views")); app.set("view engine", "ejs"); 같이 설정했다. 그다음에 프로젝트를 실행하고 localhost:3000으로 접속하니 /views 폴더에 있는 index.ejs가 실행되는 것이 아닌 /public에 있는 index.html이 실행되는 것이였다. 왜그런지 고민해봤는데, app.use(express.static(path.resolve(__dirname, "public"))); 설정에 경로가 해당 이름의 ..

0. 들어가며 Babel에 대해서 정리한 글이 이곳 저곳 나의 티스토리에 많이 있다. 하지만 모두 다른 블로그를 이곳 저곳 뒤지면서 정리한 내용이라 한눈에 이해가 되지 않는다. 이번 기회에 한번 다시 정리하고자 한다. 1. Babel? 입력과 출력이 모두 자바스크립트인 컴파일러이다. ES6 코드, 리액트의 JSX, 타입 스크립트와 같은 언어를 ES5 코드로 변환해준다. 즉, 최신 자바스크립트 코드를 지원하지 않는 explorer 같은 브라우저에서 최신 자바스크립트 코드를 구버전 자바스크립트 코드로 호환이 가능하게 변환해준다. 2. Babel의 구동 방법 구동에 있어 필수인 패키지는 @babel/core 이다. Babel을 사용하기 위해서 필수로 필요한 패키지이고 그 외에는 @babel/plugin-tra..

Git Flow? Git으로 개발할 때 표준과 같이 사용되는 방법론이다. Git Flow라는 기능이 있는 것이 아닌 서로 간의 약속인 방법론이라는 점이 핵심이다. Git-flow는 5가지의 브랜치를 사용해서 운영을 한다. 1. master : 기준이 되는 브랜치로 배포를 하는 브랜치이다. 2. develop : 개발 브랜치로 개발자들이 해당 브랜치를 기준으로 작업한 내용을 합친다. 3. feature : 단위 기능을 개발하는 브랜치로 개발 완료 후 develop으로 합쳐진다. 4. release : 배포를 위해 master 브랜치로 보내기 전 QA를 하기 위한 브랜치이다. 5. hotfix : master 브랜치로 배포했을 때 버그가 생겨 급하게 주정하는 브랜치이다. 각각의 부분을 좀 더 깊게 설명해보자..

express-generator를 사용해서 Express 웹서버를 구현할 때 템플릿을 지정할 수 있다. 따로 설정하지 않으면 jade 형식으로 뷰가 구성되고, 특정 형식으로 템플릿을 지정하고 싶다면 express --ejs 앱이름 같이 --버전 을 옵션으로 같이 주면 된다. 그런데 우리에게 가장 친숙한 Html을 템플릿으로 사용하려면 어떻게 해야할까? // ... app.engine("html", require("ejs").renderFile); app.set("view engine", "html"); // ... app.engine("html", require("ejs").renderFile); 부분은 express-generator를 사용했을 때 자동으로 생기는 것이 아니라 따로 작성을 해야한다. h..

우리가 조건을 처리할 때 가장 먼저 생각하는 것이 if문과 switch문이다. const ifCase = true; if(ifCase) console.log("True"); const switchCase = true; switch(switchCase) { case true: console.log("True"); break; default: console.log("False"); } 여기서 좀 더 간단하게 사용하고 싶은 경우에는 삼항연산자를 사용한다. const case = true; console.log(case ? "True" : "False") 최근에 알게된 것이 하나 더 있는데, ?? 연산자이다. ( 정확한 명칭은 아직 모르는 .... ) const a = undefinded; console.log..