ziglog

Search by

Home
2월 2주차 기록

2월 2주차 기록

February 11, 2023 • ☕️☕️ 12 min read

weekly

워크샵은 더 재밌어

배워가기

CSS 스크롤 이모저모

스크롤바 UI 커스텀하기
- ::-webkit-scrollbar : 스크롤바 영역에 대한 설정
- ::-webkit-scrollbar-thumb : 스크롤바 막대에 대한 설정
- ::-webkit-scrollbar-track : 스크롤바 뒷 배경에 대한 설정
스크롤 영역 제한(스크롤링 체인): 부모 영역과 자식 영역의 스크롤이 있을 때, overscroll-behavior: contain을 사용한다.
스크롤 스냅: 스크롤을 조금 움직이면 구분된 영역에 딱 맞춰서 스크롤을 이동시키고 싶을 때, scroll-snap 속성을 사용한다.

🖱️ css overflow overflow-x와 overflow-y 중 하나가 visible이면서 나머지 하나가 scroll 또는 auto일 수 없다. 그리고 overflow 속성의 기본값은 visible이다. 따라서 overflow-x나 overflow-y 중 하나만 scroll 또는 auto로 하면, 다른 축도 scroll이 생긴다. 하나의 축만 scroll을 설정하려면, 다른 축에는 overflow: hidden 등의 속성을 줘야 한다.

Ref 스크롤과 관련된 CSS 속성 3가지

Selection API

selection의 상태
- caret: 범위를 선택하지 않은 상태로, 커서가 깜빡이는 형태이다. selection이 collapsed되었다고 표현한다.
- range: 범위를 선택했을 때의 상태이다.

아래 코드로 현재 커서의 위치를 알 수 있다.

Copy

const range = selection.getRangeAt(0).cloneRange();
range.collapse(true);
const rect = range.getClientRects()[0];

Ref https://developer.mozilla.org/en-US/docs/Web/API/Selection

타입스크립트의 오류 종류

구문 오류 - 타입스크립트가 자바스크립트로 변환되는 것을 차단한 경우
타입 오류 - 타입 검사기에 따라 일치하지 않는 것이 감지된 경우

Copy

let let hello; // -> 구문 오류

console.hello() // -> 타입 오류

하이픈 같아 보이는 문자 헷갈리지 않기

-(하이픈)같아 ‘보이는’ 문자들에 속지 말자. 하이픈같이 보이는 문자들에는 em dash, en dash, hyphen가 있다. 각각은 용도가 좀 다르며, 긴 것부터 짧은 것 순이다.

em dash “—” (U+2014)는 문장 혹은 절의 분리를 나타내는 용도
en dash “–” (U+2013)는 범위를 나타내는 용도
hyphen “-” (U+002D)은 복합 명사 혹은 형용사를 만들기 위한 용도

자세한 내용은 chatGPT에게 물어보면 친절하게 알려준다. 각각 따로 봤을 때는 육안으로 분간하기 불가능에 가까움으로 조심해야 한다.

island 아키텍쳐

island 아키텍쳐는 상호작용이 가능한 요소들을 “아일랜드” 란 개념으로 클라이언트에 독립적으로 전송하며 그 외에는 정적 HTML을 사용하는 방식을 사용해 클라이언트에 전송해야 하는 자바스크립트를 최소화하는 것을 목표로 하고 있다.

변경되지 않는 프레임 콘텐츠를 완전히 무시하고 다른 부분들(섬)을 필요에 따라 로드함으로써 페이지 로딩을 세밀하게 튜닝할 수 있다. 모든 정적 콘텐츠는 성능에 아무런 영향을 미치지 않으면서 제자리에서 역할을 수행할 수 있다. 모든 클라이언트 측 상태 및 탐색이 유지된다.

웹페이지에서 컴포넌트별로 static/dynamic 여부를 구별할 수 있다. (static과 dynamic은 자바스크립트의 필요 여부로 구분한다.) 예를 들어, 이커머스 플랫폼에서 상품 상세 설명 부분은 static이고 이미지 캐러셀 같은 컴포넌트는 dynamic이다.

static한 컴포넌트라면 브라우저에서 일반 html로 렌더링하고, dynamic 컴포넌트는 hydration을 진행한다. island 아키텍처가 다른 아키텍처들과 다른 점은, 각 컴포넌트가 각자의 hydration 스크립트를 가지고 있어 hydration이 컴포넌트마다 독립적으로 실행된다는 것이다.

