Torch for new way

쿠키에 이어 세션에 대해 알아보자. 세션은 무엇인가? 방문자의 요청에 따른 정보를 웹 서버가 세션 아이디 파일을 만들어 서버에 저장하는 것이다. 쿠키와 다른 점은 쿠키는 정보를 사용자의 브라우저에, 세션은 서버에 저장한다는 것. 쿠키와 세션은 각각의 장단점이 있기 때문에 보통은 이 둘을 적절하게 조합해서 사용한다. 세션이 작동하는 방식에 대해 간략하게 알아보자. 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)..

오늘은 지금까지 배운 nodejs의 내용을 이용해 간단한 글 작성, 수정, 삭제 기능을 가진 게시판 웹 사이트를 만들어보자. 메인 페이지, 글의 리스트 페이지, 글 쓰기, 삭제, 수정 순으로 기능을 구현해볼 것이다. 1. Set up express와 nunjucks를 먼저 설치하고 다음과 같이 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:tr..

지난 글을 마지막까지 수행했다면 현재 js의 코드는 다음과 같다. const express = require('express') const app = express() const nunjucks = require('nunjucks') app.set('view engine', 'html') nunjucks.configure('views', {express:app}) app.listen(3000, () => { console.log('서버 구동') }) app.use('/', (req, res) => { let i = 1000; let j = 2000; res.render('index.html', { num:i, }) }) app.use('/ab', (req, res) => { res.send(' hello..

1. nunjucks의 설치와 세팅 지난 번에 이어서 html을 쉽게 가져오기 위해 템플릿 엔진을 사용하는 방법을 알아보자. nunjucks도 express와 마찬가지로 패키지이므로 설치 방식도 동일하게 npm을 사용하면 된다. 터미널에 다음과 같이 입력하면 자동으로 nunjucks가 설치된다. npm install nunjucks package.json에서 문제 없이 설치가 끝났는지를 확인할 수 있다. 이제 이를 사용하기 위해 js 문서에도 코드를 몇 줄 추가해주어야 한다. const nunjucks = require('nunjucks') 외부 객체인 nunjucks를 현재 js로 가져온다. app.set('view engine', 'html') nunjucks를 사용하기 위한 express의 세팅이다..

1. module, 데이터 전달 1.1. module 이제 express까지 설치한 상태인데, 이 express는 무엇이며, 왜 필요한가? 우선 module에 대해 알 필요가 있다. js파일안에 들어갈 정보가 커지면 이 js파일을 여러 개로 나눠야 할 때가 있다. 이때 각 파일을 module이라고 한다. 특히 다른 라이브러리를 사용할 때, (여기서는 express) 이 module의 개념이 적용된다고 보면 된다. 물론 각자 다른 파일이므로 다른 파일에 있는 데이터를 주고받고 싶을 땐 특수한 명령어가 필요하다. 현재 우리는 express를 설치한 상태인데, 잘 설치되었는지를 확인하려면 package.json 파일을 열면 설치된 package의 목록을 객체 형태로 볼 수 있다. 여기서 express가 있다면..

지난 번에 이어서 본격적으로 nodeJS를 설치해보자. 1. Node.js 인스톨 우선 wsl에서 cd ~ 를 입력해 홈 디렉토리로 간다. node라고 입력을 하면 아직 설치가 되어있지 않다고 뜰 것이다. 이제 apt package manger를 이용해, nodeJS를 다운로드 해준다. sudo apt install nodejs 를 입력하면 자동으로 다운로드를 받아 설치할 수 있다. 2. Node.js 업데이트 Node.js는 주기적으로 업데이트 되는데, 컴퓨터에 있는 Node.js를 업데이트하려면 nvm을 사용하는 방법이 추천된다. 2.1 nvm 설치 우선 nvm을 설치해보자. curl -o- http://raw.githubusercontent.com/creationix/nvm/v0.33.11/inst..