FrontEnd (437) 썸네일형 리스트형 리액트 국제화(i18n, internationalization) translation key 설계 TL:DR 컴포넌트 / 디자인 기반으로 translation key를 설계하자 개요 : 최근에 국제화가 필요한 프로젝트를 진행하면서, translation key 설계를 잘못해서 곤란한 경우가 있었습니다. 애초에 translation key를 파라미터를 이용해 동적으로 사용할 수 있도록 디자인 했으면 좋았을 것이란 생각이 들었는데요, 처음에는 의미론적으로 키 디자인을 접근헀는데, 좀 더 키에 컴포넌트의 컨텍스트를 담았으면 좋지 않았을까 생각해서, 다른 사람들의 접근법을 리서치해보다 괜찮은 아이디어가 있는 것 같아 공유해봅니다. 원문 : 힘들게 배운 프로젝트 국제화 적용 경험의 교훈들 Web internationalisation (i18n) lessons I’ve learned the hard way W.. 리액트를 직접 만들며 알아보는 렌더/커밋/조정 알고리즘 원문 보기 : https://pomb.us/build-your-own-react/ Rodrigo Pombo An overengineer building tools for better code reading comprehension pomb.us 0단계 : 리뷰 리액트 코드를 바닐라 js로 바꿔봅시다. 리액트 const element = Hello const container = document.getElementById("root") ReactDOM.render(element, container) 바닐라 JS const element = { type: "h1", props: { title: "foo", children: "Hello", }, } const container = document.getEle.. 리액트 디자인 패턴 : 선언적 컴포넌트 설계 (declarative component design) 어떤 컴포넌트가 선언적인가? 어떻게(how) 보여줄까가 아닌 무엇을(what) 보여줄까 아래 글의 도입부에서 명령형 컴포넌트와 선언형 컴포넌트를 다룹니다. https://tech.kakaopay.com/post/react-query-2/ React Query와 함께 Concurrent UI Pattern을 도입하는 방법 | 카카오페이 기술 블로그 카카오페이에서 React Query를 활용하여 Concurrent UI Pattern을 도입한 사례에 대해 소개합니다. 이 글은 연작 중 2편에 해당합니다. 1편: 카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유, 2 tech.kakaopay.com 아래는 명령형 컴포넌트입니다. import { useState, useEffect } from.. Valtio의 프록시 상태관리가 어떻게 동작할까? (React Part) 원문 : https://blog.axlight.com/posts/how-valtio-proxy-state-works-react-part/ How Valtio Proxy State Works (React Part) Introduction In the previous article, we explained how Valtio proxy state works. It tracks mutations of state and create immutable snapshot. Let’s recap the API in vanilla part of Valtio. // Create a new proxy state to detect mutations const state = prox blog.axlight.com 1편 링크 :.. Valtio의 프록시 상태관리가 어떻게 동작할까? (Vanila Part) 원문 : https://blog.axlight.com/posts/how-valtio-proxy-state-works-vanilla-part/ How Valtio Proxy State Works (Vanilla Part) Introduction Valtio is a library for global state primarily for React. It’s originally modeled to match with useMutableSource API. However, it turns out it’s a novel API to add immutability to mutable state. What is immutable state? JavaScript doesn’ blog.axlight.com Introdu.. 언제 리코일을 사용하는게 좋을까? TL;DR : 캔버스나 GUI 같은 앱이 아니면 딱히 필요하지 않다. 프로젝트 초반에 리코일을 도입하기 위한 리서치를 진행하다 어쩌다보니 사용하지 않고 있는데요. 사실 생각보다 원하는대로 쓰기 어렵다는 것 외에도 (뒤에 이유를 설명합니다.) 전역 상태 관리 도구로서 에측하지 못한 하나의 단점이 있는데요. 반드시 데이터가 리액트 컴포넌트 내부에 존재해야 한다는 것입니다. 생각보다 개발하다보면 마이크로 최적화를 위해 렌더링 없이 상태 참조가 필요한 경우가 왕왕 있습니다. (useRecoilCallback을 활용할 수도 있지만, useCallback과 같은 문제가 있습니다.) https://recoiljs.org/docs/api-reference/core/useRecoilCallback/ 물론 ms단위의 미묘.. 리액트 훅의 클로저 트랩(closure trap) 이해하기 원문 주소 : https://betterprogramming.pub/understanding-the-closure-trap-of-react-hooks-6c560c408cde Understanding the Closure Trap of React Hooks Digging into the classic problem betterprogramming.pub 문제 import { useEffect, useState } from 'react'; export default function App() { const [count, setCount] = useState(0); useEffect(() => { setInterval(() => { setCount(count + 1); }, 1500); }, []); useE.. 리액트에 SOLID 원칙 적용하기 원문 : https://konstantinlebedev.com/solid-in-react/ Applying SOLID principles in React As the software industry grows and makes mistakes, the best practices and good software design principles emerge and conceptualize to avoid repeating the same… konstantinlebedev.com 소프트웨어 산업이 성장하고 실수를 범함에 따라 모범 사례와 우수한 소프트웨어 설계 원칙이 나타나고 미래에 같은 실수를 반복하지 않도록 개념화됩니다. 특히 객체 지향 프로그래밍(OOP)의 세계는 이러한 모범 사례의 금광이며 SOLID는.. 이전 1 ··· 28 29 30 31 32 33 34 ··· 55 다음
