Torch for new way

1. Intro 우리가 어떤 웹 페이지에 정보를 입력할 때, 비밀번호 등의 민감한 정보는 아무나 볼 수 없도록 암호화해 저장할 필요가 있다. 이런 암호화 방식에는 단방향 암호화, 양방향 암호화가 있는데 보통은 단방향 암호화 방식을 많이 사용한다. 단방향 암호화는 복호화할 수 없는 암호화 방식을 의미하는데, 이는 한 번 암호화하면 다시 원래 문자열을 찾을 수 없다는 것을 의미한다. 그래서 요즘엔 비밀번호를 잊어버려서 찾으려하면 비밀번호를 알려주지 않고 새로운 비밀번호를 설정하는 식으로 이를 해결하는 것이다. 이런 단방향 암호화는 주로 해시 기법을 사용한다. 해시 기법이란, 주어진 문자열을 다른 문자열로 바꾸는 방식이다. 오늘은 이 해시 기법을 사용하는 방식에 대해 알아볼텐데, 그 전에 알아야할 배경지식을 ..

1. intro 이번에는 MySQL 접속을 배워보자. 클라이언트가 서버에 요청을 전달하고 서버가 반응을 주는 것처럼 데이터를 DB에서 가져오기 위해서는 서버가 데이터베이스에 요청을, DB가 응답을 줘야한다. 통신 방식에는 TCP와 UDP 2가지 방식이 있는데, 우선 TCP에 대해서만 알아볼 것이다. (서버와 클라이언트의 통신방식인 http도 TCP기반이다.) 우선 최초로 서버와 DB가 연결될 때, TCP 요청과 TCP 응답이 순차적으로 일어난다. 이 2가지 작업을 묶어서 handshake 작업이라고 하는데, 이걸 진행한 후 데이터를 양방향으로 주고 받을 수 있게 된다. (handshake가 최초로 1번 실행된 후, 종료될 때까지 connection 상태가 유지된다.) 이런 양방향의 데이터 전송을 소켓 통..

지금까지 js에서 listen 메소드를 사용해 서버를 구동할 때 전부 데이터를 메모리에 저장했다. 그렇기 때문에 서버를 한 번 끄면 저장한 모든 데이터들이 날아가버렸다. 실제 서버에서는 정보를 저장하기 위해 DB, 데이터베이스를 이용한다. 이 데이터를 관리하는 프로그램이 있는데, 이들을 통틀어 database manage system (DBMS) 라고 칭한다. 여기서는 dbms중 하나인 mysql을 셋업, 사용하는 법을 알아보자. 1. 설치 MySQL도 라이브러리이므로 npm으로 받을 수 있다. 우선 패키지를 설치하기 전에 다음 두 줄을 순차적으로 입력해 패키지 리스트를 최신화해준다. sudo apt upgrade sudo apt update (뭘 설치하든 안되면 일단 이거부터 해보면 된다.) sudo ..

nunjucks는 html을 더 효율적으로 다룰 수 있도록 하는 스킬을 몇 가지 가지고 있는데, 이에 대해 조금 공부를 하고 넘어가면 유용할 것이다. 1. intro / setup 우선 server.js, main.html을 작성해 메인 페이지를 만들어주자. /* server.js */ const express = require('express') const app = express() const nunjucks = require('nunjucks') app.set('view engine', 'html') nunjucks.configure('views', {express:app} ) // 메인 app.get('/', (req, res) => { res.render('main.html') }) // 서버 ..

express를 이용해 session 기능을 이용하기 전에 라우터와 미들웨어에 대해 좀 더 알아보자. 1. 미들웨어, next express의 주요 기능 중 하나인 미들웨어는 요청과 응답의 중간에 있기 때문에 'middle'ware라고 부르며, 중간에서 요청과 응답을 조작해 이런 저런 기능을 조정해주는 역할을 한다. 지금까지 사용했던 것과 비슷하게 app.use와 함께 사용해주면 된다. 매개변수는 최대 4개를 가질 수 있는데, 4개를 다 사용하는 경우는 에러가 있을 때뿐이고, 보통은 3개 이하를 사용한다. next는 여러 개의 미들웨어를 순차적으로 실행시켜주는 역할을 한다. 예시를 보며 이해해보자. 다음과 같이 server.js 파일을 작성해보자. /* server.js */ // set up const..

