본문 바로가기
반응형

Frontend34

브라우저 렌더링 과정, 그만 검색하고 외우자 (feat.MDN) 웹 성능 성능에 관련한 요인 지연시간 브라우저는 대부분 single thread로 동작하는 것 지연시간 빠른 Load를 위해서는 빠르게 요청하는 것도 중요하다. 네트워크 지연시간을 줄여서 리소스를 빠르게 요청하고, 웹 최적화를 통해 페이지 로드를 빠르게 한다. 네트워크 지연시간 네트워크를 통해 컴퓨터로 바이트를 전송하는데 걸리는 시간 웹 최적화 페이지 로드가 최대한 빠르게 이루어지도록 하는 것 브라우저는 single thread 유저는 브라우저 내에서 수많은 상호작용을 시도하고, 브라우저는 이에 맞게 반응을 제공해야 한다. main thread가 요청된 작업을 수행하며 유저의 상호작용에 반응하기 위해서는 렌더링 시간이 중요하다. 브라우저가 singel thread인 것을 미뤄보아 main thread에 .. 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.
npm와 npx, 언제 쓰는거야? npm javascript(Node.js) package manager javascript 개발자가 패키지된 모듈을 쉽게 공유할 수 있도록 돕기 위해 2009년에 오픈 소스 프로젝트로 생성되었다 package를 200만개 이상 보유하고 있는 소프트웨어 레지스트리이다 해당 패키지를 설치하고 사용할 수 있는 커맨드 라인이다 npx javascript(Node.js) package excute 의미론적으로 실행을 하는 커맨드 라인이다 npm 5.2 버전부터 제공되었고, npm과 별개가 아닌 npm에서 제공하는 도구이다 레지스트리에 존재하는 패키지를 설치하지 않아도(npm install) npx를 이용해서 실행할 수 있다. npx를 통해 일회성으로 실행이 가능하다. npx, 왜 나타났나? npm을 이용해서 패키.. 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.
728x90
반응형

티스토리툴바