자바스크립트에서 객체 지향 프로그래밍을 구현하는 방법에는 크게 두 가지가 있다. 바로 클래스 기반과 프로토타입 기반이다. ES6에서 도입된 클래스 문법은 기존의 프로토타입 기반 상속을 더 직관적이고 명확하게 사용할 수 있도록 해준다. 하지만 자바스크립트의 근간을 이루는 것은 여전히 프로토타입 기반 상속이다.   클래스의 내부 동작class Person { constructor(name) { this.name = name; } sayHello() { return `Hello, ${this.name}!`; }}console.log(Person.prototype.sayHello); // 메서드는 프로토타입에 존재console.log(typeof Person); /..

빌드 프로세스번들링 + 컴파일링 = "빌드(Build)" 과정목적은 개발자가 작성한 코드를 브라우저에서 효율적으로 실행할 수 있는 형태로 변환하고 최적화하는 것 컴파일링과 번들링의 목적 컴파일링: 브라우저가 이해할 수 없는 코드(JSX, TS)를 JavaScript로 변환번들링: 여러 파일을 하나로 합치고 최적화하여 로딩 성능 개선  웹 개발에서 번들링/컴파일이 필요한 3가지 핵심 이유1. 브라우저는 JSX, TypeScript 같은 최신 문법을 이해하지 못함// 브라우저가 이해 못하는 JSXconst element = Hello;// 변환 필요const element = React.createElement('h1', null, 'Hello'); 2. 수많은 자바스크립트 파일을 각각 로드하면 성능이 느림..

이전 포스팅에서 CRA 없이 리액트 앱을 만들기 위한 기본적인 프로젝트 구조를 살펴보았다.이번에는 모듈 번들러인 Webpack을 설정하는 방법에 대해 알아볼 것이다.1. Webpack이란? Webpack은 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러이다. 웹팩은 애플리케이션을 처리할 때 내부적으로 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성하는 디펜던시 그래프를 만든다.Webpack의 주요 개념 - Entry: 디펜던시 그래프를 만들기 위해 사용해야 하는 시작점 - Output: 생성된 번들을 저장할 위치와 이름 지정 - Loaders: 웹팩이 기본적으로 이해하는 JavaScript와 JSON 파일 이외의 다른 유형의 파일을 처리 - Plugins: 번들 최적화, 에..

Create React App(CRA) 없이 리액트 앱을 구축해보고자 한다.Create React App(CRA)은 단 몇 줄의 명령어로 최적화된 리액트 개발 환경을 구축할 수 있다. 복잡한 설정 과정 없이 즉시 개발을 시작할 수 있고, 웹팩, 바벨, ESLint 등이 미리 구성되어 있어 최신 자바스크립트 기능을 바로 사용할 수 있다. 또한, 핫 리로딩을 지원하는 개발 서버가 포함되어 있어 생산성이 향상된다. 하지만, CRA의 내부 작동 방식을 이해하지 못한 채 사용하게 될 수 있고, 특정 요구사항에 맞춰 설정을 변경하려면 'eject'해야 하는데, 이는 복잡하고 되돌리기 어려운 과정이다. CRA로 리액트를 만들다가 문득 프로젝트 구조와 빌드 프로세스에 대해 궁금증이 생겼고, CRA 없이 리액트 앱을 만..

Mocking- 실제값이 아닌 가짜값을 주입하여 이를 통한 테스트 환경을 통제하여 의존성의 독립을 가져온다.- import 를 통해 외부 모듈을 값이나 로직을 수정함으로 인해 모듈 내의 동작이 의도에 맞게 동작하는지 검토할 수 있다(외부 환경 요인에 대한 적절한 통제)- Mocking은 제어할 수 없는 것을 대체할 수 있다. Jest mocking- 의존성을 Mock function으로 대체- Jest의 mock 함수는 함수 호출 기록, 반환값 설정, 모듈 구현 내용 변경에 대한 기능을 가진다. 1. Mock함수를 만들고 호출 캡쳐 const mockFn = jest.fn(); expect(mockFn).toHaveBeenCalledTimes(3) // mock 함수는 3번 호출됨 // ..

서버로 부터 api를 호출하여 데이터를 받아오는 것을 mocking을 활용하여 처리하는 방법 모든 테스트에서는 api를 실제 호출하기 보다 요청을 모의하여 데이터를 가져올 수 있다.이를 통해 사용할 수 없는 백엔드로 인한 비정상적인 테스트를 막을 수 있고,모의 에러를 이용한 에러의 대응, 의도된 여러가지 응답에 대한 처리를 리액트 컴포넌트 안에서 테스트로 확인할 수 있다.실제 request, response에 소모되는 시간낭비도 방지할 수 있다. 서버로의 request를 모의 데이터로 처리하는 방법 경우 2가지 1. fecth2. axios fetchfetch api의 모의 데이터를 받아오는 방법을 jest function 함수를 이용한 수동 moking 방법과 라이브러리를 이용한 방법모의 데이터에 의존..

💡 DFS 알고리즘완전 탐색 (모든 노드를 한 번씩 탐색하기 위한 방법)을 수행하기 위한 방법 중 하나로, 탐색 트리의 최근에 첨가된 노드를 선택하고, 이 노드에 적용 가능한 동작자 중 하나를 적용하여 트리에 다음 수준(level)의 한 개의 자식 노드를 첨가하며, 첨가된 자식 노드가 목표 노드일 때까지 앞의 자식 노드의 첨가 과정을 반복해 가는 방식탐색 과정이 시작 노드에서 한없이 깊이 진행되는 것을 막기 위해 깊이 제한(depth bound)을 사용. 깊이 제한에 도달할 때까지 목표 노드가 발견되지 않으면 최근에 첨가된 노드의 부모 노드로 되돌아와서 (백트래킹), 부모 노드에 이전과는 다른 동작자를 적용하여 새로운 자식 노드를 생성DFS를 실제로 구현할 때는 스택 또는 재귀 함수를 이용→ 재귀 함수..

render 함수기능- 컴포넌트를 document.body에 붙여서 렌더링 시킨다. 반환값1. query objectsrender 함수의 반환 값으로 getByRole을 사용할 수 있다. const { getByRole } = render(// 버튼 역할을 하면서 - name을 가진 element가 document에 있는지 찾음expect(getByRole('button', { name: "-" })).toBeInTheDocument() screen object를 통해서 getByRole 함수에 접근할 수 있다.expect(screen.getByRole('button', { name: "+" })).toBeInTheDocument(); 2. container- 리액트 컴포넌트가 렌더링 된 DOM Node..