TIL

포트폴리오 사이트 개발을 완료하고 리팩토링 중이었다. 컴포넌트 별로 코드에 문제가 없는지, 클린한지 보다가 아예 데이터 호출 부분을 통째로 분리시키는게 좋겠다고 생각했다. 여러 강의를 들어보다 Next.js에서는 api 함수를 따로 분리시키는 것을 보고 진행완료된 React에도 적용해보고 싶었다. 이전에 작성된 코드는 다음과 같다. 컴포넌트 내에 state를 두고 uesEffect로 컴포넌트가 마운트될때 state에 저장하는 방식이다. 이제 데이터를 호출하는 api 부분을 분리시켜 보자. 좌측 api.tsx로 데이터를 호출하는 함수부분을 분리시켰다. 그러나 컴포넌트에서는 여전히 data를 받기 위해 useEffect로 데이터를 받아와 state에 저장해야 되었다. 확실한 관심사의 분리를 통해 코드를 깔끔..

React에서 데이터 다루기 React 앱은 컴포넌트라는 독립적인 UI요소를 조합하여 만든다. 컴포넌트 간의 데이터 관리는 React에서 중요한 역할을 한다. Props, State, Context는 컴포넌트에서 데이터를 다루는 기술들이다. Props Props는 "properties"의 줄임말이다. React에서 컴포넌트 간 데이터를 전달하는 메커니즘으로 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하기 위해 Props를 사용한다. Props의 데이터는 읽기전용으로 전달되고, 자식 컴포넌트에서는 Props를 변경할 수 없다. // 부모 컴포넌트 function ParentComponent() { const name = "정인"; return ( ); } // 자식 컴포넌트 function ChildC..

Memoization useMemo와 useCallback을 이해하기 위해서 Memoization의 개념을 먼저 알아야 한다. Memoization이란 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하여 예측되는 반복수행을 제거하고 빠르게 실행하는 기술이다. Memoization을 사용하면 중복연산을 피할 수 있기 때문에 메모리를 조금 사용하여 성능을 최적화 할 수 있다. useMemo useMemo는 Memoization된 값을 반환하는 함수이다. useMemo(() => fn, deps) useMemo는 deps가 변하면 () => fn라는 함수를 실행하고 그 함수의 반환 값을 반환한다. deps는 dependency이고, useMemo는 deps에 의존한다. impo..

브라우저 저장소(Browser Storage)란? 브라우저 저장소는 HTML5부터 제공하는 웹 스토리지와 Cookie를 말한다. 두 가지로 분류하는 이유는 두 성질이 다르기 때문이다. 웹 스토리지는 LocalStorage와 SessionStorage로 나뉜다. 이것들을 왜 사용하게 되었을까? 과거에 클라이언트와 서버의 통신에서 클라이언트가 서버에게 데이터를 요청하고 서버가 응답을 보내주면 통신이 종료된다. 요청이 끝난다면 서버는 클라이언트의 상태 정보를 기억하지 못하기 때문에, 요청할 때 마다 해당 정보를 서버에 전송해주어야 한다. 이러한 특징으로 계속해서 통신을 해야 하기 때문에 번거로운 부분이 있었다. 이를 해결하기 위해 브라우저에 클라이언트 정보를 저장하도록 만들었다. 예를 들어, 로그인 한 정보를..

Virtual DOM이란? Virtual DOM은 실제 DOM(Document Object Model)을 모방한 가상의 트리구조이다. 실제 DOM에서는 수정이 일어날 때 마다 DOM을 업데이트 하기 때문에 성능면에서 불리하다. 이런 단점을 해결하기 위해 사용되는 개념이 Virtual DOM이다. Virtual DOM은 동시에 발생한 업데이트를 모아서 DOM을 한 번만 수정할 수 있도록 도와준다. React에서 실제 업데이트가 일어나도 실제 DOM을 바로 수정하지 않는다. React는 Virtual DOM에 업데이트가 모두 일어날 때 까지 기다렸다가 더 이상 업데이트가 일어나지 않으면, 동시에 일어난 업데이트를 한 번에 실제 DOM에 업데이트를 한다. 브라우저 렌더링과의 관계 브라우저는 HTML을 파싱하여..

