코딩 일지

목차 - 인터페이스(interface란?) - 예제 코드 인터페이스란? 인터페이스는 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다. 인터페이스는 여러가지 타입을 갖는 프로퍼티로 이루어진 새로운 타입을 정의하는 것과 유사하다. 인터페이스에 선언된 프로퍼티 또는 메소드의 구현을 강제하여 일관성을 유지할 수 있도록 하는 것이다. ES6는 인터페이스를 지원하지 않지만 TypeScript는 인터페이스를 지원한다. 인터페이스는 프로퍼티와 메소드를 가질 수 있다는 점에서 클래스와 유사하나 직접 인스턴스를 생성할 수 없고 모든 메소드는 추상 메소드이다. 단, 추상 클래스의 추상 메소드와 달리 abstract 키워드를 사용하지 않는다. 예제 코드 example/interface.ts int..

'작성중' type script 는 런타임이 없다! --> 번들링을 무조건 해야함 즉, 자바스크립트로 바꿔주어야한다. tsc index.ts /dist/app.js #json { "compilerOptions": { "outDir": "./dist/" } } npx tsc --build #json 별칭 경로 설정(paths) { "compilerOptions": { "outDir": "./dist/", "baseUrl": ".", "paths": { "@core/*": ["src/core/*"] } } } npm install -D @types/node ┌ [프로젝트] ├ /src ├─ /core ├── index.ts ├─ utils.ts **index.ts** #typescript -특정 경로를 아래..

