준프

준프님의 아티클

준프

준프

타입스크립트에서 Type vs Interface

타입스크립트를 활용해 개발하실 때 타입과 인터페이스를 언제 사용하시나요?

관련된 글은 정말 많지만 어딘가 모르게 비어있는 듯한 느낌을 받는 건 이 글들이 기술적 차이를 주로 다루고 사용자에게 선택지를 주기 때문이라고 생각합니다. 즉, "타입과 인터페이스는 서로 비슷한 기능을 하지만 대부분 사용하는 데 큰 차이를 못 느낄거야. 그러니까 선호하는 걸 사용해."라고 말하는 듯 합니다. 결국 왜 타입을 선택했고 왜 인터페이스를 선택했는지 그 이유는 다시 스스로 만들어내야 합니다.

이번에 소개해드리는 글의 결론은 다른 글들과 비슷하지만 인터페이스와 타입 어노테이션에 대해 미묘한 공통점, 차이점을 드러내고 있습니다.

In TypeScript, think of an interface as a set of rules or requirements that an object must follow. It’s like a contract that says, “Hey, if you want to be a ‘Client,’ you must have a ‘name’ and an ‘address.’”

그리고 개발자가 OOP에 친숙하다면 인터페이스를 함수형 프로그래밍에 친숙하다면 타입을 사용하는게 아닐까? 하는 생각이 들게 만드는 문장도 있습니다.

Interfaces are also more readable when you’re thinking in terms of object-oriented programming.

In addition, many developers prefer using types because they align well with the functional programming paradigm.

길지 않지만 타입과 인터페이스 사이에서 방황하고 있다면 도움이 되지 않을까 합니다.

2
1
준프

준프

리액트 상호작용 시간을 4배 개선하기

이번에 소개해드리는 글은 리액트 상호작용 시간을 개선하는 경험을 공유하는 글입니다.

글쓴이는 겉으로 보기엔 단순해보이는 성능 이슈를 해결하기 위해 어떤 과정을 거쳤는지 정말 자세하게 공유하고 있습니다.

이 글을 통해 제가 얻은 인사이트는 이렇습니다.

  • 보통 리액트 성능 이슈가 있다면 이렇게 깊게 먼저 들어가지 않는 편입니다. 간단하게 해결할 수 있는 방법은 없는지 알아보는 시간을 갖습니다. 하지만 글쓴이는 성능 이슈가 발생했을 때 프로파일링을 먼저합니다. 프로파일링은 쉬운 과정은 아닙니다. 어떤 함수가 성능 문제를 일으키는지 다소 깊게 파악해야 합니다. 그리고 이 경우 리액트에 대해 잘 알고 있어야 합니다. 예를 들어, performSyncWorkOnRoot가 리액트 렌더링 과정에서 호출되는 함수라는 걸 알아야 합니다.

  • 또한 자신의 리액트 코드 뿐만 아니라 AG Grid라는 외부 라이브러리의 코드도 함께 살펴봅니다. 보통 외부 라이브러리에서 문제가 발생하면 파헤쳐보기 전에 우회하여 해결 할 수 있는 방법을 탐색합니다.

  • 원인을 파악하기 위해 다양한 도구를 사용합니다. 크롬 개발자도구와 리액트 프로파일링 도구를 합리적인 이유를 갖고 적절한 때에 사용합니다. (이유도 함께 적어놨습니다.)

  • 이 모든 과정에서 상당한 양의 '지식'이 사용됩니다.

한 가지 문제를 풀기 위해 이렇게 오랜 시간을 사용할 수 있는 건 '확신'이 필요하다고 생각합니다. 다른 방법보다 이 방법이 문제를 해결하는 데 더 확실한 방법이고, 해결할 수 있는 더 좋은 방법이라는 확신이 있어야 중간에 의구심을 품지 않고 끝까지 해낼 수 있습니다. 그리고 그 확신은 명확한 계획에서 나옵니다.

He was convinced before that the formula is correct because he derived it carefully. But now he is more convinced, and his gain in confidence comes from a different source; it is due to a sort of "experimental evidence."

<HOW TO SOLVE IT>

그리고 이렇게 해낼 수 있는 다른 이유 중 하나는 계획을 실행하기에 필요한 지식과 경험입니다. 이 글을 읽어보면 상당한 양의 지식과 경험을 볼 수 있습니다.

Good ideas are based on past experience and formerly acquired knowledge.

<HOW TO SOLVE IT>

이 글을 통해 문제를 어떻게 해결해야 하는지 한 번 더 생각해보게 되는 계기가 됐습니다. 또한 내가 다루고 있는 도구나 방법론에 대해 얼마나 알고 있고 경험했는지, 그 경험은 어떤 종류인지 돌아보게 됐습니다.

최근 시청한 영상을 추가로 남깁니다.

그 사이의 균형을 잘 유지해야죠. 예술가인 동시에 과학자가 되어야 합니다. 이미 정해진 레시피를 무시하고 모든 걸 처음부터 '이해'하려고 한다면, 아무것도 만들지 못할 겁니다. 하지만 본질을 '이해'하지 않고 아무 생각 없이 레시피만 따라 한다면, 잘못된 제품을 만들 겁니다.

