My Boundary As Much As I Experienced

테스트에는 유닛테스트와 인터그레이션 테스트, e2e테스트가 있다. 유닛테스트는 jest, 인터그레이션 테스트는 react testing library로 많이 한다. (jest로 인터그레이션 테스트도 가능하긴 함.) CRA를 하면 react testing library와 zest를 기본적으로 깔아줌. 파일 이름 컨벤션은 App.test.js 식으로 많이 짠다. in App.test.js import { render, screen } from "@testing-library/react"; import App from "./App"; // learn More라는 텍스트가 있는지 확인하는 테스트 // 이걸 테스트할 필요가 있나? test("renders learn More link", () => { // 맨처음..

XMLHttpRequest는 뭐야? XMLHttpRequest는 클라이언트 측에서 서버와 비동기적으로 상호 작용할 수 있도록 해주는 자바스크립트 객체입니다. 이를 사용하면 페이지의 새로고침 없이도 서버로부터 데이터를 요청하고 받을 수 있습니다. 주로 AJAX(Asynchronous JavaScript and XML) 기술에 사용되며, 최근에는 fetch API로 대체되는 경향이 있습니다. 더보기 XMLHttpRequest의 주요 메서드와 속성: open(method, url, async) 메서드: HTTP 요청을 초기화합니다. method: HTTP 메서드 (GET, POST 등) url: 요청을 보낼 URL async: 비동기 여부를 나타내는 불리언 값 send(data) 메서드: 요청을 서버로 보냅니..

