⚙️ 기술로그

### 상태(state), 상태관리란? 상태(state)는 쉽게 말해 data로 이해하면 된다. 웹페이지에서 게시글 내용, 로그인, 메뉴 등등 직접 볼 수 있는 것들 뿐만 아니라 서버와 주고 받는 데이터 또한 상태라고 볼 수 있다. React로 서비스를 구현하다 보면

Redux가 무엇일까? Redux란 JavaScript로 만들어진 애플리케이션의 상태를 관리하기 위한 라이브러리며 React와는 독립적인 존재이다.(리덕스는 리액트에 종속된 라이브러리가 아니다.) 왜 Redux를 사용할까? 리액트로 상태관리를 할 때는 기존 부모에서

위 이미지는 HTML의 DOM 트리이다.DOM은 Document Object Model의 줄임말이며 번역을 해보면 문서 객체 모델이라는 뜻이다. Dom은 트리 구조로 되어있는 객체 모델이다.DOM은 HTML과 Javascript를 서로 이어주는 역할을 한다.DOM은

useRef는 함수형 컴포넌트에서 DOM에 직접적인 접근을 가능하게 해주는 Hook이다. 고로 컴포넌트에서 특정 DOM을 선택해야 할 때 useRef를 사용하면 된다.useRef는 리렌더링을 하지 않으며 컴포넌트의 속성만 조회 & 수정할 수 있다.컴포넌트에 focus를

useEffect는 함수형 컴포넌트에서 side effect들을 사용할 수 있게 해준다. 컴포넌트가 마운트 되었을 때, 언마운트 되었을 때, 업데이트 되었을 때 특정 작업을 처리할 수 있다.useEffect의 실행 순서는 bottom->top 이다. 다들 너무 당연하게

var는 치명적인 단점을 가지고 있다. 변수를 한번 더 선언하여도 에러가 표시되지 않고 각자 다른 값이 출력된다. 변수 선언이 유연하여 간단하게 사용하기는 좋지만 코드량이 방대해질수록 에러가 생길 확률도 커지며 에러를 잡을 수 없게 된다.이러한 단점을 보완하기 위해 나

동기는 순차적으로 일이 진행 되는 것을 말한다. 고로 설계가 직관적이고 편리하지만 요청에 대한 결과가 주어져야 다음 동작을 수행할 수 있다는 단점을 가지고 있다. 요청이 끝나지 않으면 다음 동작이 실행되지 않으므로 계속 기다려야 한다.동기와는 달리 비동기는 요청에 대한

JavaScript는 느슨한 타입(loosely typed)의 동적(dynamic) 언어 이다. 변수의 타입을 미리 선언하지 않아도 알아서 변환해준다. 프로그램 처리 과정에서 타입이 자동으로 파악되고, 같은 변수에 모든 타입의 값으로 할당 & 재할당이 가능하다.변수 생

기본형 타입(Primitive Type)NumberStringBooleanNullUndefined참조형 타입(Reference Type)ObjectArrayEunctionRegExp불변 객체란 '변하지 않는 객체' 라는 뜻이다.불변 객체를 만들 수 있는 방법은 기본적으

얕은 복사 : 객체의 참조 값(주소 값)을 복사아주 최소한만 복사가 가능하기 때문에 인스턴트가 메모리에 새로 생성되지 않는다. 깊은 복사 : 객체의 실제 값(value)를 복사데이터 자체를 통째로 복사가 가능하다.복사된 두 객체는 완전히 독립적인 메모리를 차지할 수

스코프자바스크립트의 스코프는 함수 레벨 스코프를 따른다.같은 함수 레벨에 존재하면 값을 참조할 수 있다는 건데ES6에서 let 키워드가 도입되면서 블록 레벨 스코프를 사용할 수 있게 됐다.호이스팅함수의 코드를 실행하기 전에 변수와 함수의 메모리 공간을 선언 전에 미리

