728x90 반응형 리액트8 [디자인패턴] React + Tanstack Query 서비스 레이어 패턴으로 구조짜기 현 회사 프로젝트는 React + Next.js (v.13, app routing)으로 구성해놨다. Tanstack Query도 주요하게 사용하는데, 비즈니스 로직과 UI 컴포넌트, 그리고 그 중간 어딘가에 관여하는 코드들을 어떻게 정리하면 좋을까 열심히 찾아보다가 서비스 레이어 패턴(Service Layer Pattern)에 근접하게 정착하게 되었다. 서비스 레이어 패턴이란?서비스 레이어 패턴(Service Layer Pattern)이란 앱의 데이터 처리와 관련된 로직을 여러 레이어로 분리하여 구조화한 패턴이다. 이를 통해 코드의 재사용성과 유지보수성을 높이고, 각 레이어가 특정한 책임을 갖도록 만든다. 리액트에 적용하기: 최대 4개의 레이어1. Layer 1: 순수 네트워크 호출이 레이어는 네트워크 .. 2024. 6. 3. [React] 커스텀훅(Custom Hook) Custom hook이란?React의 커스텀 훅(custom hook)은 리액트의 함수형 컴포넌트에서 상태 또는 사이드 이펙트가 있는 로직을 재사용하기 위해 캡슐화할 수 있는 특정 네이밍 규칙을 따르는 함수이다. 커스텀훅을 사용하면 복잡한 로직을 재사용가능한 함수로 만들어버릴 수 있는데, 이렇게 할 경우 코드가 깰끔해지고 컴포넌트 내 관심사 분리를 유지하기 쉬워진다. 일반 함수 vs. 커스텀훅커스텀훅 또한 함수라고 했는데, 그렇다면 일반 함수와 커스텀 훅의 차이는 무엇일까? 1. 네이밍 규칙커스텀훅들은 "use"라는 이름으로 시작해야 한다(예: useFetchData). 이를 통해 리액트가 이 친구가 커스텀훅이라는걸 알 수 있게 되고, 리액트 내부에서 진행되는 특정 최적화 작업의 대상이 될 수 있다... 2023. 8. 16. [프로젝트] React Drag&Drop: 투두리스트를 칸반 보드로 (2) (feat. getBoundingClientRect()) 본 포스팅은 전편 [프로젝트] React Drag&Drop: 투두리스트를 칸반 보드로 (1)에 이어서 작성한 글입니다! 전편: 2021.08.25 - [Learn to Code] - [프로젝트] React Drag&Drop: 투두리스트를 칸반 보드로 (1) [프로젝트] React Drag&Drop: 투두리스트를 칸반 보드로 (1) 요즘 파이널 프로젝트로 만든 사각사각을 전면 개편하고 있다. 처음 개발 당시 UI와 기능 구현에 급급해 큰 신경을 써주지 못했던 최적화라던가 좀 더 세밀한 기능 구현이라던가와 같은 부분들 seo-tory.tistory.com 지난번 편에선 Drag & Drop API를 사용해서 ⬅️요쪽에서 ➡️요쪽으로 (??) 옮기는 코드를 어떻게 작성하면 되는지 그 단계를 살펴보았다. 이번엔.. 2021. 8. 26. [프로젝트] React Drag&Drop: 투두리스트를 칸반 보드로 (1) 요즘 파이널 프로젝트로 만든 사각사각을 전면 개편하고 있다. 처음 개발 당시 UI와 기능 구현에 급급해 큰 신경을 써주지 못했던 최적화라던가 좀 더 세밀한 기능 구현이라던가와 같은 부분들을 업데이트하고 있다. Hoxy 프로젝트가 뭐였는지 궁금하시다면... ☺️ >>> 2021.07.21 - [Learn to Code] - [프로젝트] 실시간 화상채팅앱을 개발했어요! (feat. Socket.IO & WebRTC) [프로젝트] 실시간 화상채팅앱을 개발했어요! (feat. Socket.IO & WebRTC) 🎞 YouTube 발표 영상 GitHub: https://github.com/codestates/sagaksagak-client Wiki: https://github.com/codestates/sagak.. 2021. 8. 25. [회고] 첫 프로젝트: 임금님귀(King'sEars)! 비밀을 말하고 싶어 마음이 답답한 이들을 위한 플랫폼 약 3개월 반 정도의 코드스테이츠 소프트웨어 엔지니어링 과정을 모두 수행하고, 드디어 첫 프로젝트를 완료했다. 2주 동안 진행되는 프로젝트라고 했지만, 사실 초기 인트로와 기획 등의 회의 시간이 많았기 때문에 실제 코딩을 한 기간은 5일 정도밖에 되지 않았기에 빠듯한 일정이라고 할 수 있었다. 우리팀의 팀원 분들은 개개인이 뛰어난 슈퍼플레이어라서 별 어려움 없이 수월하게 프로젝트를 진행할 수 있었다. 사실, '비밀'과 관련된 아주 짤막한 준 소셜미디어 아이디어가 있다고 했을 때 우리 팀원 분들이 받아들여주실까, 프로젝트 사이즈로 너무 작은 것은 아닌가 걱정이 되었지만 모두들 너무 흔쾌히 진행하자고 해주셔서 너무 고마웠다. 이번 포스팅에선 우리가 만든 첫 작품이 어떤 서비스인지 소개하고, 어떤 동기로 본 .. 2021. 6. 21. [React] React hooks 연습: 간단한 To-Do 리스트 리액트를 배운 뒤 모두가 한번쯤은 만들어본다는 To-do list를 만들었다. 다양한 hooks를 연습하고 싶었지만 아무래도 to-do 리스트는 많은 기능이 없기 때문에 useState()만을 사용하게 되었다. 최상단 App 컴포넌트 아래에 List 컴포넌트, 그리고 그 안에 Todo 작성 Form과 To-do 리스트만 있는 아주 콤팩트한 앱이다. 요 to-do list의 간단한 기능은 아래와 같다. 최상단 컴포넌트 최상단 컴포넌트인 App에 초기값으로 initialTodos를 만들었다. 각 todo엔 key값으로 써줄 id와 todo 내용, 그리고 완료 여부를 표시하는 completed만 있다. import './App.css' import List from './List' import { useSta.. 2021. 5. 18. Redux 기본 개념 정리 Redux란? 프로젝트를 만들다 보면 아주 다양한 상태들이 필요하게 된다. 상태는 다크모드/라이트모드 라던가 언어 선택과 같이 전역(global)에 영향을 끼치는 것들도 있고, 특정 컴포넌트 안에서만 관리되는 로컬 상태들도 있다. 앱의 상태는 유저와의 인터렉션 등을 통해 계속 변하게 되는데, 이 상태를 올바르게 관리하는 것은 당연히 중요한 일이다. 그러나 이렇게 올바르게 관리하고 싶다라는 긍정적인 마음가짐과는 다르게 프로젝트의 규모가 어느 정도 갖춰질수록 상태 관리는 어려워진다. 리덕스는 이와 같은 경우에 사용하는 상태(state) 관리 라이브러리이며, 복잡한 구조 속에서 상태 관리를 훨씬 쉽게 만들어주는 역할을 한다. 상태 관리 툴의 역할 연습삼아 만들어보는 리액트 to-do list 등과 같은 작은 .. 2021. 5. 16. [JS] React에서 배열인 state에 아이템을 추가하고 싶다면!? (concat()과 Spread Syntax) 코드스테이츠의 커리큘럼에서 드디어 프론트엔드의 꽃이라는 리액트에 돌입했다! 이전에 Pre course에서 만들었던 Twittler 앱을 리액트로 바꾸어 만들어보는 작업을 어제 진행했다. 2021.03.29 - [Learn to Code] - 코드스테이츠 Pre Course 회고 및 4개의 웹앱 과제 결과물 UI 요소가 굉장히 적은 단순한 앱이지만 그래도 나름 단일 책임 원칙(Single responsibility principle)을 머리속에 떠올리며 컴포넌트 단위로 코드를 짜나갔다. 그러던 중, 공식문서를 탐독했지만 찾을 수 없던 방법이 하나 있었는데, 배열인 state에 업데이트를 하려면 어떻게 해야 가장 잘 했다는 소문이 날까??!에 관한 것이었다. 그래서 열심히 구글링을 했고, 역시나 많은 선구자.. 2021. 5. 7. 이전 1 다음 728x90 반응형