그렇게 복잡하게 생각할 필요 없습니다. 컴퓨터를 새로 만든다고 해보죠. 만약 여러분에게 일을 맡긴 의뢰인이 컴퓨터 성능을 10% 높이고 싶다고 한다면, 메모리 용량을 늘리거나 부품을 추가하겠죠. 아니면 컴퓨터의 설정을 만져서 성능 효율을 최대치로 끌어올릴 겁니다. 하지만 부품을 추가하고 설정을 바꿀 수록, 구조도 복잡해지고 관리도 어렵죠. 언젠간 벽에 부딪힐 겁니다. 아무리 부품을 덕지덕지 붙여도 성능이 더 좋아지지 않는 시점이 오겠죠. 그러면 대부분 사람들은 이렇게 말해요. "어쩔 수 없어요. 이게 한계입니다." 하지만 극소수는 이렇게 얘기하죠. "지금의 구조는 더 이상 한계야. 뭘 새롭게 추가한다고 바뀔 건 없어. 새로운 구조를 처음부터 다시 짜보자." 그렇게 기존 구조를 뜯어보고 난 후에 사람들은 비로소 알게 됩니다. 아예 처음부터 새로운 구조를 만드는 것이 훨씬 빠르고 간단한 방법이에요.

이 글의 목차는 아래와 같습니다.

  • 상호작용 프로파일링

  • AG Grid: 불필요한 렌더링 고치기

  • AG Grid: 렌더링 제거하기

  • useEffect 덜 실행하기

    • areEqual의 깊은 이야기

  • 여전히 남아 있는 작업

    • 더욱 세분화된 업데이트

    • useSelector vs useStore

  • 잘 동작하지 않은 것

  • 결과

0
2
준프

준프

Shift Left Testing이 어떻게 버그, 시간 그리고 돈을 아낄까?

이번에 소개해드리는 글은 Shift Left Testing이 무엇인지 소개하는 글입니다. 사실 그보다는 제품을 만드는 과정에 대해 거시적으로 살펴볼 수 있도록 합니다. 이 내용이 도움이 되었다면 함께 일하는 동료와 논의해보는 것도 정말 좋을 것 같습니다.

버그의 책임은 누구에게 있는가?

이 글은 가장 먼저 제품에서 발생한 버그의 책임은 어디 그리고 누구에게 있는지 간단하게 알아봅니다. 사실 이 문장에서 조금 뜨끔한 포인트가 있습니다. 제품을 개발하는 과정 마지막에 제품이 정상적으로 동작하고 기대한 동작을 하는지 검증하는 과정(QA)이 있다면 코드를 작성하면서 은연중에 아래와 같이 생각한다는 것입니다.

"마지막 검증 과정에서 중요한 버그는 발견되고 이후 수정 기간에 수정하겠지"

하지만 이렇게 했을 때 결과는 그리 유쾌하지 않습니다. 아래는 검증 과정에 강하게 의존하면 발생하는 문제에 대한 제 생각입니다.

  1. 신뢰가 떨어집니다. 이러한 태도는 좋지 않은 질을 가진 코드를 생산해냅니다. 그리고 마지막 검증 단계에서 발견되는 버그의 갯수가 감소하지 않습니다. 결국 다른 구성원이 개발자를 신뢰하지 못하는 문제가 발생합니다.

  2. 시간과 돈이 많이 듭니다 1. 신뢰가 낮다면 비용은 증가합니다. 개발자가 만든 코드에 대한 신뢰가 낮기 때문에 검증 시간과 인력이 많이 듭니다.

  3. 시간과 돈이 많이 듭니다 2. 배포 하기 전 마지막 단계에서 하는 검증이기 때문에 이 때 발견된 버그는 수정할 시간이 부족하고 급하게 처리하다보면 또 다른 버그를 만들어내기 마련입니다. 만약 버그를 고치지 못했다면 제때 배포하지 못하고 다음 스프린트로 넘어갑니다.

그리고 이 글에선 아래와 같이 강조합니다.

The quality of the code is a shared responsibility among the entire team.

좋은 결과물에 대한 책임은 마지막 검증 단계, 개발자 등 특정 단계나 팀의 책임이 아닙니다. 각자가 자신의 책임이라 생각하는 태도가 중요합니다.

Shift Left Testing이란?

따라서 마지막 단계에 의존하는 검증이 아니라 개발 과정의 왼편(Left)으로 검증(Test) 과정을 이동(Shift)시킴으로써 더 나은 방법의 검증을 해야 한다고 강조합니다.

Shift Left Testing에 대해 저자는 아래와 같이 소개합니다.

Shift left testing means focusing on testing from the very beginning when we start thinking about how to approach a task.

이 방법의 자세한 수행 방법을 요약하면 아래와 같습니다.

  1. 자세한 인수 조건(acceptance criteria)

  2. 관계된 모든 구성원이 인수 조건을 파악함

  3. 개발자는 마지막 검증 단계 전에 반드시 테스트를 해야함

  4. 개발 과정에서 PM과 검증 팀으로부터 지속적인 피드백

이 방법은 실제로 업무를 하며 개선해나가는 과정과 닮아 있어 더욱 공감이 됐습니다. 이 방법을 처음 도입하거나 도입하는 중이지만 잘 안 된다면 아래 세부 내용을 살펴보는 게 도움이 되리라 생각합니다. 이 내용은 제가 추가한 내용입니다.

  1. PM 또는 모든 괸계자는 자세한 인수 조건을 준비하고, 개발자는 인수 조건에 따라 개발해야 합니다. 이 글에서 소개한 것처럼 준비하는 것만으론 충분하지 않습니다. 때로 이 과정은 매우 번거롭고 힘듭니다. 저 처럼 덤벙대는 성격을 가진 사람이라면 더욱 그렇습니다. 하지만 훈련해야 합니다.

  2. 인수 조건이 자세하게 준비되어야 하는 이유는 버그는 코드로부터 나오는 것 뿐만 아니라 애초에 잘못된 인수조건에서 나올 수 있기 때문입니다. (이 글에서도 이 부분을 강조하고 있습니다.)

  3. 보통 전문 QA 팀이 있지 않은 조직에선 모든 관계자가 함께 검증을 합니다. 그렇기 때문에 더욱더 인수 조건을 모두 파악하고 있어야 합니다. 그래야 발견하지 못한 문제 케이스를 발견할 수 있습니다.

  4. 개발자는 마지막 검증 단계 전 반드시 테스트를 해봐야 합니다. 여기엔 단위 테스트, 개발자 간의 테스트 등을 포함합니다. 이 방법은 마지막 검증보다 비용이 낮고 속도가 빠릅니다.

  5. 시작부터 마지막 단계까지 지속적으로 피드백을 주고받아야 합니다. 왜냐하면 우리 모두 사람이기 때문에 각 과정에서 문제를 발견할 수 있기 때문입니다.

  6. 지속적인 피드백과 개선이 필요하려면 변경에 유연한 코드를 작성해야 합니다. (이 역시 소개한 글에서 강조하고 있습니다.)

