기술면접

HTTP는 Hyper Text Transfer Protocol로 서버와 클라이언트 모델에 따라 데이터 (hypertext)를 주고 받기 위한 통신 규약이다. 어플리케이션 레벨의 프로토콜로 TCP / IP 위에서 작동한다. 상태를 가지고 있지 않은 stateless 프

변수, 함수등에 인자가 대입될 때, 인자를 어떤 방식으로 넘겨줄까?함수 호출 시 전달되는 변수의 값을 복사하여 함수의 인자로 전달한다.같은 값을 가진 데이터가(복사된 값이) 메모리에 또 하나 만들어져서 저장된다.primitive(원시)타입 데이터는 메모리에서 주소값을

Callback 패턴과 문제점 우선 동기와 비동기가 무엇인지 알아볼 필요가 있다. 동기 Synchronous 위에서 아래대로 순서대로 실행되는 흐름이다. 현재 실행 중인 코드가 완료된 후에 실행된다. 그 전까지는 blocking. 비동기 Asynchronous 실행

CORS란 ? SOP(Same Origin Policy)는 다른 Origin으로 요청을 보낼 수 없도록 금지하는 브라우저의 기본적인 보안 정책이다. > 추가 HTTP header를 사용해 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 리소스에 접근 가능한 권

ES5 이전까지는 변수를 선언하기 위해 var 키워드 밖에 사용할 수 없었다.재할당 가능var 키워드로 선언한 변수는 중복 선언 가능 동일한 이름의 변수가 이미 선언되있을 때 변수를 중복 선언 해 값을 할당하게되면 선언된 변수 값이 변경되는 부작용이 발생할 수 있다.

사용자가 HTML 파일을 다운 받았을 때, 브라우저 렌더링 엔진은 한 줄씩 순차적으로 파싱하면서 DOM을 생성해 나가다가 script 태그를 만나면 DOM 생성을 일시 중단한다.script 태그 내의 자바스크립트 코드를 파싱하기 위해 Node.js의 V8과 같은 자바스

의존성 배열은 기본적으로 shallow equal을 하게 된다. 왜 shallow compare만 하는지에 대한 정확한 이유를 찾기는 힘들었다. 다만 `Dan Abramov`의 트위터를 보았을 때, 아마도 굳이 deep equality까지 체크할 필요가 없기 때문 아닐

SSR > Server Side Rendering의 약자로 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식이다. 유저가 웹사이트 요청을 보낸다 서버는 즉시 렌더링 가능한(Ready to Render) HTML 파일들을 만들게 된다. 이미 렌더링 준비

useEffect useLayoutEffect

props를 상속받으면 컴포넌트 내에서 수정 불가하다. 이는 리액트에서 부모 => 자식의 일방향성 상속 특징 때문이다. 읽기 전용이다.부모 요소에서 설정하는 값이다. props가 변경되면 컴포넌트 리 렌더링 해야한다.컴포넌트 내부에서 선언된다.state가 변경되면 컴포

리액트는 Virtual DOM을 이용하여 DOM을 최소한으로 조작하여 성능을 높인 렌더링을 진행합니다.데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링합니다.이전 Virtual DOM에 있던 내용과 현재 내용을 비교합니다.바뀐 부분만 실제 DOM에 적용

계산량이 많은 함수의 반환값을 재활용하는 용도로 사용된다.shouldComponentUpdate의 훅 버전이다. 리액트는 props를 통해 하위 컴포넌트에 데이터를 전달되고, 해당 값들이 변경될 때마다 재 렌더링되어 화면에 새롭게 표현되는게 리액트의 기본적인 개념이다.

this는 자바스크립트 런타임 시 바인딩이 이루어지는 실행 컨텍스트 중 하나로, 해당 함수가 실행되는 동안에 사용가능하며, 함수 호출 부분에서 this가 가리키는 것이 무엇인지를 확인할 수 있다. 복잡한 코드에서 암시적 바인딩에 의해 혼란스러운 경우가 있는데, 이를 해

화살표 함수 익명함수로만 만들 수 있다. this가 없다 new 연산자와 함께 호출할 수 없다. why ? - this가 없기 때문에 생성자 함수로 사용할 수 없다. arguments가 없다. 모든 인수에 접근할 수 있게 해주는 유사 배열 객체 arguments를 지

클로저 : 독립적인 변수를 가리키는 함수이다. 클로저 안에 정의된 함수는 만들어진 함수를 기억한다. 클로저를 통해 은닉화를 할 수 있다.콜백 함수 등을 사용할 때 발생할 수 있는 에러를 해결하는데도 유용하다. 여러 개의 인자를 가진 함수를 호출할때, 파라미터 수보다 적

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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