본문 바로가기

전체 글

 (177)
Node.js(15) - Backend MVC 패턴 구현, class(상속 및 추상화)를 활용한 댓글 Front 화면 구현 1) Node.js 1-1) Back-end MVC 패턴 구현 1-2) 댓글 front 화면 구현 - class 활용(상속 및 추상화) 1) Node.js 1-1) Back-end MVC 패턴 구현 back server.js const express = require("express"); const app = express(); const cors = require("cors"); const router = require("./routes/comment.route"); app.use(express.urlencoded({ extended: false })); app.use(express.json()); app.use( cors({ origin: true, credentials: true, }) ); app..
Node.js(14) - back 댓글 CRUD 구현, 모듈 및 class를 활용한 댓글 front 화면 구현 1) Node.js 1-1) 댓글 CRUD 구현 - back 1-2) 댓글 front 화면 구현(CRUD) - 모듈 및 class 활용 1) Node.js 1-1) 댓글 CRUD 구현 - back back server.js const express = require("express"); const cors = require("cors"); const app = express(); const mysql = require("./models"); app.use(express.urlencoded({ extended: false })); app.use(express.json()); app.use( cors({ origin: true, credentials: true, }) ); /* `id` `userid` `c..
Node.js(13) - XMLHttpRequest/fetch/axios, 비동기 통신 댓글 CRUD(axios 활용) 1) Node.js 1-1) XMLHttpRequest, fetch, axios 1-2) 비동기 통신 - 댓글 CR(Create, Read) 1-3) 비동기 통신 - 댓글 UD(Update, Delete) 1) Node.js "요청을 잘 보내고 잘 받는 것"에 숙달되는 것이 중요하다!! "display: none;"된 element가 "template element"이다!! 어떤 요청을 보내면 어떻게 응답을 줄지(구체적으로 어떤 데이터 타입으로 줄지를 명시한 것을 의미함)를 정의한 것이 "API 문서"이다!! 1-1) XMLHttpRequest, fetch, axios const request = ({ method, path, body }) => { return new Promise((resolve, r..
Node.js(12) - 비동기 통신 댓글 CRUD, Postman 및 Database 활용 1) Node.js 1-1) 비동기 통신 - 댓글 CRUD(Postman 활용) 1-2) Database 활용 1) Node.js 1-1) 비동기 통신 - 댓글 CRUD(Postman 활용) 비동기 통신(callback or Promise or async/await) 초기 세팅 : front(3005번 port)와 back(3000번 port) 디렉토리를 만들고 front, back 디렉토리 각각 터미널을 키고 시작 XMLHttpRequest --> fetch --> axios → 위의 내용들이 잘 숙달되면 back-end를 잘 만드는 스킬들을 배울 예정! 기존 게시판 CRUD GET /board/list POST /board/write GET /board/view POST /board/modify?id..
Node.js(11) - AJAX 기본 포맷, server 분리(front/back) 구현 1) Node.js 1-1) 비동기 통신의 기본 로직(AJAX 기본 포맷) 1-2) server 분리(front, back) 후 AJAX 구현 1) Node.js 1-1) 비동기 통신의 기본 로직(AJAX 기본 포맷) GET / index.html GET /ajax GET POST /ajax POST $ npm init -y $ npm install express ※ 브라우저가 "Content-Type"에 따라 읽는 모드가 달라진다! --> 이로 인해 "Content-Type"이 달라지면 요청을 새로 다시 보낸다!! ※ url을 안바꾸고 요청을 만들어서 보내는 것이 "AJAX"의 기본원리이다!! server.js const express = require("express"); const nunjucks ..
Project 마무리(2) - Board 사이트 구현 1) 마무리 1-1) 개요 1-2) 결과물 1-3) 진행 중 이슈 및 해결 1-4) 후기 1) 마무리 1-1) 개요 2022년 12월 26일부터 12월 30일까지 5일간 진행한 게시판 사이트 구현 프로젝트! 이번에는 지금까지 내 자신이 얼마나 route, controller, service, repository를 이해(express 모듈을 비롯한 cookie-parser, MVC 패턴 등)하고 있는지를 확인하는데 가장 큰 목적을 두고 작업을 진행했다. 이를 위해 함께 프로젝트를 진행한 팀원 분과 논의하여 담당 파트를 구분하고, 단독으로 코드를 구현할 수 없고 기능이 이어져 있다고 판단되는 부분에 대해서는 협업을 통해 구현해나가기로 결정했다. 이렇게 묘한 설렘과 긴장을 안고 첫날 To Do List를 작성..
MySQL 기초(3) - cookie, 로그인/로그아웃 구현, AJAX 1) MySQL 기초 1-1) cookie 1-2) 코드 실습 - 로그인, 로그아웃 구현 1-3) AJAX 1) MySQL 기초 1-1) cookie HTTP의 특징 : "비연결성"을 가진다! HTTP는 한 번 request와 response를 주고 받으면 연결을 끊기 때문에 다시 request와 response를 주고 받으려면 반드시 다시 연결(3-way Handshaking)을 먼저 한 뒤 request와 response를 주고 받아야 한다!!(HTTP의 "비연결성") request와 response가 파일 단위로 계속 주고 받는다는 점을 명심할 것!! 이러한 "비연결성"을 보완하기 위해 "cookie"가 등장함!! 브라우저(Client) 안에 작은 저장소에 데이터를 저장하고(마치 이전에 배운 로컬 ..
MySQL 기초(2) - RDBMS 및 SQL 정리 1) MySQL 기초 1-1) 데이터베이스 / DBMS 1-2) RDBMS 1-3) SQL 1-4) 코드 실습 - list 구현하기 1) MySQL 기초 1-1) 데이터베이스 / DBMS 데이터베이스(Database) : 단순하게 데이터들을 저장하는 공간 DBMS(DataBase Management System) DBMS 정의 : 다수의 사용자들이 데이터베이스 내의 데이터를 접근할 수 있도록 해주는 소프트웨어 도구의 집합 DBMS는 사용자 또는 다른 프로그램의 요구를 처리하고 적절히 응답하여 데이터를 사용할 수 있도록 해준다! SQL(Structured Query Language) SQL 정의 : 데이터들을 저장하는 기능, 권한을 부여하는 기능 등 조작을 할 수 있도록 하는 명령어들 혹은 언어를 의미함 ..

티스토리툴바