분류 전체보기

sns 앱에 코드를 추가하는 마지막 포스팅이다. 대부분의 설명은 주석으로 처리해두었다. 이번 포스팅은 이 전 게시글과 이어진다. 이전에 작성한 코드(sns3)와 일부 내용이 달라지므로 git에 올라가있는 sns3 폴더를 sns4 폴더로 복사해 작업했다. 구현하는 부분이 생길수록 계속 복사할 것이다.( sns5, sns6 ...) 책 Node.js 교과서(개정 2판) 책의 9장의 내용을 참고했다. +모든 코드는 github주소에 있다. 지금까지 구현한 것 프로젝트 기본 뼈대 잡기 프론트엔드 화면 구현하기 DB 세팅하기 로그인 구현하기(with Passport 모듈) 이번 포스팅에서 구현할 것 이미지 업로드 구현하기(with multer 패키지) 팔로우-팔로잉 기능 구현하기 해시태그 검색 기능 구현하기 5...

본격적으로 백엔드 부분을 구현해보자! 이번 포스팅은 이 전 게시글과 이어진다. 이전에 작성한 코드(sns2)와 일부 내용이 달라지므로 git에 올라가있는 sns 폴더를 sns3 폴더로 복사해 작업했다. 구현하는 부분이 생길수록 계속 복사할 것이다.( sns4, sns5 ...) 책 Node.js 교과서(개정 2판) 책의 9장의 내용을 참고했다. +모든 코드는 github주소에 있다. 지금까지 구현한 것 프로젝트 기본 뼈대 잡기 프론트엔드 화면 구현하기 DB 세팅하기 이번 포스팅에서 구현할 것 로그인 구현하기(with Passport 모듈) Passport 기본 세팅 로컬 로그인 구현 sns 로그인 구현(with kakao) 4. 로그인 구현하기(with Passport 모듈) Github: https:/..

본격적으로 백엔드 부분을 구현해보자! 이번 포스팅은 이 전 게시글과 이어진다. 이전에 작성한 코드(sns)와 일부 내용이 달라지므로 git에 올라가있는 sns 폴더를 sns2 폴더로 복사해 작업했다. 구현하는 부분이 생길수록 계속 복사할 것이다.( sns3, sns4 ...) 책 Node.js 교과서(개정 2판) 책의 9장의 내용을 참고했다. +모든 코드는 github주소에 있다. 지금까지 구현한 것 프로젝트 기본 뼈대 잡기 프론트엔드 화면 구현하기 이번 포스팅에서 구현할 것 DB 세팅하기 3. DB 세팅하기 Github: https://github.com/delay-100/study-node/tree/main/ch9/sns2 본격적인 기능을 구현하기 전에, 각각의 모델이 있어야 DB에 저장하기 좋다. ..

이번 포스팅부터는 여러 기능들이 들어갈 웹 사이트를 만들어보려고 한다! 지금까지 포스팅했던 내용들은 자세하게 설명하지 않고, 링크만 걸어둘 계획이다.(이해가 안 된다면 걸어둔 링크에 접속해보자!) SNS의 기능을 모두 만들게 되면 로그인, 이미지 업로드, 게시글 작성, 해시태그 검색, 팔로잉 등을 구현하게 된다. 책 Node.js 교과서(개정 2판) 책의 9장의 내용을 참고했다. +모든 코드는 github주소에 있다. 개발 환경 백엔드: Node.js DB: MySQL 프론트엔드: Nunjucks 이번 포스팅에서 구현할 것 프로젝트 기본 뼈대 잡기 프론트엔드 화면 구현하기 1. 프로젝트 기본 뼈대 잡기 Github: https://github.com/delay-100/study-node/tree/main..

이번 포스팅에서는 1. Windows에서 MongoDB 설치 및 실행, 2. MongoDB DB 생성 및 CRUD, 3. Mongoose 쿼리 수행 예(전체 코드 설명)에 대해 다루겠다. 책 Node.js 교과서(개정 2판) 책의 8장의 내용을 참고했다. +모든 코드는 github주소에 있다. MongoDB? MongoDB NoSQL(Not only SQL) - 관계형 데이터베이스가 아님 확장성과 가용성이 좋음 한 컬렉션에 다큐먼트로 다른 값의 데이터가 들어갈 수 있음 MySQL VS MongoDB 테이블(table) - 컬렉션(collection) 로우(row) - 다큐먼트(document) 컬럼(column) - 필드(field) 1. Windows에서 MongoDB 설치 및 실행 몽고디비 공식 다운..