JS 코드를 실행하기 위해서 자바스크립트 엔진은 코드에 대한 정보들(변수, arguments 객체, 함수 선언, scope, this 등)을 알고 있어야 한다. JS 코드가 실행되면서 실행 컨텍스트가 생성되는데, 자바스크립트 엔진은 코드에 대한 정보들을 실행 컨텍스트

스코프 체인(Scope Chain)은 일종의 리스트로서 전역 객체와 중첩된 함수의 스코프의 레퍼런스를 차례로 저장하고, 의미 그대로 각각의 스코프가 어떻게 연결(chain)되고 있는지 보여주는 것을 말한다.직접적으로 변경되면 안 되는 변수에 대한 접근을 막는 것을 은닉

useEffect는 컴포넌트들이 render와 paint 된 후에 발생된다. 비동기적(asynchronous)으로 실행되며 대부분 DOM과 인터렉션이 없는 경우에 사용된다. DOM에 영향을 주는 코드가 있을 경우 화면의 깜빡임을 볼 수 있다.useLayoutEffect

통신 프로토콜 또는 통신 규약은 컴퓨터나 원거리 통신 장비 사이에서 메시지를 주고 받는 양식과 규칙의 체계이다. 통신 프로토콜은 신호 체계, 인증, 그리고 오류 감지 및 수정기능을 포함할 수 있다. (위키백과)HTTP는 하이퍼 텍스트 전송 프로토콜의 약자이다. 서로 다

이벤트 버블링(event bubbling)은 특정 화면 요소에서 이베느가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어지는 특성을 의미한다.트리 형식의 HTML 요소로 보았을 때 자식->부모 로 전파시키는 방식을 가지고 있다.이벤트 캡처링(event ca

이벤트 버블링은 자식->부모 순으로 이벤트가 전달된다. 분명 원치 않는 상황도 생길텐데 어떻게 동작을 막을 수 있을까?event.stopPropagation()이벤트의 전달을 원하지 않을 경우 이벤트 객체의 메서드인 event.stopPropagation()를 사용하면

이벤트 버블링은 자식->부모 요소로 이벤트가 전달되어가는 것을 말한다. 활용 방법은 이벤트 위임을 할 수 있는데 하위 요소에 각각 이벤트를 붙이지 않고 상위 요소에서 이벤트를 제어할 수 있다. 쉽게 말해 상위 요소에 이벤트 하나를 넣으면 하위에는 이벤트들을 하나하나 넣

메모이제이션은 동일한 계산을 반복해야 할 때 이전에 계산했던 값들을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 할 수 있는 방법이다. 동적 계획법의 핵심이 되는 기술이다.리액트에서는 메모이제이션 기능을 지원하는 훅을 사용할 수

리덕스 썽크(Redux Thunk) 다음으로 가장 많이 사용되고 있는 리덕스 사가(Redux Saga)는 리액트/리덕스 애플리케이션에서 비동기적으로 API를 호출하여 데이터를 가져오는 일과 같은 부수 효과(Side Effect)를 쉽게 처리하기 위해 사용하는 라이브러리

GET과 POST는 HTTP 메서드로 클라이언트에서 서버로 무언가를 요청할 때 사용한다. 그럼 무엇이 다를까?사용목적 : GET은 서버의 리소스에서 데이터를 요청할 때, POST는 서버의 리소스를 새로 생성하거나 업데이트할 때 사용한다.DB로 따지면 GET은 SELEC

"=="는 동등 연산자로, 비교하는 대상의 형(타입)이 다르더라도, 강제로 비교한다.즉 두 값의 타입이 다르더라도, 형 변환된 값이 같다면 true를 리턴한다."==="는 일치 연산자로 동등 연산자보다 엄격하게 비교한다.타입과 값이 모두 같을 경우에만 true를 리턴한

브라우저가 화면에 나타나는 요소를 렌더링 할 때, 웹킷(Webkit)이나 게코(Gecko) 등과 같은 을 렌더링엔진 을 사용한다. 렌더링 엔진이 HTML, CSS, Javascript로 렌더링할 때 CRP 라는 프로세스를 사용하며 다음 단계들로 이루어진다.HTML를