소소한 코딩일지

웹 개발을 하면서 가장 많이 사용하는 라이브러리, 프레임워크는 React, Vue.js, Angular이다. 이것들로 우리는 SPA를 만들 수 있다. SPA를 검색해보면 CSR, SSR이라는 용어들도 함께 등장한다. 이 세 가지 용어가 어떤 것을 의미하고, 서로 어떤 관계를 가지고 있고, 영향을 줄 수 있는지 알아보려고 한다. SPA (Single Page Application) SPA는 웹사이트 전체를 하나의 페이지(Single Page)에서 보여주고, 내부 요소를 바꾸면서 화면을 보여주는 페이지이다. 기존 옛날 웹사이트에서는 새로운 페이지로 전환될 때 마다 서버로부터 리소스를 전송받았다. 하지만 점차 페이지의 용량이 커지면서 서버에서 매번 리소스를 받아오는 부담이 커지게 되었고, 이 문제를 해결하기 ..

프로젝트들을 시작하면서 CRA나 Vue cli로 간편하게 프로젝트들을 생성해서 package.json의 dependencies, devdependencies를 제외하고 어떤 내용들이 포함되어있는지 제대로 본 적이 없었던 것 같다. 이번에 내가 최근까지 했던 saai-peer프로젝트의 package.json과 github에서 vue 레포 지토리중 star 수가 가장 많았던 vue.js의 package.json을 열어보고 안에 어떤 내용이 있는지 보려고 한다. 우선 내 프로젝트의 package.json을 먼저 보면 아래와 같은 내용들이 들어있다. package.json에 lint, prettier를 제외하고 전혀 세팅을 안 해봐서 별로 내용이 없긴 하다... name : 프로젝트 이름 version: 프로젝..

SaaS라는 단어를 여러 블로그나 자료를 찾아보면서 몇 번 본 적이 있다. 이번 기회에 한번 어떤 단어를 의미하는 것인지 확인해보려고 한다. ** 아래 Reference를 참고하여 쓴 블로그입니다. 더 자세하고 정확한 내용은 아래 Reference를 참고해주세요. 클라우드 컴퓨팅 클라우드 컴퓨팅은 전자기기 자체가 아니라 서버를 통해 데이터 저장, 네트워크, 콘텐츠 사용과 같은 IT 서비스를 한번에 사용할 수 있는 컴퓨팅 환경을 말한다. SaaS SaaS는 서비스형 소프트웨어, Software-as-a-Service의 약자이며, 클라우드 컴퓨팅의 종류 중 하나이다. 클라우드 컴퓨팅에서 최상위 계층에 해당하고, 하위 IaaS, PaaS에서 제공하는 물리적 인프라, 미들웨어, 데이터베이스 관리 기능 등을 제공..

현재 진행 중인 프로젝트에서 사용자 요청에 파일 데이터를 포함하여 post 요청을 보내야 하는 상황에서 데이터가 제대로 전달되지 않는 현상이 생겨 오류를 해결하던 도중 Content-Type에 대해 새롭게 알게 된 점을 정리해 보려고 한다. Content-Type Content-Type는 리소스의 media type을 정의하고 나타내기 위해 사용되는 헤더이다. 응답, 요청 양쪽에서 사용하며 응답에 있는 Content-Type 헤더는 클라이언트에게 반환된 콘텐츠의 콘텐츠 유형이 어떤 것인지 알려주고, 요청에 있는 Content-Type 헤더는 서버에게 어떤 유형의 데이터가 실제로 전송된 것인지 알려준다. Content-Type: text/html; charset=utf-8 Content-Type: mult..

Redux saga를 공부하기 전에 Generator라는 함수에 대해서 한번 정리하고 넘어가면 Redux saga를 이해하는데 도움이 될 거라고 생각해서 정리를 해보려고 한다. Generator 일반 함수에서는 return이 한번 발생하면 return 이후에 존재하는 코드라인은 더 이상 실행되지 않는다. function OriginFunc() { return 1; // 여기 이후 코드는 절대 실행될 수 없다. console.log(12); return 2; } Generator 함수는 ES6에서 도입된 함수로, 이터러블을 생성하는 함수이다. 제너레이터 함수를 사용하면 이터레이션 프로토콜을 준수해 이터러블을 생성하는 방식보다 더 간단하게 이터러블을 생성할 수 있다고 한다. ※ 이터러블(Iterable)이란..

최근 로그인 구현 로직을 짜면서 Cookie, Session, Token에 대한 지식이 없어서 고생을 좀 했다. 세 가지 개념을 정리해보고 어떤 역할과 장단점이 있는지 정리해보았다. 쿠키(cookie) 쿠키는 사용자의 웹 브라우저에 전송하는 작은 데이터 조각이다. 데이터를 저장해 두었다가 동일한 서버에 재요청되었을 때 저장된 데이터를 함께 전송한다. 쿠키는 두 요청에 대해서 동일한 브라우저에서 들어온 요청인지 판단할 때 주로 사용한다. 장점 사용자의 브라우저에 저장되기 때문에 서버에 부하가 들지 않는다. 단점 개인정보를 담고 있기 때문에 사생활 문제가 있을 수 있고, 웹 브라우저 자체의 쿠키 거부 기능이 활성화되어있다면 쿠키 자체를 사용하기 힘들다. 클라이언트에 저장되어있기 때문에 쿠키로만 인증을 할 경..

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

작년쯤 토이 프로젝트로 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에 포함되기 때문에 웹 서비스 성능에 영향을 줄 수 있음 쿠키는 만료일자 지정 여부에 따라 세션 쿠키와 영구 쿠키로 ..