ziglog

    Search by
    • Home
    • 7월 5주차 기록

    7월 5주차 기록

    July 30, 2022 • ☕️ 6 min read

    4기 크루들과의 만남

    배워가기

    SEO 깨알지식

    • 사이트맵 Sitemap
      • SEO를 위한 기본 세팅 작업
    • 캐노니컬 태그 canonical tag
      • 검색 엔진 최적화에서 중복 컨텐츠 문제를 방지하는 데 도움이되는 HTML 요소
      • link 태그에 진짜 링크가 어디인지 지정할 수 있다.
    Copy 
    <head>
   <link rel="canonical" href="https://www.mysite.com/shop">
</head>
    • 디스어보우 파일 disavow file
      • disallow의 오타아님
      • 다른 도메인에서 나의 웹사이트로 연결되는 선택된 링크를 비활성화

    Ref https://developers.google.com/search/docs/advanced/sitemaps/overview?hl=ko

    url의 trailing slash

    trailing slash 는 URL이 바라보는 리소스가 파일인지 디렉토리인지 구분하게 해준다. 그러나 기존에 우리가 접하던 대부분의 웹사이트와 달라 보여 직관적이지 않게 느껴질 수 있다.

    Copy 
    www.baemin.com/newsletter  <= newsletter라는 파일을 의미
www.baemin.com/newsletter/ <= newsletter라는 디렉토리를 의미 + 디렉토리를 바라볼경우 기본파일은 index.html 파일을 가리킨다

    next.js에서 next.js.config 파일에 아래와 같이 traillingSlash옵션을 true로 주면 trailing slash가 있는 url을 trailing slash를 제거하고 리다이렉션 해준다. ex) /about/ -> /about

    Copy 
    module.exports = {
  trailingSlash: true,
};

    👩‍🏫 s3에서 trailing slash로 서브디렉토리 index.html로 접근하려면 객체 레벨 리다이렉트가 가능한 s3 정적호스팅이 활성화 되어있어야 한다. s3 정적호스팅을 사용하지 않을 경우 request url rewrite처리가 필요한데, cloudfront function을 생성해서 해결할 수 있다.

    dialog HTML 태그의 웹접근성

    • role="dialog" 붙이면 이 마크업은 “dialog”임을 명시한다.
      • dialog role은 웹 페이지에서 메인 UI와 별도로 표시되는 HTML 마크업을 명시한다.
    • aria-labelledby 은 다이얼로그 제목을 나타내는 요소의 ID reference list를 명시한다.
      • ID reference list 는 띄어쓰기로 구분하여 여러개의 id를 입력한다. (ex: aria-labelldby="id1 id2 id3" )
      • aria-labelledby 는 브라우저가 접근 가능한 요소의 우선순위를 따질 때 가장 우선 순위가 높다. (스크린리더 혹은 tab으로 요소들 사이에서 이동할 때 가장 먼저 접근한다)
      • 다이얼로그 외에 다른 태그에서도 aria-labelledby 를 사용하는 경우가 있다.
    • aria-describedBy 는 다이얼로그 내용(설명)을 나타내는 요소의 ID reference list를 명시한다.
    Copy 
    <div
  role="dialog"
  aria-labelledby="dialog-title"
  aria-describedby="dialog-desc"
>
  <h1 id="dialog-title">제목</h1>
  <div id="dialog-desc">설명</div>