브라우저는 어떻게 동작하는가? 우리가 주소창에 naver.com을 입력하고 Enter를 치는 순간 부터 화면에 naver 홈페이지가 보여지는 과정을 알아보려고 한다. 브라우저는 사용자가 선택한 자원을 서버에 요청하고 표시하도록 도와준다. 우리가 선택한 자원은 HTML문서이거나 이미지 파일이거나 또 다른 형태일 수 있다. 자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해진다. URI(Uniform Resource Identifier) : 자원의 위치와 고유 식별자를 포함함 ex) https://www.naver.com/login/user?id=122 - URL을 포함한 URI URL(Uniform Resource Locator) : 자원의 위치를 포함함 ex) https..

RESTful API(Respresentational State Transfer API) API는 Application Programming Interface로 다른 소프트웨어 시스템과 통신하기 위해 따라야 하는 규칙이다. 그렇다면 RESTful이 붙어있는 REST란 무엇일까? REST란 자원을 이름으로 구분하여 해당 자원의 상태 및 정보를 주고받는 모든 것을 의미한다. 즉, 자원은 해당 소프트웨어가 관리하는 모든 문서, 그림, 데이터 등이고, 자원의 이름은 데이터베이스의 내 정보가 자원일때, '유정인'을 자원의 이름으로 이를 구분한다. 이러한 상태 및 정보를 데이터가 요청되어지는 시점에서 JSON 혹은 XML을 통해 주고받는다. REST는 HTTP URI(Uniform Resource Identifie..

객체 지향 프로그래밍(Object Oriented Programming) 객체지향 프로그래밍이란 컴퓨터 프로그래밍의 패터다음 중 하나로, 데이터가 객체 내에 캡슐화되고 구성요소의 부분이 아닌, 객체 자체가 운용되는 프로그래밍 접근 방식이다. 원래는 JavaScript에 class라는 도구가 없었는데 ES6 이후부터 JavaScript가 공식적으로 지원했고, 이전에는 프로토타입 기반의 객체 생성방식으로 class를 사용했다. 클래스는 다음과 같은 구성 요소로 구성된다. 멤버변수 : 클래스의 상태를 저장하는 변수이다. 메서드 : 클래스의 동작을 정의하는 함수이다. 생성자 : 클래스의 객체를 생성할 때 호출되는 함수이다. 상속 : 다른 클래스의 멤버를 상속받아 새로운 클래스를 정의하는 기능이다. 아래의 코드와..

프로토타입이란? 객체지향 프로그래밍에서 객체간의 상속과 프로퍼티 공유를 구현하는 매커니즘 Java, C++과 같은 클래스기반 객체지향 프로그래밍 언어와 달리 Javascript는 프로토타입 기반 객체지향 프로그래밍 언어이다. - 모던자바스크립트 Deep Dive 위의 설명과 같이 Javascript는 프로토타입 기반 언어이다. 객체는 프로토타입을 가지고 있으며, 프로토타입은 해당 객체의 속성과 메서드를 정의한다. 이 프로토타입으로 다른 객체에서 상속받아 사용할 수 있다. Javascript는 객체를 생성할 때 프로토타입을 찾는다. 찾지 못할 경우 프로토타입 체인을 따라 상위 프로토타입을 계속 찾아간다. 이런식으로 프로토타입 체인을 통하여 상속관계가 형성된다. function Person(name, age..

함수와 그 함수가 선언됐을 때의 렉시컬환경(Lexical Environment)과의 조합 위의 클로저는 함수가 선언되었을 때 렉시컬환경과의 조합이라는 말은 와닫지 않는다. 보다 풀어서 설명하자면 "내부함수가 외부함수 변수에 접근할 수 있는 Javascript 기능이다."라고 설명할 수 있다. 이러한 클로저의 특징을 통해 코드의 재사용성과 유연성을 높일 수 있다. 아래의 코드로 자세히 이해해보자. // inner 함수가 outer 함수 바깥에서 정의된 경우 const x = 1; function outer() { const x = 10; inner(); } function inner() { console.log(x); } outer(); // 1 // inner 함수가 outer 함수 내부에서 정의된 경우..