아임실버 | 프론트엔드 개발 블로그

프로젝트에서 next.js 13버전을 도입하여 이미지 최적화 한 경험을 토대로 작성해봅니다. Next/Image 컴포넌트의 기능Next/Image 컴포넌트에서 제공하는 대표적인 기능은 다음의 3가지입니다. 각 기능에 대해 어떤 이점이 있는지 정리해 보겠습니다.lazy loadinglazy loading는 이미지 로드하는 시점을 필요할 때까지 지연시키는 기술을 의미합니다.예를 들면 스크린 밖에 있는 이미지들은 로딩을 지연시키고 스크린 안에 있는 이미지만을 로드해서, 불필요한 대역폭 사용을 줄이고 필요한 이미지만 빠르게 로드할 수 있도록 하는 것입니다. 모든 브라우저에서 잘 동작하는 lazy loading 을 구현하기 위해서는 Intersection Observer 혹은 scroll 이벤트를 통해 스크린에 ..

1. 자료형으로서의 타입모든 프로그래밍 언어는 변수를 선언하는 것부터 시작한다. 프로그래밍 언어에서 변수란 값을 저장할 수 있는 공간(메모리)이자 값을 가리키는 상징적인 이름이다. 개발자는 변수를 선언하고 그 변수에 특정한 값인 데이터를 할당한다.// 변수선언 과 데이터할당var name = "zig";var year = 2022;이 예시에서는 name과year라는 이름으로 선언한 변수에서 각각 zig와2022 라는 값을 할당하고 있다. 컴퓨터의 메모리 공간은 한정적이다. 따라서 특정 메모리에 값을 효율적으로 저장하기 위해서는 먼저 해당 메모리 공간을 차지할 값의 크기를 알아야 한다. 값의 크기를 명시한다면 컴퓨터가 값을 참조할 때 한 번에 읽을 메모리 크기를 알 수 있어 값을 훼손하지 않고 가져올 수 ..

4. 타입스크립트의 등장시간이 자나 마이크로소프트는 자바스크립트의 슈퍼셋(Superset) 언어인 타입스크립트(Typescript)를 공개했다. 다트와 달리 자바스크립트 코드를 그대로 사용할 수 있었고, 아래와 같은 단점을 극복할 수 있었기 때문에 많은 환영을 받았다. 💡 슈퍼셋( Superset ) 기존 언어에 새로운 기능과 문법을 추가해서 보완하거나 향상하는 것을 말한다. 슈퍼셋 언어는 기존 언어와 호환되며 일반적으로 컴파일러 등으로 기존 언어 코드로 변환되어 실행된다. ⭐️ 안정성 보장타입스크립트는 정적 타이핑을 제공한다. 컴파일 단계에서 타입 검사를 해주기 때문에 자바스크립트를 사용했을 때 빈번하게 발생하는 타입 에러를 줄일 수 있고, 런타임 에러를 사전에 방지할 수 있어서 안정성이 크게 높아진..

1.2 자바스크립트의 한계1. 동적 타입 언어자바스크립트의 특징 중 하나가 동적 타입 언어라는 것이다. 이 말은 변수에 타입을 명시적으로 지정하지 않고 코드가 실행되는 런타임에 변숫값이 할당될 때 해당 값의 타입에 따라 변수 타입이 결정된다는 것을 의미한다. 예를 들어, 변수 a의 타입이 number 인지 string 인지는 실제 코드가 동작할 때 a 에 값이 할당되는 순간, 그 값이 숫자 1인지 문자 1 인지에 따라 결정된다.2. 동적 타이핑 시스템의 한계// 이 함수는 숫자 a, b의 합을 반환한다.const sumNumber=(a,b)=>{ return a + b;};sumNumber(1,2); // 3위 코드를 실행하면 어떤 에러도 발생하지 않고 정상적으로 동작한다. 즉, 정상적인 코드이다.// ..