Dani's Dev TokTok

CORS(Cross-Origin Resource Sharing)CORS 란 교차 출처 리소스 공유를 의미한다.브라우저가 자신의 출처가 아닌 다른 어떤 출처(도메인, 스킴 혹은 포트)로부터 자원을 로딩하는 것을 허용하도록 해주는 보안 메커니즘이다. 브라우저는 기본적으로 SOP(Same-Origin Policy) 정책을 따르는데, 이 정책은 같은 출처에서만 리소스를 공유할 수 있다고 정한 정책이다. 그러나 개발을 하다보면, 클라이언트와 서버의 출처(Origin)가 서로 다를 수 있다.예를 들어, 리액트 서버(포트 번호 3000) 와 스프링부트 혹은 익스프레스 서버(포트 번호 8080) 가 리소스를 주고받으려 하면 서로 다른 출처로 판단되어서 CORS 위반 에러가 난다.참고로 출처(Origin) 는프로토콜(h..

1. 들어가며Nginx 를 이용해서 서버 배포하기2. NginxNginx 는 비동기 이벤트 기반 구조의 웹 서버 프로그램이다.Apache는 클라이언트 접속마다 프로세스 또는 스레드를 생성하는 구조라 요청이 많으면 자원이 많이 소모된다. 따라서 대량의 클라이언트가 접속했을 때는 한계가 있다.Nginx는 event-driven 구조로 동작하는데, 따라서 Apache 보다 적은 자원으로 효율적인 운용이 가능하다. Nginx 설치 및 설정1. windows OS에서는 Putty, MAC OS에서는 터미널을 열어서 EC2 터미널에 접속한다.  2. 패키지 저장소를 다음의 커맨드로 업데이트한다.sudo apt-get update3. Nginx 를 설치한다.sudo apt-get install nginx4. 설정 파..

1. 들어가며비밀번호 암호화에 대해 알아보고 bcrypt 모듈을 사용해서 암호화하기2. 비밀번호 암호화비밀번호 암호화전에 회원가입 기능을 구현하는 실습을 할때는 비밀번호 암호화를 하지 않고 DB에 저장을 했다.그런데 만약 실서비스에서 DB에 비밀번호를 암호화를 하지 않고 저장한다면??그 DB가 해킹이라도 당하거나 혹은 개발자가 정말 나쁜 마음을 가지고 그 DB에 있는 유저 정보를 이용한다면?? 이를 방지하기 위해 똑똑한 개발자들이 비밀번호 암호화 라는 기능을 만들었다.비밀번호 암호화에는 두가지 종류가 있는데 단방향과 양방향이다.이를 그림으로 표현하면 아래와 같다. 단방향 암호화단방향 암호화는 주로 비밀번호(패스워드) 저장 시 활용한다. 단방향이기 떄문에 원본 데이터를 복원(복호화)을 할 수 없다.'해시'..

1. 들어가며쿠키와 세션에 대해 알아보고 만들어보기2. Cookie 와 Session🍪Cookie웹 브라우저(클라이언트)에 저장되는 키와 값이 들어있는 작은 데이터 파일이다.이름, 값, 만료일, 경로 등의 정보로 구성되어 있다. 보통 페이지에서 팝업창 하루동안 보지 않기, 자동 로그인하기, 연령 제한 등등에 사용한다.(쿠키값이 브라우저에 저장되면 팝업창이 보이지 않는 식으로 작동)   쿠키는 같은 컴퓨터라도 브라우저마다 저장공간이 다르다.그래서 크롬 브라우저에서 오늘 하루 보지 않기를 설정했더라도 엣지에 가서는 저장되지 않기때문에 팝업창이 뜬다. Cookie 사용Node.js 에서 쿠키를 쉽게 사용하기 위해서 cookie-parser라는 모듈을 설치해서 사용한다.const express = requir..

1. 들어가며Node.js와 MySQL을 연결해서 회원가입과 로그인 기능 구현하기(MVC 패턴 적용하기)2. Node.js 와 MySQL 연결이번 실습은 Node.js와 MySQL을 연결하고, 이것을 MVC  패턴을 적용하여 프로젝트를 구성하는 것이었다.프로젝트 구조는 다음과 위와 같이 적용했다.Model, View, Controller 로 구분하고 프론트 파트의 css와 js 파일들은 static 폴더에 넣어주었다.그리고 라우터 연결을 위한 routes 폴더도 따로 구분해주었다. 최상단의 app.js 에는 다음과 같이 구현했다.// express 모듈 등록const express = require('express')const app = express();const PORT = 8888;// 뷰 템플릿a..

1. 들어가며MVC 패턴에 대해 알아보고 MVC 패턴으로 프로젝트 구축하기2. MVC 패턴MVC 패턴이란?모델(Model), 뷰(View), 컨트롤러(Controller) 로 이루어진 소프트웨어 설계와 관련된 디자인 패턴이다.💡 디자인 패턴이란?소프트웨어를 설계할 때 발생하는 문제를 해결하기 위한 방법 중 하나로, 상황에 따라 자주 쓰이는 설계 방법을 정리한 코딩 방법론이다.  MVC의 장점과 단점 ✔ 장점패턴들을 구분해서 개발한다(기능 단위 별로 나눠서 처리)디버깅이나 코드 가독성을 높여서 유지보수에 용이하다유연성과 확장성이 높다협업에 용이하다✔ 단점설계 단계가 복잡해서 설계 시간이 오래 걸린다.단위가 많아진다.애플리케이션이 복잡해질수록 모델과 뷰의 관계가 복잡해진다. MVC 디자인 패턴 흐름  모델..

1. 들어가며Multer 미들웨어를 이용해서 파일을 업로드하는 방법을 배워보기2. Multer 를 이용한 파일 업로드 기능 구현form 요소에서 post 방식으로 정보를 전송하면 요청의 body에 담겨서 전송된다.예를 들어 아래와 같은 폼양식이 있을 때  위와같이 정보를 제출하면이런식으로 담겨서 요청이 전송되고 받을 수 있다.(참고로 post 전송방식에서 원래는 안보이는데 body-parser라는 미들웨어를 사용해서 위와 같이 보이는 것이다) 그러나 멀티미디어 파트의 데이터는 처리하지 못한다.위와 같이 파일을 선택해서 업로드를 하면이런식으로 파일 이름만 보여준다.텍스트 데이터의 경우 그냥 텍스트만 추출을 해서 사용할 수 있기 때문에 문제가 없지만멀티미디어 같은 경우 이름만 쓰는게 아니라 파일 자체를 쓰기..

1. 들어가며비동기 HTTP 통신을 이용해서 동적 form 전송 구현해보기2. Axios 를 이용해서 동적 form 전송 구현하기form 요소를 이용해서 데이터를 전송하면 페이지 이동이 일어난다.(form 요소의 action 속성에 지정된 경로로 이동하며 데이터 전송)그러나 비동기 HTTP 통신을 이용하면 폼의 데이터를 서버와 동적으로 송수신해서 실시간으로 변경된 것을 보여줄 수 있다.위의 예시처럼 아이디와 비밀번호가 일치하지 않을 때, 페이지가 변경되지 않으면서 동적으로 데이터를 송수신해서 변경된 내용을 보여줄 수 있다. 비동기 HTTP 통신 방법비동기 HTTP 통신 방법에는 크게 3가지가 있으며 아래와 같다.AjaxAxiosFetch본 포스팅에서는 Axios 를 이용한 동적 form 구현을 다룰 거지..

1. 들어가며Node.js의 Express.js 프레임워크로 웹 서버를 만들기2. Express.js를 이용한 웹 서버 만들기Express.js는 웹 서버를 생성하는 것과 관련된 기능을 담당하는 프레임워크다.익스프레스에서 제공하는 미들웨어와 라우터를 사용하면 편리하게 기능을 구현할 수 있다.익스프레스를 사용하기 위해서는 먼저 익스프레스를 설치하고 (terminal 에서 npm i express 입력)익스프레스 모듈을 가져오면 된다. Express 사용해서 서버 생성// express 모듈 불러오기const express = require('express')// express 객체 생성const app = express()// 포트번호 변수 지정const PORT = 8000// get 요청에 따른 라우터..

1. 들어가며Node.js의 fs 모듈에서 사용하는 메서드인 readFile() 과 readFileSync() 를 통해 비동기와 동기의 차이에 대해 알아보기2. 비동기와 동기Node.js 에서 제공되는 모듈 중 하나인 fs 모듈은 파일을 관리할 때 사용하는 모듈이다.위 모듈에서 사용하는 readFile()과 readFileSync()는 둘 다 파일을 읽어오는 메서드다.이 둘의 차이는 readFile()은 비동기식으로 파일을 읽어오고, readFileSync()는 동기식으로 파일을 불러온다는 것이다.이 둘의 차이를 확인하면서 비동기와 동기의 차이에 대해 알아보고자 한다. readFile() 로 파일 읽기// fs 모듈const fs = require('fs')console.log('abc');fs.read..