(SEB_FE) SECTION4

자료구조에 대해 이해한다.자료구조의 특징에 대해 이해한다.자주 등장하는 자료구조가 무엇인지 이해한다.여러 데이터의 묶음을 저장하고, 사용하는 방법을 정의한 것데이터는 그 자체만으로 어떤 정보를 가지기 힘들다. 예를 들어 나이라는 데이터만 알고 있다면, 사람의 나이인지,

스택의 구조와 특징에 대해 이해합니다.스택의 실사용 예제를 보고, 스택이 어떻게 이용이 되는지 이해합니다.직접 구현한 스택이 어떤 식으로 동작하는지 이해하고, JavaScript 배열의 어떤 메서드를 사용해야 하는지 압니다.JavaScript의 배열과 스택은 어떤 차이

트리의 개념과 특징, 용어에 대해 이해합니다.트리의 실사용 예제를 보고, 트리가 어떻게 이용이 되는지 이해합니다.직접 구현한 트리가 어떤 식으로 동작하는지 이해하고, 해당 클래스 내의 로직을 이해합니다.이진 탐색 트리의 개념과 종류 특징에 대해 이해합니다.직접 구현한

Virtual DOM이 나오게 된 배경을 학습합니다.React가 어떻게 Virtual DOM을 사용하는지 학습합니다.Virtual DOM이 어떻게 생겼는지 학습합니다.React가 DOM 트리를 탐색하는 방법에 대해 학습합니다.DOM 엘리먼트의 타입이 같을 때와 다를 때

