express.js Express 바닥부터 구현해보기 # Hello world 예제 app.js 이름의 파일에 다음과 같은 코드를 추가한다. 2.node app.js 명령어를 터미널에 입력한다. 3.localhost:3000을 클릭 만약 위와 같이 get의 endpoint에 /hello 를 입력하지 않는이상 아래와 같이 페이지가 뜬다.... node.jsexpress.jsdevelopmentdevelopment 유튜브 클론코딩 복습노트-2 각각의 상황에 맞는 페이지를 만들어나가면 다음과 같을 것입니다. video: /trending-videos /see-video /edit-video /upload-video /delete-video 이 경로들에 대한 요청을 모두 app.get()으로 받고, 각각에 해당하는 컨트롤러를 만들고, 필요한 미들웨어까지 만든다면 server.js 파일은 필요 이상으로 복잡해집니다. Express의 r... 클론코딩JavaScript유튜브node.jsexpress.jsJavaScript Login & Register with the MERN Stack (part3) 앞선 part1, part2에서 구현한 API routes 를 테스트 해본다. postman은 개발한 API를 테스트 하고, 테스트 결과를 공유하여 API의 생산성을 높여주는 플랫폼이다. i. Testing Register endpoint 먼저 서버를 실행한다. postman을 연 다음 다음과 같이 setting한다. send 버튼을 누르면 응답이 성공적으로 온다. name, email, 암... postmanBackendMERNAuthnode.jsmongodbFullstackregisterreact.jsexpress.jsloginAuth Login & Register with the MERN Stack (part5) create component for Login, Register set up redux auth를 위한 Login.js와 Register.js파일을 auth 폴더 내에 생성한다. 1. Register.js email, name, password, confirm password를 입력받고 제출하는 폼을 만든다. register화면은 다음과 같다. 입력한 뒤 SIGN UP 버튼을 누르면 콘솔창... MERNAuthnode.jsmongodbfrontendFullstackregisterreduxreact.jsexpress.jsloginAuth [TIL]1201-Node.js(2) 웹 서비스 동작 방식 HTTP 요청은 사용자가 어떤 데이터가 필요한지를 서버에게 알리는 역할 HTTP 요청은 사용자가 어떤사용자가, 어떤 데이터를 필요로 하는지 등을 담고 있다. HTTP 응답은 사용자가 요청한 데이터와, 어떤 데이터가 전송되는지 등을 담고 있다. 구글맵, 웹 채팅 등 사용자가 다양한 기능을 수행할 수 있음 웹 프레임워크 - HTTP 요청 처리 웹 프레임워크는 HTTP 요청을... CSR라우팅SSR엘리스SW엔지니어트랙웹TILexpress.jsCSR <Express.js> Router-3 Router-2에서 봤듯이 url이 늘어날수록 개발자도 기억을 하거나 확인하기가 어려워집니다. url 구조를 한곳에서 변수로 관리해봅시다. 먼저 routes.js 파일을 만들어 줍니다. project routes.js :변수이름 express는 :부분을 변수로 처리하고 이 부분은 req.params에 변수이름과 동일한 key에 담기게 됩니다.:id 부분은 req.params.id에 값이 담기... express.jsrouterexpress.js <Express.js> 여러 Middleware 소개 및 적용 오늘은 총 4개의 middleware를 알아보겠습니다. Morgan이란? 무슨 일이 어디서 일어났는지 로그를 제공하는 middleware라고 정의하겠습니다. Morgan 설치 및 사용 %npm install morgan을 터미널에 입력합니다. 사용 방법은 아래와 같습니다. morgan은 logging option을 받는데요. 저희가 사용할 dev tiny, common, combined등과 ... express.jshelmetbody parsermorgancookie-parsermiddlewarebody parser <PassportJS> express-session 자 우리가 로그인 기능을 구현하기 전에 세션에 대한 개념을 한번 알아봅시다. 세션은 쿠키와 비슷하지만 쿠키는 브라우저에서 세션은 서버에서 관리한다는 면에서 다릅니다. 세션이 쿠키보다 보안적으로 우수하므로 로그인과 같은 작업에 보통 사용합니다. 세션을 사용하기 위해서 expressjs에서는 express-session을 추천하고 있습니다. %npm insatll express-session을 ... express.jspassportjssessionexpress.js <Express.js> 설치 및 시작 적은 코드로 빠르게 서버를 구성할 수 있습니다. 다른 프레임워크로 Django, Rails, Laravel 등이 있습니다. 이번 시리즈는 꽤 규모가 크기 때문에 각 글마다 수정하고 추가할 디렉토리를 아래와 같이 표기 하겠습니다. +가 붙으면 파일이나 폴더가 추가된다는 의미입니다. -가 붙으면 파일이나 폴더가 삭제된다는 의미입니다. *가 붙으면 파일이 수정된다는 의미입니다. Express.js... express.jsexpress.js Plate Code 00 - Node.js & Express.js *️⃣ 보일러플레이트란? ✔️ 컴퓨터 프로그래밍에서 보일러 플레이트란 최소한의 변경으로 반복적으로 비슷한 형태를 띄게되는 즉, 여러곳에서 재사용 가능한 코드를 뜻한다. ✔️ 프로젝트를 하다보면 로그인 회원가입, 버튼 등 여러가지 비슷한 형태의 코드를 반복적으로 작업하는 경우가 많은데 이러한 코드들을 보일러플레이트로 미리 템플릿을 만들어서 갖춰두면 여러 곳에서 재사용하기 편리하고 용이하다. ✔... 코딩공부express.jsnode.jsBoilerplateBoilerplate <Express.js> edit profile form 이번 시간엔 edit-profile form을 만들어보겠습니다. editProfile.pug Method 여기서는 method를 post로 했는데요. 바로 개인별 설정사항이기 때문에 비공개적으로 처리해야하기 때문입니다. get으로 처리하면 url에 정보가 추가되기 때문에 유의합시다. Change Password 비밀번호를 변경하는 것은 아이디 권한에 대해 더욱 중요한 사항이므로 한 단계 더 ... express.jsformexpress.js
Express 바닥부터 구현해보기 # Hello world 예제 app.js 이름의 파일에 다음과 같은 코드를 추가한다. 2.node app.js 명령어를 터미널에 입력한다. 3.localhost:3000을 클릭 만약 위와 같이 get의 endpoint에 /hello 를 입력하지 않는이상 아래와 같이 페이지가 뜬다.... node.jsexpress.jsdevelopmentdevelopment 유튜브 클론코딩 복습노트-2 각각의 상황에 맞는 페이지를 만들어나가면 다음과 같을 것입니다. video: /trending-videos /see-video /edit-video /upload-video /delete-video 이 경로들에 대한 요청을 모두 app.get()으로 받고, 각각에 해당하는 컨트롤러를 만들고, 필요한 미들웨어까지 만든다면 server.js 파일은 필요 이상으로 복잡해집니다. Express의 r... 클론코딩JavaScript유튜브node.jsexpress.jsJavaScript Login & Register with the MERN Stack (part3) 앞선 part1, part2에서 구현한 API routes 를 테스트 해본다. postman은 개발한 API를 테스트 하고, 테스트 결과를 공유하여 API의 생산성을 높여주는 플랫폼이다. i. Testing Register endpoint 먼저 서버를 실행한다. postman을 연 다음 다음과 같이 setting한다. send 버튼을 누르면 응답이 성공적으로 온다. name, email, 암... postmanBackendMERNAuthnode.jsmongodbFullstackregisterreact.jsexpress.jsloginAuth Login & Register with the MERN Stack (part5) create component for Login, Register set up redux auth를 위한 Login.js와 Register.js파일을 auth 폴더 내에 생성한다. 1. Register.js email, name, password, confirm password를 입력받고 제출하는 폼을 만든다. register화면은 다음과 같다. 입력한 뒤 SIGN UP 버튼을 누르면 콘솔창... MERNAuthnode.jsmongodbfrontendFullstackregisterreduxreact.jsexpress.jsloginAuth [TIL]1201-Node.js(2) 웹 서비스 동작 방식 HTTP 요청은 사용자가 어떤 데이터가 필요한지를 서버에게 알리는 역할 HTTP 요청은 사용자가 어떤사용자가, 어떤 데이터를 필요로 하는지 등을 담고 있다. HTTP 응답은 사용자가 요청한 데이터와, 어떤 데이터가 전송되는지 등을 담고 있다. 구글맵, 웹 채팅 등 사용자가 다양한 기능을 수행할 수 있음 웹 프레임워크 - HTTP 요청 처리 웹 프레임워크는 HTTP 요청을... CSR라우팅SSR엘리스SW엔지니어트랙웹TILexpress.jsCSR <Express.js> Router-3 Router-2에서 봤듯이 url이 늘어날수록 개발자도 기억을 하거나 확인하기가 어려워집니다. url 구조를 한곳에서 변수로 관리해봅시다. 먼저 routes.js 파일을 만들어 줍니다. project routes.js :변수이름 express는 :부분을 변수로 처리하고 이 부분은 req.params에 변수이름과 동일한 key에 담기게 됩니다.:id 부분은 req.params.id에 값이 담기... express.jsrouterexpress.js <Express.js> 여러 Middleware 소개 및 적용 오늘은 총 4개의 middleware를 알아보겠습니다. Morgan이란? 무슨 일이 어디서 일어났는지 로그를 제공하는 middleware라고 정의하겠습니다. Morgan 설치 및 사용 %npm install morgan을 터미널에 입력합니다. 사용 방법은 아래와 같습니다. morgan은 logging option을 받는데요. 저희가 사용할 dev tiny, common, combined등과 ... express.jshelmetbody parsermorgancookie-parsermiddlewarebody parser <PassportJS> express-session 자 우리가 로그인 기능을 구현하기 전에 세션에 대한 개념을 한번 알아봅시다. 세션은 쿠키와 비슷하지만 쿠키는 브라우저에서 세션은 서버에서 관리한다는 면에서 다릅니다. 세션이 쿠키보다 보안적으로 우수하므로 로그인과 같은 작업에 보통 사용합니다. 세션을 사용하기 위해서 expressjs에서는 express-session을 추천하고 있습니다. %npm insatll express-session을 ... express.jspassportjssessionexpress.js <Express.js> 설치 및 시작 적은 코드로 빠르게 서버를 구성할 수 있습니다. 다른 프레임워크로 Django, Rails, Laravel 등이 있습니다. 이번 시리즈는 꽤 규모가 크기 때문에 각 글마다 수정하고 추가할 디렉토리를 아래와 같이 표기 하겠습니다. +가 붙으면 파일이나 폴더가 추가된다는 의미입니다. -가 붙으면 파일이나 폴더가 삭제된다는 의미입니다. *가 붙으면 파일이 수정된다는 의미입니다. Express.js... express.jsexpress.js Plate Code 00 - Node.js & Express.js *️⃣ 보일러플레이트란? ✔️ 컴퓨터 프로그래밍에서 보일러 플레이트란 최소한의 변경으로 반복적으로 비슷한 형태를 띄게되는 즉, 여러곳에서 재사용 가능한 코드를 뜻한다. ✔️ 프로젝트를 하다보면 로그인 회원가입, 버튼 등 여러가지 비슷한 형태의 코드를 반복적으로 작업하는 경우가 많은데 이러한 코드들을 보일러플레이트로 미리 템플릿을 만들어서 갖춰두면 여러 곳에서 재사용하기 편리하고 용이하다. ✔... 코딩공부express.jsnode.jsBoilerplateBoilerplate <Express.js> edit profile form 이번 시간엔 edit-profile form을 만들어보겠습니다. editProfile.pug Method 여기서는 method를 post로 했는데요. 바로 개인별 설정사항이기 때문에 비공개적으로 처리해야하기 때문입니다. get으로 처리하면 url에 정보가 추가되기 때문에 유의합시다. Change Password 비밀번호를 변경하는 것은 아이디 권한에 대해 더욱 중요한 사항이므로 한 단계 더 ... express.jsformexpress.js