콘요맘떼 개발일지

Cookie와 Session의 한계 기본적으로 HTTP는 stateless하기 때문에 종료된 연결에 대한 정보를 기억하지 않는다. 그래서 원칙적으로 따졌을 때 로그인이 필요한 기능을 이용하기 위해서는 매 요청마다 아이디, 비밀번호 등을 전송해줘서 인증 과정을 거쳐야 한다. 다행히 우리는 쿠키를 통해 요청 정보를 기억할 수 있게 되었다. 서버 측에서 클라이언트로 전송해준 쿠키는 클라이언트 측에 저장되어 클라이언트가 요청을 날릴 때마다 서버로 함께 보내진다. 서버 측은 이 쿠키를 통해 각 요청을 식별할 수 있다. 그러나 쿠키 역시 몇 가지 단점을 가진다. 아이디, 패스워드 등 민감한 정보가 포함된 쿠키는 클라이언트 측에 저장되기 때문에 노출될 위험이 있다. 또한 개수와 용량에 제한이 존재하며 브라우저끼리 공..

OAuth (Open Authentication) OAuth는 사용자가 비밀번호를 제공하지 않고 다른 웹사이트 상의 자기 정보에 대한 웹 사이트 혹은 애플리케이션의 접근 권한을 부여할 수 있는 개방형 표준 방법이다. 구글, 페이스북, 트위터 등 다양한 기업들에서 해당 메커니즘을 활용하고 있다. 인증 방식의 표준이 존재하지 않았던 OAuth 등장 이전에는 아이디, 비밀번호 조합의 기본 인증을 따랐다. 기본 인증 방법은 보안의 관점에서 취약하기 때문에 일부 회사들은 자사의 고유 인증 방식을 개발하여 사용하였다. OAuth의 등장은 이렇게 제각각인 인증 방식을 표준화할 수 있게 해 주었다. OAuth 관련 주요 개념 1. 사용자 (User) : 계정의 주인인 유저 2. 소비자 (Consumer) : OAuth..

꼭 animate가 아니더라도 Dom element가 가지는 메소드를 사용할 때 기능은 멀쩡히 동작하는데 테스트 코드에서는 해당 메소드가 undefined로 나오는 오류가 발생할 수 있다. 이는 @testing-library/jest-dom에 해당 메소드가 구현되지 않았기 때문이다. 따라서 해당 메소드를 다음과 같이 명시적으로 추가해줘야 한다. (관련 링크)