이번 포스팅에서는 4. Sequelize로 CRUD 하기, 5. Sequelize 관계 쿼리, 6. 쿼리 수행 예(전체 코드 설명) 를 다루겠다. 앞선 포스팅과 이어지므로 보고오면 이해에 도움이 될 것이다. 책 Node.js 교과서(개정 2판) 책의 7장의 내용을 참고했다. +모든 코드는 github주소에 있다. -- 이전내용 정리 MySQL: 테이블 users, comments 생성 Sequelize: 모델 User, Comment 생성 테이블-모델 연결(User-users, Comment-comments) Sequelize에게 관계 알림 (users - comments) 4. Sequelize로 CRUD 하기 Sequelize로 CRUD 작업을 하려면 먼저 Sequelize 쿼리를 알아야 한다. 쿼리..

이번 포스팅에서는 1. MySQL, 2. Sequelize에 대해 다루겠다. MySQL은 간단히만 보고, Sequelize에 대해 자세히 다루겠다. 내 PC에 이미 있는 개발환경 MySQL WorkBench(워크벤치) 이미 내 PC에 설치되어 있으므로 이 포스팅에서는 위의 개발 환경 설치에 관한 내용은 생략함 책 Node.js 교과서(개정 2판) 책의 7장의 내용을 참고했다. +모든 코드는 github주소에 있다. 1. MySQL 1. Workbench에서 Connection 빨간 네모: localhost 작성 초록 네모(+빨간 네모): 클릭 후, Password에 MySQL설치 시 설정했던 password입력 2. 윈도에서 MySQL 실행 cmd를 열고, C:\Program Files\MySQL\MyS..

지금까지는 서버와 관련된 부분을 공부했다. 이번에는 프론트엔드에서 사용하는 템플릿 엔진에대해 알아보려한다. HTML은 정적인 언어이다. 사용자가 주어진 기능만 쓸 수 있고, 새로운 기능을 처리할 수 없으며 반복문도 불가능하다. 템플릿 엔진은 자바스크립트를 사용해서 HTML을 렌더링할 수 있게 한다. 이번 포스팅에서는 대표적인 템플릿 엔진인 1. 퍼그(Pug), 2. 넌적스(Nunjucks)를 다뤄보겠다. 이전에 포스팅한 express 웹 서버 만들기 -1, 2에서 사용한 코드에 추가할 것이므로, 보고 오면 좋다. 책 Node.js 교과서(개정 2판) 책의 6장의 내용을 참고했다. +모든 코드는 github주소에 있다. 주석 부분이 조금 다르니 블로그 글을 보면서 이해하는 것이 좋다. 1. 퍼그(Pug) ..

이번 포스팅에서는 1. multer, 2. 라우팅 분리(feat. Router 객체), 3. req, res 객체, +전체 코드를 다루겠다. express 웹 서버 만들기 -1에서 사용한 app.js 파일을 마저 사용하겠다. 책 Node.js 교과서(개정 2판) 책의 6장의 내용을 참고했다. +모든 코드는 github주소에 있다. 1. multer multer 이미지, 동영상 등을 비롯한 여러 가지 파일들을 멀티파트 형식으로 업로드할 때 사용 *멀티파트 형식: enctype이 multipart/form-data인 폼을 통해 업로드하는 데이터의 형식 미들웨어의 종류 설치 npm i multer multer의 동작은 아래에 [multer 전체 코드]의 주석으로 설명해두었다. +파일을 하나만 업로드하는 방법 ..

이번 포스팅에서는 1. express, 2. 미들웨어, 3. 자주쓰는 패키지를 다루겠다. 책 Node.js 교과서(개정 2판) 책의 6장의 내용을 참고했다. +모든 코드는 github주소에 있다. 1. express express 서버를 제작하는 과정에서의 불편함을 해소하고 편의 기능을 추가한 웹 서버 프레임워크 http 모듈의 요청과 응답 객체에 추가 기능을 부여 코드를 분리하기 쉽게 만들어 관리 용이 http 모듈을 내장하고 있음 express project EXAMPLE ) 1. ch6/express폴더 생성 2. npm init을 통해 express, nodemon을 설치 실행결과(생성된 파일 - node_modules, package-lock.json, package.json) +package...