ziglog

    Search by
    • Home
    • 10월 3주차 기록

    10월 3주차 기록

    October 22, 2022 • ☕️ 7 min read

    맨날 술이야

    배워가기

    반응형 디자인과 적응형 디자인

    반응형 디자인은 PC, 태블릿, 모바일 기기 별로 화면 크기를 측정해서 기기별로 화면이 반응해서 달라지는 것이다. 모든 디바이스에서 하나의 템플릿을 사용하고 현재 해상도에 맞는 화면을 렌더링한다. ex) https://www.apple.com/kr/shop/buy-iphone/iphone-14

    적응형 디자인은 모바일웹을 PC웹과 분리해서 별도로 제작하는 것이다. 여러 디바이스에 N개의 템플릿이 존재하고, 감지된 디바이스에 맞는 템플릿을 렌더링한다. 적응형 웹을 만드는 이유는 반응형으로 표현하기 어려운 레이아웃 또는 사용자의 편의성을 위해 모바일 화면에 최적화된 화면을 만들기 위해서이다. ex) https://market-wms.beta.woowa.in/login

    Ref https://www.next-t.co.kr/blog/homepagemade_04

    css will-change, transition-property

    • will-change
      • 요소에 예상되는 변화의 종류에 관한 힌트를 브라우저에 제공케 한다. 그래서 실제 요소가 변화되기 전에 미리 브라우저는 적절하게 최적화할 수 있다. 이러한 종류의 최적화는 잠재적으로 성능 비용이 큰 작업을 그것이 실제로 요구되기 전에 미리 실행함으로써 페이지의 반응성을 증가시킬 수 있다.
      • 페이지가 크고 복잡한 앨범 혹은 슬라이드 다발로 이뤄진 프레젠테이션등 키를 눌러서 페이지를 넘기는 어플리케이션등을 위해선 스타일시트에 will-change를 직접 포함시키는 것이 적절할 것이다. 이것은 브라우저가 미리 변이를 준비하게 해 키가 눌리자마자 페이지간의 팔팔한 애니메이션을 가능케 할 것이다.
      Copy 
      .slide {
  will-change: transform;
}
    • transition-property - transition (단축) 속성의 네 가지 속성 중 하나
      • transition-property: 속성
      • transition-duration: 기간
      • transition-timing-function: 시기 선택
      • transition-delay: 지연

    Ref

    이것저것

    • .npmrc 에 registry를 설정해주면

        1. 해당 registry에 패키지가 있으면 가져오고
        1. 해당 registry에 패키지가 없으면 registry.npmjs.org  에서 가져온다.

    • 애플에서 xcode가 특정버전 이하면 기기 빌드를 막는다. (현재 13.3이상은 가능)

    • Sentry를 적용할 때 enabled 옵션을 사용해서 특정 환경에서만 로그가 남도록 설정해줄 수 있다.

      Copy 
      Sentry.init({
  enabled: process.env.NODE_ENV === "production",
  // ...
});

    • 물류대행과 판매중개는 다르다.

      • 물류대행: 제삼자에게 판매할 수 있는 채널과 물류 시스템을 제공해준다. ex) FBA(Fulfillment By Amazon) , 쿠팡 제트배송
      • 판매중개: 제삼자에게 판매를 할 수 있는 채널만 제공해준다, 물류는 제삼자가 알아서 한다. ex) 옥션, 지마켓

    • <small /> 태그 - 덧붙이는 글이나, 저작권과 법률 표기 등의 작은 텍스트를 나타낸다. (Ref)

    • decodeURIComponent() - encodeURIComponent로 생성된 URI 컴포넌트를 디코딩한다.

      Copy 
      function decodeQueryParam(p) {
  return decodeURIComponent(p.replace(/\+/g, " "));
}

