담백한 웹 개발 이야기

우연히 블로그의 성능을 라이트하우스로 측정해 봤는데, 성능 점수가 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는 모바일 화면과 데스크톱 화면을 각자 다른 방식으로 표시합니..

개발자도구에 있는 Console 탭에서 디버깅에 유용한 유틸 함수를 제공합니다. 오늘은 알고 있으면 언젠간 써먹을 Console 탭 유틸 함수를 알아보겠습니다. 목차 - clear(): 콘솔 로그 모두 제거하고 싶을 때 - copy(param): 복사하고 싶을 때 - $_: 이전 실행 결괏값 참조하고 싶을 때 - $(selector), $$(selector): DOM 참조하고 싶을 때 clear(): 콘솔 로그 모두 제거하고 싶을 때 clear() 함수는 현재 콘솔 패널에 표시되고 있는 로그들을 모두 제거합니다. 로그를 모두 제거하고 새로운 작업을 하고 싶을 때 유용합니다. clear() 실행 후에는 Console was cleared와 같은 문구가 표시됩니다. copy(param): 복사하고 싶을 때 ..

안녕하세요. 웹 개발 지식을 알려드리는 조드래곤나인입니다. 인스타그램과 같은 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는 사용자가 직접 코드를 실행하게 해서 공격하는 방식입니다. 공..

안녕하세요. 웹 개발 지식을 알려드리는 조드래곤나인입니다. 제가 마이스터고에 입학할 당시에는 소프트웨어 전문 마이스터고가 없었는데, 지금은 전국에 5개 학교에서 소프트웨어를 전문적으로 교육 후 취업을 연계하고 있습니다. 오늘은 5개 학교 중 3개의 학교를 추려서 소프트웨어 마이스터고의 웹 프로그래밍 과정과 취업 현황을 정리해 봤습니다. 목차 광주소프트웨어마이스터고 대덕소프트웨어마이스터고 대구소프트웨어마이스터고 광주소프트웨어마이스터고 학교 및 학과 정보 광주광역시 광산구에 위치한 광주소프트웨어마이스터고는 2015년 10월에 마이스터고로 지정되었고, 2017년 3월 1일에 교명을 개정했습니다. 학과는 소프트웨어개발과, 스마트 IoT과, 인공지능과가 있고, 웹 관련 교육은 소프트웨어개발과에서 교육합니다. 웹 ..

안녕하세요. 웹 개발 지식을 알려드리는 조드래곤나인입니다. 디버깅을 하기 위해 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 요..

스프린트(Sprint) 스프린트란 프로젝트를 작은 단위로 나누고, 각 단위마다 제품을 개발하고 배포하는 방식입니다. 스프린트는 보통 2주에서 4주 정도의 기간으로 정해지며, 프로젝트의 변화에 유연하게 대처할 수 있습니다. 스프린트 플래닝(Sprint Planning) 스프린트 플래닝은 스프린트가 시작하기 전에 하는 회의입니다. 이 회의에서는 팀과 고객이 함께 다음 스프린트의 목표와 방법을 정합니다. 스프린트 플래닝은 프로젝트의 우선순위와 기대치를 맞추고, 팀워크를 강화하는 데 도움이 됩니다. 플래닝 포커(Planning Poker) 플래닝 포커는 스프린트 플래닝에서 일정을 산정하는 방법입니다. 이 방법은 팀원들이 카드를 이용하여 일정 활동의 기간을 비밀리에 표시하고, 공개한 후, 의견을 나누고 합의하는 ..

1 KISS(Keep It Simple, Stupid / Keep It Short and Simple) 코드를 작성할 때 최우선 가치를 단순성과 간결성에 둬야 한다는 격언입니다. 복잡한 코드는 읽기 어렵고 수정하기 어렵습니다. 코딩 중에도 코드가 동작할 수 있는 가장 간단한 방법은 무엇인지 항상 질문을 던져야 합니다. 복잡함으로 향하는 상황 1 새롭게 배운 기술을 사용하고 싶을 때 2 장래의 필요에 대비하고 싶을 때 3 멋대로 요구사항을 추가할 때 2 YAGNI(You Aren't Going to Need it) 확장성을 고려해서 넣은 설계라도 예상은 대부분 빗나갑니다. 빗나간다는 것은 거기에 들인 시간이 낭비되었고 버려진다는 의미입니다. 범용성보다는 단순성을 생각해야 합니다. 범용성이 가져다주는 재사용..

네트워크 필터에서는 리소스 종류에 따라 필터링을 할 수 있습니다. 이 포스트에서는 자주 사용되는 리소스 위주로 정리했습니다. Doc HTML 문서에 대한 리소스를 확인할 수 있습니다. SSR를 정상적으로 수행 중인지 확인할 때 용이합니다. JS JavaScript에 대한 리소스를 확인할 수 있습니다. Fetch/XHR JavaScript에서 실행된 비동기 요청 리소스를 확인할 수 있습니다. fetch() 함수, XMLHTTPRequest 객체 실행을 확인할 수 있습니다. CSS CSS에 대한 리소스를 확인할 수 있습니다. Font 폰트 파일에 대한 리소스를 확인할 수 있습니다. 웹 페이지 로드 후 폰트가 바뀌거나 로드 시간이 늦을 때 유용합니다. Img 이미지 리소스를 확인할 수 있습니다. 이미지 사이즈..