담백한 웹 개발 이야기

우연히 블로그의 성능을 라이트하우스로 측정해 봤는데, 성능 점수가 40점대로 나쁜 성능으로 측정돼서 성능 최적화를 하기로 마음을 먹었다. 🫡 우선 성능 최적화 결과부터 보여주고 문제점을 찾는 방법과 해결 과정을 설명하겠다. 목차 - 📄성능 최적화 결과 - 🖼️LCP 최적화 - 💻TBT 최적화 📄 성능 최적화 결과 라이트하우스에서 모바일 장치로 측정 후 성능 최적화한 결과다. Largest Contentful Paint(이하 LCP)와 Total Blocking Time(이하 TBT)이 매우 안 좋게 나왔다. 웹 페이지의 성능 개선 포인트는 (1)리소스와 (2)메인 스레드로 크게 두 가지 있다. 리소스 개선은 메인 스레드 개선보다 간단하고, LCP는 리소스 개선에 영향을 많이 받아 LCP부터 먼저 시작한다..

저는 주로 웹 페이지의 성능을 측정할 때 Lighthouse를 사용합니다. Lighthouse는 웹 페이지 품질 개선 도구로 Google Chrome에서 공개한 오픈소스이고, Chrome 개발자 도구에서 쉽게 사용할 수 있습니다. Lighthouse에서는 모바일 장치를 선택할 수 있는 데요. 모바일 장치를 선택해서 성능을 측정하면 화면 크기뿐만 아니라 CPU, 네트워크 성능도 조정되는 것을 알고 계셨나요? 이번에는 Lighthouse에서 모바일 장치를 데스크톱과 비교해서 Lighthouse 모바일 장치 이해에 대해서 알아보겠습니다. 목차 1. 장치 화면 2. 장치 성능 부록) 성능 탭의 측정 결과와 다른 이유 1. 장치 화면 Lighthouse는 모바일 화면과 데스크톱 화면을 각자 다른 방식으로 표시합니..

안녕하세요. 웹 개발 지식을 알려드리는 조드래곤나인입니다. 인스타그램과 같은 SNS에서 개발자 도구를 열면 Self-XSS 경고가 나오는 것을 보신 적 있으실 겁니다. Self-XSS 공격을 당하면 SNS 계정을 해킹 당할 수 있어서 경고하는 건데요. 오늘은 Self-XSS, SNS 해킹에 대해서 알아보겠습니다. 목차 Self-XSS란? 공격 방법 피해 범위 Self-XSS란? Self-XSS(Self Cross-Site Scripting)는 사용자가 자신을 공격한다는 의미의 "Self"와 Cross-Site Scripting의 약어인 "XSS"의 합성어입니다. 공격자가 웹 사이트의 취약점을 찾아서 공격하는 XSS 공격과 달리 Self-XSS는 사용자가 직접 코드를 실행하게 해서 공격하는 방식입니다. 공..

안녕하세요. 웹 개발 지식을 알려드리는 조드래곤나인입니다. 디버깅을 하기 위해 console 객체의 log, info, error, dir, table 등 다양한 메서드를 활용하곤 합니다. 텍스트와 객체 이외에도 CSS를 사용할 수 있는데요. 오늘은 console.log에서 CSS 사용 방법을 알아보겠습니다! 목차 활용 사례: Self-XSS 주의 CSS 사용 방법 지원하는 CSS 범위 활용 사례: Self-XSS 주의 대중적으로 사용하는 서비스에서 활용 사례를 찾아보면 Self-XSS에 대한 주의를 주고 있습니다. Meta에서 운영 중인 Instagram, Threads, Facebook에서는 아래와 같이 Self-XSS에 대한 주의를 주고 있습니다. Google 번역기에서는 다음과 같이 주의를 주고 ..

안녕하세요. 웹 개발 지식을 알려드리는 조드래곤나인입니다. 개발자가 되고 싶은데 어떤 프로그래밍 언어를 시작할 모르겠거나, 학교나 관심으로 프로그래밍 언어를 많이 학습했는데, 어떤 것을 선택할지 고민 중이신 분들이 있을 것 같습니다. 이런 분들을 위해 오늘은 2023년 4분기에 자주 사용된 프로그래밍 언어 순위, 프로그래밍 언어 추천에 대해서 정리해 봤습니다. 순위는 개발자들이 가장 많이 사용하는 Github을 기준으로 정리했습니다. 목차 Stars 순위 Pull Requests 순위 Pushes 순위 Issues 순위 Stars 순위 Stars 순위는 개발자들이 오픈 소스나 프로젝트에 관심을 표현한 순위입니다. 프런트엔드 개발에 주로 사용되는 JavaScript는 2위, TypeScript는 6위를 하..

자바스크립트 변수명에는 영문, 숫자, 한글 이외에도 언더스코어 기호인 _를 사용할 수 있습니다. 언더스코어는 달러 기호와 마찬가지로 특별한 의미를 부여할 때 사용합니다. 언더스코어는 어떤 의미를 가지고 있고, 어떻게 활용하는지 알아보겠습니다. _ 변수 언더스코어 기호인 _는 변수, 함수, 속성, 이벤트 등의 이름에 사용할 수 있습니다. 예를 들어 다음과 같은 변수명은 모두 정상 문법입니다. const _name = "Peter"; const _1 = 100; const _$ = "dollar"; const _a_b = "a and b"; _ 의미 및 사용 사례 3가지 언더스코어는 자바스크립트 자체에서는 특별한 의미를 가지지 않지만, 코딩룰에서 의미를 부여해서 사용됩니다. 사례 1: 미사용 변수를 나타낼 ..

