nodejs 기초 총 정리

 

블로그 이전 및 변경 페이지

https://blog.han-py.com/language/ko/nodejs/introduction

 

 

 

 

 

---

Backend 백엔드에서의 Nodejs

express를 활용한 웹 서버에 관한 부분이다. npm을 활용한 프로젝트가 아닌 nodejs 자체의 서버를 이해하려면, 아래의 nodejs 설명 부분을 참고하자.

 

express 기초

> [제작중] 처음 웹서버를 만드는 사람을 위한 nodejs express 기초 개념 

 

[Nodejs/express] 핵심 기초 정리

> express와 MySQL연결, express 파일 구조 설명, mybatis 연결,  nodemon, cors, 아키텍처를 포함한 광범위한 범위를 다룬다. 위의 내용만 익혀도 기초는 넘기기 가능하다.

 

[Nodejs] 따라하면 연결되는 몽고 DB와 express

> mongoose를 활용한 MongoDB와 express 연결하기

 

[nodejs] dotenv로 중요키 분리하기

> 보안키 숨기는 방법으로 dotenv를 활용하기

 

캐시와 세션을 활용한 로그인 기초

> [제작 중] 처음 로그인을 구현하는 초급자를 위한 기초 개념

 

passport를 활용한 로그인

> [제작 중] 라이브러리를 활용한 로그인

 

[nodejs/expess] backend에 session 붙여 login 하기

> 로그인 실습 위주의 개념이다.

 

JWT를 활용한 로그인

> [제작 중] JWT를 사용한 nodejs 로그인

 

JWT를 활용한 로그인 확인

> [제작 중] JWT를 활용한 로그인 유저 미들웨어 만들기

 

[React/Nodejs] 카카오 로그인 연결하기

> 카카오 로그인 연결하기

 

[Nodejs] AWS EC2 배포 ALL-IN-ONE

> nodejs 웹서버 배포

 

MERN Stack으로 가장 빠르고 쉽게 Web 만들기

> Mongo DB, Express, React, Nodejs를 활용한 Web 사이트 만들기

 

---

Frontend 프런트엔드에서의 Nodejs

사실 React와 Nextjs도 Nodejs 위에서 실행된다. 그렇다면, 우리는 Frontend를 사용만 할 줄 알면 될까? 아니다. Frontend의 핵심은 화면 렌더라고 할 수 있다. 아래의 링크를 참조하자.

 

CSR 기초 정리

> [제작 중] client side render 기초

 

SSR 기초 정리

> [제작중] server side render 기초

 

SSG 기초 정리

> [제작중] static side generation 기초

 

BFF 기초정리

> [제작중] Backend for Frontend

 

MSA 기초정리

> [제작중] MSA(Micro Service Architecture) 

 

React 기초 정리

> [공식문서 변형] 코드를 치면서  React에서 다루는 핵심 콘셉트를 이해하고 구현하는 방법을 알아보자.

 

[react] 상태관리 기초 - 효율적으로 데이터 저장하고 수정하기

> 데이터 관리리를 위해 어떤 라이브러리를 사용할 것인가(redux, recoil, context API 등)

 

[React] React Router 페이지 이동

> react router 최신 버전 사용방법

 

[React] react router 페이지 이동 세부 정리

> history는 5버전에 사용됐던 것으로 우리는 v6에 맞게 navigate와 location을 활용한 페이지 이동방법

 

react router 페이지 상단으로 올리기

> 마우스 클릭 시 페이지 상단으로 스크롤 올리기

 

[React] 클래스 필드(class field)

> [제작중] 대세인 함수형 컴포넌트가 아닌 class에 대한 개념

 

[React] CSS 배경화면 가운데 글 넣기

> 배경화면 가운데 글 넣기

 

[Web/React] - [youtube api] 유튜브 데이터 가져오기

> 유튜브 데이터 가져오는 방법

 

[react] 데이터 받아와서 보여주기

> react에서 데이터를 API로 가져오는 방법

 

[react] 실무 개발 환경/배포 환경 설정(. env)

> 배포 / 개발 / 테스트 환경을 분리하여 개발하기

 