decodeQueryParam("search+query%20%28correct%29");
// 'search query (correct)'

    • Ref

    기타

    Node.js 18.11.0에 추가된 --watch

    이제 더 이상 nodemon, pm2 등을 쓸 필요가 없다!

    Ref https://nodejs.org/api/cli.html?fbclid=IwAR3p8maGg8AiAdDkq6zz9JIwQ47qJn1OU3MAzxItXeRtJceGoJhZ3ZcWFKs#—watch

    lerna 6.0.1

    • pnpm 지원
    • task-runner 추가
    • lerna repair / lerna add-caching을 통한 마이그레이션 지원
    • workspace dependency managing & vercel/turborepo 대비 4배 빠름
    • nx extension 등을 사용할 수 있다.

    Ref https://www.npmjs.com/package/lerna

    zod, class-validator보다 1000배 빠른 타입스크립트 검증 라이브러리

    typescript-json을 만드셨다고 한다.

    Ref https://dev.to/samchon/typescript-json-is-10-1000x-times-faster-than-zod-and-io-ts-8n6

    Node.js v19.0.0

    Node 19버전이 release되었다. 이제 18이 LTS라니.. 😲

    • HTTP(S)/1.1 KeepAlive가 디폴트로 설정됨
    • 커스텀 ESM Resolution adjustments
    • DTrace/SystemTap/ETW에 대한 지원 중단
    • V8 자바스크립트 엔진을 10.8로 업데이트
    • llhttp 8.1.0

    llhttp? > llparse (incremental parser를 C output으로 컴파일해주는 API)의 http 포트로, http_parser를 개선해서 만들었다.

    Ref https://nodejs.org/en/blog/release/v19.0.0/

    다시 sass로 돌아가는 이유

    유명한 CSS-in-JS 라이브러리 중 하나였던 emotion의 메인테이너가 다시 sass로 돌아가려고 한다는 내용이다! CSS-in-JS와 sass의 장단점을 설명하고 있다.

    CSS-in-JS

    • 👍 지역 스코프(Locally-scoped) styles 전역적으로 className이 설정되어 같은 className의 모든 요소에 영향을 미치는 css와 달리, CSS-in-JS는 스타일을 지역 스코프로 설정할 수 있다.
      Copy 
      <div css={{ padding: "0.5rem", border: "1px solid #ddd" }}>...</div>

    CSS Module도 지역 스코프 스타일을 지원하긴 한다.

    • 👍 같은 장소에 위치(Colocation) 특정 컴포넌트에 관련 있는 것들은 한 곳에 모아두는 것이 좋다. CSS-in-JS를 이용하면 관련있는 리액트 컴포넌트들과 스타일 파일들을 한 곳에 배치할 수 있다.

    CSS Module을 사용해도 스타일을 컴포넌트와 같은 곳에 위치시킬 수 있다.

    • 👍 스타일 파일에 자바스크립트 변수를 사용할 수 있다. 스타일에 자바스크립트 변수를 사용하여 중복을 젝하고, 쉽게 스타일을 커스텀할 수 있다.

    • 😐 CSS-in-JS는 새로운 기술이 아니다.

    • 👎 런타임 오버헤드를 증가시킨다. 컴포넌트를 렌더링할 때, CSS-in-JS 라이브러리는 스타일을 plain CSS로 serialize해야 하기 때문이다.

    • 👎 번들 사이즈를 증가시킨다.

    • 👎 React DevTools을 지저분하게 만든다.

    • 😩 CSS rule을 계속해서 집어넣는 것은, 브라우저의 부담을 가중시킨다. 리액트 컴포넌트를 렌더링할 때마다 새롭게 스타일을 집어놓고, 이는 DOM 재계산 비용을 가중시킨다.

    • 😩 SSR이나 다른 컴포넌트 라이브러리들을 사용했을 때 오류가 발생할 수 있다.

    이렇게 보니 CSS-in-JS는 그냥 💩이잖아… 자기들이 만들어 놓고 ‘Bad’도 아닌 ‘Ugly’를 붙이다니 🤷‍♀️

    그래서 다시 plain CSS로 돌아가기로 했고, CSS-in-JS의 두 가지 장점인 ‘지역 스코프 스타일링’과 ‘같은 장소 배치(Colocation)‘을 수행할 수 있는 sass Module을 선택했다.

    그리고… 이제 다시 tailwind css의 물결이 이는 걸까 😬

    Ref https://dev.to/srmagura/why-were-breaking-up-wiht-css-in-js-4g9b

    마무리

    하드한 술자리가 많았던 주였다… 일요일에 해커톤까지 하고 집 와서 기절 😵

    Relative Posts:

    10월 4주차 기록

    October 29, 2022

    10월 2주차 기록

    October 14, 2022
    zigsong

    지그의 개발 블로그

    RotateLinkImg-iconRotateLinkImg-iconRotateLinkImg-icon