자바스크립트 변수명에는 영문, 숫자, 한글 이외에도 달러 기호인 $를 사용할 수 있습니다. 과거에 자주 사용했던 jQuery나 오픈 소스 코드를 보면 자주 사용되는 것을 알 수 있습니다. 달러 기호는 어떤 의미를 가지고 있고, 어떻게 활용하는지 알아보겠습니다. $ 변수 달러 기호인 $는 변수, 함수, 속성, 이벤트 등의 이름에 사용할 수 있습니다. 예를 들어 다음과 같은 변수명은 모두 정상 문법입니다. const $name = "Peter"; const $1 = 100; const $_ = "underscore"; const $a_b = "a and b"; $ 의미 및 사용 사례 3가지 $는 자바스크립트 자체에서는 특별한 의미를 가지지 않지만, 코딩룰에서 의미를 부여해서 사용됩니다. 사례 1: DOM 요..

TDD와 BDD의 정의 TDD(Test-Driven Development) TDD(Test-Driven Development)는 테스트 주도 개발이라고 하며, 함수나 기능에 대한 테스트 케이스를 최우선 먼저 작성하고, 그 테스트를 통과하기 위한 최소한의 코드를 작성하는 개발 방법론입니다. BDD(Behavior-Driven Development) BDD(Behavior-Driven Development)는 행동 주도 개발이라고 하며, 사용자 관점에서 애플리케이션의 행동에 초점을 맞춰 테스트 케이스를 작성하는 개발 방법론입니다. TDD와 BDD의 차이점 3가지 1 테스트 케이스 작성 TDD는 테스트 코드 작성자 관점에서 테스트 케이스를 작성하고, 기능에 초점을 맞춥니다. 반면에 BDD는 사용자 관점에서 테..

글의 목적 재사용 가능한 모듈 또는 컴포넌트를 만드는 작업은 비용을 절약하는 데 큰 역할을 한다. 재사용성 관련해서는 난이도 3배의 법칙이 있다. 재사용 가능한 모듈을 만드는 작업은 단일 소프트웨어에서 사용할 모듈을 개발할 때보다 3배 어렵다는 법칙이다. 프런트의 역할이 많아지면서 소프트웨어의 볼륨이 커졌다. 재사용 가능한 모듈과 컴포넌트를 만들지 않으면 유연한 요구사항 대응과 개발 비용이 많이 소비될 수 밖에 없다. 재사용 가능한 코드 개발을 위해서 어떠한 원칙들을 지켜야 하고 어떤 과정이 있는 지 정리한 포스트이다. 재사용성 재사용을 위한 소프트웨어 개발은 장래의 프로젝트에서 재사용할 수 있는 모듈을 현재 소프트웨어 개발 과정에서 창출하는 것을 의미한다. 다른 소프트웨어에서 재사용하기 위한 소프트웨어..

모노레포는 여러 개의 서브 프로젝트를 한 개의 레포지토리에서 관리하는 운영 방식입니다. 카카오 FE 개발자로 있을 때는 Lerna를 사용해서 모노레포를 구성했는데요. Documentation | Lerna Lerna is a fast, modern build system for managing and publishing multiple JavaScript/TypeScript packages from the same repository. lerna.js.org 요세는 Turborepo를 많이 활용하는 것 같습니다. Turbo Turbo is an incremental bundler and build system optimized for JavaScript and TypeScript, written in R..

명세 기반 테스트란 요구사항 정의서, 설계서와 같은 명세서를 바탕하며, 테스트 케이스를 도출 및 실행하여 결함이 없는 것을 보장하는 기법입니다. 다음과 같이 5가지 방법으로 테스트 케이스를 작성할 수 있습니다. 1 동등 분할 명세 기반 테스트 대상의 데이터 구간을 일정 간격으로 분할하여 테스트 케이스를 구성하는 방법입니다. 보통 데이터의 구간의 중간값을 대푯값으로 사용합니다. 2 경곗값 분석 명세 기반 테스트 대상의 데이터에서 반복 구문의 경곗값을 기준으로 케이스를 구성하는 방법입니다. 예를 들어 최솟값, 최솟값 + 1, 중간값, 최댓값, 최댓값 - 1 의 값을 사용합니다. 3 결정 테이블 명세 기반 테스트 입력값과 결괏값을 테이블로 구성하여 테스트 케이스 및 절차를 구성하는 방법입니다. 애플리케이션 수..

브라우저 캐시는 웹 사이트와 애플리케이션의 성능을 향상시키는 중요한 기술입니다. 브라우저 캐시는 이전에 가져온 리소스들을 재사용함으로써 네트워크 트래픽과 레이턴시를 줄여줍니다. 이 글에서는 브라우저 캐시의 개념과 종류, 캐싱 정책과 유효성 검사, 그리고 캐싱의 장단점에 대해 알아보겠습니다. 브라우저 캐시의 개념 브라우저 캐시는 웹 브라우저가 사용하는 사설 캐시입니다. 사설 캐시는 단일 사용자가 전용으로 사용하는 캐시로, 사용자의 컴퓨터나 모바일 기기에 저장됩니다. 브라우저 캐시는 사용자가 방문한 웹 페이지의 리소스들을 저장하고, 다시 방문할 때 재사용합니다. 예를 들어, 이미지, 스타일 시트, 자바스크립트 파일 등이 브라우저 캐시에 저장될 수 있습니다. 이렇게 하면, 네트워크 요청을 줄이고 리소스를 보여..