목록프론트엔드 (2)

코딩하는 고릴라

React + Ts 프론트엔드 개발기(feat. 메이플스토리) - 02. 클라이언트단 데이터 흐름

1. 서버로부터 받아오는 데이터 흐름- UI는 서버로 데이터 요청- 응답으로 받은 데이터 저장- 받은 데이터는 UI 렌더링을 위해 적합한 구조 혹은 값으로의 형태 변환이 필요- 형태가 변환된 데이터를 바탕으로 UI 그리기UI를 출력하는 부분은 전적으로 가공된 데이터에만 의존해, 다른 흐름으로부터의 개입이 없어 복잡도를 낮출 수 있습니다.  2. 유저 인터랙션에 의한 데이터 수정과 리렌더링  - UI는 유저 인터랙션에 의해 데이터를 수정 - 데이터 값의 변경에 따라 출력을 위해 가공된 데이터의 형태도 따라 변경 - 변경된 가공된 데이터를 통해 UI의 리렌더링 발생서버 요청/응답에서와 마찬가지로, 단방향 데이터 흐름을 유지할 수 있습니다. 3. 데이터를 활용한 서버 요청 (검색 등) - 인풋에 값을 입력하는..
Project/melog 2025. 3. 6. 23:25
[FE] FSD 아키텍처를 활용한 디렉토리 구조 구성

🐶 WHY 기존 프로젝트에서는 디렉토리 구조를 크게 [assets / pages / components]로 구성하였습니다. pages 폴더 내부에는 URL 라우팅에 따라 출력될 페이지들을, components 폴더 내부에는 해당 pages 내부에 들어갈 컴포넌트들을 작성했습니다. 이 과정에서 UI와 로직을 담당하는 함수들을 분리해놓지 않아 한 파일 내에 너무나도 많은 코드들이 얽혀있어 필요한 부분을 찾는데 다소 어려움을 겪었습니다. 이와 같은 어려움을 해소하기 위해 어떤 방법이 있나 찾아보던 와중 FSD 아키텍처를 알게 되었고 이를 간소화하여 프로젝트에 적용해보았습니다. 🦍 WHAT FSD(Feature-Sliced Design, 기능 분할 설계) 아키텍처는 크게 Layers, Slices, Segmen..
Project/Pennypal 2024. 4. 5. 14:16
이전 Prev 1 Next 다음