Back Ground

익스프레스 프레임워크는 익스프레스 외에도 많은 패키지를 사용하므로입문자 입장에서는 필요한 패키지를 찾아서 설치하기가 어렵기때문에 프레임워크에 필요한 package.json을 만들어주고 기본 폴더 구조까지 잡아주는 패키지가 있다.바로 Express-generator이다. [콘솔]npm i -g express-generator( npm i == npm install) 설치가 완려되었다면 새 익스프레스 프로젝트를 생성해본다.새로 프로젝트를 만들고자 하는 폴더로 이동해서 express 을 입력한다. [콘솔]express learn-express --view=pug ( ... ) create : learn-express\views\layout.pug create : learn-express\app.js creat..

create-react-app으로 만들때 버전에 따라 가능한지는 모르겠지만최신버전으로서는 쉽게 css Module을 설정 할 수 있다. CSS ModuleCSS Module 은 CSS 클래스를 불러와서 사용 할 때 [파일이름]_[클래스이름]__[해쉬값] 형태로 클래스네임을 자동으로 고유한 값으로 만들어주어서 컴포넌트 스타일 중첩현상을 방지해주는 기술입니다. 이를 사용하기 위해선, [파일이름].module.css 이런식으로 파일을 저장하셔야 합니다.한번, CSSModule.module.css 라는 스타일을 먼저 작성해봅시다.src/CSSModule.module.css/* 자동으로 고유해질 것이므로 흔히 사용되는 단어를 클래스 이름으로 마음대로 사용가능*/ .wrapper { background: black..

Rest Api와 라우팅 REST API는 REpresentational State Transfer의 약어이다.네트워크 구조의 한 형식이다.서버의 자원을 정의하고, 자원에 대한 주소를 지정하는 방법을 가르킨다. 주소는 의미를 명확히 전달하기 위해 명사로 구성된다./user이면 사용자 정보에 관련된 자원을 요청하는 것이고, /post라면 게시글에 관련된 자원을 요청하는 것이라고 추측할 수 있다. REST API는 주소 외에도 HTTP요청 메서드라는 것을 사용한다.폼 데이터를 전송할 때 GET 또는 POST 메서드를 지정해보았나?여기서 GET과 POST가 바로 요청 메서드이다. 거기에 PUT,PATCH, DELETE까지 총 다섯 개가 메서드로 많이 사용된다 . GET : 서버 자원을 가져오고자 할 때 사용한..

쿠키와 세션 쿠키는 요청과 응답의 헤더(header)에 저장된다.요청과 응답은 각각 헤더와 본문(body)을 가진다. ES6123456789101112131415161718192021222324const http = require('http'); const parseCookies = ( cookie = '' ) => { console.log("cookie : ",cookie); return cookie .split(';') .map( v => v.split('=') ) .map( ([k, ...vs]) => [k, vs.join('=')] ) .reduce( (acc, [k,v]) => { acc[k.trim()] = decodeURIComponent(v); return acc; }, {});} http..

요청과 응답 이해하기 클라이언트로부터 요청이 왔을 때 어떤 작업을 수행할지 이벤트 리스너를 미리 등록해두어야 한다. 이벤트 리스너를 가진 노드 서버를 만들어 보자. createServer.js12345const http = require('http');http.createServer((req,res)=> { //여기에 어떻게 응답할지 적어준다. });cs http서버가 있어야 웹 브라우저의 요청을 처리 할 수 있으므로 http모듈을 사용했다. http모듈에는 createServer메서드가 있다.인자로 요청에 대한 콜백 함수를 넣을 수 있다.요청이 들어올 때마다 매번 콜백 함수 실행된다. 따라서 이 콜백 함수에 응답을 적어주면 된다. createServer의 콜백 부분을 보면 req와 res 매개변수가 있..

마이크로 서비스 아키텍처는 근래의 웹기반의 분산 시스템의 디자인에 많이 반영되고 있는 아키텍처 스타일로, 특정 사람이 정의한 아키텍처가 아니라, 분산 웹 시스템의 구조가 유사한 구조로 설계 되면서, 개념적으로만 존재하던 개념이다. 모놀리식 아키텍처 마이크로 서비스 아키텍처를 이해하려면 먼저 모노리틱 아키텍처 스타일에 대해서 이해 해야 한다.모노리틱 아키텍처 스타일은 기존의 전통적인 웹 시스템 개발 스타일로, 하나의 애플리케이션 내에 모든 로직들이 모두 들어가 있는"통짜 구조". 육각형 내부에 있는 비즈니스로직을 기준으로 외부 서비스(DB 액세스, 메시징, API 등)와 분리하기 위해 어댑터를 둔 모습 출처 : https://www.nginx.com/blog/introduction-to-microservi..

REPL 사용하기REPL은 CLI(쉘 혹은 콘솔이라고도 부른다.) 위에서 사용하게 된다. 자바스크립트는 스크립트 언어이므로 미리 컴파일을 하지 않아도 즉석에서 코드를 실행할 수 있다. 노드에서의 제공 콘솔(REPL)입력한 코드를 읽고(Read),해석하고(Eval),결과물을 반환하고(Print),종료할 때까지 반복한다(Loop).REPL(Read Eval Print Loop)이라고 부른다. 노드의 REPL을 직접 사용해보기CMD에서 node에 들어간다. node> 이렇게 되었다면 정상적으로 node를 시행할 수 있다. 간단한 문자열을 출력해보자면> const str = 'Hello world, hello node'; undefined> console.log(str);Hello world, hello nod..

긴 설명 보다 내가 보고 쓰기 편하게 단순하게 이해 할 수 있게 쓰겠다. 먼저 보일러 플레이트 중 create-react-app을 통해서 프로젝트를 생성 해 줄 것이다. redux-setting 이라는 디렉토리로 만들었다create-react-app redux-setting 이제 redux를 사용하기 위해 몇가지 모듈을 받아준다.npm install redux react-redux 이제 불필요한 부분을 지워준다.(기존 index 코드 부분이나 App 부분) 시작하기 전 리덕스의 구조를 생각해 둔다. src 안에 디렉터로리를 나눠서 구조를 갖춰준다.actionscomponentscontainersreducers 이제리덕스 구조 그림을 참고하고 순서 대로 만들어 준다.그러면 헤깔리지 않고 만들 수 있게 된다..