Web

옵셔널 체이닝 연산자 ES11(ECMAScript2020)에서 도입된 옵셔널 체이닝(optional chaning) 연산자 ?. 는 좌항의 피연산자가 null 또는 undefined 인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다. 예제는 다음과 같다. var elem = null; var value = elem?.value; console.log(value); // undefined 옵셔널 체이닝 연산자가 등장하기 전에는 논리 연산자 && 를 활용해 단축 평가를 했었으나, 옵셔널 체이닝 연산자를 활용하면 좀 더 깨끗한 코드를 작성할 수 있다. 하지만 논리 연산자 && 를 활용하는 것과 옵셔널 체이닝 연산자 ?. 를 활용하는 것에는 분명한 차이가 있는데, 다음과 같다..

변수 호이스팅 console.log(number); var number; 위의 코드를 실행해보면 console.log(number); 는 어떤 값이 출력될까? 자바스크립트를 처음 접한다면 ‘당연히 에러가 발생하지 않을까?’ 라고 생각할 수 있다. 하지만 undefined 가 출력된다. 분명 자바스크립트의 소스코드도 여느 프로그래밍 언어와 마찬가지로 한줄씩 차례대로 실행되는데 어떻게 이게 가능한걸까? 바로 자바스크립트의 호이스팅에 의해 그렇다. 호이스팅에 대해 알아보고자 한다. 호이스팅(Hoisting)은 변수 또는 함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징이다. 따라서 위의 코드를 살펴볼 때, 실제 동작 순서는 number 변수가 선언되고 나서 콘솔 코드가 실행되게..

API를 작성하는데 있어서 로그인은 보안과 직결되기 때문에 가장 중요한 부분 중 하나이다. 그렇다면 로그인을 어떻게 안전하게 처리할 수 있을까? 그 부분에 대해 정리하고자 한다. 로그인 API가 보다 복잡한 이유는 우선 HTTP의 특성과 관련이 있다. HTTP는 무상태성이라는 특성을 지니고 있는데, 클라이언트에 대한 이전 상태 정보 및 현재 통신 상태가 남아있지 않다. 따라서 이를 해결하고자 로그인 방식이 별도로 존재하는 것이다. 로그인 방식 3가지 쿠키 & 세션 JWT OAuth 쿠키 클라이언트가 어떠한 웹사이트를 방문할 경우, 그 사이트가 사용하고 있는 서버를 통해 클라이언트의 브라우저에 설치되는 작은 기록 정보 파일 무상태 환경에서 기억하고자 하는 데이터를 쿠키에 담고, 다음 번 요청 시에 쿠키를 ..

정적 웹페이지 vs 동적 웹페이지 웹페이지는 크게 정적 웹페이지와 동적 웹페이지로 나눌 수 있는데, 정적 웹페이지는 클라이언트가 서버에 요청을 할 때, 서버는 별도의 처리과정 없이 반환값을 제공한다. 따라서 모든 사용자가 동일한 화면을 보게 된다. 반면 동적 웹페이지에서는 서버가 클라이언트의 요청값에 대해 일련의 수행과정을 거친 후 반환값을 제공한다. 이 경우 사용자들마다 다른 페이지를 볼 수 있다. 동적 웹페이지도 페이지를 제공 - 레거시화 되어가고 있다. 동적 웹 페이지에서 정적 웹 페이지로 바뀌는 이유: 서버 부하 줄이기 MPA vs SPA 여기서 MPA(Multiple Page Application)과 SPA(Single Page Application)의 차이와도 연관이 있다. 단순하게 텍스트 그..

프로토콜: 컴퓨터들 간의 원활한 통신을 위해 지키기로 한 규약 프로토콜에는 HTTP, TCP, IP, SSH 등 여러 종류가 있다. HTTP(Hyper Text Transfer Protocol) : HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜 HTTP 역사 HTTP /0.9 (Online Protocol) GET 메소드만 존재, HTML 만 전달 가능한 매우 간단한 형태 HTTP /1.0 헤더 부분 추가, 응답에 상태코드 추가 응답 부분에 Content-Type가 생겨 HTML 외 다른 파일도 전송 가능 1 Request & 1 Response Per Connection 매번 새로운 연결로 성능 ⬇︎ 서버 부하 비용 ⬆︎ HTTP /1.1 Persistent Connection (지..

리액트에는 Hook이라는 개념을 통해 기존에 강세이던 클래스 문법에서 벗어나 함수형 문법을 이용하는 계기가 되었다. Hook에는 무엇이 있고, 각각을 간략하게 정리하고자 한다. (꾸준히 수정 예정) 1. useState() 컴포넌트의 상태를 관리하기 용이하다. 상황에 따라 다른 값을 저장하거나, 다른 화면을 출력할 때 사용한다. 2. useEffect() 최초 렌더링 이후 (컴포넌트가 업데이트 되는 경우 포함) 실행할 코드를 작성한다. 뿐만 아니라, 기존 클래스 문법의 생명주기를 두번째 인자에 따라 나타낼 수 있다. 3.useContext() 컴포넌트의 인접한 부모-자식이 아닌 관계에 대해 값을 주고받기 용이하며, Redux와 어느정도 유사한 개념이라고 볼 수 있다. 4. useReducer() 상태관리..

흔히 알고 있는 자료형인 Boolean에는 True와 False라는 두 가지 값이 있다. 그런데 특이하게도 자바스크립트에는 일반적인 언어와 달리 Truthy와 Falsy라는 개념이 있다. Truthy와 Falsy truthy는 true는 아니지만 true로 여겨지는 값이다. true { } (empty object) [ ] (empty array) 13 (number, not zero) "0", "false", "js" (string, not empty) Falsy Falsy는 Truthy와 반대의 개념으로 false는 아니지만 false로 여겨지는 값이다. false 0, -0 (zero, minus zero) 0n (BigInt zero) ' ', " ", ` ` (empty string) null ..