쿠키에 이어 세션에 대해 알아보자. 세션은 무엇인가? 방문자의 요청에 따른 정보를 웹 서버가 세션 아이디 파일을 만들어 서버에 저장하는 것이다. 쿠키와 다른 점은 쿠키는 정보를 사용자의 브라우저에, 세션은 서버에 저장한다는 것. 쿠키와 세션은 각각의 장단점이 있기 때문에 보통은 이 둘을 적절하게 조합해서 사용한다. 세션이 작동하는 방식에 대해 간략하게 알아보자. 1. 사용자가 서버로 로그인을 요청 2. 요청에 담긴 id, pw 정보가 유효하면 세션이 서버의 메모리에 저장됨 3. 이 때 세션 식별키로 난수 SessionId를 생성 후, 이 SessionId를 쿠키에 담아 브라우저로 전송 4. 이후 브라우저는 모든 요청에 쿠키(SessionId)를 함께 전송한다. 5. 서버는 브라우저가 보낸 SessionI..

1. 객체의 특징 JavaScript의 자료는 기본자료형(primitives)와 객체 자료형(object) 두 가지로 나눌 수 있다. JavaScript에서는 기본 자료형이 객체 자료형이 될 수도 있다. console.log(1===1);//true console.log([] === []);//false console.log({} === {});//false let a = {price: 10000}; let b = {price: 10000}; console.log(a===b);//false 배열과 객체의 경우, 생긴게 같아도, 심지어 둘 다 비어있다고 해도 저 둘은 다른 공간을 의미한다. 그러나 다른 객체들 안에 있는 요소의 key와 value가 같다면 그 키는 같다. 1.1 this 를 이용한 자신의 ..

오늘은 배열의 성질, 자주 활용되는 몇 가지 메소드에 대해 정리한다. 우리가 아무 문자열이나 선언을 해도 그 문자열은 배열로 처리된다. let str="asdfg12345"; console.log(typeof(str));//string console.log(str.length);//10; 따라서 문자열 또한 배열과 마찬가지로 여러가지 메소드를 적용가능하다. i) split split은 인자를 기준으로 문자열을 잘라준다. 문자열이름.split("인자")//지정한 인자(문자)를 기준으로 잘라준다고 보면 된다. let str2='012-3456-7890'; str2.split("-");//['012', '3456', '7890'] 다시 한 번, arr 변수를 선언해지고 str2, arr의 길이를 각각 구해보자..

