Javascript에서의 Promise에 대해 알아보자. Promise Javascript에서 비동기 처리를 위해 콜백 페턴을 많이 사용합니다. 콜백 패턴은 코드가 길어짐에따라 콜백지옥 현상이 쉽게 나타나 가독성이 나쁘고 비동기 처리 중 발생하는 에러 처리가 힘든 문제점이 있습니다. 이러한 단점을 보안 하기 위해 ES6에서는 새로우 패턴인 ...

Javascript 에서의 async / await 에 대해 알아보자. async / await async / await는 Promise를 쉽게 사용할 수 있도록 도와주는 Promise의 Syntatic Sugar입니다. Syntatic Sugar : 가독성을 좋게 만드는 것 기본 문법 async function 함수명() { ...

Axios에 대해 알아보자. Axios 라이브러리 Axios는 공식문서에서는 ‘Promise based HTTP client for the browser and node.js‘라고 소개합니다. 즉, 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다. React에서 OpenAPI를 이용한 통...

Fetch API Fetch API는 HTTP 요청과 응답 등을 Javascript에서 접근하고 조작할 수 있는 인터페이스를 제공합니다. XMLHttpRequest 모듈과 비교해서 Fetch는 Promise 기반으로 구성되어 있어 더 간편하게 사용할 수 있습니다. 기본 구조 fetch(url, options) .then((response...

Ajax에 대해 알아보자. Ajax (Asynchronous Javascript and XML) Ajax란 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법 중 하나입니다. Javsscript의 라이브러리 중 하나로 XMLHttpRequest 객체*를 이용해 웹 페이지 전체를 다시 로딩하지 않고, 웹 페이지의 일부분만을 갱신할 수 있...

Javascript에서의 동기, 비동기에 대해 알아보자. 동기 처리 (Synchronous) 우선순위 작업이 끝날 때까지 기다리는동안 준비상태가 되어 다음 작업을 할 수 없는 특징을 말합니다. 즉, 직렬적으로 작업을 수행하기 때문에 요청과 동시에 그 응답이 요청을 요구한 자리에 바로 주어져야하므로 응답이 올 때 까지 기다려야 한다는 단점이 있...

Javascript에서의 Callback 함수에 대해 알아보자. Callback 함수란? 다른 코드의 인자로 넘겨지는 실행 가능한 코드 어떤 이벤트에 의해 호출 되어지는 함수 종합해보면 다른 코드가 호출해서 인수를 넘겨주면 실행되는 함수를 말합니다. Callback 함수의 구조 특정 함수의 매개변수 값으로 Callback 함...

XSS 참고 글 : XSS XSS 공격으로 사용자의 Cookie를 접근하는 것을 막기위한 대응 방법에 대해 알아보곘습니다. HTTP Only Cookie 브라우저에 저장된 쿠키는 클라이언트에서 Javascript로 조회가 가능합니다. XSS 공격은 서버 측에서 제공되는 Script가 아닌 권한이 없는 사용자(이하 해커)가 웹사이트에 S...

Refresh Token 탈취 대응 AccessToken과 RefreshToken을 같이 쿠키에 저장하고 있기 떄문에 둘이 같이 탈취될 가능성이 있습니다. RefreshToken은 유효기간이 길어서 만료되기 전까지 해커가 계속해서 사용할 수 있습니다. 대응 방법으로 RefreshToken을 발급할 때 서버 저장소에 따로 저장하고 RefreshTo...

csurf 모듈 CSRF 공격을 방지하는 보안 모듈로 CSRF Secret와 CSRF Token을 만들어서 서로 매칭이 되는지 확인하는 기능을 제공합니다. 보통 CSRF Secret는 session/cookie에 저장하고 CSRF Token은 POST body에 저장합니다. 설치 npm i csurf ...