이때 하나의 컴포넌트에서 병목이 있을 때 다른 컴포넌트에는 영향을 끼치지 않는다. 이를 구현하기 위해서는 프레임워크에서 다음의 조건들을 만족해줘야한다.

static rendering 기능
dynamic components를 임베드할 수 있어야 한다. dynamic components는 각자 script를 가지고 있어 hydrate가 가능하다.
서버사이드, 클라이언트 사이드 렌더링이 모두 가능해야 한다.

island 아키텍처를 구현한 프레임워크에는 Astro, Eleventy 등이 있다.

Ref

merge train

gitlab에서 동시다발적으로 여러 머지 파이프라인이 실행 될 때 머지 파이프라인을 큐에서 넣어서 처리해준다.

예)

개발자 A, B가 작업하는 프로젝트가 있으며, 프로젝트 ci 파이프라인에는 lint가 적용되어 있다.
개발자 A가 프로젝트의 린트를 바꾸는 MR을 생성했다.
B는 린트에 어긋나는 MR을 생성했다.

이 둘을 동시에 merge했을 경우

merge train 설정을 안했으면 merge가 완료된다. lint파이프라인이 실패한 상태로…
merge train을 설정하면 lint 파이프라인이 실패한 MR은 원래 Merge를 취소시킨다.

fixed vs hug contents

fixed
- 내부 컨텐츠의 크기와 상관없이 레이아웃의 width와 height가 정해진다
- fixed container의 내부 컨텐츠는 container에 맞게끔 사이즈를 늘려 영역을 차지한다
hug contents
- 유연한, 적응형의 레이아웃을 제공한다.
- 내부 컨텐츠에 따라 hug container의 크기가 조절된다. (padding만 남겨둔다.)

Ref https://designcode.io/figma-handbook-hug-content-resizing

next image

next app에서 로컬 이미지를 사용하려면 다음과 같이 import하면 되는데,

import profilePic from '../public/me.png'

이렇게 정적 import 구문을 사용하면 빌드 타임에 이미지를 불러온다 (번들에 포함된다.)

🚨 주의! 빌드 타임에 public 폴더에 있는 asset들만 next.js가 서빙해준다. (런타임에 추가된 파일은 next.js가 관리하지 않는다.)

🗂️ react app에서 이미지는 public 폴더에? src 폴더에?

public 폴더

번들러에 의해 관리되지 않고, 원본이 build 폴더에 복사된다

경로가 잘못 되었거나 파일이 없을 경우 컴파일단계에서 에러가 발생하지 않고, 404 에러가 발생한다.

src 폴더

파일을 찾지 못하는 경우, 컴파일 단계에서 에러를 잡을 수 있다.

import할 경우 참조할 수 있는 경로(path) 문자열을 출력한다.파일 단계에서 에러를 잡을 수 있다. https://velog.io/@rimo09/React-Create-react-app-프로젝트에서-이미지-경로를-설정하는-4가지-방법

Ref

nest main.ts의 bootstrap

bootstrap 함수 내에서 NestFactory.create() 메서드가 AppModule를 인수로 받아서 Nest 어플리케이션 인스턴스를 생성하며, 생성된 Nest 어플리케이션 인스턴스에 listen() 메서드를 사용하여 특정 포트로 웹서버를 구동한다.

이때, 서버가 성공적으로 구동하면 listen() 메소드가 Promise 객체를 반환하기 때문에 await를 사용한다. 그래서 main.ts의 bootstrap 함수는 기본적으로 async로 선언되어 만들어진다.

nest의 작업 스케쥴링

nest의 ScheduleModule을 사용하여 크론잡을 흉내낼 수 있다. 크론잡은 정해진 시간에 한번만 돌게 할 수도, 특정 주기로 반복적으로 돌게할 수도 있다.

Ref https://docs.nestjs.com/techniques/task-scheduling

이것저것

vite는 환경변수를 가져올 때 import.meta.env.xx 형식으로 가져온다. (Ref)
dl, dd, dt
- dl: definition list 용어를 설명하는 목록
- dt: 용어의 제목을 넣을 때 사용
- dd: 용어를 설명하는데 사용
<slot>은 웹컴포넌트에서 쓰이는 태그로, 해당 태그를 비워두고 각각을 구현한 마크업으로 대체할 수 있다.

Copy
```
<example-web-component>
  <h1 slot="slot-test">example</h1>
</example-web-component>
```
Set 자료구조의 생성자에는 iterable이 인자로 들어온다. new Set(new Set([1,2,3]))와 같은 형태도 가능하다.
lodash의 compact - 배열에서 falsy 값들을 제거하여 반환해준다

