로컬 스토리지 vs 세션 스토리지

> __로컬 스토리지__ : 사용자가 직접 브라우저 캐시를 지우지 전이나 웹/앱이 데이터를 지울때까지 저장 > __세션 스토리지__ : 세션이 유지되는 한, 브라우저 탭이 닫칠때까지만 데이터가 유지된다. 프로젝트에서는 상태관리를 위해 리덕스를 사용했고, 리덕스스토어

2021년 11월 23일
·
0개의 댓글
·

화살표 함수와 일반 함수의 차이

인스턴스를 생성할 수 없다는 것은 prototype 프로퍼티가 없고, 프로토타입도 생성하지 않는다. 그리고 화살표 함수는 생성자 함수로서 호출을 할 수 없다.일반함수는 실행될 때마다 함수 내부에 this라는 객체가 추가된다. 따라서 일반 함수에서는 this가 바인딩 된

2021년 11월 15일
·
0개의 댓글
·

default parameter

함수를 호출 시, 매개변수의 개수만큼 인수를 전달해야하지만, 그렇지 않은 경우에도 에러가 발생하지는 않는다. 이는 자바스크립트 엔진이 매개변수의 개수와 인수의 개수를 체크하지 않기 때문이다. 인수가 전달되지 않은 매개변수의 값은 undefined이 들어갈 뿐이다. 하지

2021년 11월 15일
·
0개의 댓글
·

Compile vs Transpile

트랜스파일과 컴파일 두 용어를 헷갈렸던 적이 있어서 다시 정리해보려고 한다. 참고로 Babel은 자바스크립트 트랜스파일러다. 컴파일이 조금 더 큰 범주고, 그 안에 트랜스파일 개념이 있다고 생각하면 된다. 한 언어로 작성된 소스 코드를 다른 언어로 변환하는 것이 컴파일

2021년 11월 15일
·
0개의 댓글
·

객체 지향 프로그래밍

프로그래밍에서 필요한 데이터를 추상화시켜 상태와 행위를 가진 객체를 만들고 그 객체들 간의 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 방법이다. 1\. 코드 재사용이 용이하다다른 사람이 만든 클래스를 가져와서 이용하거나, 상속을 통한 확장도 가능하다.2\. 유

2021년 11월 14일
·
0개의 댓글
·

undefined vs null vs NaN

변수를 선언하고 값을 할당하지 않을 때 undefined이 자동으로 할당된다.undefined는 원시 타입(Primitive Type)이다. 함수가 값을 리턴하지 않을 때도 undefined가 할당된다.메서드와 선언에서 변수가 할당받지 못한 경우에도 undefined가

2021년 11월 13일
·
0개의 댓글
·

옵셔널 체이닝 & null 병합 연산자

Optional Chaning 연산자는 ES11(ECMAScript2020)에 도입되었다. ?.은 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티를 참조한다.예를 들어사용자가 여러 명 있는데, 그중

2021년 11월 13일
·
0개의 댓글
·

Truthy vs Falsy

참으로 평가되는 값거짓으로 평가되는 값falseundefinednull0\-0NaN''Falsy값에는 false, undefined, null, 0 , -0, NaN, ''이 있다. 이 외의 값들을 제외하고는 모두 Truthy 값이다.자바스크립트 Deep Dive

2021년 11월 13일
·
0개의 댓글
·

useRef

바닐라 자바스크립트에서는 DOM 조작을 하기 위해 querySelector나 getElementById를 사용했다. 리액트에서는 DOM 조작을 어떻게 할까? useRef 란? 리렌더가 되지 않는다. 1. DOM 조작을 위해 애니메이션을 추가하기도 하고, css 스타

2021년 11월 12일
·
0개의 댓글
·

Favicon HTML에 적용하기

https://realfavicongenerator.net/Select your Favicon image 버튼을 클릭하고 svg 형식의 파비콘을 업로드 해준다. Favicon packcage 버튼을 클릭해 패키지를 다운 받은 후, 프로젝트의 루트 디렉토리에 넣

2021년 11월 11일
·
0개의 댓글
·

리액트에서 SVG 사용하기

