소소한 코딩일지

로그아웃 기능 구현을 위해서 로그인 인증 토큰을 헤더로 가지는 post 요청을 해주는 과정에서 이슈가 생겼다. 401 에러는 인증정보가 유효하지 않거나, 인증 정보가 부족하다고 판단되어 요청이 거부되었을 때 발생하는 에러이다. post 요청을 위해서 Authorizaiton 을 헤더로 넘겨주었고, 개발자 도구의 network 탭에서 header가 잘 전달되는 것을 확인했기 때문에 인증정보가 부족하다고 생각하지는 않았다. 그래서 Authorizaiton 토큰을 전달 하는 과정에서 이상이 생기는지 확인했지만 쿠키로 전달하는 과정에서도 제대로 토큰이 전달되는 것을 확인했다. --- 해결 방법 --- 역시 기본기가 제일 중요했습니다. axios 공식문서의 post 방식에 사용되는 인자의 순서는 다음과 같습니다...

HTTP의 특징인 무상태와 비연결성에 대해서 정리를 해보려 한다. 무상태 (Stateless) HTTP의 상태 유지 상태 유지(Stateful) : 중간에 작업을 하던 서버가 바뀌면 안 된다. -> 혹여나 바뀌더라도 바뀐 서버가 정보를 그대로 가지고 있어야 한다. 무상태 (Stateless) : 중간에 서버가 바뀌어도 된다. -> 응답 서버를 쉽게 바꿀 수 있어 서버 증설이 아주 용이하다. 상태 유지 프로토콜 / Stateful 상태 유지 프로토콜에서 서버는 클라이언트의 요청을 모두 기억하고 있다. 서버에 문제가 생기면 클라이언트가 요청한 내역이 모두 사라지기 때문에, 클라이언트는 처음부터 다시 요청해야 한다. 무상태 프로토콜 / Stateless 서버가 클라이언트의 요청을 기억하지 않는다. 클라이언트가..

DB 관련 정보나 API_KEY 등 외부에 공개되면 안 되는 값들이 개발 중에 발생할 수 있다. 이런 값들을 관리하기 위해서 .env라는 환경변수 파일을 만들어 사용해준다. . env 환경변수 파일을 사용하는 방법은 다음과 같다. 1. 파일 생성 프로젝트 최상위 폴더에. env 파일을 만들어 준다. 2. 환경변수 설정 환경 변수로 저장할 내용을 작성한다. 이때 REACT_APP_으로 변수명을 선언해주어야 사용이 가능하다. 그리고 = 이후 문자열에 따옴표를 따로 붙이지 않는다. REACT_APP_API_KEY=dafsdlfjaoweonvaenvdapjf 3. 환경 변수 사용 사용할 때는 process.env.변수명을 통해 사용이 가능하다 process.env.REACT_APP_API_KEY 환경 변수 설정..

작년쯤 토이 프로젝트로 OAuth를 활용해서 구글 로그인을 사용해본 적이 있다. 그때는 OAuth에 대한 배경지식 없이 그냥 클론 코딩하듯이 사용했었다. 이번에 OAuth라는 것을 다시 한번 접하게 되어서 다음에 사용할 때는 뭐가 뭔지 알고 사용할 수 있도록, 이 부분을 정리해두려고 한다. OAuth 공식 문서에 정의되어 있는 OAuth의 정의를 먼저 읽어보면, 정보 접근 서비스가 정보 제공 서비스가 가지고 있는 리소스에 제한된 액세스를 얻기 위한 응용 프로그램이며, 자원 소유자와 정보 제공 서비스 간의 승인 상호작용을 조정 또는 정보 접근 서비스가 자체 리소스 액세스 권한을 얻도록 허용해주는 프로그램이다.라고 되어있다. 인증을 위한 표준 프로토콜의 한 종류, 이미 보안되어 있는 기존의 리소스에 접근하기..

일반적인 웹 페이지로 상용자가 접근하면 그 안에 있는 리소스가 모두 다운로드됩니다. 웹 페이지의 모든 내용을 사용자가 사용한다고 하면 리소스가 전부 다운로드되어도 무관하다. 하지만 일부 내용만 확인하고 가버리면 리소스 낭비가 발생하게 된다. 이런 리소스 낭비를 줄이기 위해서 lazy loading 기법이 탄생하게 되었다. Lazy Loading Lazy Loading은 페이지를 읽어 들이는 시점에 중요하지 않은, 현재 바로 사용되지 않는 리소스에 대한 로딩을 추후에 그 리소스가 필요해지면 로드되는 현상이다. 왜 Lazy Loading을 사용하는가 크게 2가지의 장점을 가지고 있다. 1. 성능 향상 웹 화면의 로딩 시간, 성능 관리 면에서 장점을 가진다. 페이지 초기 로딩 시 필요한 컴포넌트의 개수를 줄일..

