BE/Node.js9

• 

  [Node.js] React-Node-Management 시스템 DB연결/ 추가실패(2) 지난시간에 이어서 DB연결은 진작에 했지만, DB에 데이터를 추가하는 과정에서 엄청난 오류가 났고, 오류가 계속 꼬리물고 가면서 결국 시간을 투자했지만 해결하지 못했다. 강의자체도 오래된 자료기도해서 그냥 때려치려고 한다. 한국어 강의는 이제 없지만 , 찾아보니깐 영어로된 강의는 함수형 컴포넌트를 사용해서 하는강의가 많다. 그래서 일단 여태까지 한것을 올리고, 다시 처음부터 함수형 컴포넌트를 사용해서 최신버전으로 리액트와 node.js를 연결해서 데이터베이스를 연결하는것을 다시 해보려고 한다. 우선 여태까지 한것들 DB연결한 코드이다. 클라이언트 부분의 App.js import logo from './logo.svg'; import './App.css'; import { Component } from '.. BE/Node.js 2022. 8. 18.

• 

  [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] 파일 데이터베이스 추가해보기 (6) 저번에 서버를 닫으면 추가했던 아이디 비밀번호 이름등이 초기화되었기 때문에, 이제는 json 파일을 만들어서 서버를 닫아도 파일에서 관리를 해주고, 회원가입시 유지되도록 해봤다. 우선 UserStorage.js에서 가지고있는 id,password,name을 그대로 가져와서 databases라는 폴더를 만들고 users.json으로 파일을 만들어준 다음에, 복붙 했다. 그럼 이제 다시 라우팅부터 하나씩 따라 가겠다. 우선 routes/home/index.js 를 보면 SIGN UP 을 누를경우(POST요청)의 코드를보면, router.post("/register", ctrl.process.register); 와 같이 되어있는데, 다시 routes/home/home.control.js로 따라간다. proce.. BE/Node.js 2022. 8. 11.

• 

  [Node.js] 회원가입 기능 구현 (5) 저번시간에 이어서 이번에는 프론트엔드를 꾸며보고, 회원가입 기능을 구현해볼 예정이다. 우선, 로그인폼과 회원가입 프론트엔드는 https://codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io 를 이용해서 오픈소스로 했다. login.ejs에 수정을 해주었고, register.ejs를 새로만들어서 각각 css와 js를 연결해주었다. 프론트엔드 부분은 생략하겠다. 그리고 register.js를 만들어준다 일단 .. BE/Node.js 2022. 8. 10.

• 

  [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.