</div>

    위 예제에서,

    • aria-labelledby="dialog-title" → h1 요소를 가리킨다.
    • aria-describedby="dialog-desc" → div 요소를 가리킨다.

    스토리북에서 webpack5 사용하기

    최신 버전의 storybook 번들러는 디폴트로 webpack 4버전을 사용한다. webpack 5버전을 사용하기 위해서는 간단한 추가 설정을 해줘야한 다.

    @storybook/builder-webpack5, @storybook/manager-webpack5 를 각각 devDependency로 추가한 후, storybook의 main.js 에서 아래 설정을 추가해주면 된다.

    Copy 
    module.exports = {
  core: {
    builder: "webpack5",
  },
};

    HTTP header의 underscore

    HTTP header에 underscore를 쓰는 것은 HTTP 스펙상 오류는 없지만, nginx 등의 웹서버에서는 이를 CGI 명령어로 해석하여 제대로 받아들이지 못하는 경우가 있다. header에 underscore(_) 대신 dash(-)를 사용하거나, nginx의 underscores_in_headers 설정을 on 으로 바꿔서 해결할 수 있다.

    Ref https://www.grouparoo.com/blog/dont-use-underscores-in-http-headers https://dev.to/thesameeric/dont-use-underscores-in-your-http-headers-gfp

    react-query의 InvalidateQueries vs removeQueries

    • InvalidateQueries는 해당 쿼리키의 캐시값을 stale 상태로 만든다.
      • 따라서 다음에 해당 쿼리키가 사용되면 refetch된다. refetch되는 동안에는 기존 캐시값을 그대로 data로 return한다
    • removeQueries는 해당 쿼리키에 해당하는 캐시값 자체를 삭제한다.
      • 따라서 다음에 해당 쿼리키가 사용되면 refetch되며, refetch되는 동안 undefined를 data로 return한다

    container가 flex vs block

    inner span의 line-height가 16이고, vertical padding이 각각 2px일 때,

    • container가 flex이면 최종 height가 19.99px로 딱 맞아 떨어지지만.
    • container가 block이면 최종 height는 20.895px로 한참 다르다. (목표는 20px)

    왜 그런지는 모르겠다 🤷‍♀️

    regex [0-9]와 \d 의 차이

    Huffman-coding은 \d 를 ASCII 숫자로 인식하기 때문에, [0-9] 를 사용하는 것이 바람직하다. (성능은 더 안 좋을 지도?)

    It seems to me very dangerous to use \d, It is a poor design decision in the language, as in most cases you want [0-9]. Huffman-coding would dictate the use of \d for ASCII numbers.

    Ref https://stackoverflow.com/questions/890686/should-i-use-d-or-0-9-to-match-digits-in-a-perl-regex

    이것저것

    • 유저는 한 페이지에서 많은 정보를 보여줘서 스크롤이 생기는 것보다 스크롤 없이 한눈에 파악할 수 있는 양의 정보를 보는 것을 선호한다. pagination을 할 때 한눈에 볼 수 있는 정도의 pageSize를 default 값으로 설정하자.
    • 크롬에서 잘뜨는 날짜가 IE에서만 Invalid Date로 뜨는 경우가 있다. new Date() 로 날짜 생성 시, IE에서 날짜를 파싱하지 못하는 경우가 있기 때문이다. (ex. 2022. 07. 30 은 OK, 2022-07-30 은 에러) (Ref)
    • es5 d.ts의 array map 메서드에 generic 타입이 선언되어 있다. 원하는 타입으로 가공해서 결과로 도출할 때 유용하다.
      Copy 
      map<U>(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[];
    • Bastion이란, 외부와 통신이 가능하며 내가 문지기로 사용할 도구다. 다른 VPC의 사설 IP로 연결할 경우, 해당 VPC의 Bastion에만 공인 IP를 할당해준다면 Proxy처럼 동작하여 외부 트래픽을 수용하거나 거부할 수 있다. (Ref)
    • 정규표현식
      • /(a|b|c)/ 보다 /[abc]/ 가 성능이 좋다.
      • new RegExp('s') 보다 /s/ 가 성능이 좋다.
    • 상태 관리 라이브러리와 React Context는 완전히 별개의 개념이다. Context는 전역 상태 관리를 할 수 있는 수단이고, 상태 관리 라이브러리는 상태 관리를 더욱 편하고, 효율적으로 할 수 있게 해주는 기능들을 제공해주는 도구이다.
    • Gitlab에서 MR 스쿼시 머지는 Commit 수가 2개 이상이어야 MR 제목을 병합 커밋명으로 사용한다. 커밋이 하나 있으면 해당 커밋명을 사용한다.
    • https://source.chromium.org/ 에서 크로미움 코드를 간편하게 찾아볼 수 있다.
    • text-align은 block 요소 안에 있는 inline 요소 (이미지, 텍스트)의 정렬을 결정한다.

    마무리

    나의 소중한 2019년 맥북 프로 16인치는… 애플 공인센터를 거쳐 사설에 가셨다. 애플은 진짜 양아치놈들이 맞다. 사설에서 적당한 가격으로 수리해주면 좋겠다…

    이번주는 기능개발에만 거의 몰두했다. 하고싶었던 피쳐라 이것저것 사소한 것 의견도 내가면서 열심히 개발하고 있다. 이번 스프린트에 무사히 잘 나갔으면!

    밋업 발표도 잘 마무리했다. 발표까지 해버렸으니 이제 그룹을 더 부흥시킬 일만 남았다…

    유캔두에 참여했던 4기 크루들을 만났당. 한 기수 지났을 뿐인데 정말 연령대가 훅 낮아졌다. 코치님과 3-4기 크루들과 신나게 떠들다 왔다. 양평방 조아

    Relative Posts:

    8월 1주차 기록

    August 6, 2022

    7월 4주차 기록

    July 23, 2022
    zigsong

    지그의 개발 블로그

    RotateLinkImg-iconRotateLinkImg-iconRotateLinkImg-icon