javascript

이번 포스팅에서는 간단한 개발용 프로그램을 구현하기 위해 CLI 프로그램을 만들어보겠다. 책 Node.js 교과서(개정 2판) 책의 14장의 내용을 참고했다. +모든 코드는 github주소에 있다. CLI Command Line Interface(명령줄 인터페이스) 콘솔 창을 통해 프로그램을 수행하는 환경 1. 간단한 콘솔 명령어 구현하기 콘솔(console)에 cli를 입력했을 때 template.js, template2.js를 실행하기 위해 package.json을 먼저 만들어준다. Git [node-cli/package.json] { "name": "node-cli-delay100", "version": "1.0.0", "description": "", "main": "index.js", "auth..

이번 포스팅에서는 SSE를 이용해 서버 시간을 받아오기를 다룬다. 클라이언트에서 시간을 조작할 수 있으므로 클라이언트 측의 시간을 이용하지 않고, 서버 측의 시간을 받아오는 것이다! 책 Node.js 교과서(개정 2판) 책의 13장의 내용을 참고했다. +모든 코드는 github주소에 있다. 개발 환경 백엔드: Node.js DB: Sequelize 프론트엔드: Nunjucks SSE SSE Server-Sent Events IE와 엣지 브라우저에서도 서버센트 이벤트를 사용할 수 있음 패키지 불러오기(npm 패키지 설치) npm i sse코드 Git [app.js] ... const sse = require('./sse'); const app = express(); ... const serv..

이번 포스팅에서는 Socket.IO를 이용해 익명 채팅을 만들어보겠다! 이전 포스팅에서 웹 소켓과 Socket.IO에 대한 기본적인 설명과 예제를 적어두었으니 보고 오면 좋다. 책 Node.js 교과서(개정 2판) 책의 12장의 내용을 참고했다. +모든 코드는 github주소에 있다. 개발 환경 백엔드: Node.js DB: MongoDB 프론트엔드: Nunjucks GIF 채팅방 만들기 주의: 소켓은 버전에 따라 에러를 많이 내므로, 본 포스팅에 있는 버전과 일치하지 않는 경우 에러가 발생할 수 있음! 1. 뼈대 구축하기(npm, DB, 추가html/css) 1. npm 설치 Git [package.json] { "name": "gif-chat", "version": "1.0.0", "main": "a..

이번 포스팅에서는 웹에서의 실시간 통신인 소켓을 이용해보자! 대부분의 설명은 주석으로, 추가적인 코멘트가 필요한 경우 블로그에 적었다. 책 Node.js 교과서(개정 2판) 책의 12장의 내용을 참고했다. +모든 코드는 github주소에 있다. 1. 웹 소켓(Web Socket)이란? 폴링(polling) 단방향 클라이언트 -> 서버 클라이언트에서 주기적으로 서버에 업데이트 있는지 확인하는 요청을 보냄 서버센트 이벤트(SSE; Sever Sent Event) 단방향 서버 -> 클라이언트 한 번 연결하면 서버가 클라이언트에 지속적으로 데이터를 보냄 클라이언트에서 서버로 데이터를 보낼 수 없음! 그렇다면, 웹 소켓은? 웹 소켓(Web Socket) 양방향 서버 클라이언트 한 번 웹 소켓이 연결하면 _계속 연..

이전에 만들었던 sns(Git [ch9/sns5]) 서비스의 API(sns-api)를 만들어보겠다. (데이터베이스를 sns 서비스와 공유하겠다.) 또한 snsplus라는 sns-api를 이용하는 서비스도 간단하게 만들어보겠다. 책 Node.js 교과서(개정 2판) 책의 10장의 내용을 참고했다. 전체 클라이언트 서버 관계 sns5: 나의 앱(localhost:8001) sns-api: sns5의 API 앱(localhost:8002) snsplus: sns-api를 이용하여 데이터를 가져오는 제 3자 앱(localhost:4000) Github 주소1(sns-api, snsplus): https://github.com/delay-100/study-node/tree/main/ch10 Github 주소2(s..

이번에 다룰 내용은 로그인(로컬, 카카오)에 관한 내용인데, 개인적으로 sns를 만들면서 가장 코드를 이해하기 힘들었다. 따라서 이번 포스팅에서는 로그인만을 다루며 코드를 이해해보겠다! 사실 이 부분은 이전 포스팅에서도 한 번 다뤘었는데, 어떤 흐름으로 흘러가는지 정확히 하기 위해 이번 포스팅을 작성했다. Github: https://github.com/delay-100/study-node/tree/main/ch9/sns5 이전 포스팅에서 파헤쳐 본 것 SNS 만들기 동작별 흐름 이해하기 -1(with Node, MySQL, Nunjucks) ★ 기본 module 세팅 전체 app.js 세팅 메인 페이지 이해하기 +layout.html 설명 회원가입 기능 이해하기 이번 포스팅에서 파헤쳐 볼 것 로컬 로그..

지금까지 구현한 sns를 동작들을 흐름을 위주로 정리하면서 전체 코드를 이해해보겠다! Github: https://github.com/delay-100/study-node/tree/main/ch9/sns5 구현한 기능 SNS 만들기 -1(with Node, MySQL, Nunjucks) 1. 프로젝트 기본 뼈대 잡기 2. 프론트엔드 화면 구현하기 SNS 만들기 -2(with Node, MySQL, Nunjucks) 3. DB 세팅하기 SNS 만들기 -3(with Node, MySQL, Nunjucks) 4. 로그인 구현하기(with Passport 모듈) SNS 만들기 -4(with Node, MySQL, Nunjucks) 5. 이미지 업로드 구현하기(with multer 패키지)* 6. 팔로우-팔로잉 ..

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에 저장하기 좋다. ..