분류 전체보기

[ Javascript ] 얕은 복사 vs 깊은 복사

기본형 데이터와 참조형 데이터 자바스크립트에서 값은 원시값과 참조값으로 나뉩니다. 원시값 ( Primitive Value ) 객체가 아닌 데이터들 ( 기본 자료형 )을 의미하며, 변수에 메모리 공간에 실제 데이터 값이 저장됩니다. 할당된 변수를 조작하려하면 실제 값이 조작됩니다. Number String Boolean Null Undefinded Symbol 기본적으로 불변성이 유지됩니다. 참조값 ( Reference Value ) 객체를 의미하며 변수에 할당될 때, 값이 직접 해당 변수에 저장되지 않고 변수에 대한 데이터 참조만 저장됩니다. 얕은 복사 vs 깊은 복사 얕은 복사 ( Shallow Copy ) : 객체의 참조값 ( 주소 ) 을 복사 깊은 복사 ( Deep Copy ) : 객체의 실제 값을..

[ JavaScript ] ==, === 의 차이점

==, === 의 차이 자바스크립트는 기본적으로 타입이 매우 유연한 언어입니다. 보통 어떤 변수를 선언하면 형변환이 암시적으로 이루어지는데, 그래서 위에 짤 처럼 숫자와 문자를 같다고 하는 상황이 발생하는 것입니다. ==, === 은 각각 Equal Operator, Strict Equal Oprator 라고 부르고 느슨한 비교, 엄격한 비교라고 부르기도 합니다. 0 == false; // true 0 == ""; // true 1 == true; // true 1 == "1"; // true 1 == [1]; // true "1" == [1]; // true "1" == true; // true true == [1]; // true false == ""; // true false == null; // ..

[ JavaScript ] Arrow Function ( 화살표 함수 )

화살표 함수 ( Arrow Function ) 화살표 함수 표현(arrow function expression)은 전통적인 함수표현(function) 의 간편한 대안입니다. 하지만, 화살표 함수는 몇 가지 제한점이 있고 모든 상황에 사용할 수는 없습니다. 화살표 함수란 ES6 에서 처음 생긴 문법으로, 함수를 정의하는 방식 중 하나이다. 화살표를 선언해서 함수를 표현하는 방식이라 화살표 함수라는 이름이 붙여졌다. // Function Expression const add = function (a, b) { return a + b; }; // Arrow Function const add = (a, b) => a + b; 함수 표현식 보다 간단하게 함수를 나타낼 수 있습니다. 이렇게 간단하고 간결하게 표현되..

SPA vs MPA

SPA ( Single Page Application ) 싱글 페이지 애플리케이션 ( SPA ) 는 새로운 페이지를 불러오지 않고 같은 페이지에 동적으로 요소들을 다시 작성하는 페이지를 의미한다. React, Vue, Angular 셋 다 SPA 에 속하는 프레임 워크이다. 보통 클라이언트 사이드 랜더링이다 SPA 특징 단일 페이지이기 때문에, 모든 정적 리소스를 최초 접근시 단 한번만 다운로드 한다. 미리 다운 받아놓기 때문에 새로고침 없이 리렌더링 하지 않고 변경되는 부분만 갱신한다. 네이티브 앱과 비슷한 UX를 준다 SPA 장점 자연스러운 사용자 경험 ( UX ) 전체 페이지를 업데이트 하지 않기 때문에, 빠르고 깜빡거림이 없다. 필요한 리소스만 부분적 로딩 SPA 의 Application 은 정적..

Window, DOM, BOM

Window DOM, BOM 을 모두 가지고 있는 최상위 객체이다. DOM ( Document Object Model, 문서 객체 구조 ) Dom 이란 Document Object Model 의 약자로 HTML 문서를 객체로 표현한 것이다. 보통 웹 페이지를 제어할 수 있게 만든 문서 객체 구조로, Core DOM, HTML DOM, XML DOM 으로 나뉜다. BOM ( Browser Object Model, 브라우저 객체 구조 ) BOM 은 자바스크립트가 브라우저와 소통하기 위해 만들어진 모델이다. 공식 표준은 아니지만 브라우저 대부분이 자바스크립트와 상호작용에 있어 비슷한 메소드와 동작 하기에 BOM 이라고 부른다. window 객체를 통해 접근이 가능하다. navigator 브라우저명과 버전정보를..

[ Frontend ] 브라우저 렌더링 과정 과 동작 원리