더 자세한 내용은 소개해드리는 글을 참고해보시는 걸 권해드립니다. 위 내용을 더 자세하게 설명하는 것 뿐만 아니라 실제 적용 결과를 공유하고 있기도 합니다.

뿐만 아니라 테스트와 관련해 이전에 공유해드린 '테스트는 센서다'라는 글을 다시 공유드립니다.

0
0
준프

준프

15가지 유용한 HTML 속성

이번엔 간단하고 가볍지만 정말 좋은 정보를 담고 있는 아티클을 소개하려고 합니다. HTML 속성하면 접근성과 관련이 있거나 잘 쓰지 않는 속성을 소개하는 경우가 있는데요, 이 글에선 '이런 속성도 있었어?'하는 부분이 종종 있습니다.

이 글에서 소개하는 속성을 나열해보면 아래와 같습니다. 자세한 내용은 글을 참고해주세요 :)

그리고 사용해보기 전 caniuse에서 사용 가능한지 확인해보는 습관도 중요합니다 !

  • contenteditable

  • spellcheck

  • translate

  • multiple

  • reversed

  • draggable

  • accesskey

  • poster

  • onerror

  • theme-color

  • favicon

  • touch-icon

  • loading

  • async

  • defer

0
0
준프

준프

모던 프론트엔드 아키텍처를 위한 5가지

이 글의 제목은 스팸처럼 느껴지지만 내용은 그렇지 않았습니다. 각 주제를 간단하게 나열하고 있지만 분명 인사이트를 주는 내용들이 많았습니다. 각 주제가 어떤 내용을 설명하고 있는지, 어떤 인사이트가 있는지 목차와 함께 살펴보겠습니다.

  • 디자인 시스템

  • 컴포넌트 재사용

    • 컴포넌트를 분리하고 디렉터리에 관리하는 방법에 대해 소개합니다. 이 글에서 가장 눈에 띄는 부분이었습니다. 최근 스타일 및 요소의 중복(DRY)에 대해 고민하고 있었는데 그 결과와 비슷하기도 해서 나름 뿌듯했습니다.

    • 우리는 중복을 제거하기 위해 컴포넌트를 분리하는데, 각 컴포넌트의 크기가 크기 때문에 사용처마다 다른 사용방법을 대응해줘야 하는 문제가 있습니다. 그래서 그런 가능성을 줄이기 위해 최대한 독립적인 부분들, 즉 작은 크기의 컴포넌트를 사용해야 합니다.

    • 다만, 이렇게 했을 때 문제도 있습니다. 컴포넌트 구조를 파악할 때 인지부하가 발생할 수 있고 아무리 작고 독립적인 컴포넌트로 세분화 한다고 하더라도 예상하지 못한 문제를 얼마든지 마주할 수 있기 때문입니다. 관련해서 또 다른 좋은 글을 소개합니다.

  • asset 최적화

    • 이미지, 자바스크립트, CSS, 폰트 및 아이콘, 비디오 및 오디오, 문서, 퍼포먼스 측정

    • 각 세부 내용은 자세한 내용을 다루고 있진 않습니다. 다만 어떤 자산에 대해 어떻게 최적화를 하면 좋은지 소개하고 자산의 종류에 어떤게 있는지 안내하는 것만으로도 큰 가치가 있습니다. 프론트엔드 사이드에서 최적화를 할 수 있는 범위가 어디까지인지 거시적으로 파악하는데 도움이 됩니다.

  • 각 수준의 캐싱

    • 브라우저, CDN, DNS, 애플리케이션 수준의 캐싱에 대해 소개합니다.

    • 이 역히 자산 최적화와 비슷합니다.

  • 낙관적 동시성

    • 낙관적 UI 업데이트에 대해 소개합니다. 또한 서버 요청으로부터 에러를 받았을 때 어떻게 재조정하는지 안내합니다.

    • 또한 문서 수정에 낙관적 UI를 적용하기 위해 프론트엔드에서 문서 버저닝을 하는 방법도 간단하게 소개합니다.

    • 낙관적 동시성과 관련해 이전 글을 다시 보는 것도 도움이 될거 같습니다.

0
0
준프

준프

자바스크립트 함수 활용, Higher Order Function

이번에 소개해드릴 글은 자바스크립트 함수를 활용하는 방법에 대한 글입니다. 그 중 함수를 감싸(wrap)는 방법은 정말 간단하면서도 활용가치가 높은 방법 중 하나입니다.

