본문 바로가기

FrontEnd

 (437)
[Remix] 풀 스택 컴포넌트(Full Stack Components) 컴포넌트와 백엔드 코드를 함께 두는 이유(colocate)와 방법을 알아봅니다. 원문입니다 : https://www.epicweb.dev/full-stack-components Full Stack Components There’s this pattern I’ve been using in my apps that has been really helpful to me and I’d like to share it with you all. www.epicweb.dev 백엔드와 UI 코드의 환상적인 결합 remix를 활용할 때, 페이지를 개발하는 방법은 아래와 같습니다. export async function loader({ request }: LoaderArgs) { const projects = await ge..
Critical Rendering Path 최적화하기 사용자에게 최대한 빨리 화면을 보여주고, 최대한 빨리 앱의 기능을 제공하는 방법을 알아봅시다. 우측 문서의 번역입니다. : https://web.dev/critical-rendering-path-analyzing-crp/ Analyzing Critical Rendering Path Performance Learn to identify and resolve critical rendering path performance bottlenecks. web.dev Critical Rendering Path의 성능 병목 현상을 식별하고 해결하려면 일반적인 함정에 대한 충분한 지식이 필요합니다. 실습을 통해 페이지를 최적화하는 데 도움이 되는 일반적인 성능 패턴을 알아봅시다. Critical Rendering Pat..
리액트와 유닛 테스트를 위한 클린 아키텍처 [부제, 의존성 주입은 정말 필요한가?] 아래 글에 포함하려다 따로 떼내어 적습니다. https://itchallenger.tistory.com/771 헥사고날 아키텍처와 관심사의 분리를 이용한 클린 코드 1. 어니언, 헥사고날 아키텍처 헥사고날, 어니언 아키텍처는 port, adaptor 패턴의 별칭일 뿐입니다. https://blog.ploeh.dk/2016/03/18/functional-architecture-is-ports-and-adapters/ Functional architecture.. itchallenger.tistory.com 리액트의 모든 컴포넌트 인터페이스는 다음과 같이 추상화 할 수 있습니다. (props:React.ChildrenWithProps)=>React.ReactNode 하지만 보통 구체적인 구현체인 평션 컴포넌..
소프트웨어 엔지니어링 관점에서 바라본 CSS-in-js vs Tailwind CSS 소프트웨어 엔지니어는 항상 확장성과 재사용성을 찾습니다. 해당 기능들은 관심사의 분리 / 합성을 통해 구현됩니다. 위 두 가지 관점에서 Styled Component(Css-in-js 대표)와 Tailwind CSS를 비교해 봅니다. Styled Components가 확장성 / 재사용성을 구현하는 방법 주 : 몇몇 경우 타입스크립트를 이용한 타입 안전성을 제공하기 위한 hack이 필요합니다. 1. ThemeProvider 마크업 구조, 컴포넌트를 변경하지 않으면서 디자인 토큰만 변경하기 위한 추상화 방법. css 변수를 직접 임포트해도 되긴 됩니다. https://styled-components.com/docs/advanced#theming const Button = styled.button` color..
CSR 성능 최적화를 위한 PRPL 패턴 with React rendering-on-the-web 문서서는 클라이언트 렌더링 최적화를 위해 RTTs를 줄이거나 중요한 스크립트와 데이터를 를 사용하여 더 빨리 전달하거나, JS 용량을 줄이거나(tight JavaScript budget) PRPL 패턴을 사용하거나 코드 스플리팅을 사용하거나(aggressive code-splitting) Application Shell caching을 사용하라고 합니다. 이 중에서 PRRL 패턴을 알아보겠습니다. TL;DR P : 링크의 rel 속성을 통해 프리 로딩(페치) 이용 R : 서버 렌더링을 이용해 프리 렌더링 이용 P : 서비스 워커를 이용해 프리 캐시를 이용 L : loading 속성을 통해 지연 로딩을 이용 PRPL 패턴이란? PRPL은 다음의 약어입니다. Push (..
개발자 관점에서 Next13 간단히 살펴보기 파이어십 형닙의 유투브 영상을 보고 정리한 내용입니다 : https://www.youtube.com/watch?v=_w0Ikk4JY7U 10월 26일에 NEXTj.js 13 버전이 발표되었는데요, 말 그대로 기존 튜토리얼들을 쓸모없게 만들 정도의 완벽한 멘탈 모델의 전환입니다. 우리는 새로운 패러다임을 받아들일 시간이 되었습니다. ... JS와 프레임워크 악몽만 빼고요. Turbopack 웹팩 개발자가 vercel에서 러스트로 작성했으며 중복 연산을 방지해주는 터보레포 솔루션과 결합하여 웹팩보다 700배, vite보다 10배 빠르답니다. 에반 유는 어느정도 패배를 승복하는 느낌입니다. vite를 많이 써본건 아니지만 HMR이 씹히는건 꽤 느껴졌는데, 이는 에반유도 인지하는 부분이더라구요. HMR 면에선 ..
[프론트엔드 인터뷰 퀴즈] 정적 클래스 멤버(프로퍼티 / 메서드)를 사용하는 이유는 뭘까요? 출처 : https://www.frontendinterviewhandbook.com/javascript-questions#why-you-might-want-to-create-static-class-members JavaScript trivia questions in front end interviews | Front End Interview Handbook Answers to Front-end Job Interview Questions - JS Questions. Pull requests for suggestions and corrections are welcome! www.frontendinterviewhandbook.com 정적 클래스 멤버(프로퍼티 / 메서드)는 클래스의 특정 인스턴스에 묶여되지 않..
[TS]유효성 검증(validation) 대신 구문 분석(Parsing)하세요 io-ts, Runtypes 및 Zod와 같은 라이브러리를 사용하여 모든 타입의 수신 및 발신 데이터를 안전하게 구문 분석하는 방법을 알아봅시다. TLDR : 검증과 객체 생성을 동시해 해주며 타입스크립트 타입도 만들어 주는 라이브러리를 사용하자 원문입니다 : https://itnext.io/parse-dont-validate-incoming-data-in-typescript-d6d5bfb092c8 사용자 입력을 검증하는 것이 모든 웹 프로그래밍의 초석이라는 것은 누구나 알고 있습니다. 사실, 소프트웨어로 들어오는 모든 입출력 데이터는 검증되어야 합니다. 그런데 검증 대신 파싱하라는게 무슨말인가요?(parse, don’t validate) 검증 예시 yup과 같이 인기 있는 자바스크립트 유효성 검사 라이..

티스토리툴바