오늘은 지난 번 배운 반복문, 그 안에 다시 반복문을 사용하는 2중 반복문에 대해 알아보자. 그 후, 자기 자신을 호출하는 재귀함수에 대해서도 공부해본다. 1. 이중반복문 1~5까지를 출력하고 싶을 때 반복문을 사용했다. for (i=1; i

오늘은 JavaScript의 데이터 타입 중에서도 하나의 변수가 복수의 데이터를 저장하는 군집형 데이터 array(배열)와 object(객체)에 대해 조금 더 자세히 알아보자. 1. 배열 (array) 배열도 다른 변수들과 동일하게 선언한다. let array1 = [1,2,3,4,5,6,7]; // array 변수 선언 console.log(array1); // array1을 출력 원하는 array의 요소 갯수를 알고 싶다면 .length 메소드를 활용하면 된다. console.log(array1.length); // 요소의 갯수를 구하는 method. 여기서는 7이 나온다. 1.1 배열에 요소 추가 배열에 요소를 추가하고 싶다면 .push 메소드를 황용한다. array1.push(8); // arra..

어제에 이어서 JavaScript를 운용하기 위한 기본적인 기능들을 몇 가지 더 살펴보자. 오늘은 if 조건문과 for 반복문, 그리고 함수의 선언과 호출을 다룬다. 1. if 조건문 조건으로 준 boolean이 true일 경우 코드 블럭 안의 내용를 실행하고, 만족하지 않을 경우 실행하지 않고 넘어가는 코드이다. 1. if 조건문 if(boolean) { ( ) 안의 boolean이 true일 경우 실행되는 코드 내용 } 의 형식으로 써주면 된다. 예를 들어, if (a > b) { console.log('a는 b보다 크다') } 이렇게 조건문을 사용한 경우, a>b boolean이 true일 경우, 코드 블록안의 코드 console.log('a는 b보다 크다')가 실행된다. let a = 10, b ..

JavaScript를 사용하기 위한 기본적인 기능들을 알아보자. 1. 변수 (variable) 프로그래밍에선 마음대로 써도 되는 부분, 정해진대로 써야하는 부분이 있다. 전자를 변수, 후자를 예약어라고 부른다. 변수는 몇 가지 규칙만 지켜준다면 원하는대로 이름을 붙여 선언할 수 있다. 일반적으로 변수 선언시 앞에 let 을 붙여준다. let alice // 변수 하나를 alice라는 이름을 붙여 선언한다. 이렇게 변수를 선언했으면 대입 연산자 (=) 을 이용해 값을 넣어줄 수 있다. alice = 456; // 변수 alice에 456이라는 value를 대입했다. 보통 key=value; 형식으로 써주면 value를 key에 대입한다. 이를 브라우저에서 출력하고 싶다면 console.log 명령어를 사용..

이어서 지난 번에 만들었던 로그인 기능까지 갖춘 웹 페이지 집합에 로그 아웃 기능과 프로필 페이지를 추가하는 것을 해보도록 하자. 메인 페이지에 이미 로그아웃과 프로필로 가는 anchor element를 만들어두었으니, 이제 여기에 연결시켜줄 웹 페이지와 uri를 만들어주면 된다. 1. 로그아웃 기능 구현 로그 아웃을 한다는 것은 우리가 만들어준 쿠키를 제거해준다는 것을 의미한다. 여기서는 로그아웃 시, 쿠키의 만료 시간을 0으로 만드는 방식을 사용할 것이다. 메인 페이지에서 로그 아웃 버튼을 누르면 > 지정된 uri로 이동하고 > 거기서 응답을 받고 (여기서 쿠키를 제거) > 메인페이지로 리다이렉트 되는 순으로 진행해보자. 메인 페이지 html에서 logout에 걸린 anchor를 다음과 같이 수정하자..

가끔 인터넷을 돌아다니다보면 쿠키를 삭제하라는 문구를 본 적이 있다. 브라우저는 데이터를 저장하는 기능도 가지고 있는데, 쿠키는 브라우저가 저장하는 데이터 중 하나다. 개발자도구 > 어플리케이션 > 스토리지 > Cookies 탭을 들어가보면 브라우저가 저장하고 있는 쿠키들과 그 property들을 볼 수 있다. 이런 데이터가 계속해서 쌓이기 때문에 브라우저를 오래 사용하다보면 용량이 늘어나게 된다. 그럼에도 이 쿠키라는게 왜 필요한가? 서버가 브라우저에서 요청을 받을 때, 한 컴퓨터를 여러 명이 사용하는 경우 누가 요청을 보내는지 알 수 없다. 그래서 사용자에 따라 다른 응답을 줄 수 있도록 변수를 추가해주는 것인데, 이 추가해주는 변수가 쿠키이다. 이제부터는 헤더에 쿠키를 집어넣는 방법을 알아보고 넣은..

지난 글을 마무리 했을 때의 js는 다음과 같은 상태였다. /* server.js */ const express = require('express') const app = express() const nunjucks = require('nunjucks') app.set('view engine', 'html') nunjucks.configure('views', {express:app}) app.use(express.urlencoded({extended:true})) const list = require('./boardData') const data = [...list.data] // list.data라는건 가져온 객체 list 안의 data (배열) // main app.get('/', (req, res)..