먼저 볼 글은 로직을 처리하는 도중 에러를 던지는 함수에 대한 이야기입니다. 몇몇 경우 에러가 아닌 null을 반환해야 하는데, 어떤 방식으로 할지 고민하는 과정을 담고 있습니다. 이 이야기가 좋았던 이유는 '지금 바로 떠오르는 답을 통해 어쨋든 원하는 결과를 만들어내면 그만'이라는 것에서 한 발 더 나아가 고민하고 더 나은 방법을 만들어내는 과정이 담겨있기 때문입니다. 어렵지 않은 글이기 때문에 결과도 좋지만 과정도 함께 보면 좋을 거 같습니다.

또한 댓글에 정말 좋은 내용이 담겨 있습니다.

  • 에러의 의미 전달의 중요성

  • try...catch의 비용

다음으로 볼 글은 Higher Order Function에 대한 글입니다. 다음과 같은 세 가지 HOF에 대해 소개하고 있습니다.

  • Functionality-wrapping

  • Functionality-altering

  • Functionality-creating

단어는 어려워보이지만 살펴보면 그리 어려운 내용이 아닙니다. 특히 함수의 실행 시간 측정 그리고 로깅을 위해 함수를 감싸는 방법은 위기의 순간에 사용하곤해서 알아두면 도움이 되리라 생각합니다. 그 밖의 내용 역시 유용하며 함수를 더 유연하게 바라볼 수 있는 경험을 제공합니다.

특히 이 글은 시리즈로 구성되어 있는데, 좋은 내용이 있는 거 같아 살펴보면 좋을 거 같습니다.

0
0
준프

준프

CSS Layers: 스타일링 작업의 게임 체인저

이번에 소개해드리는 글은 CSS의 Cascade Layers에 대한 글입니다. 이 글은 짧고 핵심을 짚습니다. 기존에 CSS 스타일 작업이 @layer를 통해 어떻게 바뀔 수 있는지, 어떤 흐름으로 작업하면 좋을지, 디버깅은 어떻게 하는지 간단하게 소개합니다.

스크린샷 2024-02-14 오후 10.08.43.png

목차를 요약하면 아래와 같습니다.

  1. 왜 css layers를 알아야 하는지?

  2. css layer를 정의하고 사용하기

    1. layer 생성

    2. layer 순서

    3. 중첩 layer

    4. CSS import와 함께 layer 사용

  3. css layer 디버깅

  4. 브라우저 지원 범위

대규모 프로젝트를 운영하다보면 스타일 우선순위 또는 덮어쓰기 등의 문제로 정말 많은 시간을 씁니다. 심지어 기존 요소에 적용한 스타일에 영향을 주지 않고 적절한 스타일을 적용하기 위해 요소를 뜯어 고치는 일도 많습니다. 이러한 문제는 아무리 CSS를 체계적으로 관리하고 사용하더라도 부딪히는 것 같습니다.

css layers를 사용하면 이런 문제가 발생할 가능성을 조금은 낮출 수 있을지 모르겠습니다. css 파일을 불러오는 순서나 !import가 아닌 layer를 적용하는 순서에 따라 스타일 '집합'을 적용하는 건 더 좋은 방법입니다.

이 짧은 글을 통해 css layer에 대해 알고, 당장 적용하지 못하더라도 더 나은 방법으로 스타일을 적용하는 방법에 대해 고민하는 계기가 되면 좋겠습니다.

0
0
준프

준프

일에서 경계를 정하세요

이번에 소개해드릴 글은 일과 삶의 경계를 설정하는 것과 관련된 글입니다.

이 글의 목차와 요약은 아래와 같습니다.

  1. 삶의 다양한 영역에서 경계를 정의하기

    1. 어떤게 협상 불가능한 것인가?

    2. 상황에 따라 유연하게 대응할 수 있는 건 무엇인가?

    3. 감당할 수 있는 책임과 당신의 목표에 적합하지 않는 목표는 무엇인가?

    4. 당신의 한계는 어디까지인가?

  2. 예의를 갖춰 분명하게 의사소통하기

    1. 우리의 생각과 기분이 다른 사람에게 전달된다는 환상을 갖고있지 않은지 점검해봐야 합니다.

  3. 당신의 기대에 맞춰 당신의 행동을 조정하기

    1. 당신의 목표와 가치에 맞춰 행동하는 건 다른 사람에게 강력한 메세지를 전달합니다.

  4. 모든 사람을 기쁘게 할 수 없다는 걸 받아들이기

  5. 경험하고 조정하고 적응하기

    1. 경계는 시간이 지남에 따라 그리고 상황에 따라 조정하고 적응해야 합니다.

'워라벨'이라는 말이 떠오를 수 있고 어느정도 연관이 있을 수 있습니다. 하지만 이 글을 통해 공유하고 싶은 건 '부드러움', '밸런스'보단 '한계를 시험해보고 한계를 파악하고 그 경계를 넘지 않는 한 노력하는 모습'입니다.

그러기 위해선

  • 나 자신을 잘 알아야 하고

  • 내 책임은 무엇인지 명확하게 하고

  • 이것들을 다른 사람에게 명확하게 전달

해야 합니다.

이 규칙은 나 뿐만 아니라 다른 사람에게도 마찬가지입니다.

  • 다른 사람은 어디에 가치를 두고 어떤 목표를 갖고 있는지

  • 이 사람의 책임은 어디까지인지

  • 이것들에 대한 내 기대는 무엇인지

명확하게 파악하고 역시 '분명하게 전달해야 합니다.'

지식을 나열하자면 이렇고, 지키기란 정말 어려운 일입니다. 그렇다고 포기하기엔 이르고 옳거나 좋은 방향을 새겨두고 잘 해내고 있는지 점검하면 좋겠습니다.

관련해서 존 카맥의 일하는 방식에 대한 인터뷰 영상을 공유합니다 :)

