나의 성장 개발일지

포스팅 주제 MVC패턴을 사용하여 로그인 만들기 ( MySQL연동) MVC패터을 이용하여 로그인 기능 구현 ( MySQL 연동 ) 준비물 npm 설치 ( express, ejs, mysql2 ) MySQL WorkStation 데이터베이스 1) 기초 공사 먼저 기초 파일(폴더 들)을 만들어 준다. (이전 포스팅에서 다룬 폴더 구조와 비슷하다.) 페이지는 총 5개로 구성되어 있습니다! 메인페이지 가입 페이지 로그인페이지 정보 수정페이지 404 오류 페이지 각 페이지 화면은 아래처럼 만들었다. ** 규칙) 메인 페이지에서는 회원가입, 로그인 페이지로 이동 가능하다. (회원정보 수정 페이지 접근시 에러) 회원정보는 로그인시에만 접근 가능 로그인시 이미 존재하는 ID는 사용불가능 회원가입시 로그인 페이지로 이동..

포스팅 주제 MVC - MySQL 연결 이번 시간에는 MVC에 MySQL을 연결하여 SQL문으로 값을 추가 하는 방법을 살펴 보겠습니다. Ver.1 With Out Connect MySQL 1) 우선 기본적인 파일 구조를 잡자! controller, model, routes, views 그리고 이번에는 static을 추가로 사용해 보겠습니다. 폴더들을 만들었다면 node.js를 설치해 줍시다. npm init -y npm install express ejs 2) app.js 이제 파일들을 만들어 줍니다. const express = require('express'); const app = express(); const PORT = 8000; app.set('view engine', 'ejs'); app...

포스팅 주제 MVC MVC란? MVC (Model View Controller) 소프트웨어 설계와 관련된 디자인 패턴 상황에 따라 자주 쓰이는 설계 방법을 정리한 코딩 방법론!! (이미 같은 상황을 겪은 사람들이 정리한,,) MVC 이용 웹 프라임워크 PHP Django express Angular .... etc MVC 흐름 ) MVC 모델-뷰-컨트롤이란 이름에서 볼 수 이겠지만, 말 그대로 Model, View, Controller를 컨트롤하는 것으로 Model 데이터를 처리하는 파트 DB 데이터 View UI 관련된 것을 처리하는 부분 (사용자에게 보여지는 부분) HTML/CSS 등 Controller View와 Model을 연결해주는 부분 사용자가 GUI화면을 통해 데이터를 읽기, 쓰기, 지우기를..

포스팅 주제 SQL문 SQL문 SQL (Structured Query Language) 구조적 쿼리 언어 관계형 데이터베이스를 제어하고 관리할 수 있는 목적의 프로그래밍 SQL은 크게 3가지로 분류한다. 데이터 정의어 (DDL, Data Definition Language) 데이터 조작어 (DML, Data Manipulation Language) 데이터 제어어 (DCL, Data Control Language) 데이터 정의어 DDL SQL - DDL 데이터베이스 or 테이블을 정의하는 언어 CREATE : DB, Table 등을 생성 ALTER : 데이블 수정 DROP: DB, Table을 삭제 TRUNCATE : Table을 초기화 시킨다. CREATE DATABASE DB이름 D..