WebStorage는 HTML 5에서부터 제공하는 기능으로 클라이언트 웹 브라우저에 데이터를 저장할 수 있도록 제공하는 기능이다. 쿠키(Cookies)와 비슷한 기능이다. Web Storage가 필요한 이유 Web Storage의 다음과 같은 장점 때문에 비슷한 역할을 하는 쿠키(Cookie)보다 web Storage를 활용한다. 쿠키에 비해 큰 데이터 저장 가능 (쿠키는 4KB의 데이터 제한) HTTP Request에 암호화 되지 않은 상태로 사용하기 때문에 보안에 취약 쿠키는 저장 데이터를 서버로 전송한다. 반면 Web Storage는 브라우저에 저장 쿠키는 모든 HTTP Request에 포함되기 때문에 웹 서비스 성능에 영향을 줄 수 있음 쿠키는 만료일자 지정 여부에 따라 세션 쿠키와 영구 쿠키로 ..

프로젝트를 하면서 상태 관리 라이브러리인 Redux를 사용하게 되었다. 생소한 개념이라 Redux에 대한 키워드들과 규칙에 대해서 한번 정리해보려고 한다. 상태 관리와 상태관리 라이브러리 우선 '상태'는 컴포넌트 내부에 보이는 데이터뿐 아니라 웹 기능에 포함되는 모든 데이터를 말하며, '상태'를 관리하는 것을 '상태 관리'라고 한다. 그리고 이 상태 관리와 관련된 자원을 모아놓은 것이 '상태 관리 라이브러리'가 되겠다. Redux 리덕스는 리액트 생태계에서 가장 많이 사용되는 상태관리 라이브러리 중 하나다. 리덕스를 사용함으로써 우리는 두 가지 부분에서 장점을 가질 수 있다. 첫 번째는 컴포넌트 간 데이터를 전달하는 것이 편리하다. 상태 관리 없이 컴포넌트 간 데이터를 전달하는 방법으로 우리는 props..

이벤트 루프는 싱글 스레드인 JS 엔진에 동시성을 부여하기 위한 특성이다. 이벤트 루프에 대해서 좀 더 자세하게 정리해보자 먼저 첫 문장에서 나온 말에서 4가지 단어에 대해서 이해하면 좋을 것 같다. JS 엔진 싱글 스레드 동시성 이벤트 루프 JS 엔진 자바스크립트 엔진은 대표적으로 구글 크롬 브라우저의 V8 엔진이 있습니다. JS 엔진의 내부에는 메모리 힙(Memory Heap), 콜 스택 (Call Stack)이라는 구성요소가 존재하고 하는 일은 다음과 같습니다. Memory Heap: 메모리 할당이 발생 Call Stack: 실행 콘텍스트에 따라 호출 스택이 쌓이는 공간 싱글 스레드(Single Thread) 자바 스크립트는 싱글 쓰레드 언어이다. 싱글 스레드라는 것은 호출 스택이 하나라는 뜻이고 ..

무한 스크롤은 사용자가 직접 페이지 전환을 하지 않고 스크롤을 내려 하단의 콘텐츠가 계속해서 추가되는 것을 말합니다. 무한 스크롤에 있어서 사용자의 현재 위치를 감지해야하는데 이것을 체크하기 위해서 2가지의 방법이 존재합니다. 1. Scroll의 위치를 체크하면서 특정 위치가 되었을 때 기능을 동작 2. Intersection Observer API를 활용하여 특정 콘텐츠의 등장 여부를 판단하여 기능을 동작 첫 번째의 방법의 경우, scroll의 위치를 계속해서 감지해주어야 하기 때문에 메서드 호출이 불필요하게 많이 발생하는 단점이 있습니다. 쓰로틀링과 디바운싱을 통해 횟수를 줄여줄 수는 있습니다. 두 번째의 intersection Observer의 경우 컴포넌트와 viewport 교차하는 영역에 따라 ..

DOM을 수정하는 것은 리소스가 많이 필요하다. DOM 수정에 따른 성능 저하를 방지하기 위해 DOM을 최소한으로 수정해했고, 그래서 나온 개념이 VIrtual DOM이다. Virtual DOM은 React에서 나온 실제 DOM과 구조가 비슷한 React의 객체 트리이다. DOM을 직접 수정하지 않고 Virtual DOM을 조작하면 React가 변화된 부분을 적절하게 DOM에 적용시킨다. Virtual DOM을 사용함으로써 실제 DOM을 조작할 필요가 없어졌다. 웹의 복잡성이 더욱 높아지면서, DOM을 직접 관리하는 것이 복잡하고, 실수의 가능성이 존재했는데, 이러한 부분을 virtual DOM을 통해 자동화하고, 추상화해줌으로써 해소할 수 있다. Virtual DOM은 실제 DOM 변화를 최소화시켜주는..