분류 전체보기 (996) 썸네일형 리스트형 [번역] 리액트 Compound Component 잘 사용하기 원문 : https://itnext.io/unlock-the-full-potential-of-react-with-the-compound-components-pattern-495a1bdb8b8f 🔥 Best Practices of React Compound Components Pattern: Unlock the Full Potential Let’s improve React Component Design with This Surprisingly Easy Pattern itnext.io Compound Component 패턴이란? 컴파운드 컴포넌트 패턴(복합 컴포넌트 패턴)은 복잡한 컴포넌트를 만들기 위해 작은 컴포넌트들을 합성하는 것 내부적으로 캡슐화된 상태를 공유 보통 컨텍스트(상태)를 가진 부모 컴포넌트.. Leetcode 241: Different Ways to Add Parentheses(수식 모든 경우의 수 계산하기)[BFS,DFS] 원문 : https://blog.devgenius.io/leetcode-241-different-ways-to-add-parentheses-e2612dd8e86f Leetcode 241. Different Ways to Add Parentheses Problem Description: Given a string expression of numbers and operators, return all possible results from computing all the different… blog.devgenius.io BFS, DFS 패턴은 거의 다 마스터 했다고 생각했는데, 이러한 토크나이징 문제에 약점이 있었을 줄은 몰랐다. 1*1-2+3*4의는 연산자가 3개이기 때문에 총 3! === 6개의 결과가 .. 프론트엔드 클린 아키텍처 with React 원문 : https://bespoyasov.me/blog/clean-architecture-on-frontend/ Clean Architecture on Frontend In this post, I describe what the clean architecture is, how to use it with JS/TS code bases and if it's even worth it. bespoyasov.me 백엔드에서 주로 사용하는 클린 아키텍처를 프론트엔드에 어떻게 적용할 수 있을까? 레이어의 분리 먼저 의존성의 방향을 정립하기 위해 레이어를 분리한다. 가장 순수한 우리의 코드, 애플리케이션인 Domain은 다른 어떤 것에도 의존해선 안된다. Domain 계층에는 도메인 객체, 도메인 서비스만 존재할 수.. 리액트 쿼리와 비교한 RTK Query와 Mutation(뮤테이션), 캐싱 동작 사내 프로젝트에서 Redux Toolkit을 도입하였기에, 주로 사용하던 Redux Query 대신에 RTK Query를 사용해 보았다. RTK Query와 React Query의 차이점 : 큰 그림 RTK Query는 프레임워크와 무관한 기능들만 포함한다. RTK Query는 React Query의 대부분의 페칭 기능들을 포함하고 있다. 하지만 React Query의 명칭이 의미하는 것처럼 React Query는 Hook과 React에 최적화된 몇몇 기능들을 포함하고 있다. useInfiniteQuery Suspense및 ErrorBoundary 따라서 무한 스크롤이나 서스펜스가 필요하다면 Wrapper 코드를 작성해야 한다. (보니까 Apollo-Client도 유사하다.) 기능 비교표는 아래 링크를 .. [번역] Mobile First Design vs Desktop First Design 원문 : https://ishadeed.com/article/the-state-of-mobile-first-and-desktop-first/ The State Of Mobile First and Desktop First - Ahmad Shadeed Is mobile first or desktop first still relevant today? An article that explores both with pros and cons for each. ishadeed.com 모바일 퍼스트 모바일 버전 css를 먼저 작성한 다음 더 큰 버전을 작성 .section { padding: 2rem 1rem; } @media (min-width: 62.5rem) { .section { display: flex; al.. [번역] min(), max(), clamp() CSS 함수 원문 : https://ishadeed.com/article/css-min-max-clamp/ min(), max(), and clamp() CSS Functions - Ahmad Shadeed Learn about CSS comparison functions min(), max(), and clamp() ishadeed.com 브라우저 지원 2020년 8월 이후로 min, max, clamp 함수는 모든 메이저 브라우저에서 지원함. 안타깝게도 ie에서는 못씀 CSS Compare 함수 CSS 사양(CSS spec)에 따라 여러 값을 비교하고, 사용한 함수를 기반으로 여러 값 중 하나를 나타낸다. Min() 함수 min() 함수는 하나 이상의 쉼표로 구분된 연산을 포함하며 가장 작은 값을 나타낸다. 보통.. [JS] 한글을 2byte로 한 줄 길이 제한 및 줄바꿈 코드 바이트 수 기준으로 줄바꿈을 적용하는 코드 한 줄의 맨 앞에서 trim을 적용한다. 한 줄의 바이트 수가 threshold를 넘어가면 줄바꿈한다. /** * * @param {string} str * @param {number} threshold * @returns {string} */ const changeLine = (str="",threshold=80) => { /** * * @param {number} charCodeAt * @returns {number} */ const encode = (charCodeAt) => (charCodeAt > 127 ? 2 : 1); let [len, /**@type{string[]} */ buffer] = [0, []]; for (let i = 0; i < str.. [Vite, Vitest, Javascript] Vanilla JS로 TDD with Vitest 프로그래머스 과제관의 Vanilla SPA 연습에 TDD를 적용하면서 배운 방법을 공유한다. How to Unit Test HTML and Vanilla JavaScript Without a UI Framework Recently I was curious about something: Is it possible to write unit tests for front end code that do... dev.to 1. index.html 만들기 2. 필요한 라이브러리 다운받기 yarn add -D @testing-library/dom @testing-library/jest-dom jsdom jest 3. Vitest 설정하기 vite.config,js 설정을 추가한다. export default defi.. 이전 1 ··· 46 47 48 49 50 51 52 ··· 125 다음
