Front End Develop Front End Develop

2025년 크롬 개발자 도구(DevTools)는 웹 개발자들에게 더욱 강력한 도구를 제공하며, 디버깅과 최적화를 한층 더 쉽게 만들어 주고 있습니다. 이번 업데이트에서는 특히 성능, 보안, 그리고 사용자 경험 개선에 초점을 맞춘 여러 기능이 추가되었습니다. 아래는 주요 기능과 이를 활용하는 방법을 소개합니다.1. DOM 크기 최적화 (Optimize DOM Size)DOM 트리가 너무 크면 페이지 성능이 저하될 수 있습니다. 크롬 DevTools의 새로운 기능인 DOM 크기 최적화(Optimize DOM Size) 기능은 DOM 요소 수와 깊이를 분석하고 성능 병목현상을 일으키는 특정 노드를 바로 찾아 수정할 수 있게 도와줍니다.사용 방법성능(Performance) 패널에서 페이지 로드 기록을 시작합니다..

2024년이 끝나기전에 2024년을 회상하며..회고글은 노션에 쓰겠지만, 블로그를 조금씩 다시 쓸 수 있는 시간이 생길 것 같다는 생각이 든다.아침에 일어나서 저녁이 올 때까지 꽤나 많은 시간이 있겠지만, 그 속에서 시간을 알차게 보내고 잠이 들면 다시 아침이 온다.2023년에 시작했던 것은 2024년에 마무리가 되고, 2021년에 시작했던 것은 현재 진행중이다.2015년에 처음 이 직업을 택하고 시작할 때처럼 설레임으로 가득하다.2019년에 첫 이직을 통해서 많은 것을 느꼈다.2025년이면 이제 10년차다.10년이면 강산이 변한다고 하는데, 나는 여전히 2015년에 머물러 있다.글을 쓰기 위해서 다시 컴퓨터를 어루만지는 것이 여전히 산뜻하다.

IE가 더 이상 서비스하지 않는 브라우저가 되고 나서, 우리는 다양한 HTML5 요소와 CSS를 사용해서 스타일링할 수 있게 되었습니다. 그 중에서 details 요소는 특히, IE에서 전혀 지원하지 않는 요소였는데요. Can I Use(https://caniuse.com/?search=details)에서 확인해보면 더 이상 걱정하지 않아도 될 정도의 서비스 범위를 가지고 있는 것으로 확인됩니다. details 요소를 사용해서 자주 사용하는 Q&A 컴포넌트를 만들어보도록 하겠습니다. Q&A는 주로 아코디언(Accordion)이라는 UI 컴포넌트로 만들게 됩니다. Q. 궁금한 것이 있어요. 저의 대답은 이렇습니다. 저의 대답은 이렇습니다. 저의 대답은 이렇습니다. 저의 대답은 이렇습니다. 저의 대답은 이렇..

최근 React 생태계에 몇 가지 중요한 변화가 있었습니다. Create React App 지원 중단, react.dev 출시, Next.js 및 Remix와 같은 대체 프레임워크의 인기 증가가 포함됩니다. Create React App 추천 X 우선 Create React App이 추천이 되지 않습니다. Next.js 또는 Remix 등을 추천하고 있지만 클라이언트 사이드 핸들링만 하는 경우에는 Vite 또는 Parcel을 권유하고 있습니다. If you’re still not convinced, or your app has unusual constraints not served well by these frameworks and you’d like to roll your own custom setup..

Decorators const Type Parameters Supporting Multiple Configuration Files in extends All enums Are Union enums --moduleResolution bundler Resolution Customization Flags --verbatimModuleSyntax 모든 링크들은 원문을 가리킵니다. Decorators 데코레이터는 클래스와 멤버를 재사용 가능한 방식으로 사용자 정의할 수 있게 해주는 곧 출시될 ECMAScript 기능입니다. class Person { name: string; constructor(name: string) { this.name = name; } greet() { console.log(`Hello, ..

2022년에도 많은 일들이 있었습니다. 2023년에도 UX/UI에 있어서 끊임없는 변화는 당연합니다. UX 디자인의 좋은 예를 따르고 복제하는 것이 필수적인 상황입니다. 2023년 17가지 상위 UX/UI 트렌드와 새로운 트렌드를 확인해야 하는 이유를 살펴보시죠 : ) 1. 다크모드 올 해도 변함없이, 다크모드는 사랑받고 있습니다. 외관은 우아하고 세련되며 현대적입니다. 스마트폰과 노트북으로 더 많은 시간을 보내면서 다크 모드는 사용자 경험에서 중요한 역할을 합니다. 다크모드의 아름다움 외의 장점들에 대해서 살펴보시죠. 장치가 OLED 또는 AMOLED 화면을 사용하는 경우에는 배터리가 절약 됩니다. 텍스트 가독성 측면에서 좋습니다. 밤에 장치를 사용하는 동안 눈의 피로를 줄일 수 있습니다. 화면 눈부심..

Docker에서 ElasticSearch로 Full-Text 검색하기(1) Docker에서 ElasticSearch로 Full-Text 검색하기(2) Docker에서 ElasticSearch로 Full-Text 검색하기(3) 지난 시간에 이어서, 마지막으로 elasticSearch로 작성 된 App을 배포하고 사용해보도록 하겠습니다. App을 배포하기 전에 express로 클라이언트 route를 구성해서 browser에서 검색 결과를 바로 확인할 수 있도록 하고, 불필요한 코드를 정리 해보겠습니다. express를 설치해주세요. npm i express const express = require("express"); const app = express(); const port = process.env.P..

Docker에서 ElasticSearch로 Full-Text 검색하기(1) Docker에서 ElasticSearch로 Full-Text 검색하기(2) 지난 시간에 이어서, 이번에는 elasticsearch의 검색 결과를 향상 시켜보도록 하겠습니다. elasticsearch는 검색 결과를 개선하기 위한 다양한 기능들을 제공합니다. Full-text search : ElasticSearch는 복잡한 검색 쿼리를 처리하고 관련성이 높은 결과를 반환할 수 있는 강력한 전체 텍스트 검색 엔진을 제공합니다. Fuzzy search : 퍼지 검색을 사용하면 용어 자체가 정확히 일치하지 않더라도 쿼리 용어와 유사한 용어를 검색할 수 있습니다. Autocomplete : ElasticSearch를 사용하여 자동 완성 기..