0
0
준프

준프

DOM에 대해 다시 알아봅시다

이번에 소개해드릴 글은 HTML과 DOM 등에 대해 설명해주는 글입니다. 제목은 다소 가벼워보이지만 내용은 절대 그렇지 않습니다. 읽다보면 중요한 내용이 툭-툭- 놓여있습니다. 관련해서 반드시 알아야 하는 내용도 많습니다.

목차는 아래와 같습니다. 개인적으로 밑줄을 치거나 저자가 '중요'하다고 한 내용을 포함하는 경우 볼드처리했습니다.

  • HTML이란?

    • 선언적

    • 의미론적

    • 하이퍼링크

    • 스트리밍

  • HTML 문서의 구조를 만들기

  • DOM

    • EventTarget

    • Node

    • Element

    • HTMLElement

    • SVGElement & MathMLElement

    • DocumentFragment

    • Attr

      • Content Attributes

      • Boolean Attributes

      • IDL Attributes

    • CharacterData

    • Text

    • Comment

  • Composing Light and Shadow DOM

  • Events

    • Listeners

    • Event Options

    • Event Propagation

    • Custom Events

목차만해도 엄청난 양이네요.

인상깊게 본 내용을 글을 보지않고 떠올려보면 Node vs Element, Streaming, input value attribute, event is synchronous, event callback function... 정말 많네요. 이정도 내용을 책으로 보려면 상당히 읽고 메모해둬야 하는데, 핵심을 잘 정리해두고 관련 링크를 잘 달아놔서 더욱 좋은 글인 것 같습니다.

0
0
준프

준프

추상화란?

최근 추상화에 대해 열심히 공부하는 중입니다. 추상화를 정의하는 유명한 문장 몇몇이 있지만 실제로 어떻게 활용해야 하는지, 제품을 만들면서 추상화를 언제 논의해야하는지 고민이 되기 마련입니다.

이번엔 추상화와 관련된 좋은 글 두 편을 소개하려고 합니다.

하나는 문동욱님의 '추상이란 무엇일까'라는 글입니다. 추상화를 프론트엔드 코드를 예시로 정말 잘 설명해주신 글이라 강력 추천합니다.

그 다음은 추상화를

  • 비즈니스 추상화

  • 제품 추상화

  • 기술적 추상화

로 세분화하여 소개합니다. 특히 각 추상화는 어떤 특징을 갖고 있고 어떤 절차로 추상화를 하는지 쇼핑몰 서비스를 예를 들어 비교적 자세히 설명하고 있습니다.

두 글 모두 술술 읽히는 쉬운 글은 아니지만 한 번 눈에 넣어두면 복잡한 제품을 만들 때 많은 도움이 될거라 생각합니다.

0
1
준프

준프

웹 컴포넌트 2024

이번에 소개해드릴 글은 W3C Web Components Community Group의 멤버, 브라우저 관계자, 라이브러리 제작자, 커뮤니티 구성원들이 모여서 웹 컴포넌트에 대해 나눈 이야기를 잘 정리해 놓은 글입니다.

평소 웹 컴포넌트를 다룰 일이 없고 그래서 잘 알지 못했는데 이번을 계기로 많은 정보를 얻을 수 있었습니다.

세부 목차와 요약을 살펴보면 아래와 같습니다.

  1. Declarative Shadow DOM (DSD)

    1. 선언적 Shadow DOM으로 해석할 수 있을 것 같습니다. Shadow DOM은 마크업, 스타일, 동작을 캡슐화 하는 한 방법인데요, DSD는 이걸 서버에서 준비하고 웹 페이지에서 하이드레이션 할 수 있는 방법을 제공합니다.

    2. 그 밖에도 많은 장점을 소개하고 있습니다.

  2. CSS Slot Content Detection

    1. 요소의 컨텐트가 변경되었을 때 스타일을 조정할 수 있는 방법을 제공합니다.

    2. 지금도 combinator, pseudo-selector를 사용해 가능한데 이 방법들이 복잡(?)하고 퍼포먼스적으로 좋지 않아 제안했다고 합니다.

  3. Scoped Element Registries

    1. 커스텀 DOM을 대규모 프로젝트에서 관리하기 용이하도록 제안된 기능입니다.

    2. 2023년에 Chromium에 프로토타입이 적용됐다고 하네요.

  4. ARIA Mixin

    1. ElementInternals를 통해 ARIA Mixin이 모든 최신 브라우저에 제공되었다고 합니다.

    2. 이를 통해 ARIA를 문자열로 한땀한땀 넣는게 아니라 객체의 속성을 통해 관리할 수 있다고 합니다.

  5. Cross Shadow Root ARIA

  6. Open Stylable

    1. 전역 스타일을 특정 웹 컴포넌트의 Shadow DOM 내부에도 영향을 주도록 하는 방법입니다.

  7. Container Style Queries

  8. CSS Module Scripts, Imports, and the @sheet Proposal

    1. 이걸 통해 css를 import 할 수 있게 되고

    2. 웹 컴포넌트에 적용되는 스타일을 포함하는 CSS Style Sheet를 한 파일로 번들링 할 때 독립성을 보장할 수 있다고 합니다.

  9. HTML Modules and Declarative Custom Elements

생소한 개념도 많고 '우와'하며 보게되는 지점도 많았던 것 같습니다. 매일 관성적으로 보던 코드에서 발전하는 코드를 보니 부지런해져야겠다는 생각이 들었습니다. 그리고 프로젝트의 성격에 따라 한 번쯤 사용해본다면 기술 선택의 폭이 넓어지지 않을까요?

이 글을 읽으며 찾아본 몇몇 문서를 추가로 공유합니다.

