본문 바로가기

분류 전체보기

(1001)
소프트웨어 엔지니어링 관점에서 바라본 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과 같이 인기 있는 자바스크립트 유효성 검사 라이..
완벽하게 타입 안전한 웹 애플리케이션 개발[Fully Typed Web Apps] ...의 번역입니다 : https://www.epicweb.dev/fully-typed-web-apps Fully Typed Web Apps The main thing that makes end-to-end type safety difficult is simple: boundaries. The secret to fully typed web apps is typing the boundaries. www.epicweb.dev 타입스크립트는 환상적입니다. function add(a: number, b: number) { return a + b } add(1, 2) // type checks just fine add('one', 3) // does not type check 위 코드도 멋지지만, 저는 더 큰 관..
Iframe 완벽 가이드 꽤 자주 보지만 아직도 익숙하지 않은 Iframe에 대해 알아봅니다. 원문 링크입니다 : https://blog.logrocket.com/the-ultimate-guide-to-iframes/ The ultimate guide to iframes - LogRocket Blog Not a fan of iframes? This post provides an overview of the tag's best features, shows you how to use them, and how to secure them against vulnerabilities. blog.logrocket.com iframe 요소(인라인 프레임의 줄임말)는 아마도 가장 오래된 HTML 태그 중 하나이며 1997년 Microsoft I..
[1일 1 알고리즘] 프론트엔드 JS 알고리즘 문제풀이 : 배열 평탄화(flatten) 임의의 레벨로 중첩되어 있는 배열을 평탄화하여 단일 중첩하는 알고리즘을 구해봅시다. 문제 예상 출력 // Single-level arrays are unaffected flatten([1, 2, 3]); // [1, 2, 3] // Inner arrays are flattened into a single level flatten([1, [2, 3]]); // [1, 2, 3] flatten([ [1, 2], [3, 4], ]); // [1, 2, 3, 4] // Flattens recursively flatten([1, [2, [3, [4, [5]]]]]); // [1, 2, 3, 4, 5] 문제 풀이 전에 명확화 할 것 배열에는 어떤 타입의 데이터가 포함되어 있나요? 일부 접근 방식은 특정 데이터 타입..