본문 바로가기

분류 전체보기

 (985)
[Typescript] 타입스크립트의 21가지 사용법 해당 게시물에서는 타입스크립트의 21가지 사용법와 해당 사용법이 의미있는 경우를 알아봅니다. 원문 : https://itnext.io/mastering-typescript-21-best-practices-for-improved-code-quality-2f7615e1fdc3 🔥 Mastering TypeScript: 21 Best Practices for Improved Code Quality Achieve Typescript mastery with a 21-steps guide, that takes you from Padawan to Obi-Wan. itnext.io 1. 정적 타입 검사(Strict Type Checking) 정적 타입 검사의 목표는 런타임(코드 실행) 이전에 오류를 조기 발견하는 것입..
컴포넌트 합성 : 서브 컴포넌트의 모든 것 원문 : https://medium.com/eightshapes-llc/subcomponents-753ce9f6600a Subcomponents Relinquish control, offer parts, and let implementers compose medium.com TL;DR 재사용성을 고려한 컴포넌트를 만들기 위해서... 모든 것의 제어를 포기하고 (inversion of control) 부픔(서브컴포넌트)를 제공하고 구현하는 개발자가 컴포넌트를 합성하도록 합니다 디자인 시스템의 모든 사용 사례를 컴포넌트화 하는 것은 어리석은 일입니다만, 실무에서는 기존 피그마 컴포넌트를 작게 분리하는 것을 싫어하는 경향이 있습니다. 그리고 개발자는 바닥부터 컴포넌트를 다시 만드는 것을 싫어하죠. 컴포넌트 라..
컴포넌트 합성 : 레이아웃 기반 합성 컴포넌트 원문 : https://www.smashingmagazine.com/2022/01/composition-based-design-system-figma/ Composition-Based Design System In Figma — Smashing Magazine Figma has advanced enough where it now supports some powerful concepts that can help with the flexibility and maintainability of a design system. In this article, Sasha explains why she finds the Systems Designer position so rewarding — and it’s not on..
Refactoring React(리팩토링 리액트) : Debugging(디버깅) 불필요한 console.log를 아예 작성하지 않으면서 디버깅해 봅시다. 그리고 디버깅 효율과 생산성도 높여봅시다. 아래 글의 번역입니다. https://profy.dev/article/debug-react-vscode How To Debug React Apps With VS Code - Boost Your Debugging Productivity Debugging a React app can be a painful process. Speed up your workflow with the VS Code debugger and decrease friction. Good news: It's super simple. profy.dev 그동안의 디버깅 문제가 발생할 것이라 추측되는 지점 근처에 console.l..
Refactoring React(리팩토링 리액트) : Separate API Layer(API 계층 분리) 대부분의 리액트 프로젝트엔 비동기 데이터 가져오기를 위한 라이브러리가 필요합니다. 해당 API 레이어를 별도의 계층으로 관리하는 방법을 알아봅시다. 해당 게시물은 React Query에 대한 지식을 기본 전제로 합니다. API 레이어를 분리해야 하는 이유 UI 코드와 데이터 레이어 코드의 결합도가 높아집니다. 같은 데이터를 가져오는 코드가 중복되어 분산 존재하게 됩니다. 컴포넌트와 API 레이어 관심사 혼재는 코드 읽기를 어렵게 합니다. 최종 분리 결과 전역 api 폴더 공통 설정을 위한 전역 공유 Axios 인스턴스와 리액트 쿼리 클라이언트 요청을 보내기 위한 fetch 함수 feature/{feature-name}/api 내부적으로 react-query를 사용하지만 구현 세부하항을 캡슐화하는 커스텀 ..
Refactoring React(리팩토링 리액트) : Mutation(서버 데이터 변경) 리액트 프로젝트 서버 데이터 변경의 모범 사례를 탐구해 볼까요? 서버 상태 변경 시 고려해야 할 것들 서버 상태와 클라이언트 상태의 동기화와 더 나은 사용자 경험을 위해선 다음과 같은 것들이 필요합니다. 요청 취소 캐시 무효화 낙관적 업데이트 간단한 예시 : useEffect와 Click handler 흔한 구현은 아래와 같습니다. useEffect는 컴포넌트가 리렌더링 될 때마다 적절하게 호출되어 데이터를 페치해 옵니다. 버튼 클릭 시 patch를 통해 해당 데잍커를 업데이트 합니다. useEffect(() => { axios .get("https://prolog-api.profy.dev/v2/issue?status=open", requestOptions) .then(({ data }) => setIs..
Refactoring React(리팩토링 리액트) : Query(서버 데이터 조회) 리액트 프로젝트 서버 데이터 조회 구현의 모범 사례를 탐구해 볼까요? 간단한 서버 조회 구현 with useEffect 가장 흔히 볼 수 있는 구현은 다음과 같습니다. useEffect를 사용하여 렌더링 시마다 효과를 유발합니다. import axios from "axios"; export function IssueList() { useEffect(() => { axios .get("https://prolog-api.profy.dev/issue") .then((response) => console.log(response)); // empty dependency array means this runs only once (at least in production) }, []); ... } 해당 방법의 문제점..
Refactoring React(리팩토링 리액트) : Folder Structure(폴더 구조) 리액트 프로젝트를 위한 최적의 폴더 구조는 뭘까요? 모범 사례 탐구 커뮤니티에서 유명한 추천 사례들은 다음 게시물들에서 잘 소개되고 있습니다. https://www.joshwcomeau.com/react/file-structure/ Delightful React File/Directory Structure How should we structure components and other files in our React apps? I've iterated my way to a solution I'm really happy with. In this blog post, I'll share how it works, what the tradeoffs are, and how I mitigate them. www.j..

티스토리툴바