0
0
준프

준프

객체가 비어있다는 건 어떻게 확인하나요?

이번에 소개해드릴 글은 단순하지만 자바스크립트에 대해 많은 세부사항을 알게 하는 글입니다.

이 글에선 객체가 비어있다는 판단을 어떻게 하는지와 관련된 몇몇 방법을 소개합니다. 이 과정에서 아래와 같은 키워드를 알게 되고 확장해서 공부한다면 많은 도움이 되리라 생각합니다 :)

  • JSON.stringify

  • hasOwnProperty

  • Object.keys

  • Object.defineProperty

  • Object.getOwnPropertyNames

  • Symbol

  • Object.getOwnPropertySymbols

  • Reflect.ownKeys

0
0
준프

준프

모던 아키텍처: Functional Core - Imperative Shell 개조

이번에 소개해드릴 글은 코드의 구조와 관련된 글입니다. 이 글에서 강조하는 건 '요청 - 응답' 구조와 '고립과 모듈화를 통한 관심사의 분리' 그리고 '부수효과'입니다.

요약하자면 관심사를 잘 분리하더라도 각 고립된 모듈 내부에서 부수효과가 발생하면 코드 전체의 데이터 흐름에 문제가 발생하고 코드의 중요한 요소에 큰 타격을 준다는 것입니다. 따라서 Functional Core - Imperative Shell(FCIS) 방법을 사용하기를 제안합니다.

이 방법은 비즈니스 로직인 코어는 순수하게 유지하고 부수효과는 외부로 밀어냅니다. 그리고 Shell과 Core 사이에 단방향 요청 - 응답 구조를 갖춥니다.

이 방법은 다른 방법들에 비해 단순하고 명확해서 작은 규모의 코드부터 큰 규모의 구조까지 적용할 때 고려하면 좋은 구조라는 생각이 듭니다. 특히 부수효과가 많이 발생하는 프론트엔드 코드 구조를 생각해보면 더 알아보면 좋겠다는 생각입니다.

0
0
준프

준프

유닛 테스트는 '테스트'가 아니라 '센서' 입니다.

테스트를 접해보지 않은 분과 대화를 나누다보면 테스트와 관련된 여러가지 이야기를 나누게 되는데요, 특히 테스트를 작성해야 하는 이유에 대해 이야기를 나누는 경우가 많습니다.

그러다보면 테스트가 실패했을 때 그리고 성공했을 때, 테스트는 어떤 것을 검증해야 하는지 등 많은 이야기를 매번 나누게 됩니다.

이번에 소개해드리는 글은 '테스트'가 코드에서 어떤 역할을 하는지 그리고 테스트의 성공과 실패는 무엇을 의미하는지 설명해주는 글입니다.

프론트엔드에서 테스트는 고비용 작업으로 많이 알려져있습니다. 하지만 테스트가 없기 때문에 이 글에서 소개하는 코드 수정으로 인한 '의도하지 않은 변경'이 발생하고 뒤늦게 발견하는 경우도 종종 마주합니다. 그래서 주의하자는 취지로 고비용의 꼼꼼한 QA가 포함됩니다.

프론트엔드에서 적정 수준의 테스트는 무엇인지 항상 고민합니다. 쉽지 않은 문제지만 그렇다고 포기하기엔 아쉽기도 합니다. 여러분의 의견은 어떠신가요?

이 글에서 인상 깊었던 몇몇 문장을 인용합니다.

If that were true, you’d need to write fewer tests as you got better at writing code, right? For a confident programmer, unit testing would soon start to feel like an unwelcome obligation imposed as part of a box-checking process.

"Unit tests are not about checking that the code works."

(당신이 코드를 잘 작성했다면 테스트는 적을 수록 좋은 게 맞다고 생각하나요? 확신에 찬 개발자라면 테스트 통과 표시는 그리 달갑지 않을 수 있습니다.)

It also needs to tell you exactly what you changed. If it’s something you intended to change, you can change the test to match. If it’s an accident, you leave the test as it is and go back to fix the production code.

Good unit tests are ones which separate the code cleanly into small pieces that can change independently. When a good unit test fails, it points directly at a specific piece of code or behaviour and says, “this changed: was that intentional?”

(내가 수정한 코드에 대해서만 테스트가 실패했다면 의도한대로 수정한 게 맞습니다. 만약 다른 유닛 테스트까지 실패한다면 의도하지 않은 코드가 영향을 받았을 가능성이 있습니다.)

When we write unit tests, what we’re really writing are change sensors.

(테스트가 아니라 센서라고 이해해보는 건 어떨까요?)

0
1
준프

준프

캐시를 다루는 방법

캐시, 스레드와 관련된 글은 주로 백엔드 개발자가 다루는 내용이 많습니다. 하지만 개인적으로 프론트엔드 개발자도 스레드와 얼추(?) 친하다고 생각합니다. 왜냐하면, 한 명의 사용자라고 하더라도 브라우저의 한 세션이 유지되는 동안 동일한 자원에 예상할 수 없는 간격으로 접근할 수 있기 때문입니다. 그래서 그런지 누구나 동일 자원에 접근하는 순서를 보장하기위해 땀을 흘리며 코딩해본 경험을 한 번쯤 가져보지 않았을까요? 이건 접근 속도에 차이가 있을 뿐 스레드를 다룰 때와 비슷한 이슈라고 생각합니다. (접근 시간 간격과 동일한 자원)


