전체 글125 생각해보기🤔 - 장바구니 🛒 Flux는 MVC의 어떤 문제를 해결했을까? MVC는 복잡한 의존성과 양방향 데이터 흐름이라는 문제가 있었다. 이를 해결하기 위해 Flux가 만들어졌다. 1. 중앙 집중화된 데이터 스토어 MVC 패턴의 여러 모델 대신, Flux는 중앙 집중화된 데이터 스토어를 사용한다. 이를 통해 데이터 일관성을 유지하고 유지 보수를 용이하게 한다. 2. 단방향 데이터 흐름 Flux는 데이터를 단방향으로 흐르게 하여 구조를 단순하게 만든다. 데이터는 액션(Action) -> 디스패처(Dispatcher) -> 스토어(Store) -> 뷰(View) 순서로 흐른다. 이를 통해 상태 관리를 좀 더 예측 가능하게 하여 디버깅을 쉽게 만든다. 🛒 이전 미션에서와 같이 React 자체에서 제공하는 방법으로만 상태를 관리하는 .. 2023. 6. 25. 생각해보기🤔 - 페이먼츠 💳 컴포넌트를 어느 정도까지 분리해야 할까요? 아래 기준에 따라 분리하는 것이 좋다. 1. 단일 책임 원칙 각 컴포넌트는 최대한 작은 기능적 단위를 가지도록 설계하는 것이 좋다. 이렇게 하면 재사용성이 높아지고, 각 컴포넌트의 역할을 명확히 할 수 있다. 2. 재사용성 공통적으로 사용되는 UI 요소나 로직이 있는 경우, 컴포넌트로 분리하면 여러 곳에서 재사용할 수 있다. 이렇게 하면 코드 중복을 줄이고 관리하기 편해진다. 3. 복잡성 컴포넌트 내부 로직이나 상태 관리가 복잡해진다면, 여러 하위 컴포넌트로 분리하여 복잡성을 줄일 수 있다. 💳 어떤 경우 컴포넌트를 그룹화해서 하나의 컴포넌트처럼 보이게 하는 것이 좋을까요? 1. 컴포넌트 간 의존성이 강한 경우 여러 컴포넌트들이 의존적이라면, 이를 그룹화하여.. 2023. 6. 20. 생각해보기🤔 - 다시, 점심 뭐 먹지 🍲 React 탄생 배경은 어떻게 될까요? React는 대규모 웹 애플리케이션 개발에서 발생하는 여러 문제를 해결하고자 하는 것에서 시작되었다. 특히 UI와 상호 작용하는 데이터의 복잡한 상태 관리와 DOM을 효율적으로 업데이트하는 것이 주요 과제였다. 이를 해결하기 위해 아래 기능을 도입했다. 1. 컴포넌트 기반 아키텍처 UI를 독립적이고 재사용 가능한 부분으로 나누어 개발의 복잡성을 줄이고 코드의 유지 보수를 쉽게 했다. 2. 가상 DOM (Virtual DOM) 실제 DOM 대신 메모리에 가상의 DOM을 생성한다. 이를 통해 업데이트가 발생할 때 불필요한 DOM 조작을 줄인다. 3. 단 방향 데이터 흐름 데이터와 상태가 계층 구조를 따라 일정한 방향으로 흐르게 한다. 이를 통해 상태 관리의 복잡성을.. 2023. 6. 19. 생각해보기🤔 - 영화 리뷰 🍿 실제 API를 테스트해야 하는 경우와 fixture를 이용하여 테스트하는 것은 어떻게 다르고 각각 언제 사용하는 것이 좋을까요? 1. 실제 API 테스트 실제 API를 호출하여 서버와 클라이언트 간의 상호 작용 테스트 가능 실제 서버에 요청을 보내고 응답을 받아 작동 확인 네트워크 지연 및 다양한 요청/응답 시나리오 시뮬레이션 가능 API 변경이 일어난 경우 업데이트 된 API가 올바르게 작동하는지 확인 가능 2. fixture를 이용한 테스트 실제 서버를 사용하지 않기 때문에 빠른 테스트 실행이 가능하며 외부 API 의존성 없음 응답 데이터를 미리 정의함으로써 예상되는 결과를 확인하고 특정 함수 또는 모듈만을 대상으로 테스트 수행 가능 🍿제네릭은 왜 사용할까요? 1. 타입 안정성 제네릭을 사용하면 .. 2023. 6. 18. 생각해보기🤔 - 점심 뭐 먹지 🍛 TypeScript에서 type alias vs interface 1. 선언방식 type alias는 type 키워드를 사용하여 선언하며, interface는 interface 키워드를 사용하여 선언한다. // type alias type AliasType = { prop1: string; prop2: number; }; // interface interface InterfaceType { prop1: string; prop2: number; } 2. 확장 방식 type alias는 다른 타입과의 결합(union)이나 교차(intersection)로 타입을 확장할 수 있다. interface는 확장(extends)과 구현(implements)을 통해 다른 인터페이스를 상속하거나 클래스와 함께 사용할 .. 2023. 6. 17. 생각해보기🤔 - 로또 🎱 JS의 class와 같은 기능을 class 문법 없이 구현할 수 있을까요? 생성자 함수와 프로토타입을 사용해 구현할 수 있다. // 생성자 함수 function Person(name, age) { this.name = name; this.age = age; } // 메소드 추가 Person.prototype.sayHello = function () { console.log('안녕하세요! 제 이름은 ' + this.name + ' 입니다.'); }; // 인스턴스 생성 const person1 = new Person('철수', 25); const person2 = new Person('영희', 23); // 메소드 사용 person1.sayHello(); // 안녕하세요! 제 이름은 철수 입니다. pe.. 2023. 6. 17. 이전 1 ··· 3 4 5 6 7 8 9 ··· 21 다음