React는 기존의 가상 DOM 트리와 새롭게 변경된 가상 DOM 트리를 비교할 때, 트리의 레벨 순서대로 순회하는 방식으로 탐색한다. 즉 같은 레벨(위치)끼리 비교한다는 뜻! 이는 너비 우선 탐색(BFS)의 일종이라고 볼 수 있다. (동일 선상에 있는 노드를 파악한

함수 컴포넌트와 클래스 컴포넌트의 차이를 학습하고, 함수 컴포넌트에서 Hook을 사용하는 이유를 이해합니다.Hook의 사용 규칙에 대해 학습하고 이해합니다.useMemo의 쓰임새와 작성 방법에 대해 학습합니다.useCallback의 쓰임새와 작성 방법에 대해 학습합니다

코드 분할(code spliting)에 대해 학습합니다.React는 어떻게 코드 분할을 하는지 학습합니다.React.lazy() 메서드의 쓰임새와 작성 방법에 대해 학습합니다.suspense의 쓰임새와 작성 방법에 대해 학습합니다.React.lazy()와 Suspens

실제로 연산 로직에 영향을 주는 값은 val1과 val2 값인데, 보다시피 그 두 값이 아닌 name 값을 수정해도 add 함수가 계속 같은 결과값을 리턴함에도 불구하고 불필요하게 계속 호출되고 있는 상태이다. useMemo를 사용해서 add 함수의 호출을 최소화할 수

디자인 시스템이란 무엇이며, 왜 중요한지 이해할 수 있다.디자인 시스템을 적용함으로써 얻는 이점을 알 수 있다.구글, 마이크로소프트 등 실제 유명 서비스에서 디자인 시스템을 어떻게 사용하는지 알 수 있다.디자인 원칙부터 재사용할 수 있는 UI 패턴과 컴포넌트, 코드로

아토믹 디자인의 개념과 이를 구성하는 요소에 대해 알 수 있다.아토믹 디자인 적용 시 얻는 이점에 대해 이해할 수 있다.애플리케이션을 아토믹 디자인으로 구성하는 방법에 대해 이해할 수 있다.웹 디자이너 Brad Frost가 책 "Atomic Design"을 통해 제시한

마이크로소프트에서 개발한 JavaScript의 상위 집합(Superset) 언어JavaScript에 <span style="background-color: TypeScript는 JavaScript가 발전하면서 생긴 단점을 보완하기 위해 등장했다고 했는데, JS는

TypeScript는 JavaScript와 거의 동일한 데이터 타입을 지원한다. 가장 기본적인 데이터 타입으로, JavaScript에서도 마찬가지로 boolean 값이라고 불리는 참(true), 거짓(false) 값을 의미. JavaScript와 마찬가지로 TypeSc

JavaScript에서 함수는 모든 애플리케이션의 기본적인 구성 요소! TypeScript에도 함수는 JavaScript와 마찬가지로 기명 함수(named function)와 화살표 함수(arrow function) 등으로 만들 수 있다. 아래의 JavaScript 코

TypeScript는 연산자를 이용해 타입을 정할 수 있다. JavaScript에서도 보았던 || (OR) 연산자나 && (AND)와 같은 연산자를 이용하여 만들 수 있다. <span style="background-color: 유니온 타입은 둘 이상의 타입을 합

TypeScript의 열거형(Enum)은 특정 값의 집합을 정의할 때 사용된다. JavaScript에서는 기본적으로 열거형을 지원하지 않지만, TypeScript에서는 문자형 열거형과 숫자형 열거형을 지원한다. Color라는 열거형을 정의하고 있다. 열거형 값은 Red

TypeScript에서 인터페이스(Interface)는 일반적으로 타입 체크를 위해 사용이 된다. 인터페이스는 변수, 함수, 클래스에 사용할 수 있으며, 인터페이스에 선언된 프로퍼티 또는 메서드의 구현을 강제하여 일관성을 유지하도록 한다. JavaScript는 인터페이

타입의 새로운 이름을 만드는 것 ➡ 새로운 이름으로 기존의 타입을 참조하는 것을 의미

JavaScript와 TypeScript 모두 객체 지향 프로그래밍을 지원하며 클래스(class)를 사용하여 객체를 생성할 수 있다. 그러나 두 언어의 클래스는 몇 가지 차이점이 있다.JavaScript에서 클래스는 ES6(ECMAScript 2015)에서 처음 도입되

제네릭(Generic)은 코드 재사용성을 높이고 타입 안정성을 보장하는 기능이다.제네릭을 사용하면 함수나 클래스를 작성할 때, 사용될 데이터의 타입을 미리 지정하지 않고, 이후에 함수나 클래스를 호출할 때 인자로 전달된 데이터의 타입에 따라 자동으로 타입을 추론하게 된

types/types.tsx 파일에 필요한 타입을 정의해서 export 시켜서, 각 파일에서 필요한 타입을 import 해서 사용했다. index.tsx 파일에서 유념해야 할 점은 한 가지! 바로 root 변수에서 뒤에 as HTMLElement를 달아주는 것! App

개발 프로세스, 즉 소프트웨어 개발 프로세스 모델은 소프트웨어 개발 생명주기(SDLC, Software Develpment Life Cycle)를 기반으로 만들어졌다. 요구분석 및 시스템 명세 작성: 문제분석 단계라고도 하며, 개발할 소프트웨어의 기능과 제약조건, 목표

개발자를 위한 자동화 프로세스인 지속적인 통합(Continuous Integration)CI를 성공적으로 구현할 경우 애플리케이션에 대한 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트되어 공유 리포지토리에 통합되므로 여러 명의 개발자가 동시에 애플리케이션 개발과

💚Github Actions이란? >Github Actions이란 Github가 공식적으로 제공하는 빌드, 테스트 및 배포 파이프라인을 자동화할 수 있는 CI/CD 플랫폼이다. 레포지토리에서 Pull Request 나 push 같은 이벤트를 트리거로 GitHub 작

webpack dev server에서 제공하는 proxy 기능을 사용하는 방법브라우저 API를 요청할 때 백엔드 서버에 직접적으로 요청을 하지 않고, 현재 개발서버의 주소로 우회 요청을 하게 된다. 그러면 웹팩 개발 서버에서 해당 요청을 받아 그대로 백엔드 서버로 전달