그리고 캐시를 활용해 퍼포먼스 향상을 하기 위해선 그 뒤에 어떤 비용(관리, 컴퓨팅 자원 등)이 있는지 이해하는 것도 중요하다고 생각합니다. 만약 관리하는 데 많은 비용이 든다면 캐시를 활용했더라도 지속적으로 유지하기 어려운 전략이지 않을까... 하는 생각을 항상 갖고있는 편입니다. 그래서 그런지 캐시를 활용하기 전에 다른 방법으로 성능을 개선할 수 있는 방법은 없는지 먼저 고민하려고 합니다.

이번에 소개해드리는 글은 캐시를 다룰 때 발생할 수 있는 문제와 캐싱 전략, 그리고 캐시 무효화 전략을 다루는 글 두 편입니다. 한 글의 시작은 유명한 문장으로 시작하는데, 너무 인상적이어서 알고있는 분도 많으리라 생각합니다.

There are only two hard things in Computer Science: cache invalidation and naming things. - Phil Karlton

'앗! 너무 어렵고 내가 평소에 다루는 개념이 아닌데?'라고 생각하기 보단 한 번 스윽 보고 캐시를 다뤄야 할 때 한 번 검토해보는 것도 좋지 않을까요? :)

0
0
준프

준프

Adapter 패턴 사용하기 (feat. React, TanStack Query)

Adapter 패턴에 대해 아시나요? 이 패턴은 인터페이스가 다른 두 객체를 이어주는 방법을 제공합니다. 프론트엔드에서 이런 상황이 가장 많이 발생하는 곳은 API 응답값과 컴포넌트에서 사용하는 속성간의 구조차이(인터페이스 차이)가 있습니다.

이번에 소개해드리는 글은 이러한 차이를 Adapter 패턴을 통해 해소하는 방법을 소개합니다.

DTO를 사용하는 것과 큰 차이를 못 느낄 수도 있지만, 이 패턴은 단순히 데이터의 구조가 다를 때만 사용하는 게 아니라 인터페이스, 즉 메서드(행동)의 인터페이스가 다른 경우에도 사용할 수 있으므로 알아두면 의외의 도움이 되리라 생각합니다.

그 밖에 TanStack Query에서 데이터를 변환하는 방법에 대한 좋은 아티클도 남깁니다 :)

0
0
준프

준프

덕 타이핑(duck typing)에 대해 아시나요?

덕 타이핑에 대해 아시나요? 덕 타이핑은 자바스크립트와 같은 동적 프로그래밍 언어에서 객체의 타입을 결정하는 데 사용하는 방법입니다. 정말 오래전에 덕 타이핑을 활용한 사례를 제외하고 여지껏 개념도 가물가물 했을 정도로 알아도 그만 몰라도 그만인 개념으로 취급됩니다.

하지만 얼마전 웹뷰를 다루다가 덕 타이핑으로 이슈를 해결한 사례가 있었습니다. ES5로 변환하고 난 후에 Map, Set 인스턴스를 순회하지 못하는 문제가 있었고 덕 타이핑을 통해 임시로 해결했습니다.

공부를 하다보면 어떤 개념의 경우엔 활용하기가 어려워 그냥 지나가는 경우가 있는데요, 한 번쯤 이해만 해놓는다면 나중에 정말 희소하더라도 활용하는 기회가 생기기 마련인 것 같습니다.

관련해서 설명하려다보니 잘 정리된 아티클을 찾기가 어려웠는데, 이번 글에선 이렇게 저렇게 찾아본 글을 공유드립니다 :)

이 글들은 자바스크립트 입장에서, 특히 iterator를 예시로 덕타이핑을 보여줍니다. 그리고 나머지 하나는 오리를 예시로 쉽게 설명하는 덕타이핑입니다.

0
0
준프

준프

리파지토리 패턴에 대해 아시나요?

리파지토리 패턴(Repository Pattern)에 대해 아시나요? 이번에 소개해드릴 두 개의 글은 리파지토리 패턴에 대한 글입니다.

먼저 첫 번째 글을 소개합니다.

리파지토리 패턴은 데이터를 영속적으로 유지해주는 문제를 추상화합니다.

“The Repository pattern is an abstraction over persistent storage. It hides the boring details of data access by pretending that all of our data is in memory.” (Architecture Patterns with Python, chapter 2)

예를 들어, 아래와 같은 API 요청이 있을 때,

fetch('/store', {
  // ...
  body: JSON.stringify({
    // ... data
  }),
});

아래와 같이 추상화합니다.

// 정의
const StoreRepository = {
  create(...data) {
    fetch('/store', {
      // ...
      body: JSON.stringify({
        // ... data
      }),
    });
  }
};

// 호출부
// fetch를 직접 호출하는 대신 메서드 호출
StoreRepository.create({ ... });

추상화를 했다는 건, 같은 인터페이스를 가진 다른 구현체로 바꿀 수 있다는 걸 의미하기도 합니다. 그리고 추상화 전과 달리 세부 구현을 숨기는 캡슐화도 되기 때문에 변경이 발생했을 때 대응이 수월합니다. 물론 구현체가 중복해서 존재하는 경우 중복 제거도 가능합니다.

다른 구현체로 바꿀 수 있다는 건 테스트도 전과 달리 더 수월하게 할 수 있다는 걸 의미합니다. 그래서 아래와 같은 장점이 있습니다.

  • 도메인 로직(비지니스 로직)과 데이터 영속 로직 분리

  • 코드를 테스트하는 게 수월해집니다.

  • 데이터를 다루는 로직을 교체할 수 있습니다.

    • 예를 들어, API 호출이 아닌 쿠키, localstorage 등의 방법으로 바꾸기 수월합니다.

