BackEnd/NodeJs (17) 썸네일형 리스트형 유저 프로필 이미지 업로드 만들기 1 input 만들기 2. multer middleware 사용하기 설치: $ npm install --save multer 파일을 업로드 할수 있게 해준다. multer를 사용하기위해서는 조건이 딱 1개 있는데 form에 multipart/form-data을 formd에 입력해야한다. multer는 multiple 이 아닌 form을 처리하지 않는다고 쓰여있다. form(method="POST", enctype="multipart/form-data") 이것은 form이 다르게 encode 되게하는것이다. 여기서 enctype은 백엔드로 보내기위해 필요한 encoding tyoe이다.. 2-1 multer middleware 만들기 공식 문서 예 const express = require('express.. 유저 프로필 Post edit findByIdAndUpdate()는 update되기전의데이터를 return 해주고 한가지 옵션이 있는데 NEW: true를 주면 findByIdAndupdate가 업데이트된 데이터를 return 해 준다. 즉 mongoose에게 가장 최근에 업데이트된 object를 달라고 하는 것이다. 이렇게 해도 화면상의 값은 바뀌지를 않는데 막상 db에 들어가보면 바뀐것을 확인 할 수 있다. edit-profile.pug에서 loggednUser의 값을 입력하는데, 이값이 어디서 생성되었을까? 이값은 localsMiddleware에서 생성되었다. 여기서 loggedUser를 req.session.user이라고 정의하고 있다. 이 req.sessin.user은 로그인할 때 생성되므로 로그인하는 코드를 확인해보자. 하.. Github Oauth 사용하기 3 보호되어 있는 글입니다. Github oauth 사용하기 2 깃헙에서 받은 토큰을 access 토큰으로 바꿔줘야한다. client_secret는 오로지 백엔드에서만 존재해야하는데 client_id는 URL에 보여지기 때문에 secret은 이름그래도 보여져서는 안된다. 깃헙에서 준코드를 사용하여 access토큰으로 바꿀수 있다.export const finishGithubLogin = async (req, res) => { const baseUrl = "https://github.com/login/oauth/access_token"; const config = { client_id: process.env.GH_CLIENT, //필요할때 아무곳에서나 쓰려고 .env에 적었다. client_secret: process.env.GH_SECRET, .. Github Oauth 사용하기 깃허브 로그인을 만들기 위해서는 3 단계를 거쳐야한다.그래서 글을 단계별로 나누었다.자세한 방법은 Github Docs 에서 확인할 수 있다.Github Oauth 사용방법1. 사용자의 GitHub ID 요청사용자를 github으로 보내 로그인하게하면 깃허브에서 비밀번호,보안, 이메일 인증 등을처리해준다.2. 사용자를 GitHub가 다시 본래의 사이트로 돌려보내기(redirect)로그인이 승인되면 유저는 다시 깃헙에서 토큰을 받아서 웹사이트로 돌아온다.그 토큰을 이용하여 유저의 정보에 접근할 수 있다.3.3. 액세스 토큰을 사용하여 API에 접근하기우선 github application이 있어야한다.깃허브에 로그인해서 오른쪽 상단의 본인의 계정의 이미지를 누르면 setting이 있을것이다.세팅을 누르면 .. middle(soft)ware 운영체제와 실행되는 애플리케이션 사이에 존재하는 소프트웨어이다. 기본적으로 분산된 애플리케이션의 통신 및 데이터 관리를 가능하게 한다. 데이터와 데이터베이스가 "파이프" 사이를 쉽게 통과할 수 있도록 두 가지 애플리케이션을 함께 연결하기 때문에 배관이라고도하며, 미들웨어를 사용하면 사용자가 웹 브라우저에서 양식을 제출하거나 웹 서버가 사용자의 프로필을 기반으로 동적 웹 페이지를 반환하도록 요청할 수 있다. morgan? HTTP request loogr middleware for node.js morgan은 nodjs용 request logger middleware다. morgan 함수를 호출하면 내가 설정한대로 middleware를 return해 준다. 설치방법 npm i morgan morgan 함수.. 서버만들기 0. 서버란? 서버는 항상 인터넷에 열결되어있는 컴퓨터로 사용자의 요청(request)를 상시 듣고(listening)있는 컴퓨터다. 요청(request)? 사용자가 브라우저를통해 무언가를 요청하는 것 ex) 로그인id,password를 입력한 로그인요청, 뉴스 제목을 누르면 뉴스자료를 달라는 요청 서버에 요청하는것은 나의 행동을 듣는 서버에만 요청을 보낼수있기때문에 우선 서버가 어떤 port번호를 들을지를 정해줘야한다. 1. 포트번호 지정하기 const PORT = 4000; app.listen(PORT); //위 아래 모두 4000을 사용한다 app.listen(4000); 서버는 모든 것을 감시할 수 없기때문에 특정 부분을 계속해서 감시하려면 port가 필요하다. port는 컴퓨터의 수많은 문중 하.. BABEL 과 nodemon 1. BABEL 이란? Babel은 자바스크립트 컴파일러이다. 무슨말이냐면, ES6 코드(최신js문법)을 babel이 nodejs가 자바스크립트를 이해할수 있도록 구버전의 코드로 변환(transpile)해주는 도구이다. 즉, 자바스크립트 최신문법을 쓰고 싶다면 babel을 사용하면 된다. (위에는 스터디때 공부한거 설명하려고 쓰려고 만든이미지) 2. 설치방법 BABEL 공식사이트 1) 설치 명령어 입력 입력코드: npm install @babel/core @babel/node --save-dev 위 코드를 입력하고 package.json파일을 보면 devDependencies가 생긴것을 확인 할 수 있다. --save-dev 만약 명령어에서 --save-dev를 빼고 npm을 실행한다면 "dependen.. package.json 처음 공부했을때는 npm init을 치고 그냥 시키는대로만 만들고 말았는데 혼자서 공부하다보니 package.json의 중요성을 느껴서 좀 더 공부해보았다. 1. package.json이란? nodejs로 서버를 만들때 가장 처음으로 만들어보는 파일. 이라고만하면 면접은 탈락이겠지.. package.json은 node의 프로젝트 루트에 존재하는 파일로 프로젝트와 관련된 메타데이터를 보유하고있는 문서파일이라고 보면된다. 2. package.json 만들기 package.json을 만드는 방법에는 두가지가 있다. (1) npm init / yarn init 이 방법을 사용하려면 npm이 필요한데 node를 설치하면 npm은 자동적으로 설치되기때문에 node가 시스템에 설치되어 있어야 한다. 위 방법은 컴퓨터.. 초기설정(1) npm i index.js까지 만들었다면 이제 express를 설치해보자. 1.npm i /npm i express 입력코드: npm i(또는 install) express 57개의 패키지를 받았으며, package-lock.json파일과 node_modules폴더가 자동적으로 만들어졌다. (.gitignore는 내가 DS_Store를 git에 자주 올려서 미리 만들어둔것이다.) node_modules 란? npm으로 설치한 모든 패키지들이 저장되는 장소(폴더) 로 용량이 굉장히 크기도하고 package.json파일만 있어도 모듈들을 설치할 수 있어 gitignore해야하는 파일이다. github에 푸쉬하지 않도록 조심하자. package-lock 이란? package-lock은 나의 패키지 파일들을 안전하게 관리.. 초기설정(0) 1. 프로젝트를 진행 할 폴더를 만든다 맥북: mkdir 폴더명 윈도우: 새폴더 2. github에 연결하기 1. 폴더 경로에 git init 입력. 2. 깃허브로 이동하여 새 레포지토리를 만든다. 3.만들어진 레포의 url을 복사. 4. git remote add origin [레퍼지토리 URL] 잘연결됬는지 확인하고 싶다면 git remote -v를 입력하면된다. 처음 폴더를 만들었을때 위 명령어를 입력하면 비어있으나 복사한 url을 연결하였다면 아래의 사진처럼 뜰 것이다. 3. package.json을 만들기 touch package.json으로 만들수도 있지만 수동으로 만들면 에러가 날 가능성이 높으므로 npm을 써서 만들자. json(JavaScript Obnect Notation)이란? 제이슨.. promise {pending} 오늘도 새로운 에러를 만났다.promise pending은 비동기함수가 처리 되지않고있는 상태라는것만 알고있는데 뭐가 문제인걸까?Promise는 3가지의 상태로 나뉜다.-pending(대기): 이행되지도 거부되지도 않은 상태-fulfilled(이행): 성공-rejected(거부): 실패 왜..왜 작동하지 않는거냐..const puppeteer = require("puppeteer");const cheerio = require("cheerio");let screenShotList = { tag: "", title: "", influencer: "",};const crawl = async (keyword) => { const browser = await puppeteer.launch({ headles.. axios와 cheerio 로 간단한 크롤링 만들어보기 회사에서 크롤링해서 원하는 데이터를 찾아 스크린샷을 찍고 원하는 데이터에 빨간 박스를 그려주고 저장하는 API를 만들어달라고 요청이 들어왔다. 일단 크롤링이 정확히 뭔지 몰라서 크롤링이 뭔지부터 찾아봤다. 웹 크롤링이란? 웹 크롤링(Web Crawling)은 웹 페이지를 주기적으로 탐색하고, 웹 페이지의 내용을 수집하는 자동화된 프로세스를 말한다. 크롤러 또는 스파이더라고 불리는 소프트웨어가 웹사이트를 방문하고 데이터를 수집하는데, 목적은 웹 페이지의 정보를 수집하여 분석하거나 저장하는 것이다. 이를 통해 특정 웹사이트의 콘텐츠, 가격 정보, 뉴스, 이미지 등 다양한 데이터를 수집할 수 있으며, 크롤링된 데이터는 후속 분석, 기계 학습 모델 학습, 비즈니스 인텔리전스 등에 활용될 수 있다. 크롤링 과정 .. API Documentation (+ postman) API Docs에대해 처음 알았을때 swagger를 사용해서 만들었다. 그런데 최근에 Postman으로도 가능하다는걸 알았다. 어떻게 하는지 궁금해서 해봤다. Postman API 개발 및 테스트를 위한 협업 도구로서, 주로 개발자들이 API를 효과적으로 테스트하고 관리하는 데 사용되는 도구이다. Postman을 사용하여 API 엔드포인트에 요청을 보내고 응답을 검사하여 API를 효과적으로 테스트할 수 있다. API Documentation API Documentation이란 백엔드에서 생성한 API의 구성요소들을 개발자들끼리 어떻게 주고받을지를 문서화한것을 말한다. API를 문서화하면 정보들을 효율적으로 공유할 수 있어 개발자가 직접적으로 소통해야하는 빈도를 줄이고, 일의 능률을 높일 수 있다. API.. httpie 와 express nodejs를 사용하는 이유는 express를 통한 다양한 프레임워크를 사용할 수 있는점, HTTP 서버를 쉽게 설정하고 관리할 수 있어서이다. 근데 express를 사용하지않고 순수 Node HTTP 모듈만을 사용해서 HTTP API를 만든다면 어떻길래? 궁금한건 못참지! express를 사용하지않은 HTTP API 일단 폴더를 생성하고 npm init -y를 하여 패키지 제이슨을 만들었다. const http = require("http"); const server = http.createServer((req, res) => { console.log("request received"); res.setHeader("Content-Type", "application/json"); res.end( JSON.. NVM download fail 프로그램을 개발할때 아예 기초부터 설정하는것이 아닌 다른사람이 작성하여 공유한 코드를 가져오거나 다운로드 받아서 사용하게된다.JAVA에는 Maven,Gradle(최근)이 있고 Python에는 PyPi가 있다.Node.js도 다른사람들이 작성한 라이브러리들을 모아둔 것이 있는데그게바로 NPM(Node Package Manager)이다.과거에는 npm도 다운 받아서 설치해야했지만 근래에는 node.js를 설치하면 npm도 자동적으로 설치되기때문에 따로 다운받을 필요가 없다.1.npm?- npm publish 기능명 : 내가만든 기능을 npm에 올리는 명령어- npm install 기능명 : 다른사람들이 만든 기능을 다운받는 명령어하지만 npm의 다운로드 속도가 느리다고 생각하여 더 빠르게 동작가능한 기술이 .. Nodejs 분명 nodejs는 크롬의 v8엔진을 사용한 런타임이라고 배웠다.근데 면접스터디에서 팀원이 "nodejs가 뭐에요?"라는 질문을했고, 나는 "자바스크립트를 기반의 크롬의 v8엔진을 탑재한 내pc에서 동작하는 서버입니다"라고 대답했다.그리고 팀원의 "엄밀히 말하면 틀렸습니다. 서버가 아닙니다" 라는 대답.다시공부하자..0. 등장 배경1. nodeJs란?nodejs를 한문장으로 말하자면크롬 브라우저의 V8 javascript 엔진을 탑재한 server side 오픈소스 javascript runtime이다.서버를 만드는 런타임 환경이지 nodejs가 서버는 아니다.JavaScript브라우저(크롬,사파리.웨일)에서 HTML의 생성부터 페이지의 기능을 동적으로 처리되도록 만들어주는 브라우저에서 실행되는 프로그.. 이전 1 다음
