Nodemon 설치 및 세팅

목차 1. Nodemon Nodemon Node.js 환경에서 작성되는 코드는 소스코드가 변경될 때 실행되는 파일을 중지 후 재시작해야 변경된 코드를 적용시켜서 보여준다. 하지만 Nodemon을 사용하게 되면, 코드를 변경할 때 자동으로 다시 시작해서 바로 반영되어 보여줄 수 있다. 1. 관련 패키지 설치 $ npm install -D nodemon 2. nodemon.json Nodemon을 실행할 때 여러 옵션이 있는데, 이를 json 파일로 따로 관리하여 nodemon을 실행시킬 수 있다. 여러 옵션이 있지만 중요한 옵션 3가지는 "watch", "ext", "exec"이다. { // 어떤 디렉토리 안에 있는 파일을 추적할 것인가? "watch": [], // ex) ["src/**/*"] // 어..

• format_list_bulleted SETTING
• · 2023. 4. 19.
• textsms

230221 - React (리액트) 기초

오늘 내가 배운 것 1. 브라우저 렌더링 과정 2. 브라우저 렌더와 React 3. React 4. JSX 5. DOM / React / JSX를 이용한 React 문법 비교 1. 브라우저 렌더링 과정 여태까지는 화면을 꾸밀 때 `javascript`를 이용하여 HTML을 조작했다. (DOM) 브라우저 렌더링 과정 (응답을 받고 화면에 보이기 직전 시점이다.) HTML을 그릴 때 아래와 같은 과정을 거친다. 1. 응답이 오면, 응답 바디에 있는 HTML 내용을 파싱 한다. 2. 파싱 이후 트리를 만든다. 3. 표현준비를 한다. (사이즈 정렬... 등등..) 4. Render가 된다. 2. 브라우저 렌더와 React DOM을 이용하여 화면을 그리는 과정이 매우 불편하고 귀찮았다. (엘리먼트를 만들고 inn..

• format_list_bulleted TIL(Today I Learned)
• · 2023. 2. 21.
• textsms

230118 - JavaScript - 내장 모듈 crypto, NodeJS

오늘 내가 배운 것 1. 내장 모듈 crypto 2. JWT - Signature 3. JWT - 토큰 만들기 4. JWT - 토큰 검증하기 1. 내장 모듈 crypto Node.js의 내장 모듈이기 때문에 require 해서 사용해야 한다. crypto는 클래스이다.. const crypto = require("crypto") const salt = process.env.SALT || "web7722" const hash = crypto.createHmac(`sha256`, salt).update(평문).digest("hex") // createHmac은 `정적메서드`다. JWT에서 Signature을 만드는 목적이 headerd와 payload가 위조, 변조되었는지 확인하기 위해서인데, salt값이 ..

• format_list_bulleted TIL(Today I Learned)
• · 2023. 1. 19.
• textsms

230118 - JavaScript - JWT, base64, 인코딩과 디코딩

오늘 내가 배운 것 1. 인코딩(Encoding)과 디코딩(decoding) 2. Base64 3. JWT 인코딩 구현해 보기 1. 인코딩(Encoding)과 디코딩(decoding) 1-1. 인코딩(Encoding) 인코딩은 어떤 정보나 데이터를 다른 형태, 형식으로 변환하는 과정을 말한다. 인코딩을 하면 데이터를 표준화하거나 데이터의 처리속도를 향상할 수 있고 저장공간을 절약할 수 있는 장점이 있다. 우리가 눈으로 확인할 수 있는 동영상이나 사진들도 인코딩해서 데이터를 주고받는다. 인코딩의 반대말은 디코딩이다. 1-2. 디코딩(Decoding) 디코딩은 인코딩과 반대되는 개념으로 , 전달받은 숫자 또는 문자로 된 데이터들을 사용자가 문자나, 실제 동영상으로 볼 수 있게 해석하는 역할을 말한다. 인코딩..

• format_list_bulleted TIL(Today I Learned)
• · 2023. 1. 18.
• textsms

230105 - JavaScript - AJAX, FETCH, AXIOS를 이용한 비동기 통신하기

jQuery를 이용하지 않음. 오늘 내가 배운 것 1. 비동기방식 통신이란? 2. 프론트엔드에서 데이터 요청하기 AJAX fetch axios 비동기방식 통신이란? 동기식 방식은 요청을 보낸 후 응답을 받아야 다음 작업을 할 수 있지만 비동기 방식은 요청을 보내고 응답을 기다리지 않고 다른 일을 할 수 있는 상태이다. 그래서 이를 이용하면 웹 페이지를 새로고침 없이 원하는 데이터를 이용하여 웹 페이지의 구성을 바꿔 줄 수 있다. 프론트엔드에서 데이터 요청하기 지금 코드는 front 서버와 back 서버를 분리한 상태이고, MySQL을 이용하여 데이터베이스를 만든 후 데이터가 있는 상태에서 그 값을 back 서버의 라우터를 이용하여 불러오는 과정이다. front와 back 서버가 분리되어 있기 때문에 co..

• format_list_bulleted TIL(Today I Learned)
• · 2023. 1. 5.
• textsms

230103 - SSR,CSR 비교 / AJAX / 프론트엔드 서버와 백엔드서버 / CORS

오늘 내가 배운 것 1. SSR, CSR 비교 2. AJAX 3. 프런트엔드 서버와 백엔드 서버로 분리하기 cors 기본동작 cors 에러해결방법 SSR, CSR 비교 예전에 HTTP를 배우면서 과거의 통신방식과 현재의 통신방식에 대해서 그림으로 표현한 적이 있다. http://baekspace.tistory.com/88 221212 - HTTP 통신 방식, Node.js HTML파일 불러오기, path.join 오늘 내가 배운 것 1. 과거와 현재 HTTP 통신 방식 비교 2. HTML 파일 열기 과거와 현재 HTTP 통신 방식 흐름 비교 그림을 확인하면서 읽어주세요. 과거에는 백엔드 개발자가 웹페이지를 구현하였는데 baekspace.tistory.com 과거의 방식은 SSR(Server Side Re..

• format_list_bulleted TIL(Today I Learned)
• · 2023. 1. 3.
• textsms