하지만 추상화를 통해 데이터 계층이 추가되면

  • 데이터를 사용하는 곳과 리파지토리 계층 간의 데이터 구조 매핑이 필요합니다. 즉, 장점으로 가져온 유지보수성 향상을 깎아먹게 됩니다. 그래서 결국 득인지 실인지는 따져봐야겠습니다.

  • 계층이 늘어나면 코드를 살펴볼 때 복잡성이 올라갑니다.

프론트엔드 개발을 하면서 리파지토리 패턴은 익숙하지 않을 수 있습니다. 그리고 당장 필요하지 않을 수도 있습니다. 하지만 복잡한 애플리케이션을 개발 해야 할 일이 생길 때, API 호출에 사용하는 라이브러리를 교체해야 할 때 등 리파지토리 패턴이 필요한 순간에 생각이 난다면 충분하지 않을까 합니다.

프론트엔드에서 리파지토리 패턴을 사용하는 것, API 요청을 추상화 하는 것과 관련해선 제가 쓴 글도 있으니 필요하시면 참고하셔도 좋을 거 같습니다.

그리고 마지막으로 소개해드리는 글은 '리파지토리는 안티 패턴인가?'라는 주제의 글입니다. 글의 분량도 그렇고 내용도 읽기 수월하진 않을 정도로 어렵기도 합니다. 하지만 기존에 잘 활용되고 있는 패턴에 대해 다시 한 번 돌아보게 하는 글은 옳고 그름을 떠나 한 번쯤 읽어볼만 하다고 생각합니다.

저도 필요할 때 몇 번은 더 읽어봐야 할 거 같습니다 :)

리파지토리 패턴과 무관하지만 이 글에서 의미있는 문장이 있는거 같아 인용합니다.

Developers are really stubborn people. To become a software engineer, you should have a mindset of “everything is possible” guy. When something is not working the way we want it, we would just put more effort into it. The more effort we invest, the harder it is to let it go.

You know, how they said: habits prevent any progress. (습관은 진전(또는 개선)을 방해합니다.)


0
0
준프

준프

퍼스널 칸반과 회고

퍼스널 칸반을 어떻게 사용하는지, 어떤 걸 알게 됐는지 등 경험을 공유 합니다 :)

4
0
준프

준프

어떻게 더 좋은 리액트 컴포넌트를 만들까요? - 확장 가능성 그리고 재사용성

글 소개

컴포넌트를 잘 만드는 방법은 너무도 많습니다. 그래서 그런지 언제부턴가 컴포넌트를 잘 만드는 방법이라면 의심부터 먼저 하게 됩니다.

하지만 이번에 소개해드릴 글은 아주 기본적인 것 부터 점검해보는 기회를 제공한다고 생각합니다.

그럼 천천히 살펴보겠습니다.

Bit을 사용하여 기본 UI 컴포넌트를 만들기

블로그를 보다보면 사용하는 기술에 대한 홍보(?)가 많아서 건너뛰는 편입니다. 그럼에도 이렇게 소개해드리는 이유는, Bit을 사용하는 이유에 대해선 짚어볼만 하다고 생각하기 때문입니다.

혹시 코드를 작성하면서, 특히 컴포넌트를 만들면서 다이어그램을 작성해보시나요?

videocomponent.png

(저도 복잡해질 가능성이 있는 그리고 많은 기능을 갖고 있는 컴포넌트는 위 이미지처럼 다이어그램을 그려보며 점검하곤 합니다.)

컴포넌트는 의존관계를 파악하기 수월하고 컴포넌트의 수가 많아지면 의존성 때문에 유지보수성이 떨어질 수 있기 때문에, 한 번 쯤은 컴포넌트 의존성 다이어그램을 그려보면 많은 도움이 됩니다. 컴포넌트 숲속을 헤매다가 숲을 보기 시작하면 얼마나 헤매고 다녔는지 확인할 수 있고, 개선 지점도 찾을 수 있습니다.

저자도 의존성 그래프를 그려보는 게 많은 도움이 된다고 어필하고 있습니다.

With Bit, you can use its dependency graph to understand how your components interact. It illustrates the interconnectedness of components.

This dependency graph is particularly beneficial in large-scale projects involving multiple teams. It aids in efficient change management, guaranteeing that updates within a scope are in sync and align with the broader organizational standards.

컴포넌트 API 노출하기

아마 많은 프론트엔드 개발자에게 API와 인터페이스는 백엔드 개발자의 전유물처럼 느껴질텐데요, 이 소주제를 통해 프론트엔드 개발자에게 API와 인터페이스는 어떤 걸 의미하는지 돌아볼 기회가 생깁니다.

내용은 아주 단순합니다. '컴포넌트와 그 컴포넌트의 인터페이스를 노출하라'

전 여기에 하나 더 붙이려고 합니다. '그 밖에 것은 노출할 때 주의하라'

테마 컴포넌트를 활용한 스타일 일관성을 위한 테마

페이지를 만들 땐 테마가 정말 중요합니다. 대부분 서비스의 경우 일정 테마를 갖고 있는데 이걸 일괄로 관리할 수 있어야 합니다.

To maintain a consistent look and feel, base components are designed to be themeable.

커스터마이징과 확장성 향상 시키기

컴포넌트의 커스터마이징과 확장성을 향상 시키는 방법을 공유합니다. 너무 단순하고 모두 아는 방법이지만 효과는 확실합니다. 'className'과 '구조 분해 할당' 사용하기 인데요, 원글을 보시면 단번에 이해할 수 있습니다.

마무리

좋은 말, 도움되는 말은 반복해서 듣고 새겨야하지 않을까 합니다. 이 외에 컴포넌트 분리 기준에 대해 제가 쓴 글도 남기는 걸로 마무리합니다 !

0
2