개발일기

기존 모듈화 방식 : 스크립트 태그 ( 기존에는 자바스크립트 파일들을 script 태그를 이용하여 불러오는 방법을 사용하였다. script태그를 통한 방법 외에는 모듈화 시킬 방법이 없있기 때문이다. script태그를 통한 방식에는 크게 두가지의 문제점이 발생할 수 있다. 각각의 태그로 불러온 js파일들의 전역변수가 공통으로 생성된다. 전역 변수의 값이 바뀌어 에러가 발생할 수 있다. var alertNum = 10; // index.js var alertNum = 20; // page.js 전역변수 alertNum을 index.js와 page.js에서 각각 선언하여 값을 할당한 후, 해당 파일들을 script태그를 통하여 가져오면 값의 변화가 생기게 된다. page.js가 index.js 이후에 불러와..

1. JWT (JSON Web Token) 토큰이란? aaa.bbb.ccc 방식으로 점을 기준으로 각각에 값들이 저장되어 있고 이를 활용하여 인증하고 활용하는 토큰을 뜻한다. 필자는 이 토큰을 통하여 사용자인증을 진행하기 위해 활용하였다. JWT토큰 안에 사용자의 id등의 정보를 담고 토큰이 검증됬을 때에만 페이지 이동이 가능 및 포함되어져 있는 정보들을 사용할 수 있도록 하기 위해 활용하였다. 먼저 첫 번째 부분인 aaa에는 헤더에 관한 내용들이 들어가게 된다. 암호화된 알고리즘이 무슨 타입으로 지정되어 있는지, 이 토큰은 어떤 토큰인지에 대한 내용을 담고 있다. { alg: '알고리즘 타입' typ : '토큰 타입' } 두 번째 부분인 bbb에는 토큰에 담은 내용이 들어가 있다. 예를 들어 이메일주소..

Javascript의 변수 선언 방법은 var, let, const가 있다. 변수의 선언 방식 var test1 = "변수1"; let test2 = "변수2"; const test3 = "변수3"; var var test1 = "테스트변수1"; console.log(test1); // 테스트변수1 var test1 = "다른 테스트변수1"; console.log(test1); // 다른 테스트변수1 var는 같은 변수명으로 변수를 한 번 더 선언하게 되면 에러없이 다른 변수값이 출력된다. 보기에는 편해보일지라도, 나중에 자바스크립트 소스 코드의 양이 많아지게 되면 변수의 값이 의도치 않은 곳에서 변수값이 바뀌거나, 적절한 곳에 변수를 사용했을 때, 다른 값이 나온느 등의 문제점이 발생할 수 있다. le..

0. JSX란? JSX란 JavaScript eXtension의 줄임말로써 HTML태그 (div, h1, h2 등)들을 자바스크립트 소스코드 안에 사용하는 것을 뜻한다. JSX로 작성된 코드들은 빌드될 때, Babel이 자바스크립트 코드로 변환시켜준다. 1. 장점 XML형식과 문법이 유사하여 중첩된 태그들의 구조를 파악하기 쉽다. createElement등의 태그들을 만드는 문법을 사용하지 않고 직접 태그들을 선언하기에 코드의 양이 감소한다 2. 특징 및 유의점 리액트와 궁합이 잘맞기에 함께 사용하는 것이 권장된다. 변수 선언 또는 출력시, {}로 변수를 감싸줘야한다. class와 for속성 대신, className, htmlFor라는 속성으로 이름이 바뀐다. 처럼 태그가 닫혀있지 않는 경우에는 오류가 ..

1. 쿠키란?? 사용자에 관한 데이터를 서버에 저장하는 것이 아니라 로컬에 임시적으로 저장하여 데이터를 활용할 수 있는 저장공간을 뜻한다. 쿠키와 비슷한 성격의 로컬 저장소로는 세션 스토리지와 로컬 스토리지가 존재한다. 하지만 이번 게시글에서는 쿠키에 관한 내용을 다뤄보고자 한다. 이전 게시글 처럼 필자는 JWT토큰을 활용하여 사용자 인증을 하는 기능을 구현하였다. 이 기능을 구현하면서 로그인 시 생성되었던 JWT토큰을 저장할 적절할 공간을 찾고 있었다. 여러 가지 경우의 수를 고려해 보았을 때, JWT토큰은 브라우저 창을 닫은 상태여도 세션이 유지되어야 하고, 모든 브라우저에서 활용을 할 수 있는 범용성을 가지고 있으면 좋겠다는 생각이 들었다. 이러한 특징들을 종합했을 때, 저장소로 쿠키를 활용하는 것..