본문 바로가기

Frontend

 (278)
[React] Redux 프로젝트 세팅 Redux 프로젝트 생성 yarn add redux react-redux src > redux > config > configStore.js // 중앙 데이터 관리소 (store) import { createStore } from "redux"; import { combineReducers } from "redux"; const rootReducer = combineReducers({}); const store = createStore(rootReducer); export default store; src > index.js import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App ..
TIL 23.07.31 Redux thunk/ toolkit 개념정리 Redux thunk Redux thunk 는 리덕스에서 비동기 작업을 하기 위한 미들웨어 중 하나로, Redux thunk 를 사용하면, 액션 생성자 함수가 일반 객체뿐만 아니라 함수도 반환할 수 있다. Thunk의 장점 1. 비동기 작업 처리 Redux 는 동기적인 상태관리 라이브러리이므로, 액션은 순수한 객체 형태를 지닌다. 그러나 서버로부터 데이터를 가져오거나, API를 호출하는 비동기 작업은 리덕스에서 바로 처리가 불가능하다. 따라서 Redux Thunk를 사용하면 비동기 작업을 보다 쉽게 처리가 가능하다. 2. 분리된 비동기 로직 비동기 작업을 컴포넌트에서 직접 처리하면, 해당 컴포넌트가 너무 많은 역할을 하게 된다. 따라서 Redux Thunk를 이용해 비동기 로직을 액션 생성자 함수와 분리..
TIL 23.07.28 Redux 개념정리 Redux 1. 전역 상태관리 라이브러리 2. 주로 React 와 함께 Vue, Angler 에서도 사용할 수 있다. 3. Redux 는 애플리케이션의 상태를 단일한 "store" 에 저장하여 상태 변경 및 관리를 예측 가능한 방식으로 함. Redux 가 해결하려고하는 문제 1. 상태관리의 복잡성 해소 애플리케이션의 상태관리는 주로 props 로 이루어지는데 (useState를 통한 관리), 애플리케이션이 커지고 복잡해질수록 상태 흐름을 파악하기 어려움. Redux는 전역상태에서 통합적으로 관리가 가능함 (접근 : useSelector , 제어 : useDispatch) 2. 데이터 흐름의 일관성 유지 Redux는 상태변경을 예측 가능한 Action 객체로 관리한다. 3. 상태변경 로직의 중앙집중화 리..
[팀 프로젝트] 나는 어떤 공주일까? 나는 어떤 공주일까? 성격유형에 따른 공주의 관광지 추천 테스트 https://outsourcing-gongju.vercel.app/
TIL 23.07.27 타입과 인터페이스 타입과 인터페이스 공통점 1. 타입 정의 : 타입과 인터페이스는 둘 다 새로운 타입을 정의할 때 사용하며, 여러 변수에 동일한 타입을 재사용 하거나 함수의 매개변수 및 타입 반환을 할 때 사용된다. 2. 타입 체킹 : 타입스크립트는 타입과 인터페이스를 이용하여 코드를 검사, 컴파일 할 때 타입오류를 찾아낸다. // 인터페이스 예제 interface Person { name: string; age: number; } // 타입 예제 type PersonType = { name: string; age: number; }; // 확장 예제 interface Car { brand: string; model: string; } interface ElectricCar extends Car { batteryCapac..
TIL 23.07.26 TypeScript/ Node.js 기본 버전 설정 문제점 지옥같은 노드 버전 12.22.12 때문에 타입스크립트랑 호환이 안돼서 몇일 내내 고생을 했음 🤬 아무리 명령어 입력하고 노드 설치해도 계속 12.22.12 가 디폴트 값이 되는.. 그런 너무 힘들었다. 시도해본것 진짜 임시 방편으로 다음 명령어를 입력하면 노드최신버전을 설치하면 일시적으로는 버전이 최상위 버전인 v20.5.0 으로 바뀌는데 진짜 그순간뿐이라서 터미널끄면 사라짐.. nvm install node 해결방안 터미널에서 다음과 같이 명령어를 치면 nvm ls 다음처럼 현재 설치된 노드 버전목록들을 보여줌 (원래 나의 디폴트 버전은 12.22.12) 다음과 같이 디폴트 설정할 노드 버전을 입력해주면 nvm alias default [원하는 노드 버전] 다음과 같이 현재 노드 버전이 바뀐것..
[TypeScript] 객체 지향 설계원칙 - S.O.L.I.D 객체지향 설계를 할때는 S.O.L.I.D 원칙을 따라서 설계하는것이 필수이다. 1. SRP 원칙 ⭐ 매우 중요 ⭐ - 클래스는 하나의 책임만 가져야 한다는 매우 기본적인 원칙이다. - 5개의 원칙 중 가장 기본적이고 중요한 원칙 - 예를 들어, 유저 서비스라는 클래스가 있다면 유저서비스에서는 유저 관련된 액션만 해야 함 잘못된 사례 : 유저 서비스에 생뚱맞게 이메일 전송 로직이 있음. 서비스 내에서 다른 서비스를 참조하는것은 지양해야 함. class UserService { constructor(private db: Database) {} getUser(id: number): User { // 사용자 조회 로직 return this.db.findUser(id); } saveUser(user: User):..
[TypeScript] 인터페이스 인터페이스 인터페이스는 TypeScript 에서 객체의 타입을 정의하는데 사용되며, 객체가 가져야하는 속성과 메서드를 정의한다. 인터페이스를 구현한 객체는 인터페이스를 반드시 준수해야 하며 이를 통해 코드의 안정성과 유지보수성을 향상시킬 수 있다. 추상 클래스와 인터페이스의 차이 1. 구현부 제공여부 추상클래스 : 클래스의 기본 구현을 제공 인터페이스 : 객체의 구조만을 정의하고 기본 구현을 제공하지 않음. 2. 상속 메커니즘 추상클래스 : 단일상속만 지원 인터페이스 : 다중상속을 지원, 하나의 클래스는 여러 인터페이스를 구현가능 3. 구현 메커니즘 추상클래스 : 추상 클래스를 상속받은 자식 클래스는 반드시 추상함수를 구현해야함 인터페이스 : 인터페이스를 구현하는 클래스는 인터페이스에 정의된 모든 메서드..

티스토리툴바