pgg-dev

Lighthouse는 구글에서 만든 툴로, 웹사이트의 성능을 측정하고 개선 방향을 제시해 주는 자동화 툴입니다. Lighthouse로 검사하기 Mode - Navigaion: 초기 페이지 로딩 시 발생하는 성능 문제를 분석 - Timespan: 사용자가 정의한 시간 동안 발생한 성능 문제를 분석 - Snapshot: 현재 상태의 성능 문제를 분석 Categories - Performance: 웹 페이지의 로딩 과정에서 발생하는 성능 문제를 분석 - Accessibility: 서비스의 사용자 접근성 문제를 분석 - Best Practies: 웹사이트의 보안 측면과 웹 개발의 최신 표준에 중점을 두고 분석 - SEO: 검색엔진에서 얼마나 잘 크롤링되고 검색 결과에 표시되는지 분석 - Progressive W..

api 키 숨기기 사용량 제한 및 유료, 남용할 경우를 대비해 숨겨야한다 inspect network탭에서 request한 url을 확인할수있다 또한 api key까지 확인할수있다 비공개를 위한 방법 Next.js에서 커스텀 설정을 하기 위해서는 프로젝트 디렉터리의 루트(package.json 옆)에 next.config.js 또는 next.config.mjs 파일을 만들 수 있습니다. next.config.js는 JSON 파일이 아닌 일반 Node.js 모듈입니다. Next.js 서버 및 빌드 단계에서 사용되며 브라우저 빌드에는 포함되지 않습니다. https://nextjs.org/docs/api-reference/next.config.js/introduction Redirects (URL변경됨) Re..

React.FC 타입을 사용할 때 장점 첫 번째, 기본으로 props 값에 children props가 탑재되기 때문에 type 또는 interface에 children: React.ReactNode를 설정해주지 않아도 된다. 두 번째, contextTypes, defaultProps, displayName 등 자동완성이 된다. 하지만 단점도 존재한다. 다음 코드에 mark 속성에 defaultProps를 설정해줬지만 에러가 난다. 즉, defultProps가 제대로 동작하지 않는다. 이 문제는 선택속성으로 바꿔줘야 에러를 해결할 수 있다. import React from "react"; type GreetingsProps = { name: string; mark: string }; const Greet..

1. fork한 저장소를 로컬에 clone $ git clone https://github.com/pgg-dev/fork_repo.git Cloning into 'fork_repo'... remote: Enumerating objects: 91, done. remote: Total 91 (delta 0), reused 0 (delta 0), pack-reused 91 Unpacking objects: 100% (91/91), done. 로컬의 remote repository 확인 $ git remote -v origin https://github.com/pgg-dev/fork_repo.git (fetch) origin https://github.com/pgg-dev/fork_repo.git (push) ..

Interface 클래스 또는 객체를 위한 타입을 지정할때 사용하는 문법 클래스를 interface 로 사용할 때 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 interface Shape { getArea(): number; // Shape interface 에는 getArea 라는 함수가 꼭 있어야 하며, 반환값은 숫자이다. } class Circle implements Shape { // implements 키워드를 사용하면, 해당 클래스가 Shape interface 의 조건을 충족해야한다. radius: numbe..

메모리 영역에서 자바스크립트의 데이터가 처리되는 과정을 살펴보자. 메모리와 데이터에 관한 배경 지식 비트와 바이트 컴퓨터는 모든 데이터를 0 또는 1로 변환하여 기억한다. 0 또는 1로 표현할 수 있는 하나의 메모리 조각을 비트(bit) 라고 한다. 메모리는 매우 많은 비트로 구성되어 있고, 각 비트는 고유한 식별자를 통해 위치를 확인한다. 그런데 0과 1만 표현할 수 있는 비트 단위로 위치를 확인하는 것은 비효율적이다. 비트를 몇개씩 묶어 하나의 단위로 만들면 표현할 수 있는 값의 범위도 늘어남과 동시에 검색 시간도 줄일 수 있다. 하지만 너무 많은 비트를 한 단위로 묶으면 낭비되는 비트가 생길 수도 있다. 이런 고민의 결과로, 크게 문제 되지 않을 적정한 공간을 묶은 것이 바이트(byte) 이다. 1..