포스팅 주제 데이터베이스란? 데이터베이스 MySQL 설치 데이터 베이스 데이타베이스(DB)란? 다양한 카테고리의 정보를 저장할 수 있는 구조(데이터의 집합) 여러 사람에 의해 공유되어 사용될 목적으로 통합하여 관리되는 데이터 집합 => 데이터를 저장하는 구조/자료의 모음 그렇다면 우리는 왜 데이터베이스를 사용할까? 데이터 베이스를 파일 시스템과 비교해 보자 파일 시스템 데이터를 기록하고 여러 사람이 공유하여 사용 가능 ex) Microsoft Excel 프로그램으로 데이터 관리 데이터 베이스 파일 시스템의 단점을 개선하기 위해 등장 ** : 데이터베이스를 사용하기 전 데이터의 저장을 위해 이용했던 시스템 단점 데이터 중복 데이터 불일치 DBMS (DataBas..

포스팅 주제 파일 업로드 multer 파일 업로드 Multer body-parser는 Post로 정보를 전송할 때 요청의 body(req.body)로 받을 수 있게 도와준다. 단! 멀티파트 데이터를 처리하지 못한다 멀티파트 데이터 : 이미지, 동영상, 파일 등 이 때 우리는 multer를 이용해서 이미지,동영상 파일 등을 전송할 수 있다. 파일 업로드 - 프론트 클라이언트에서 서버로 파일 전송하는 법 input 태그, type = 'file'로 지정 **name 속성은 서버에서 파일을 인식할 이름이 된다! ( 서버와 동일한 name속성을 가져야 한다!! ) form 태그의 enctype 속성 'multipart/form-data'를 반드시 설정 multer는 multipart( multipart/form..

포스팅 주제 동적 Form 전송 Ajax, Axios, Fetch JSON 동적 폼 전송 Form 전송은 동기 방식과 비동기 방식 두가지가 있다. 동기방식 한 번에 하나만 처리 -> 새로운 페이지로 이동해 서버가 데이터를 처리 비동기 방식 서버에 데이터를 보내고 응답을 기다리는 동안 다른 처리가능! (페이지 전환을 일으키지 않고 처리 가능) 비동기 방식으로 폼 전송을 하기 위해서는 클라이언트 단에서 전송을 타입을 submit이 아닌 button 타입으로 정의해야 한다. 비동기 HTTP 통신 방법 Dynamic 웹 문서가 정적으로 멈춰 있는게 아니라 실시간으로 변경된는 것 비동기 HTTP 통신 Form 데이터를 서버와 dynamic하게 송수신 하는 것 Ajax, Axios, Fetch 등의 방식이 있다 A..

포스팅 주제 Form Get, Post Form Form태그는 입력된 데이터를 한 번에 서버로 전송하기 위해 사용 클라이언트가 서버에게 정보를 전달할 때 사용 form에는 여러가지 속성이 있지만 그중 method는 입력한 정보를 url에 표시할지를 결정하는 보안과 관련된 속성이다. Method Method는 Get방식과 Post방식이 있다. Get 방식은 데이터를 url에 표시하며, 정보를 가져오거나 검색할 때 쓰인다. Post 방식은 데이터를 url에 표시하지 않고, 정보를 보낼 때 사용한다. 보내는 데이터는 요청(req)의 body에 실어서 전송한다. const express = require('express'); const app = express(); const PORT = 8000; // vie..

포스팅 주제 콜백(callback) 함수 Promise Async / Await 비동기 처리란? 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행 하는 JS 특성 비동기 처리를 하는 이유 서버로 데이터 요청 시, 서버의 응답을 계속 기다리며 다음 코드를 실행 안하고 계속 기다리면 비효율 적이라 동기 처리시 코드 실행 -> Wait 을 반복하면 웹을 실행하는데 너무 오래 걸릴 수 있다. 콜백(CallBack)함수 콜백(CallBack)함수란? 이벤트가 발생했을 때 실행되는 함수(다른 함수가 실행을 끝낸 뒤 실행되는 함수) JS함수를 인자로 받고 다른 함수를 통해 반환될 수 있는데, 인자(매개변수)로 대입되는 함수 함수 선언 시 parameter(인자, 매개변수)로 함수를 받..

포스팅 주제 구조분해 할당 (Destructuring assingment) spread 클래스(Class) 이전 포스팅에서 구조분해를 조금 다루었는데, 이번에는 구조분해에 대해서 조금더 알아보고자 합니다. 구조분해 할당(Destructuring assignment) 구조분해 할당? 배열이나 객체의 속성을 해체해 그 값을 개별변수에 담는 것 JS에서는 자료구조인 배열과 객체를 많이 쓰는데 이것들을 좀 더 편하게 사용하기 위해 사용한다. 배열 구조 분해 객체 구조 분해 index[0], index[1]과 같이 인덱스에 접근하는 것이 아닌 각 배열의 요소를 변수의 이름으로 접근하기 위해서 사용합니다. 사용법 const [변수] = 배열; 각 변수에 배열의 인덱스 순으로 값 대응 구조 분해 시 변수의 값이 un..