주소창에 도메인을 입력했을때 일어나는 일 주소창에 입력된 주소를 통해 서버를 찾아간다. 이후 DNS 가 연결해줄 곳을 찾는다. 서버에서 HTML 파일을 클라이언트로 보낸다. HTML 문서는 파싱되어 DOM 을 생성한다. ( 객체 형식 ) 중간에 CSS 를 로드하는 Link 또는 Style 태그를 만나면 DOM 생성을 중지한다. CSS 를 파싱하고 CSSOM 을 생성한다. 이렇게 만들어진 CSSOM + DOM 은 렌더링을 위해 렌더 트리로 결합된다. 만약 script 태그를 만나면, 파싱을 중단하고 JS 엔진을 실행해 JS 코드를 파싱한다. 브라우저 동작 원리 설명 브라우저의 기본 구조 사용자 인터페이스 : 사용자가 보여지는 인터페이스 부분 ( 주소 표시줄, 북마크 등 페이지 뷰 이외의 부분 ) 브라우저 ..

[ Network ] 토큰 기반 인증 방식에 대하여

토큰 기반 인증 시스템 토큰 기반 인증이란 사용자가 자신의 아이덴티티를 확인하고 고유한 액세스 토큰을 받을 수 있는 프로토콜을 말한다. 사용자는 토큰 유효 기간 동안 동일한 웹페이지나 앱, 혹은 그 밖에 해당 토큰으로 보호를 받는 리소스로 돌아갈 때마다 자격 증명을 다시 입력할 필요 없이 토큰이 발급된 웹사이트나 앱에 액세스할 수 있다. 토큰 기반 시스템 작동 원리 유저가 로그인 서버에서 계정정보 검증 계정 정보가 정확하다면 Signed 토큰을 발급 클라이언트측에서는 발급받은 토큰을 저장, 서버에서 요청을 할 때마다 토큰을 전달 서버는 토큰을 검증하고, 요청에 응답 웹서버에 토큰을 서버에 전달할땐, HTTP 요청의 헤더에 토큰값을 포함시켜 전달 토큰 기반 시스템의 장점 1. 무상태성 & 확장성 토큰은 클..

[ React ] useEffect 와 useLayoutEffect 의 차이점

useEffect useEffect 는 컴포넌트들이 비동기적으로 render 와 paint 된 후 실행된다. paint 된 후에 실행되기 때문에, useEffect 내부의 dom 에 영향을 주는 코드가 있을 경우, 사용자 입장에서 깜빡거림을 감지할 수 있다. useLayoutEffect useLayoutEffect 는 컴포넌트들이 동기적으로 render 된 후 실행, 그 후 paint 된다. paint 가 되기전에 실행되기 때문에, dom 조작하는 코드가 있더라도 깜빡임이 없다. 결론 두 코드의 차이점은 실행 시점이다. useLayoutEffect 는 동기적으로 실행되고, 내부의 코드가 모두 실행된 후 painting 작업을 거치기 때문에 레이아웃이 복잡하면 복잡할 수록 화면을 보기까지 시간이 오래걸린다..

[ React ] state 를 직접 수정하지 않고 setState 를 사용하는 이유

왜 State 를 직접 수정하면 안되는 걸까? immutable ( 불변성 ) 을 유지해야하기 때문이다. 리액트 컴포넌트는 한번 Render 를 실행한 후, shouldComponentUpdate 상태로 들어가게 된다. 이 라이프 사이클 메서드를 사용하게 되면 아래 상태가 되었을때 Update 가 되어서 render 를 실행한다. props, state 가 변경 부모 컴포넌트가 렌더링 되었을 때 forceUpdate 가 실행될 때 그런데 직접 state 를 고치면 왜 update 상태가 되지 않는 것일까? 그건 React 가 값이 바뀜을 판단하는 기준이 메모리 주소이기 때문에 객체의 주소가 바뀌지 않고 내부 값만 바뀐다면 바뀌지 않은 것으로 인식하기 때문이다. 즉 "불변성" 을 지키지 않아서 일어난 일이..

[ React ] Lazy Loading 과 Code Splitting

Code Splitting 코드 스플리팅이라는 것은 Webpack, rollup, browserify 와 같은 모듈 번들러를 이용하여 만들어진 하나의 번들 파일을 여러 번들 파일로 나누는 것을 의미한다. 하나의 번들 파일을 여러 번들 파일로 나누는 이유는 더 빠른 속도로 화면을 로드하기 위해서이다. 번들러를 사용하는 이유는 브라우저에서 호출하는 파일 개수를 줄여 부하 발생 방지를 위해 번들러를 사용하는데, 프로젝트 규모가 커지면서, 번들링 크기도 커지고 이는 즉 번들 파일 로딩 시간이 길어지는 결과가 발생한다. 이래서 하나의 번들 파일을 여러개로 나눈 뒤, 실제 로드되는 화면의 번들 파일만 불러오고 나머지는 지연 시킴으로 더 빠른 화면을 보여줄수 있게 된다. ( Lazy Loading ) Lazy Loa..