2024년 웹 개발의 최신 트렌드와 기법

웹 개발 기술은 빠르게 진화하고 있습니다. 2024년 현재, 몇 년 전의 코딩 방식은 이미 구식이 되어버렸죠. 이 글에서는 "2024년 웹 개발, 이렇게 코딩하세요!"라는 주제로 최신 트렌드와 기법들을 소개하려고 합니다. 1. HTML 최신 기법1.1 이미지 최적화a) Lazy loading: 설명: loading="lazy" 속성으로 이미지 지연 로딩을 구현합니다. b) Picture 요소:  설명: 화면 크기에 따라 다른 이미지를 제공합니다. 1.2 시맨틱 마크업a) Details 요소: 더 보기 숨겨진 내용입니다. 설명: 접을 수 있는 콘텐츠를 만듭니다. b) Dialog 요소: 모달 제목 모달 내용 닫기 설명: 내장 모달 기능을 제공합니다. c) Hgroup 요소: 주 제목 부제..

• format_list_bulleted Javascript
• · 2024. 8. 24.
• textsms

자바스크립트 표준 빌트인 객체 정리: 코딩 테스트 필수 지식

서론최근 오랜만에 코딩 테스트에 도전하게 되었습니다. 현업에 종사하면서 거의 코딩을 잊고 살았던 터라, 약 5년 만에 다시 코딩 테스트를 보게 된 거죠. 처음에는 간단한 알고리즘 문제부터 연습해 보았는데, 오랜 시간 자동 완성 기능에 의존했던 탓인지 기본적인 문법을 직접 작성하는 데 어려움을 겪었습니다. 하지만 문제를 하나씩 풀어나가면서 감각을 되찾기 시작했습니다. 그런데, 빌트인 함수를 까먹고 있었던 탓에 빌트인 함수를 사용하지 않고 코드를 작성하다 보니 코드가 길어지고 가독성이 떨어지는 것은 물론, 성능까지 저하되는 것을 깨달았습니다. 모든 빌트인 함수를 다 외우는 것은 현실적으로 불가능하지만, 코딩 테스트에서 자주 사용되는 함수들은 정리해 두는 것이 좋겠다고 생각했습니다. 이 글에서는 코딩 테스트에..

• format_list_bulleted Javascript
• · 2024. 8. 24.
• textsms

자바스크립트 flatMap 개념 이해하기

JavaScript의 Array 메서드 중 하나인 flatMap을 자주 접하지만, 정확히 어떤 역할을 하는지 이해하기 어려울 때가 있습니다.  예제를 봐도 flatMap이 어떤 데이터 타입으로 결과를 반환하는지 명확하지 않을 때가 있었습니다. 그래서 이 글을 통해 flatMap의 개념을 정리하고 이해를 심화해보겠습니다. 공식 문서 살펴보기flatMapflatMap()는 Array 인스턴스의 메서드로, 각 요소에 맵핑 함수를 적용한 후 결과를 새로운 배열로 평탄화하는 기능을 제공합니다. 이는 map()을 사용한 후 깊이 1의 flat()을 호출하는 것과 동일하지만 (arr.map(...args).flat()), 두 메서드를 각각 호출하는 것보다 약간 더 효율적입니다. 공식 문서는 위와 같이 설명하고 있지만..

• format_list_bulleted Javascript
• · 2024. 8. 24.
• textsms

lodash-es보다 가볍고 빠른 es-toolkit으로 전환하기

es-toolkit이란?es-toolkit은 배열, 수치 계산, 객체 및 문자열 조작과 같은 기능을 제공하는 JavaScript 유틸리티 라이브러리입니다. https://es-toolkit.slash.page/ es-toolkites-toolkit State-of-the-art JavaScript utility libraryes-toolkit.slash.page  공식 설명에 따르면, lodash와 같은 대안에 비해 최대 97%까지 번들 크기를 줄이고, 실행 성능을 2~3배 향상시키며, 간단하고 강력한 TypeScript 지원을 특징으로 하고 있습니다. 2024년 5월 말에 버전 v1.0.0이 출시된 이후 비교적 새로운 라이브러리지만, GitHub에서 4.6천 개의 스타를 받으며 주목받고 있습니다. 검증..

• format_list_bulleted Javascript
• · 2024. 8. 24.
• textsms

TypeScript의 고급 타입 시스템과 React Hooks 활용법

TypeScript는 JavaScript에 강력한 타입 시스템을 도입하여 코드의 품질과 가독성을 크게 향상시킬 수 있습니다. 이 글에서는 TypeScript의 주요 고급 타입 시스템과 React Hooks를 사용하는 방법에 대해 자세히 설명하겠습니다. 이러한 기능을 사용하면 더욱 견고하고 유지보수하기 쉬운 코드를 작성할 수 있습니다. 교차 타입 (Intersection Types)교차 타입이란?교차 타입은 여러 개의 타입을 하나로 결합하여, 객체가 그 모든 타입의 속성을 가지도록 보장하는 방법을 제공합니다. 이를 통해 다중 상속과 유사한 효과를 얻을 수 있습니다.interface Person { name: string; age: number;}interface Employee { empl..

• format_list_bulleted Javascript
• · 2024. 8. 24.
• textsms

TypeScript로 불필요한 변수 선언 없애기: `satisfies` 활용법

이번 글에서는 TypeScript에서 satisfies를 활용하여 코드 내 불필요한 변수 선언을 줄이는 방법을 소개합니다.  satisfies는 코드를 더 간결하고 효율적으로 만드는 데 유용한 기능입니다. 변수 선언 없이 타입을 지정하는 방법타입 주석을 통해 변수 선언 시 타입을 지정할 수 있지만, 이로 인해 불필요한 변수를 선언해야 하는 경우가 많습니다.  satisfies를 사용하면 이러한 불필요한 변수를 줄일 수 있습니다. 구체적인 예시를 통해 알아보겠습니다. 예시 1: 타입 포괄성 체크switch 문에서 모든 가능한 타입을 포괄적으로 확인하는 방법으로 never 타입을 활용할 수 있습니다. 다음은 그 예시입니다.type Animal = "dog" | "cat" | "pig";const awesom..

• format_list_bulleted Javascript
• · 2024. 8. 24.
• textsms