JavaScript

HTTP 통신에서 사용하는 headers 중 Content-Type과 Accept, 그리고 XHR 프로퍼티중 하나인 responseType에 대해 비교하고 정리해보고자 합니다. Content-Type Content-Type은 Client가 서버로 보내는 HTTP요청의 Message Body가 가지고 있는 리소스 타입에 대해 알려주는 역할을 합니다. 예를 들어, 아래처럼 간단한 HTTP POST요청을 한다고 하였을 때, body에 들어가 있는 타입을 알려주는 역할을 한다는 것입니다. 여기에서는 json 형식이니, "application/json"을 넣어 주었습니다. fetch('some/url', { method: 'POST', headers: { 'Content-Type': 'application/jso..

redis 공식 문서를 살펴보다, cache와 session store의 개념에 대해 비교하는 글을 보게 되었습니다. 제가 기존에 생각하던 session store와 조금은 차이가 있었기에 해당 글에 대해 정리해보고자 합니다. Cache Cache란 일반적으로 memory에 존재하는 데이터를 저장하는 장소를 의미합니다. 데이터를 가져 온다고 했을 때, 실제 DataSource(e.g. DB)에 접근하기 이전에, Cache를 먼저 확인하여, 찾고 있는 데이터가 있다면 해당 데이터를 리턴하는 방식으로 작동하며, 실제 DataSource에 접근하는 것에 비해 매우 빠른 속도를 자랑합니다. 이러한 Cache에 있어서 조금은 주의해서 기억해야 할 점은, Cache는 User Level 에서 데이터를 저장하는 것이..

원의 내각이 주어졌을 때, 원의 좌표(x, y)를 구하는 방법에 대해 정리해보고자 합니다. 구하는 방법은 매우 간단합니다. 반지름(r)이 1인 원이 있다고 가정 해봅시다. 그러면, 위 그림에서 볼 수 있듯이 내각(θ)를 가지는 x, y의 좌표는 (cosθ, sinθ)가 되게 됩니다. 즉, θ 각도를 가지고 있는 x좌표는 cosθ, y좌표는 sinθ를 이용하면 된다는 것 입니다. 그럼, 이제 어떻게 JS를 이용하여 좌표를 구할 수 있는지 코드로 알아보도록 합시다. 구현 코드 JavaScript에서는 sin과 cos을 구하는 메소드를 Math함수를 이용하여 제공( 참고링크 )하고 있습니다. const cos = Math.cos(0); const sin = Math.sin(1); 이때 주의 할 점은, 인자를 ..

아래처럼 js-cookie를 이용하여, 존재하는 쿠키들을 다 받아와 모두 삭제시키는 removeCookies라는 함수를 만들었다. 그런데 이상하게 쿠키 하나가 삭제가 안되는 문제가 있었다. import Cookies from 'js-cookie' export const removeCookies = () => { const cookies = Cookies.get() for (let cookie in cookies) { Cookies.remove(cookie) } } js-cookie Readme에 아래처럼 나와있었다. js-cookie A simple, lightweight JavaScript API for handling cookies. Latest version: 3.0.1, last published..

깊은 복사와 얕은 복사의 차이, 깊은 복사를 할 수 있는 방법에 대해 정리해보고자 한다. 1. 깊은 복사 vs 얕은 복사 2. 깊은 복사 하는 방법 3. 얕은 복사 하는 방법 깊은 복사 vs 얕은 복사 쉽게 말하자면, 깊은 복사는 객체의 실제 값을 복사 하는 반면, 얕은 복사는 객체의 주소(reference)값을 복사한다. 원시 값(Number, String, Boolean, Null, undefined 등)을 복사 할 때에는 항상 깊은 복사가 되므로, 이 경우 깊은 복사와 얕은 복사를 구분할 필요가 없다. 이 구분이 중요해지는 시점은 참조 자료형(Object, Symbol, Array)을 다룰 때이다. [ 얕은 복사 예시] 얕은 복사는 주소 값만 복사하고, 깊은 복사는 객체의 실제 값을 복사한다고 하였..

Cookie🍪 의 옵션을 설정하는 방법과, iframe을 사용했을 때 cookie가 전송되지 않았던 문제를 어떻게 해결 했는지 정리해보자. 쿠키의 모든 옵션들과 그에 대한 설명은 가장 하단에 설명하였다. 쿠키 옵션만이 궁금하다면 가장 하단으로 바로 내려가자! 문제 상황 협력하는 업체에서 본인들 웹 페이지에서 iframe 태그를 통해 우리 서버 페이지를 불러오고 로그인을 하려고 했지만, 로그인이 안되는 이슈가 있다고 하였다. 현재 프로젝트에서 로그인관리를 쿠키를 통해 하고 있었기에, 쿠키와 관련되었을 거라 짐작했으며, CSRF공격을 막기 위해서 chrome80부터 sameSite옵션의 기본 값을 Lax로 바꾼 것을 알고 있었기에, 그것이 원인 이라고 생각하고 접근했다. 원인 파악 1. 쿠키 옵션 체크 현재..