atomicdev 님의 블로그

3회차: Segment를 통한 코드 세분화목표Segment를 활용하여 코드를 세분화하고, 각 세그먼트의 역할을 이해합니다.Segment 구성FSD의 Segment는 각 슬라이스 내부에서 코드를 더욱 체계적으로 관리하기 위해 나누어집니다. 주로 ui, model, api, lib, consts로 구성됩니다. 이 구성은 각 기능 모듈의 역할을 명확히 하여 코드의 가독성과 유지보수성을 높입니다.각 Segment의 역할ui: 사용자 인터페이스 컴포넌트를 포함합니다.model: 상태 관리 및 비즈니스 로직을 담당합니다.api: API 호출을 담당하는 함수들을 포함합니다.lib: 공통 라이브러리나 유틸리티 함수를 정의합니다.consts: 상수 값을 정의하여 코드의 가독성과 재사용성을 높입니다.실습: features..

React FSD 1회차2회차: FSD의 Layer와 Slice 구성목표FSD의 Layer와 Slice를 구성하고, 각 레이어의 역할을 이해합니다.FSD의 Layer 구성FSD는 각 레이어를 통해 프로젝트를 구조화하며, 각 레이어는 서로 명확한 역할과 책임을 가집니다. 상위 레이어는 하위 레이어에 의존할 수 있지만, 하위 레이어는 상위 레이어에 의존하지 않는 방식으로 설계됩니다.주요 레이어 설명app: 애플리케이션의 진입점으로, 전역 설정이나 초기화 코드가 위치합니다.processes: 페이지나 여러 컴포넌트에서 공통으로 사용하는 비즈니스 로직을 포함하는 레이어입니다.pages: 페이지 단위로 구성된 컴포넌트들이 위치하는 레이어입니다.widgets: 헤더, 풋터 등 재사용이 가능한 UI 컴포넌트를 포함하..

1회차: FSD 개념 이해 및 프로젝트 설정목표FSD(Feature-Sliced Design)의 기본 개념과 필요성을 이해하고, React 프로젝트를 설정합니다.FSD란 무엇인가?Feature-Sliced Design(FSD)은 기능 중심의 아키텍처 패턴으로, 애플리케이션을 모듈화하여 코드의 유지보수성과 확장성을 높이는 데 목적이 있습니다. 프로젝트를 기능 단위로 분리해 각 기능을 독립적으로 관리하고 유지보수할 수 있게 합니다.FSD의 주요 구성 요소FSD 아키텍처는 레이어, 슬라이스, 세그먼트 구조로 구성됩니다.1. Layer (레이어)프로젝트의 주요 폴더 구조를 정의합니다. 레이어는 다음과 같이 구분됩니다:app: 애플리케이션의 초기화 및 전역 설정과 관련된 코드processes: 페이지 간에 걸쳐 ..

React 애플리케이션에서 Feature-Sliced Design(FSD)을 적용하면 코드 구조를 체계적으로 관리하고 유지보수성을 향상시킬 수 있습니다. 다음은 FSD의 개념 설명과 실제 개발 적용을 위한 5회차 강의안입니다.1회차: FSD 개념 이해 및 프로젝트 설정목표:FSD의 기본 개념과 필요성을 이해하고, React 프로젝트를 설정합니다.내용:FSD란 무엇인가?기능 중심의 아키텍처 패턴으로, 코드의 모듈화와 유지보수성을 높이기 위한 설계 방법론입니다.프로젝트를 기능 단위로 분리하여 각 기능을 독립적으로 관리합니다.FSD의 주요 구성 요소:Layer(레이어): 애플리케이션의 전반적인 구조를 구성하는 최상위 폴더입니다. 주요 레이어는 다음과 같습니다.app: 애플리케이션의 진입점 및 초기화와 관련된 ..

강의 10: 배포 및 최종 점검내용 요약 및 학습 목표GitHub에 소스코드 푸시 및 관리GitHub 리포지토리 생성, 소스코드 커밋 및 푸시 방법Git Branch 및 버전 관리 기초배포 준비서버와 클라이언트 코드 최적화환경 변수 설정 및 보안 체크불필요한 코드와 콘솔 로그 제거Node.js 서버를 클라우드에 배포하기Heroku, Vercel, AWS를 통한 배포 방법 이해Heroku와 Vercel에 배포하는 단계별 가이드배포 후 최종 점검 및 앱 상태 확인실습 세부 내용1. GitHub에 소스코드 푸시 및 관리GitHub 리포지토리 생성 및 초기 설정GitHub에 새로운 리포지토리를 생성하고 프로젝트를 연결합니다.Git을 사용해 로컬 프로젝트를 GitHub 리포지토리에 푸시합니다.bash코드 복사# ..

