ziglog

    Search by
    • Home
    • 11월 4주차 기록

    11월 4주차 기록

    November 26, 2022 • ☕️☕️ 8 min read

    백신, 드럼, 그리고 경주

    배워가기

    box-shadow

    box-shadow: 0px 12px 10px 0px rgba(0, 0, 255, .2)와 같이 작성되었다면, 순서대로 offset-x/offset-y/ blur-radius/spread-radius/color를 의미한다.

    • offsetX: 오른쪽으로 얼마나 이동할지(양수일 때)
    • offsetY: 아래로 얼마나 이동할지
    • blur-radius: (블러처리) 클수록 그림자 테두리가 흐려지고 크기는 더 커진다
    • spread-radius: 클수록 그림자의 크기가 커진다 (블러 상관없이)

    brew 맥 패키지 설치 명령어

    • /opt/homebrew/bin: 해당 경로에서 명령어로 사용할 수 있는 프로그램들을 볼 수 있다.
    • 다운받고 에러가 나면 brew info <패키지명> 을 실행해보자. 설치할 때 주의 사항등 여러 정보를 알려준다.
    • brew cleanup <패키지명>: 버전 여러 개 중 최신 버전 이외의 버전들을 모두 삭제한다.

    typescript의 능력과 한계

    • typescript는 컴파일 단계에서 에러를 잡아줄 수 있다. 하지만 모든 에러를 잡아낼 수는 없다.
    • 광범위한 타입에는 any 타입을 쓰기도 한다 (ex. error 객체)
    • API response 값을 타입으로 지정할 때, 런타임에서 타입이 달라질 수 있다. 따라서 실제 API response 의 값과 런타임에서의 값의 타입이 같은지 확인하기 위해 superstruct같은 라이브러리를 사용하기도 한다.

    border-radius 규칙

    • border-radius: 10px; - 직사각형이라고 생각했을 때 4개의 모서리에서 반지름 10px에 해당하는 원의 호를 그린다.

    • border-radius: 1px 2px 3px 4px; - 왼쪽 위부터 시계 방향 순서로 각 반지름에 해당하는 원의 호를 그린다.

    • border-radius: 10px / 20px; - 각 모서리에서 가로 10px(짧은 반지름), 세로 20px(긴 반지름)에 해당하는 타원의 호를 그린다.

    • border-radius: 99999px; - 설정한 border-radius값이 Element의 크기보다 크면, Element의 가로 세로 길이 중 가장 작은 길이의 반의 값으로 각 모서리에 원의 호를 그린다.

    • border-radius: 50%; - 직사각형 4개의 모서리에서 Element의 세로길이 50%, 가로길이 50%에 해당하는 타원의 호를 그린다.

    • border-radius: 50%; - border-radius: 50% / 50% 와 같다.

    css의 px 단위

    디바이스 종류(레티나 디스플레이 여부), 브라우저 또는 설정에따라 0.5px 단위를 그리지 못할 수 있다.

    transform: scale, opacity, box-shadow 등의 속성을 이용해서 착시효과를 일으켜서 해결하기도 한다.

    Nest.js의 library vs application

    Nest.js의 library는 자체적으로 실행할 수 없다는 점에서 application과 다르다.

    • library를 사용하기 위해서는 application에서 library를 가져와서 사용해야 한다.
    • library에 대한 기본 지원은 monorepo에서만 이뤄진다.

    Ref https://docs.nestjs.com/cli/libraries

    CSS 3d 관련 속성

    • perspective: 모니터를 z 평면으로 생각해보자. 3d 입체 모형에서 모니터 뒤에 있는 것 처럼 보이면 z < 0, 모니터 앞쪽으로 튀어나와 보이면 z > 0이다. perspective는 z평면과 나 사이의 거리라고 생각하면 된다. 물체를 가까이서 볼수록 (perspective가 작으면) 물체의 z > 0인 부분은 커보이고 z < 0인 부분은 작아보인다. 반대로 멀리서 볼수록(perspective가 크면) 물체의 z > 0인 부분이 작아지고 z < 0 인 부분은 커 보인다.
    • transform-style: preserve-3d 로 명시된다면 해당 엘리먼트의 자식 엘리멘트들도 각자의 3D-공간을 가지게된다.
    • backface-visibility: 3D에 존재하는 엘리멘트가 앞뒤로 한바퀴 돌았을 때 뒷면을 보이게 할지 여부를 결정한다. (hidden, visible)

    Lottie 애니메이션이 2번 뜨는 이유

    애니메이션을 json 형식의 lottie 파일로 받아서 lottie-web 라이브러리를 통해 렌더링했는데, 자꾸 2개씩 뜨는 게 문제였다.

    이는 lottie의 의도된 동작이라고 한다. 두 번의 렌더링 중 한번은 요소가 DOM에 삽입되기 전 pre-render하는 단계, 다른 한번은 태그가 추가된 이후에 렌더하는 단계다. 이는 모든 애니메이션이 시작하기 전에 준비와 캐싱을 하기 위함이다.

    Ref https://github.com/airbnb/lottie-web/issues/1317#issuecomment-432538085

    Lottie vs gif

    • gif는 계속 loop를 돌며, 멈출(pause) 방법이 없다.
    • gif는 애니메이션에 손실이 발생
    • gif는 투명성(transparency)을 지원하지 않는다.
    • 큰 사이즈의 파일을 렌더링할 때, gif의 FPS(Frames Per Second)가 영향 받는다.
    • gif는 원본 mp4에 비해 용량이 10배까지 더 크다

    그냥… gif 욕만 써놓은 것 같지만 😇 아무튼 프론트 세계에서 gif는 지양하는 게 맞는 것 같다.

    Ref https://medium.com/@bossiwriter/why-choose-lottie-over-other-animation-formats-11905e0ebca8

    이것저것

    • React의 displayName 은 디버깅 속성이다. 개발자가 처음 설정한 displayName으로 보장하지 않는다. (ex. 스토리북을 사용하면 displayName을 임의로 변경해버린다.)
    • 정적 웹사이트를 배포할 때 S3 + CloudFront를 통해 배포하게 되는데, CF자체가 퍼블릭 서비스이기 때문에 내부망에서만 접근을 허용하기 위해서는 WAF인증서를 등록해야 한다.

    기타

    그린랩스 dev-dive

    그린랩스도 개발 컨퍼런스를 하다니! 생각보다도 더 커질 회사인 것 같다. 재미난 세션들이 많아보인다. 😎

    Ref https://www.youtube.com/@user-iu8ft3nh2n/videos

    JSON 시각화 사이트

    JSON을 이쁘게 시각화해주고, 이미지 출력까지 해주는 jsoncrack 라이브러리

    오~ 이쁘다. 근데 다이어그램이 그렇게 와닿는 느낌은 아니다 😬

    Ref https://jsoncrack.com/editor

    State of JS

    state-of-js 2022 설문이 진행중이다! 맨날 결과만 봤었는데, 🤣 근데 설문하려니 계정을 만들어야 한단다. 귀차나 ㅋ

    Ref https://stateofjs.com/en-us/

    11번가 기술 컨퍼런스

    연말이 다가오니 여기저기서 기술 컨퍼런스가 많이 열리는구만! 휴가와 함께 알찬 연말 보내야겠다.

    Ref https://techtalk.11stcorp.com/

    vercel의 edge config

    config data를 불러오는 데 있어서 레이턴시가 낮은 저장소로, edge middleware/ edge function/ serverless function에서 config data를 즉각적으로 읽을 수 있다.

    데이터는 요청이 발생하기 전에 vercel의 모든 edge network region에 복사되어 사용자가 언제 어디서든 즉각적으로 데이터를 불러올 수 있다. edge config의 아키텍처는 push 기반의 CDN과 유사하게 동작하여, 네트워크에 데이터를 바로 배포할 수 있고 즉각적으로 읽을 수 있다.

    lookup latency는 대부분 5ms 이하, read는 15ms 이하로 발생한다.

    A/B 테스팅, 피쳐플래그, 동적 리다이렉션, 요청 차단 규칙 등에 사용될 수 있다.

    Ref https://vercel.com/blog/edge-config-ultra-low-latency-data-at-the-edge

    svelte에 무슨 일이?

    갑자기 왜 저러는?!

    Ref https://npmtrends.com/@angular/core-vs-angular-vs-react-vs-svelte-vs-vue

    E2EE로 안전하게 팀의 env/secret 관리하기

    E2EE를 지원하는 도구로, 오픈소스로 공개되었다!

    🤔 E2EE? End-to-End Encrypt(종단 간 암호화)로, 발신원부터 수신원까지 정보의 암호화를 유지한 채로 전송하는 방식이다. 종단간 암호화가 구현되지 않은 경우 발신원에서 암호화된 정보가 중간 서버에서 복호화된 뒤, 재암호화되어 수신원에게 전달된다.

    Ref

    마무리

    다음 달에 일본 가기 위해 1년 만에 백신을 맞았다. 화이자 BA5 개량백신이라나 뭐라나… 1,2차 때는 꽤 많이 아팠는데, 이번엔 팔만 이틀 욱신거리고 몸은 완전 괜찮았다. 건강해졌나?

    그래서 미쳤다고… 일주일 내내 드럼학원만 갔다 😇 기절각

    주말엔 할머니 생신이라 경주에 갔다오고… 나만 혼자 늦은 밤 기차 타고 올라와서 일요일 일정까지 2개나 소화했다. 요즘 잠을 너무 잘 자는 건 미치도록 피곤해서 그런 걸지도 몰라. 그치만 놓을 수 있는 일은 하나도 없고, 나는 의외로 건강하다. 팀원분들이 요즘 많이 헤롱하셔서 슬프다 😢

    Relative Posts:

    12월 1주차 기록

    December 4, 2022

    11월 3주차 기록

    November 19, 2022
    zigsong

    지그의 개발 블로그

    RotateLinkImg-iconRotateLinkImg-iconRotateLinkImg-icon