promise에 대해서 알려줘 Promise 객체는 자바스크립트에서 비동기 작업을 처리하기 위한 객체입니다. 비동기 작업은 주로 네트워크 요청, 파일 읽기, 데이터베이스 쿼리 등과 같이 시간이 걸리는 작업을 의미합니다. Promise는 이러한 비동기 작업을 더 효율적으로 다룰 수 있도록 도와주는 패턴 중 하나입니다. Promise는 세 가지 상태를 가집니다: Pending (대기 중): 비동기 작업이 아직 완료되지 않은 상태. Fulfilled (이행됨): 비동기 작업이 성공적으로 완료된 상태. Rejected (거부됨): 비동기 작업이 실패한 상태. Promise 객체는 다음과 같은 구조를 가지고 있습니다: const myPromise = new Promise((resolve, reject) => { ..

브라우저 렌더링 동작 과정 렌더링의 기본적인 동작 과정은 다음과 같다. 1~2. HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다. (Parsing) 3. 두 Tree를 결합하여 Rendering Tree를 만든다. (Style) 4. Rendering Tree에서 각 노드의 위치와 크기를 계산한다. (Layout) 5. 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다. (Paint) 6. 레이어를 합성하여 실제 화면에 나타낸다. (Display) 0. 요청, 응답 처음 웹페이지에 접속하면 HTML, CSS, Javascript 파일, 그리고 필요하다면 이미지나 폰트같은 파일들을 서버에 요청하고 응답 받게 된다. 그렇다면 서버에 요청은 어떻게 전송할까? 브라우저..

useContext란? 프롭스 드릴링(프롭스가 하위 컴포넌트로 파고파고파고파고 또 파고 들어가는 현상)을 피하고 싶을 때 쓰는 문법. props 체이닝이 없이도 값을 전달하고 싶을 때 사용한다 context 설정법 api라던가, store, context같은 폴더에 파일을 만들어서 따로 관리한다. React 라이브러리를 import하고, createContext 메소드에서 관리하고 싶은 상태값을 입력(구독)한다. import React from "react"; const AuthContext = React.createContext({ isLoggedIn: false, }); export default AuthContext; 그런 다음에, App.js 같은 전역적으로 뿌릴 수 있는 곳에서 를 이용해 제공한..

useReducer란? useReducer는 상태를 관리하는 또 다른 방식이다. useState의 경쟁자?라고 보면 된다. 그렇다면 useReducer와 useState는 무엇이 다른가? 흔히 쓰는 useState는 '필요한 state만큼 생성해서 개별 관리'하였다. 그러나 useReducer는 여러 state가 존재해도 하나의 로직으로 다 관리한다. '중앙화된 state묶음'이라고 보면 된다. 이렇듯 기능적으로는 이점이 두드러지기보단 관리 방식의 차이가 발생한다. 중앙 관리해서 좋은 점은? 1. state가 너무 늘어나서 헷갈리는걸 방지한다. state가 열 몇 개씩 쌓이면 이게 어떤 state인지 헷갈리기 시작하는데 이를 방지할 수 있다. 2. 다른 state의 이전 값을 참조해서 최신 값을 만드는 ..

기존 useState를 쓸 때 발생하는 문제 아래는 리액트로 양방향 입력 컴포넌트를 만드는 흔한 예시이다. 양방향이란, 1. 유저가 input 태그에 입력해서 state값을 바꿀 수 있고, 2. 시스템이 다른 handler함수에서 setState를 통해 렌더된 인풋을 바꿀 수 있음을 의미한다. const [state, setState] = useState(””) 이게 틀리다는 건 아닌데 이런 식으로 하면 state가 바뀔 때마다 input이 재렌더 된다. value={state}때문에 state값의 변화에 영향을 받는 이 input컴포넌트는 엄청나게 많은 재렌더 api를 쏘게 되는데.. (단순 키보드 입력 때마다 state가 바뀌기 때문. state가 쓰이는 모든 곳이 재렌더 된다.) 성능적으로 민감한 ..

리액트 포털은 언제 쓰는가? 웹페이지를 만들다보면 종종 모달을 만들 상황이 발생한다. 많은 사람들이 모달을 그때그때 모달이 필요한 페이지의 자식으로 만들고 있다. 그렇게 되면 원래라면 해당 페이지의 맨 아래 있어야하는 모달을 css를 사용하여 최상단에 있는 것처럼 꾸미는 것이다. 이게 완전히 틀리다는건 아니지만, 의미적으로 좋지 않긴 하다.(최상단에 보이는 컴포넌트가 사실 맨 아래에 있는건데 z-index만 조작해서 위에 있는것처럼 보임) 의미적인 측면 뿐만 아니라 기능적으로도, 모달을 발생시켜야 하는 지점이 매우 깊은 곳이면, 그 상위요소들의 css에 모두 영향을 받는다. z-index가 다른 의존성 때문에 잘 안 올라가는 경우도 생길 수 있음. (리액트 루트를 넘어) 최상단으로 모달같은 컴포넌트를 보..

JSX코드가 처리되는 과정 JSX는 자바스크립트 코드가 HTML처럼 보이게 만든 일종의 Syntax Sugar일뿐이다. 실제로는 자바스크립트이다. // JSX return Let's get started! // 원시 React? return React.createElement("div", {}, React.createElement("h2", {}, "let's get started"), React.createElement(Expenses, {item: expenses}) ) //최상위 div에는 속성이 없으므로 빈객체{}를 2번째 인자로 제공한다. 위 예시의 아래 부분처럼 실제로 JSX 문법이 나오기 전까진 createElement() 메소드의 체이닝을 계속 했어야 했다. (return문은 단 하나의 값..

타입 가드 - typeof typeof 조건식으로 처리되는 타입을 방어하는 코드이다. 주로 조건문으로 구성된다. 타입스크립트는 null이나 undefined의 가능성, 패러미터에 다른 타입이 들어올 가능성들을 추적하여 사용자에게 경고한다. function add(a: Combinable, b: Combinable): Combinable { if (typeof a === "string" || typeof b === "string") { // 조건식으로 처리되는 타입을 방어. return a.toString() + b.toString(); } return a + b; // must be Number } If 문에 typeof를 활용하여 a가 문자거나, b가 문자인 경우를 걸러주었다. 그러니 마지막 retur..