삭제 기능과 페이징 구현내용 요약 및 학습 목표삭제 기능 구현상세보기 페이지에서 삭제 버튼을 통해 글을 삭제하는 기능 추가삭제 요청 후 목록 페이지로 이동하는 흐름 학습페이징 기능 구현글 목록에 페이지 번호 추가 및 페이지 전환 기능 구현백엔드 API에서 페이징 처리 설정React Query를 사용해 페이지 데이터 패칭 및 페이지 전환 기능 구현실습 세부 내용1. 삭제 기능 구현: 글 상세보기에서 삭제 버튼 추가삭제 요청 구현: Axios를 사용해 백엔드에 삭제 요청을 보내고, 성공 시 목록 페이지로 이동합니다.// PostDetail.jsimport React from 'react';import { useParams, Link } from 'react-router-dom';import { useQuer..

상세보기 및 수정 페이지 구현내용 요약 및 학습 목표상세보기 페이지 구현특정 글의 내용을 확인하는 상세보기 페이지 구현글의 작성 내용, 작성자명, 작성 시간 등을 표시React Query를 통해 특정 글의 데이터를 API로부터 가져오기글 수정 페이지 구현글 수정 페이지에서 기존 내용을 수정할 수 있도록 구현작성 내용, 작성자명 등 기존 데이터를 폼에 채워서 수정 가능수정 후 저장/취소 버튼으로 데이터 반영 및 페이지 이동 설정React Router로 페이지 라우팅 설정React Router를 사용해 상세보기와 수정 페이지로 이동각 페이지 간의 데이터 연동 설정하여 UX 개선실습 세부 내용상세보기 페이지 구현: 글 내용, 작성자, 작성시간 표시데이터 패칭: React Query를 사용해 특정 글의 데이터를..

방명록 작성 및 목록 페이지 구현내용 요약 및 학습 목표글 작성 페이지 구현하기입력 폼과 저장/취소 버튼을 추가하여 사용자가 메시지와 작성자명을 입력할 수 있도록 설정Redux와 React Query를 사용하여 서버와 연동글 목록 페이지 구현하기작성된 글을 리스트 형식으로 출력제목을 클릭하면 상세보기 페이지로 이동할 수 있도록 링크 설정Redux와 React Query로 서버 데이터 연동하기Redux와 React Query를 활용해 글 작성과 목록 데이터를 서버와 연동하여 실시간으로 표시실습 세부 내용글 작성 페이지 구현: 입력 폼과 저장/취소 버튼 추가 (src/components/WriteForm.js)Form 컴포넌트 생성: 사용자가 입력한 글을 서버로 전송하기 위해 form을 구현합니다.Redux..

Redux Toolkit과 React Query 설정 및 데이터 상태 관리 내용 요약 및 학습 목표:Redux Toolkit으로 전역 상태 관리 설정하기Redux Toolkit의 주요 개념 소개Redux 설치 및 프로젝트에 기본 설정Slice 생성 및 전역 상태 관리와 액션 정의하기React Query로 서버 상태 관리와 데이터 패칭 구현하기React Query의 개념과 이점 설명React Query 설치 및 초기 설정서버 상태와 클라이언트 상태의 차이점 이해서버와 연결해 데이터 패칭 및 캐싱 설정하기Redux와 React Query를 함께 사용하기Redux와 React Query를 효율적으로 결합하여 상태 관리하기상태의 종류별(클라이언트 상태와 서버 상태)로 Redux와 React Query의 역할 분..

React 프로젝트 생성 및 Tailwind CSS 설정강의 목표React로 프론트엔드 프로젝트를 시작하면서 Tailwind CSS를 사용하여 기본적인 스타일링을 설정합니다. Tailwind CSS의 유틸리티 클래스를 활용해 간편하고 빠르게 UI 스타일링을 적용하는 법을 배웁니다.1. Create React App으로 프론트엔드 프로젝트 생성React 프로젝트 생성guestbook-app이라는 이름으로 프로젝트를 생성합니다.npx create-react-app guestbook-app cd guestbook-app프로젝트 파일을 확인합니다.기본적으로 제공되는 src, public 등의 폴더 구조를 확인합니다.App.js, index.js 파일이 주요 시작점입니다. 2. Tailwind CSS 설치 및 기..