Front End Develop Front End Develop

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를 사용하여 자동 완성 기..

Docker에서 ElasticSearch로 Full-Text 검색하기(1) 지난 시간에 이어서, 이번에는 elasticsearch를 직접 사용해서 Full-Text 검색을 수행 해보도록 하겠습니다. npm i elasticsearch 또는 yarn add elasticsearch 현재 Docker 컨테이너로 띄워져 있는 ealsticsearch에 연결 해봅시다. const { Client } = require("elasticsearch"); const client = new Client({ host: "http://localhost:9200", log: "trace", }); 위와 같이 작성하면 elasticsearch의 새 인스턴스가 생성되고 호스트와 포트가 지정됩니다. 디버깅에 도움이 되도록 로그 수..