Copy
```
_.compact([0, 1, false, 2, "", 3]); // [1, 2, 3]
```
img 태그의 alt 속성에 이미지의 src가 들어가는 것은 오류다. 이미지에 대한 텍스트 디스크립션을 표현해야하고, 접근성 관련된 테그이기 때문에 이미지에 대하여 관련 내용이 없다면 “공백” 이 맞다.
페이지 레이아웃 구성 시 상위의 페이지 기반해 필요한걸 추출하지 말고, html의 element 단위로 필요한 요소가 무엇이 있을지/ 최소한의 컴포넌트는 무엇인지 고민을 통해, 상위 페이지에서의 비즈니스와 레이아웃 구현을 어떻게 할 지 구현해야 한다.

기타공유

자바스크립트 Scrollend 이벤트

scrollend 이벤트가 있기 전에는, 스크롤이 끝났는지 알 수 있는 방법이 없었다. 그래서 이렇게 썼다.

Copy

document.onscroll = (event) => {
  clearTimeout(window.scrollEndTimer);
  window.scrollEndTimer = setTimeout(callback, 100);
};

scrollend 이벤트가 생기고 나서부터, 훨씬 간단해졌다!

Copy

document.onscrollend = event => { ... }

스크롤 중일 때 복잡한 연산을 수행하는 무거운 태스크를 피할 수 있게 해준다. 그렇게 함으로써 스크롤이 더 많은 메모리와 프로세싱을 처리하면서도 부드러운 스크롤을 가능하게 해준다.

Ref https://developer.chrome.com/blog/scrollend-a-new-javascript-event/

프론트엔드 엔지니어 커리어 로드맵: 주니어를 위한 3가지 전문성 트랙

탁월한 엔지니어의 역량은 다음과 같다.

좋은 코드를 짠다.
작업의 현재 가치를 극대화한다.
데이터에 기반하여 의사결정한다.
동료의 효과적 의사결정을 돕는다.
꾸준히 학습한다.

이보다 조금 더 구체적으로, 프론트엔드 엔지니어가 전문성을 쌓는 방향을 세 가지 트랙으로 생각해볼 수 있다.

웹 특화(Software Engineer)
제품 특화(Product Engineer)
운영 특화(Full-Stack Engineer)

내 관심사는 ‘제품 특화’ 엔지니어라고 생각…했는데 생각보다 더 갖춰야 할 역량들이 많은 것 같다. 프로덕트의 주인이라는 마음가짐으로, 조금 더 사용자에게 좋은 인상을 줄 수 있는 프로덕트를 만들어나가는데 힘써야겠다. 😙

이러한 전문성들을 갖춘, 탁월한 시니어 엔지니어가 되려면 어떻게 해야할까?

기본에 충실하고자 노력한다
명시적 리더가 아니라도 리더처럼 행동한다.
어떤 상황에서든 큰 임팩트를 낸다.

분명 당연한 말들이고, 선배 개발자들에게 자주 들었던 조언들이다. 이제 1년차가 되었으니 주춤주춤은 그만하고 한 명의 어엿한 구성원으로써 팀원들을 돕고, 제품의 성과를 낼 수 있는 개발자로써 도약해야겠다.

Ref https://steady-study.super.site/frontend-engineer-career-roadmap

Create-React-App 대신 Vite? 🤔 Dan Abramov의 답변

Create-React-App(이하 CRA)은 모두가 알다시피, 리액트 앱 개발 환경을 빠르게 설정하기 위한 보일러플레이트다. CRA는 여러 도구를 하나의 패키지로 결합하고 합리적인 기본 구성을 선택하며 도구 간 작은 비호환성을 덮어준다. CRA의 목표는 리액트 사용자에게 손쉽게 리액트 웹앱을 시작하게 해주는 툴을 제공하는 것이었다.

그러나 시간이 지나면서 CRA는 정체되었고, 더 빠른 번들러나 Vite를 내부적으로 사용하는 방식들이 등장했다.

기본적으로 CRA는 온전히 클라이언트에서 동작하므로, 빈 HTML에 자바스크립트 번들 파일이 로드될 때까지 기다려야 한다. 이는 비효율적이지만 클라이언트에서만 리액트를 실행하기 위한 최선의 방법이다. CRA는 좋은 개발 경험을 제공했지만, 좋은 사용자 경험을 제공하지는 못했다. 이러한 문제는 비단 CRA에만 국한된 것이 아니라, 순수 클라이언트 사이드 앱에 모두 내재되어 있는 문제였다.

