개발26 브라우저 렌더링 과정, 그만 검색하고 외우자 (feat.MDN) 웹 성능 성능에 관련한 요인 지연시간 브라우저는 대부분 single thread로 동작하는 것 지연시간 빠른 Load를 위해서는 빠르게 요청하는 것도 중요하다. 네트워크 지연시간을 줄여서 리소스를 빠르게 요청하고, 웹 최적화를 통해 페이지 로드를 빠르게 한다. 네트워크 지연시간 네트워크를 통해 컴퓨터로 바이트를 전송하는데 걸리는 시간 웹 최적화 페이지 로드가 최대한 빠르게 이루어지도록 하는 것 브라우저는 single thread 유저는 브라우저 내에서 수많은 상호작용을 시도하고, 브라우저는 이에 맞게 반응을 제공해야 한다. main thread가 요청된 작업을 수행하며 유저의 상호작용에 반응하기 위해서는 렌더링 시간이 중요하다. 브라우저가 singel thread인 것을 미뤄보아 main thread에 .. 2024. 4. 15. Web font를 subset으로 만들기(feat. python) font tools 커맨드라인 인터페이스로 제공되는 파이썬 라이브러리이다. 폰트 툴즈는 다양한 폰트 조작 기능을 제공하고 있으며, 그 중 폰트 subsetting을 지원하는 도구가 pyftsubset 이다. 설치 python 2.7, 3.4 이후 버전에서 지원한다. $ python --version // 버전 체크 그리고 pip 명령어를 사용해야하기 때문에 pip 설치가 필요하다. mac에서는 기본적으로 python2.7이 설치되어 있고, python3.x을 사용하고 싶다면 pip가 아닌 pip3로 사용해야 한다. 현재 내 컴퓨터는 pyhton3.x이 설치되어 있기 때문에 pip3으로 명령어를 실행했다. $ pip3 install fonttools pyftsubset 설치를 확인한다. $ pyftsubs.. 2024. 4. 15. 엄격하게 commit 하기 (husky, commitlint, lint-staged) Conventional Commit commit 메시지의 규칙 모두 같은 규칙을 사용하며 커밋의 변경 및 수정사항, 기능 구현 등을 명시적으로 표현할 수 있다 커밋을 통한 히스토리도 파악할 수 있다 conventional commit 문서에서 커밋 규칙을 더 자세하게 알 수 있다 husky convential commit을 따르기 위해 node.js 패키지 중 하나인 husky를 사용해 git hooks를 관리할 수 있다 방법 1. husky 설치 npm install --save-dev husky 2. husky 초기화(추천) ./husky/pre-commit을 생성하고, package.json에 prepare 명령어를 추가한다 npx husky init 3. lint-staged 설치 linting .. 2024. 4. 15. nvm을 이용해서 프로젝트 별 node 버전 통일 시키기 nvm? Node.js version manager 의미 그대로 node version을 관리하기 쉽게 제공되는 패키지이다 대표적으로 아래의 명령어가 있다 현재 버전을 포함한 사용가능한 node 목록 $ nvm ls 특정 버전을 설치 $ nvm install {20} 가장 최신 안정화 버전을 설치 $ nvm install --lts 우리가 원하는 것은 버전 통일 javascript는 버전 의존성이 강한 특징을 가지고 있다 프로젝트 별로 버전이 달라서 node 버전을 문서로 관리하고 있다면 아래의 방법이 매우 도움이 될 것이다 .nvmrc nvm 설정 파일 .nvmrc에 해당 프로젝트 버전을 명시한다 명령어를 통해 프로젝트 node 버전으로 변경한다 방법 최상위에 .nvmrc 생성(mac) $ touch .. 2024. 4. 15. Client에서 JWT 생성기 (JSON Web Token, Frontend) JWT 정의 늘려서 JSON Web Token JSON 객체를 활용하여 안전하게 정보를 전송할 수 있는 간결하고 독립적인 개방형 표준이다. 아래는 jwt.io에서 발췌한 부가적인 설명이기 때문에 궁금하신 분만 읽어보세용 😃 디지털 서명이기 때문에 신뢰가 보장되며 비밀키를 사용하면 HMAC 알고리즘을 통해 암호화되며 공개/개인키를 함께 사용할 때는 RSA나 ECDSA 알고리즘을 통해 암호화된다. 사인된 토큰은 클레임에 대한 무결성을 보장하며 토큰이 암호화되는 동안 다른 쪽에서는 클레임에 대한 정보를 알 수 없다. (클레임에 대한 정의는 payload 파트에 있어요!) 만약 공개/개인키로 서명되는 경우에는 개인키를 보유한 쪽이 사용자임을 인증한다. JWT 언제 사용하나요? 1. 권한 인증 JWT의 가장 일반.. 2024. 4. 15. Mac(M1) 개발환경 세팅하기(feat. FrontEnd) Homebrew 설치하기 역할 MacOS 또는 Linux system의 패키지 매니징을 도와주는 툴 Ruby로 이루어진 script homebrew를 가지고 개발환경에 필요한 다양한 패키지들을 다운로드 가능하기 때문에 개발환경을 세팅해야겠다 싶으면 터미널을 통해 첫번째로 설치하자 설치 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 해당 명령어를 입력하고나면 sudo 권한을 요구하며 맥 패스워드를 요구한다. sudo? Linux에서 사용되는 명령어로 최고관리자 권한으로 명령어를 실행하는 것이며 Window의 '관리자 권한으로 실행'과 비슷한 기능이라 생각하면 된다. homebrew를.. 2024. 4. 14. 이전 1 2 3 4 5 다음 728x90 반응형