Scalable Vector Graphics로 각 위치 값을 표시하는 벡터와 같은 방식으로 깨지지 않고, 용량이 적고, 빠른 출력이 가능하며, 수정과 애니메이션이 가능하다. 확대나 축소를 해도 깨지지 않고 선명하게 볼 수 있다. .svg비트맵 기반의 이미지이기 때문에

2021년 11월 11일
·
0개의 댓글
·

브라우저에 URL을 입력하면 어떤일이 일어날까?

사용자가 주소창에 URL을 입력하기 시작하면, 브라우저 캐시가 있다면 자동완성 기능을 적용해준다. 브라우저는 해당 IP주소를 찾기 위해 DNS 레코드의 캐시를 확인한다. > DNS는 Domian Name System의 약자로 웹사이트의 URL과 링크된 특정 IP주소를

2021년 11월 9일
·
0개의 댓글
·

이벤트 루프

자바스크립트는 싱글(단일) 스레드인데, 어떻게 여러가지 작업을 동시에 처리할 수 있을까?예를 들면 Node.js 웹서버에서 동시에 여러 개의 HTTP 요청을 처리하는 것과 같이 말이다. 동시성을 가질 수 있는 이유는 이벤트 루프 때문이다. 자바스크립트는 이벤트 루프를

2021년 11월 9일
·
0개의 댓글
·

Debouce & Throttle

scroll, resize, input, mousemove, mouseover과 같은 이벤트들은 짧은 시간동안 연속해서 발생한다. Debounce 와 Throttle 은 과도한 이벤트 호출로 인한 성능 저하를 방지하고자 사용되는 프로그래밍 기법이다. 디바운스 : 이벤트

2021년 11월 9일
·
0개의 댓글
·

이벤트 버블링 vs 이벤트 캡쳐링 vs 이벤트 위임

이벤트 위임 자식 엘리먼트의 이벤트를 부모 엘리먼트에서 감지할 수 있으니, 이벤트를 하나하나 등록하는 것이 아닌 부모에게 이벤트를 위임하는 방법을 말한다. 이벤트 캡쳐링 이벤트 버블링

2021년 11월 8일
·
0개의 댓글
·

리덕스의 3가지 원칙

리덕스리덕스는 상태 관리 라이브러리 중 하나로, 컴포넌트에서 상태 업데이트 관련 로직들을 따로 분리시켜 더욱 효율적으로 관리할 수 있다. 상태란? 로컬에서 생성하고 사용하고 있지만, 서버에 저장되지 않은 값을 의미한다. 캐시 데이터, 로딩 표시 여부, 활성화된 라우

2021년 11월 8일
·
0개의 댓글
·

리액트에 대하여

리액트란? SPA에서 UI를 만드는 라이브러리로, UI 기능만 제공하기 때문에 다른 SPA를 제작하는 앵귤러와 같은 프레임워크에 비해 부족한 부분이 있다. 따라서 전역 상태 관리, 라우팅, 빌드 시스템등 추가적인 라이브러리를

2021년 11월 8일
·
0개의 댓글
·

자바스크립트 vs 타입스크립트

동적 타입런타임 속도가 빠르다.정적 타입컴파일 시 시간이 좀 걸리더라도 안정성 보장

2021년 11월 7일
·
0개의 댓글
·

Git 충돌 발생 시 해결방법

git checkout / git switch 로 main 브랜치로 이동한다. git pull upstream (브랜치명) 로 원격 저장소의 최신 변경 사항들을 로컬 저장소로 불러온다. git checkout / git switch 로 충돌이 발생한 브랜치로 이동하고l

2021년 11월 7일
·
0개의 댓글
·

실행 컨텍스트

키와 값을 갖는 객체 형태의 스코프 (전역, 함수, 블록 스코프)를 생성하여 식별자를 키로 등록하고, 식별자에 바인딩된 값을 관리한다. 스코프를 구분하여 식별자를 등록하고 관리하는 저장소 역할스코프에 포함된 식별자를 등록하고, 등록된 식별자에 바인딩된 값을 관리하는 저

2021년 11월 6일
·
0개의 댓글
·