FrontEnd (437) 썸네일형 리스트형 웹 컴포넌트(Web Component) 딥 다이브 javascript.info의 web component 파트를 학습 및 정리한 내용이다. https://javascript.info/web-components Web components javascript.info 웹 컴포넌트란? 웹 컴포넌트는 완결성있는 기능을 포함한 컴포넌트를 만들기 위한 표준 기술 집합입니다. 자체 애트리뷰트 및 메서드, 캡슐화된 DOM 및 스타일을 포함한 사용자 정의 HTML 요소입니다. 컴포넌트란 재사용 가능한 UI의 단위다. UI는 마크업 뿐만 아니라, 스타일, 렌더링 로직, 비즈니스 로직 등을 전부 포함한다. 즉, 컴포넌트는 시각적 의미와 구조(마크업), 디자인 요소(스타일), 기능(함수) 세가지의 적절한 조합이다. 웹 컴포넌트는 UI 컴포넌트를 개발하기 위한 웹 표준 기술이.. [번역] 자바스크립트 함수형 파이프라인으로 리팩토링 키워드 : javascript, 자바스크립트, 함수형 프로그래밍, 리팩토링, functional programming, refactoring 원문 : https://refactor-like-a-superhero.vercel.app/en/chapters/09-functional-pipeline Functional Pipeline | Refactor Like a Superhero Book about how to refactor code efficiently and without pain. refactor-like-a-superhero.vercel.app 함수형 파이프라인 코드를 비즈니스 로직과 최대한 유사하게 보이게 프로그래밍 하는 방법 데이터 변환 비즈니스 워크플로우는 데이터 변환입니다. 예를 들어 주문에.. [번역] 자바스크립트 리팩토링과 추상화 키워드 : 자바스크립트(javascript), 타입스크립트(typescript), 리팩토링(refactoring), 추상화(abstraction), 관심사의분리(seperation of concern) 원문 : https://refactor-like-a-superhero.vercel.app/en/chapters/08-abstraction Abstraction | Refactor Like a Superhero Book about how to refactor code efficiently and without pain. refactor-like-a-superhero.vercel.app 추상화 특정 데이터에 대해 로직을 적용하는 코드의 중복을 줄이는 방법은, 액션을 따로 파라미터화 하는 것이다. 이처럼 같은.. [번역] 리액트 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.. 이전 1 2 3 4 ··· 55 다음
