Redux vs context api 비교 및 Recoil과의 첫만남!

내가 배운 전역 상태 라이브러리들 Redux vs Context API Redux, React-Redux 상태의 중앙 관리를 위한 상태관리도구 이다. ‘전역 상태’를 생성하고 관리하기 위한 라이브러리라고 볼 수 있다. 이때 상태를 액션(순수함수)이라는 이벤트를 사용한다. flux패턴을 통해 단방향 흐름으로 예측가능한 방식으로 업데이트 하기 위함이다. 미들웨어를 추가해서 전역상태를 위한 통신을 추가할 수 있다. 전역상태를 관리하는 라이브러리 답게 Redux를 사용할 경우 State의 변경이 일어나면 State를 사용하고 있는 컴포넌트에서만 리렌더링이 발생한다. 하지만 라이브러리를 설치해야 한다. 초기 세팅이 번거롭다. (+ 보일러 plate가 필요하다. ) 저는 Context API를 리액트 빌트인 상태 ..

2023.07.05

리펙토링부터 검색어 추천 기능 및 무한 스크롤 기능 구현 하기

기업 과제를 진행하면서 배운 내용들을 과제에 적용해보았다. 깃허브 링크 : https://github.com/wanted-frontedend-team5/pre-onboarding-10th-4-5 리팩토링 1. Js → Ts로 migration 타입스크립트 도입 이유 타입을 정적으로 제한하여 더 안정적이고 예측 가능한 코드 작성이 가능 컴파일 시간에 타입 오류를 확인함으로써 버그를 사전에 찾아 생산성 향상 및 유지보수가 용이함 의존성 설치 react/typescript 개발에 필요한 의존성 추가 "devDependencies": { "@types/react": "^18.2.6", "@types/react-dom": "^18.2.4", "typescript": "^5.0.4" } tsconfig.json 추..

2023.05.18

컴포넌트 작성 피드백 및 리액트에서 렌더링 및 UseEffect 파해치기

컴포넌트 작성 피드백 코드/함수는 단순하고 한가지 일만 해야한다. 컴포넌트가 한가지 일만 하게..? 조건식 단순하게 만들기 분기가 생기는 순간 코드 읽기가 복잡해진다. → 최대한 보기 좋게 처리하는것이 좋다. 내가 처리하기 제일 편한 자료구조를 가져오는것이 기본 → 웬만하면 자료구조 선에서 처리되는게 훨씬 좋다. https://medium.com/javascript-scene/nested-ternaries-are-great-361bddd0f340 컴포넌트가 너무 많은 요소들에 의존하고 있음 컴포넌트의 해야하는 역할을 잘 생각해보자 한 컴포넌트가 2가지 일을 처리하고 있는건 아닌지 생각을 해보자 컴포넌트에 의존되는 값이 있는지 잘 생각해보고 거기에 예상되는 효과가 있는지 잘 생각해보기 자주 쓰는 strin..

2023.05.18

react router v 6.4 체험기

날짜: 2023년 2월 25일 생성일: 2023년 2월 25일 오후 5:12 태그: 프론트 엔드 원티드 프리온보딩 사전 과제를 하면서 react router v6.4에서 좀 많이 바뀐듯한 react router를 사용해봤다. https://reactrouter.com/en/main Home v6.8.1 I'm on v5 The migration guide will help you migrate incrementally and keep shipping along the way. Or, do it all in one yolo commit! Either way, we've got you covered to start using the new features right away. reactrouter.com r..

2023.02.27

상속(Inheritance), 합성(composition) 과 리액트

날짜: 2023년 2월 24일 태그: 프론트 엔드 개발을 진행하다 보면 중복되는 코드와 빈번히 재사용하는 코드를 볼 수 있다. 중복되는 코드를 분리해서 재사용하면 차후 유지보수에도 도움이 되고, 남이 볼 때 쉽게 코드를 파악할 수 있다. 상속과 합성은 객체지향 프로그래밍에서 널리 사용되는 코드 재사용 기법이다. 상속 상속이란? 상속(Inheritance)은 객체들 간의 관계를 구축하는 방법이다. 이 때 객체를 상속받는 객체 클래스는 자식, 상속된 객체는 부모 클래스이다. 클래스 상속을 통해 자식 클래스는 부모 클래스의 자원을 물려 받게 되며, 부모 클래스와 다른 부분만 추가하거나 재정의 함으로 써 기존 코드를 쉽게 확정 할 수 있다. class Animal { // #는 private 접근 제한자 #ag..

2023.02.25