웹 개발시, 자바스크립트로 외부 서버의 경로로 ajax요청(axios, fetch 등) 날리면 에러가 나면서 요청이 실패한다. (front 서버 도메인과 back 서버 도메인이 다른 경우) 웹 브라우저 콘솔에 아래와 같은 에러가 찍힌다. 필자는 크롬을 사용하기 때문에, 크롬을 예시로 들겠음. No Access-Control-Allow-Origin header is present on the requested resource. Origin ‘[요청한 도메인] is therefore not allowed access. 외부로 요청이 안 되는 것은 자바스크립트 엔진 표준 스펙에 동일 출처 정책(same-origin policy)이라는 보안 규칙이 있기 때문이다. Same Origin Policy [동일 출처 ..

목차 - 자동로그인이 가능해지는 과정 - JWT 토큰 생성 코드 1. jwt.js 파일 - 토큰생성 2. server.js파일 - 서버 연결 및 토큰으로 로그인 3. auth.js 파일 - 사용자 인증 - JWT 만료 자동로그인이 가능해지는 과정 사용자 회원가입 시, 아이디와 비밀번호, 주소, 번호 등 여러 정보가 생성된다. 이 때 사용자의 비밀번호를 암호화 해서 Database에 저장한다. 나머지 정보도 같이 DB에 저장된다. 사용자가 로그인 시, 아이디와 비밀번호 입력한다. 사용자가 입력한 비밀번호를 암호화 한 후, DB의 암호화된 비밀번호와 비교한다. 일치하면 로그인 성공, 일치하지 않으면 로그인 실패. 로그인에 성공한다면 access_token을 사용자 컴퓨터(클라이언트)에 전송(f12 애플리케이..

목차 - 쿠키(Cookie)란? - 세션(Session)이란? - 쿠키와 세션의 차이 - 미들웨어란? - 라우팅이란? 쿠키란? HTTP의 일종으로 사용자가 어떠한 웹 사이트를 방문할 경우, 그 사이트가 사용하고 있는 서버에서 사용자의 컴퓨터에 저장하는 작은 기록 정보 파일이다. HTTP에서 클라이언트의 상태 정보를 클라이언트의 PC에 저장하였다가 필요시 정보를 참조하거나 재사용할 수 있다. 쿠키 특징 이름, 값, 만료일(저장기간), 경로 정보로 구성되어 있다. 클라이언트에 총 300개의 쿠키를 저장할 수 있다. 하나의 도메인 당 20개의 쿠키를 가질 수 있다. 하나의 쿠키는 4KB(=4096byte)까지 저장 가능하다. 쿠키의 동작 순서 클라이언트가 페이지를 요청한다. (사용자가 웹사이트에 접근) 웹 서..

쿠키 https://bitkunst.tistory.com/entry/Nodejs-express-5-%EC%BF%A0%ED%82%A4cookie Node.js - express (5) 쿠키(cookie) 이번 포스팅에서는 쿠키(cookie)의 개념에 대해 알아보고자 한다. 쿠키란? 쿠키 구현 방식 쿠키 속성 쿠키(cookie)란 HTTP의 일종으로서 인터넷 사용자가 어떠한 웹사이트를 bitkunst.tistory.com 오늘 로그인 페이지 만든 과정 아래의 순서대로 전개하겠다. 1. 메인 페이지에서 로그인버튼을 클릭하면, 아이디, 패스워드를 입력하는 로그인 페이지로 이동 2. 아이디, 패스워드를 입력하고 로그인 버튼을 눌러 제출을 하면, 1) "아이디" 님 환영..

send : 텍스트 자체로 응답을 준다.(돌려주는 행위) render : 파일을 가져다가 응답을 준다. 가장 먼저, npm install express nunjucks 해주는 것 잊지말기. 자바스크립트 코드 (HTML 코드는 자바스크립트 코드 끝나고 바로 작성하였다.) const express = require('express') const app = express() const nunjucks = require('nunjucks') app.set('view engine', 'html') nunjucks.configure('views',{ express:app, }) express 와 nunjucks를 외부파일에서 끌어와서 변수에 저장해준다. express 와 nunjucks를 세팅해준다. Node.js..

promise는 비동기 처리를 위해 있는 객체이다. 여기서 동기처리, 비동기처리란? 예를 들어, 집안일을 한다고 가정해보자. 동기식 : 세탁기를 돌리고, 빨래가 종료되면 그제서야 바닥에 청소기를 돌린다. 비동기식 : 세탁기를 돌려놓고, 빨래가 돌아가는 동안, 바닥 청소하고 설거지하다가 세탁기가 종료되면 세탁물을 꺼낸다. 즉, 비동기는 코드의 효율성을 극대화 할 수 있는 처리방식이다! 아래의 코드를 보자. setTimeout은 대표적인 비동기식 함수이다!! (일단, 구동은 하는데 백그라운드에 대기만 시켜놓고 작업이 끝나면 실행을 해준다.) const pr = new Promise((resolve, reject)=>{ setTimeout(()=>{ resolve('hello promise'); },1000)..

nunjucks란? 템플릿 엔진 중 하나이다. 사용하는 이유, 첫번째 HTML 파일을 만들어주기 위해서이다. 예를들어 프로젝트한 내용을 express를 통해 넣으려고한다. send안에 넣어야하는데.. html 그 긴코드를 다 넣을 순 없다. (가독성이 떨어짐.) 즉, HTML이 하는 역할과 express가 하는 역할을 구별하기 위해 템플릿 엔진을 쓴다. 종류는 nunjucks, ejs, pug 등등 템플릿 엔진은 많으나, 지금은 numjucks 사용할 것이다. nunjucks 설치하기 비주얼스튜디오코드에서 사용할 폴더에! npm install nunjucks 를 해주어야한다. 터미널에서 cd로 원하는 폴더로 이동 후 (ls 쳤을 때 node_modules, package.json 등등 외부 라이브러리가 ..

목차 - 구조분해 할당(비구조 할당) - 객체 리터럴 - require - 자바스크립트 구동원리 - 랜덤함수 - promise 구조분해 할당 let obj = { a:10, b:20, c:{ d:30, } } let {a,b,c} = obj //문법이 이럼. //let a, b, c = obj 하면 a:10 b:20 ... 이런식으로 출력됨 console.log(a, b, c) //변수 명을 변경하려면? let {b:result} = obj //이렇게하면 b가 사라집니다. 변수명은 result가 됨. 객체리터럴 let a =10 let b = 20 let c = 30 //이녀석들을 한번에 다 객체에 담으려면? let obj2 = { a, b, c, } // let obj2 = { // a:a, // b:..