node.js6

• 

  [Node.js] React & Node.js 연결 고객 관리 시스템 (1) 오늘은 프론트엔드로 React를 사용하고 백엔드로 Node.js를 사용해서 연결해보기로 했다. 기존 React의 class컴포넌트를 이용한 유튜브 영상이 있었는데, 나는 함수형 컴포넌트로 리액트를 배웠고, 이게 훨씬 편하기 때문에 이걸로 하기로 했다. 강의 내용을 다 내가 바꿔야해서 시간이 많이 걸렸지만, 실력향상에 많이 도움이 된것 같다. 우선 크게 파일을 Client와 API로 나누어주고 Client부분에는 cra를 이용해서 리액트 환경설정을 하고, API는 node.js를 이용해서 환경설정을 했다. UI는 material UI라는 것을 사용하였으며, 바로 프론트부분부터 코드를 설명하겠다. 우선 components 파일은 Customer.js import {React} from 'react'; imp.. BE/Node.js 2022. 8. 15.

• 

  [Node.js] Node.js & Mysql 연동시키기 (完) 저번에 파일데이터베이스에 이어서 이번에는 진짜 Mysql에 연동시키기로 해보았다. 여태까지 진행했던 강의랑 내가하는 방식이 틀려서 따로 구글링하면서 찾아보다보니 시간이 좀 걸렸다. 우선 Mysql를 설치하고 테이블을 만들어주었다. (이과정은 생략하겠음) 이제 이걸 vscode에 config폴더를 만들고 db.js로 만들어서 불러와주자. db.js const mysql = require("mysql"); const db = mysql.createConnection({ host : 'localhost', // 데이터베이스 서버가 있는 주소 user : 'root', password : '본인 비밀번호', database : 'login_lecture' // 사용할 데이터베이스 이름 }); db.connect.. BE/Node.js 2022. 8. 12.

• 

  [Node.js] MVC 패턴 model 분리 / 로그인 기능 구현(4) 여태까지한 컨트롤러 코드를 봐보면, controller.js "use strict"; const output = { home : (req,res)=>{ res.render("home/index"); }, login : (req,res)=>{ res.render("home/login"); }, }; const users = { id : ["sangmin", "이상민", "hello"], password : ["1234","12345","123456"], }; const process = { login : (req, res) => { const id = req.body.id, password = req.body.password; if(users.id.includes(id)) { const idx = user.. BE/Node.js 2022. 8. 9.

• 

  [Node.js] nodemon / fetch (3) 저번에 라우팅하고 뷰를 분리해봤다. 이번에는 fetch를 이용해서 로그인을 만들어볼것이다. 로그인시 form, submit 태그를 사용해서 POST를 요청할 수도 있는데 fetch를 사용하는 방법이 더 선호되는 이유는 form은 동기로 동작하고, fetch는 ajax 기술 중 하나로써 비동기로 동작하며, ajax기술을 사용함으로써 수많은 네트워크 요청을 다중으로 처리할 수 있게 되었기 때문이다. 우선 npm start를 하면 수정했을경우 서버를 껐다가 켜야 수정된것이 적용되는데, 이를위해서 nodemon을 깔면 리액트처럼 저장할때마다 바로바로 적용된다. $npm install -g nodemon 을 해주면 설치가 된다. 나는 관리자 권한이 필요해서 sudo를 앞에다가 붙혔다. 그런 다음에, package.. BE/Node.js 2022. 8. 9.

• 

  [Node.js] MVC패턴 뼈대만들기/package.json생성 (2) 우선 MVC 패턴이란? MVC 는 개발에 대한 디자인 패턴이다. 추상적인 개념정도? M ( Model / 모델 ) * 모델은 클라이언트에 노출되지 않습니다. * 연산처리 및 DB 가 주 된 목적입니다. * 컨트롤에서 요청이 들어오면 해당 연산처리 후 정보를 return 합니다. V ( View / 뷰 ) * 클라이언트에 나타나는 부분입니다. * HTML / CSS / Javascript 등으로 꾸미고 , 움직이고, 표현하는게 가능합니다. C ( Controller / 컨트롤러 ) * 사용자의 요청을 받고 응답을 조종합니다. * View 요청 --> Model 연산 --> 가공된 데이터 --> View 응답 이 과정이 컨트롤에서 전부 이루어집니다. 이제 전에 포스팅했던 app.js를 MVC패턴에 의해 나누.. BE/Node.js 2022. 8. 6.

• 

  [Node.js] Node.js 입문하기 (http, express) (1) 이제 Node.js를 해보고 싶어져서 맛보기로 해보았다. 나는 react를 위해서 node.js와 npm은 이미 깔려있었으므로 따로 설치할건 없다. 우선 터미널에 익숙해지기 위해서 $mkdir node mkdir을 통해서 node라는 이름의 폴더를 만들어서 그곳에서 vscode를 실행시켜 주었다. 아직은 백엔드 개념이 잡혀있지 않은상태라서 최대한 이해해가면서 유튜브 강의를 보고 있는데, 자바스크립트에서 왜 http를 안쓰고 express를 쓰느냐가 첫번째 주제였다. 바로 코드를 보자. const http = require("http"); const app = http.createServer((req,res)=>{ if(req.url==='/'){ res.end("여기는 루트 입니다."); } else i.. BE/Node.js 2022. 8. 6.