리액트 코드에서 컴포넌트가 mount되기도 전에 컴포넌트 갱신을 시도할 때 발생하는 에러 메시지이다. 그런데 아무리 찾아봐도 내 코드에서는 그런 실수를 한 적이 없다. 답은 정말 의외의 곳에서 나온다. 리액트는 video element의 muted 속성을 제대로 처리하지 못 한다. (웹 프로젝트 주제로 많이 추천되는 유튜브 클론 프로젝트를 해본 사람이라면 이미 크롬 정책으로 인해 video element의 자동 재생을 위해서는 muted 속성을 통해서 동영상을 무음 처리해야 한다는 사실을 알고 있을 것이다. 그런데 muted 속성을 넣어주는 순간 리액트는 위와 같은 이슈를 일으킨다. 간단하게 정리하면 이유는 이렇게 추측된다. 기본적으로 JSX element에서 우리가 value와 같은 attribute를..

Atomic Design Pattern 아토믹 디자인 패턴은 컴포넌트를 원자(Atoms), 분자(Molecules), 유기체(Organisms), 템플릿(Templates), 페이지(Pages)의 레벨로 나누어 관리하는 방법론이다. 컴포넌트를 기반으로 하는 리액트, 뷰, 앵귤러 등 다양한 프레임워크 혹은 라이브러리에서 채택할 수 있으며 컴포넌트를 5개의 레벨에 나누어 잘게 쪼개고 결합함으로써 컴포넌트의 재사용성을 향상시킨다. Atom, Molecule, Page 레벨은 어느 정도 확고한 기준이 존재하지만 기본적으로 Atomic Design Pattern에서 컴포넌트 레벨을 나누는 것에 절대적인 기준은 존재하지 않는다. 따라서 프로젝트를 진행할 때 컴포넌트 레벨 구준 기준을 명확하게 확립하는 것이 필요할 ..

ES5에서 등장한 strict mode는 기존 Javascript가 기본으로 채택하던 sloopy mode(느슨한 모드, 공식 용어는 아님)을 해제하고 보다 엄격한 스타일로 코드를 작성하도록 사용하는 모드를 말한다. strict 모드를 사용하면 sloopy 모드에서는 넘어갈 수 있던 오류들이 에러로 변환되면서 보다 안전한 프로그램을 작성할 수 있다. 또한 자바스크립트 엔진의 최적화 작업을 방해하는 코드들을 지양하기 때문에 엄격 모드를 통해 코드를 작성하면 속도 면에서 비엄격 모드보다 우수한 모습을 보이기도 한다. (물론 엄격 모드를 쓴다고 무조건 느슨한 모드보다 빠르다는 아님) strict mode를 사용하는 방법은 간단하다. 함수 혹은 script 최상단에 'use strict'; 문장을 작성하면 해당..

최근에 유튜브 클론코딩 프로젝트를 리팩토링하면서 HTTP status code에 대해서 한 번 살펴볼 필요성을 느꼈다. HTTP status code는 통신의 결과를 요약해주며 API 문서를 작성할 때 꼭 명시해줘야 하는 중요한 개념이기 때문에 목적에 맞는 HTTP status code를 활용할 수 있는 것이 필요하다. HTTP status code의 종류 - 10X : 통신에 대한 정보를 제공해준다. (ex. 이상 없음, 프로토콜 변경, 처리중 등) - 20X : 통신 성공 - 30X : 리다이렉트 (클라이언트 측에서는 request를 끝내기 위해 추가적인 동작을 수행해야 한다.) - 40X : 클라이언트 오류 - 50X : 서버 오류 대표적인 HTTP Status Code의 종류 종류 상태 코드 이름..

데이터의 타입을 변경하는 것을 타입 변환(Type Conversion)이라고 부른다. 타입 변환에는 개발자의 의도와 무관하게 자바스크립트 엔진이 표현식을 해석하면서 자동적으로 타입을 변경하는 암묵적 타입 변환(Implicit Type Conversion)과 타입 캐스트 연산자 혹은 메소드 등을 활용하여 개발자가 의도적으로 타입을 변경하는 명시적 타입 변환(Explicit Type Conversion)이 있다. 대표적인 명시적 타입 변환 방법은 다음과 같다. 1. 문자열 타입으로 변환하기 (1) new 연산자 없이 String 생성자 호출 (2) Object.prototype.toString 메소드 활용 (3) 문자열 연결 연산자 사용 (+) (4) template literal 사용 (`${val}`) ..

프록시 서버 (Proxy Server) 프록시 서버는 여러 네트워크 서비스 사이에서 그 통신을 중계해주는 역할을 수행한다. 프록시는 리퀘스트를 가로채고 그에 대한 리스폰스를 전달해준다. 따라서 클라이언트와 서버 입장에서는 해당 통신이 프록시를 거쳐서 이루어진다는 사실을 인지하지 못한다. 프록시는 사용자의 로컬 컴퓨터에 위치할 수도, 인터넷 상에서 두 포인트 사이의 어딘가에 위치할 수도 있다. 프록시 서버를 사용하는 이유 (1) 보안 프록시 서버를 사용하는 첫 번째 이유는 보안적인 문제이다. 방화벽 등으로 인해 직접 통신할 수 없는 두 네트워크 포인트가 존재할 때 프록시 서버를 사용하면 방화벽 내부의 시스템을 보호하면서 제한된 외부와의 통신을 허용할 수 있다. (그를 위해 프록시 서버가 가로챈 리퀘스트의 ..

HTTP (HyperText Transfer Protocol) HTTP는 HTML 문서 등의 데이터를 주고받기 위한 프로토콜(통신 규약)이다. HTTP에서의 통신은 클라이언트 측에서 데이터를 요청하는 request와 그에 대한 서버 측의 응답인 response로 이루어진다. 그렇기 때문에 HTTP는 클라이언트-서버 프로토콜이다. 여기서 클라이언트는 사용자를 대신하는 개체인 사용자 에이전트를 의미하는데 대부분의 경우에는 브라우저이지만 API 테스트용 개발자 도구인 Postman과 같이 그 외의 경우도 존재한다. 참고로 HTTP는 OSI 7 계층 중 어플리케이션 레벨에 속하는 프로토콜로 기본 포트 번호는 80번이다. (HTTPS의 기본 포트는 443) HTTP의 특징 중 하나는 확장성이 뛰어나다는 것이다. ..