728x90 Redux3 [No-Cap News] 방치된 프로젝트 리팩토링하기 (feat. React) 프로젝트(Github) : https://github.com/dygreen/nocap-news사용 기술 : React + Redux(RTK) + Styled-components주소 : https://nocap-news.vercel.app/ 거의 1년 정도 실무 경험을 해보니, 그 전에 진행했던 프로젝트들의 부족함이 많이 보이기 시작했다.완벽한 코드는 없으니 (더군다나 내가 작성한 코드이기 때문에..!) 지속적으로 리팩토링이 필요하다고 생각한다. 다양한 프로젝트들 중에서, 취준 기간에 가장 공들였던 프로젝트이기도 하고일단 보여지는 화면부터가 수정이 간절히 필요했던 뉴스앱 서비스 No Cap News부터 손보기로 했다. 이번 글에서는 어떤 부분을 리팩토링하였고, 리팩토링 하는 과정에서 배운점들을 기록해보고자.. 2023. 7. 2. [React] Redux Toolkit 사용법 (+ TypeScript 세팅) Redux Toolkit (+TypeScript) 세팅 방법에 대해 정리해보겠습니다 회사에서 프로젝트를 진행하던 중 Redux를 통해 state를 관리하기 위해 세팅해보기로 했다.개인 프로젝트를 진행할 때 Redux Toolkit에 편리함을 느꼈어서 해당 툴을 사용하고자 했다. 📌 Redux Toolkit ?Redux Toolkit은 Redux를 만든 곳에서 공식적으로 효율적인 Redux 개발을 위해 만들어진 툴킷이다.Redux보다 코드가 간결하고 더 개선되어 유지 관리가 쉽기 때문에 사용을 강력히 권장하고 있다. 📌 Redux Toolkit이 제공하는 것| store.jsimport { configureStore, createSlice } from '@reduxjs/toolkit';// news.. 2023. 2. 12. [Next.js] _app.js와 _document.js에 대해서 Next.js의 _app과 _document에 대해서 알아보겠습니다 📌 _app 가장 먼저 실행되는 컴포넌트 → 모든 페이지는 _app을 통해 실행됨 → 모든 페이지에서 필요한 처리를 할 수 있음 각각의 페이지가 초기화될 때 로딩되는 파일 → 자신이 원하는 로직으로 페이지를 초기화할 수 있음 위와 같은 특징들로 인해 _app의 대표적인 사용 예는 다음과 같다. 각 페이지의 공통된 레이아웃 페이지 작성 전체 앱에 Global CSS 적용 Redux Provider 설정 import "../styles/globals.css"; import type { AppProps } from "next/app"; import Layout from "../components/layout"; function MyApp({ .. 2022. 12. 26. 이전 1 다음 728x90
