dev_H dev_H

라이트하우스 검사 결과에서 나온 퍼포먼스 항목을 하나씩 고쳐보고자 한다 1. Properly size images 페이지에서 사용자 화면에 렌더링된 사이즈보다 큰 이미지를 제공하면 쓸데없는 용량이 낭비되고 페이지 로드 시간이 느려진다고 한다(참고) 즉, 실제로 화면에 렌더링되어야 할 크기보다 실제 이미지의 크기가 너무 크면 느려지고 낭비니까 고치라는 항목이었다 캐러셀에 있는 프로젝트 이미지1,2와 로고 이미지에 대해서 적절한 사이즈를 주어야했다 살펴보니 로고의 경우 렌더된 사이즈는 최대 40*40인데 실제 사이즈는 200*200이었다 프로젝트 이미지들도 실제로 렌더링되어야하는 사이즈에 비해 컸다 밑에 작성할 Serve images in next-gen formats 항목과 같이 해결하기 위해 Next...

웹사이트 성능 최적화 방법 웹사이트 성능 최적화란? 사용자가 웹사이트를 빠르고 효율적으로 이용할 수 있도록 사이트의 로딩 속도를 향상시키고, 자원 사용을 최소화하는 작업을 의미함 웹사이트 성능 최적화를 진행하면 사이트에 대한 UX(사용자 경험)을 개선하고 SEO에도 영향을 줌 실제로 구글에서 했던 유저 이탈률에 관한 조사를 보면 로딩 시간이 3초 이상이면 웹 서비스의 33퍼센트나 이탈률이 증가함 이런 서비스적 관점까지 고려해 웹 사이트 성능 최적화를 고려해야함 Google의 Core Web Vital 그러면 웹사이트의 성능을 어떻게 측정할 수 있을까? 이에 관한 측정 지표로 구글의 core web vitals를 사용함 LCP(최초 콘텐츠 렌더링 시간, Largest Contentful Paint) LCP..

OAuth, JWT OAuth(Open Authorization)란? 인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단으로서 사용되는 접근 위임을 위한 개방형 표준 사용자들이 타사 애플리케이션이나 웹사이트의 계정에 관한 정보를 공유할 수 있게 허용 OAuth가 나오기 전까지 기본 인증이 아닐 경우는 각 애플리케이션들이 각자의 개발한 회사의 방법대로 사용자를 확인하였으나 OAuth가 나오면서 이렇게 제각각인 인증방식을 표준화함 OAuth를 이용하면 이 인증을 공유하는 애플리케이션끼리는 별도의 인증이 필요 없음. 따라서 여러 애플리케이션을 통합하여 사용하는 것이 가능하게 됨 OAuth의 구성 요소 Resou..

버블링, 캡쳐링, 이벤트 위임 버블링 버블링이란? 안쪽에 있는 자식 요소에서 시작해 부모 요소로 거슬러 올라가며 이벤트가 발생하는 것을 버블링이라고 함. 모든 이벤트는 버블링 됨(default) focus와 같이 버블링 되지 않는 몇몇의 이벤트를 제외하고는 대부분의 이벤트는 버블링이 됨 버블링 예시 FORM DIV P 가장 안쪽에 위치한 p 태그를 클릭하면 아래와 같이 작동함 p 태그의 onClick 핸들러가 동작함 바깥 태그인 div의 onClick 핸들러가 동작함 그 위의 태그인 form에 할당된 onClick 핸들러가 동작함 document 객체(DOM tree의 가장 최상위 노드(객체))를 만날 때까지 각 요소에 할당된 onClick 핸들러가 동작함 => 따라서 p만 눌렀을 뿐인데 3개의 aler..

포트폴리오 웹을 제작하고 나서 뭔가 렌더링도 느리고, 최적화 관련 책을 읽은 김에 한번 최적화를 해보고 싶어서 라이트 하우스를 사용해 검사를 해보았다 결과는 좀 충격적^^... Light House란? Lighthouse는 웹 페이지의 품질을 개선하기 위한 오픈소스 자동 도구입니다 - 출처 : 라이트하우스 공식 홈페이지 모든 웹 페이지에 대해 실행할 수 있는 웹 품질 검사기라고 생각하면 된다 라이트 하우스에서는 점수를 어떻게 계산할까? The Performance score is a weighted average of the metric scores. Naturally, more heavily weighted metrics have a bigger effect on your overall Performa..

REST API REST(Representational State Transfer)란? 웹 상의 자원을 HTTP URI를 통해 특정하고 HTTP Method를 통해 해당 자원에 대한 작업을 수행하는 방식을 말함 REST는 웹의 기존 기술과 HTTP 프로토콜을 그대로 사용하기 때문에 웹의 장점을 최대한 활용할 수 있는 아키텍처 스타일임 REST의 구성요소 자원(Resource): URI를 통해 자원의 이름을 나타내고 웹 상에서 해당 자원을 찾을 수 있는 위치를 제공 ex: 'https://www.example.com/products' 행위(Verb) HTTP 메소드(GET, POST, PATCH, DELETE 등) 표현(Representations) 클라이언트와 서버가 데이터를 주고 받는 형태 JSON, ..

얕은 복사, 깊은 복사 얕은 복사와 깊은 복사에 대해서 이해하기 전 알아야 할 것들 데이터 타입, 메모리 할당 데이터 타입에는 기본형 데이터와 참조형 데이터가 있음 기본형 데이터 타입(원시 데이터) string number boolean null undefined symbol 기본형 데이터들은 모두 불변값임. 예시 // 예시1 var a = 'abc'; a += 'def'; ---- // 예시2 var b = 5; var c = 5 b = 7 첫 번째 변수 a에 문자열 'abc'를 할당했다가 'def'를 추가하면 기존의 'abc'가 'abcdef'로 바뀌는 게 아니라 새로운 문자열을 데이터 영역에 만들고 그 주소를 변수 a에 저장함 -> 'abc'와 'abcdef'는 완전히 다른 별개의 데이터임 두 번째..

콜백함수, 비동기 콜백함수 const example = (cb) => { setTimeout(() => { console.log("비동기 함수 완료"); }, 2000); }; console.log("비동기함수 호출"); example(() => { console.log("콜백함수 실행"); }); console.log("비동기 함수 호출 후 코드"); 함수의 인자로 다른 함수를 전달하고 해당 함수의 실행이 끝나면 전달받은 함수를 실행하는 방식임 이를 통해 비동기적인 동작을 구현할 수 있음 하지만 콜백함수로 비동기 동작을 구현하다보면 콜백헬이 발생함 콜백헬이란? 비동기 처리 로직을 구현하기 위해 콜백 함수를 중첩하여 사용하게 되면서 발생하는 것 콜백 함수 내부에 다시 콜백 함수를 정의하고 그 안에 또 콜..