리액트로 전체 앱을 빌드하는 경우 SSG/SSR 지원 여부가 중요하지만, CRA는 이런 지원이 부족하다. CRA 외부적으로 코드 분할이나 일부 코드가 서버에서 실행되도록 하는 방법(ex. Next.js)들이 존재한다. 리액트는 라이브러리일 뿐이고, SSG/SSR을 위한 라우팅 또는 데이터 페칭은 제공하지 않는다. 컴파일, 렌더링, 라우팅 및 데이터 페칭을 통합하는 범주의 도구는 ‘프레임워크’라고 한다.

리액트 아키텍처는 클라이언트 전용 아키텍처로, 리액트가 훌륭한 사용자 경험을 제공하는 방법은 리액트 자체의 본질에 집중하는 것이다.

리액트는 라이브러리이자 아키텍처다. 프레임워크 없이 리액트를 사용할 수 있지만, 프레임워크와 함께 사용할 때 프레임워크가 리액트 자체를 얼마나 활용할 수 있는지도 궁금하다. 리액트는 클라이언트 사이드 앱으로 이대로 유지될 것이지만, 생태계에 존재하는 리액트를 융합한 여러 프레임워크를 장려한다.

리액트 생태계를 웹과 리액트 자체를 최대한 활용할 수 있는 기본 권장 접근 방식으로 제공한다면, 다음과 같은 옵션들이 있을 것이다.

처음부터 새 프레임워크 만들기
CRA deprecate, Vite template 메인테이닝
CRA 사용 중단, 리액트 프레임워크 제안
CRA가 단일 프레임워크를 사용하도록 만들기
CRA를 런처로 전환

현재 CRA는 5번 옵션인 ‘CRA를 런처로 전환’하는 쪽으로 기울고 있다. CRA를 명령어가 아닌 런처로 전환하여, 권장 프레임워크 목록을 제시하고 프레임워크가 없는 ‘전통적인’ 접근 방식 또한 제공한다. CRA의 원래 목표를 유지하면서도, 새로운 워크플로우로 사용하기 위한 탈출구를 마련해두는 것이다.

Ref https://junghan92.medium.com/번역-create-react-app-권장을-vite로-대체-pr-대한-dan-abramov의-답변-3050b5678ac8

타입스크립트 Intersection 깔쌈하게 만들기

다음과 같은 Intersection 타입이 있을 때,

Copy

export type Intersected = {
  a: number;
} & {
  b: number;
} & {
  c: number;
};

Intersected 타입의 추론 결과를 보면 a, b, c 프로퍼티가 하나의 객체 타입으로 합쳐지는 것이 아니라, 여전히 각자 따로 논다!

이때 다음 타입을 작성하면 예쁘게 합쳐지는 것을 볼 수 있다!

Copy

type Prettify<T> = {
  [K in keyof T]: T[K];
} & {};

Ref https://twitter.com/mattpocockuk/status/1622730173446557697?t=IF1oo2E0i1aA6QCqlwuegg&s=19

ChatGPT로 엄준식 프로그래밍하기

저 아저씨는 정말 별 걸 다 한다 ㅠ 🍎

Ref https://www.youtube.com/watch?v=SdDs0ScOFSU

마무리

이번주는 팀 워크샵 데이가 있었다. 협업 능력을 기르기 위해(?) 방탈출을 했는데, 처음 해보시는 분들도 다들 씽크빅으로 문제를 잘 푸셔서 멋졌다!! 아슬아슬하긴 했지만 탈출에 성공 ✌️ 다같이 하니까 너무 재밌었당. 힙한 곳에서 맛있는 점심도 먹고, 카페에서 회고도 하고 맨날맨날 이렇게 하고 싶다 😎

주말은 완전 체력 방진 데이… 토요일에 스타트업을 탈출한 친구 얘기를 들으며 새벽 3시까지(;;) 술을 마시다 일요일 아침부터 테크트리 해커톤 하러 갔다… 다행히 각성 상태라 하루종일 정신은 빠짝 차리고 했다. 모든 일들을 끝내진 못했지만, 그래도 꽤 많이 진척이 있었다고 생각한다. 테크트리 화이팅!!

Relative Posts:

2월 3주차 기록

February 18, 2023

2월 첫주차 기록

February 4, 2023

지그의 개발 블로그