[React Web] AWS EC2 배포 ALL-IN-ONE

> react 배포하기

 

[react web] mocking 모킹 방법 (msw로 데이터 가져오기)

> 가상의 데이터를 활용하는 방법

 

[react] 아키텍처 기초 정리

> 데이터 가져오는 부분을 service 폴더로 분리하기(폴더 구조화/추상화)

 

[react] CRUD 기초 총 정리

> [제작중] CRUD란 끝이 없는 고민인것 같습니다. 더 좋은 방법이 있다면 남겨주세요~

 

[React] Array method인 map() 사용 잘하기

> react에서 Map 사용하기.

 

CORS에 대한 고찰

> cors에 대한 기초 해결책

 

react 헷갈리는 코드 정리

> [제작 중] 코드를 치면서 자주 확인하는 부분에 대한 정리

 

[Nextjs] 프로젝트 일단 만들면서 시작하기

> nextjs 프로젝트 생성해보기

 

[Nextjs] 데이터 가져오기 기초(SSR, SSG, CSR)

> 렌더 방식에 따라 데이터를 가져오는 방법을 SSR, SSG, CSR로 구현하기

 

Nextjs pages/api

> [제작 중] serverless 기초

 

Nextjs 파일구조

> [제작 중] nextjs에 포함된 react와의 역할 분리

 

Redux-saga

> [제작 중] 상태관리의 기본 redux를 활용한 saga

 

react-query / SWR

> [제작 중] 상태관리 관점의 fetch 라이브러리

 

[React] Webpack-웹팩 기초 정리

> [제작 중] 웹을 구상하는 모듈을 조합해서 하나로 만들어 주는 webpack에 대한 기초

 

ESlint

> [제작 중]

 

Nodejs 심화 이해하기

express를 활용하는 부분은 윗부분의 백엔드에서의 Nodejs 부분을 참고하자.

 

[nodejs] require 과 import

> [제작 중]

 

[nodejs] 순환참조

> [제작 중]

 

[nodejs] process 고찰

> [제작 중]

 

[nodejs] window와 global

> [제작 중]

 

[nodejs] 암호화

> [제작 중]

 

[nodejs] dotenv와 process.env

> [제작 중]

 

[nodejs] path

> [제작 중]

 

[nodejs] querystring과 searchParams

> [제작 중]

[nodejs] child_process

> [제작 중]

 

[nodejs] 파일 핸들링 fs

> [제작 중]

 

[nodejs] http 모듈을 활용한 웹서버 1. 서버만들기

> [제작 중] 

 

[nodejs] http 모듈을 활용한 웹서버 2. 클라이언트에서 요청하기

> [제작 중]

 

[nodejs] http 모듈을 활용한 웹서버 3. 쿠키와 세션

> [제작 중]

 

[nodejs] http 모듈을 활용한 웹서버 4. redis

> [제작 중]

 

[nodejs] http 모듈을 활용한 웹서버 5. https 적용하기

> [제작 중]

 

[nodejs] http 모듈을 활용한 웹서버 6. http2 모듈 사용해보기

> [제작 중]

 

[nodejs] http 모듈을 활용한 웹서버 7. http3 모듈 사용해보기

> [제작 중]

 

[nodejs] 블로킹/논블로킹 동기/비동기

> [제작 중]

 

[nodejs] buffer와 stream

> [제작 중]

 

[nodejs] 프로세스와 스레드

> [제작 중]

 

[nodejs] cluster

> [제작 중]

 

[nodejs] npm init

> [제작 중] 여기까지 하면, 이제 express로 넘어가면 된다.

 

 

 

 

javascript 복습하기

아래의 개념은 기본적인 javascript에 관련한 키워드이다. 모르는 내용이 있으면 공부해보자. 추후 정리 예정.

var/let/const
템플릿 문자열
객체리터럴
화살표함수
this
구조분해 할당
프로미스
async/await

호출스택/이벤트루트 **

 

 

 

 

잘못된 내용이나 추가가 필요한 부분이 있다면 알려주시면 수정하겠습니다. 감사합니다.