KUKJIN LEE
총 570개의 글
performance.now() 함수를 사용한 코드 성능과 메모리 사용량 최적화
코드 실행 시간 측정과 메모리 사용량 확인은 프로그램의 성능을 평가하고 최적화하는 데 중요한 부분입니다. 여기에서 코드 실행 시간을 측정하는 방법과 메모리 사용량을 확인하고 최적화하는 방법에 대해 설명하겠습니다. 코드 실행 시간 측정하기 코드 실행 시간을 측정하려면 p...
API란? 최대한 쉽게 설명하기
설명에 앞서, API를 Back-End 분야라고만 생각하면 않됩니다. 글을 작성하면서, 적절한 카테고리를 찾지 못했고 향후 별도로 분류하도록 하겠습니다. 가장 쉬운 예시로는, Front-End는 레스토랑에 찾아온 손님, API는 주문을 받는 웨이터 , Back-End는...
FrontEnd Styling: Tailwind CSS 기초 정리
Tailwind CSS는 매우 강력한 CSS 프레임워크이며, 아래에 각 기능에 대한 간단한 설명과 사용 방법을 정리해드리겠습니다. 설명 Tailwind CSS의 사용하면 웹 디자인과 개발을 더욱 쉽고 빠르게 만들어 줍니다. 각 기능들에 대한 기본적인 기능 이해와 효과적...
MVC 패턴 웹 애플리케이션 구축하기
MVC (Model-View-Controller) 패턴은 소프트웨어 디자인 패턴으로, 애플리케이션을 모델, 뷰 및 컨트롤러 세 가지 주요 구성 요소로 분리하여 개발하는 방법입니다. Node.js와 Express.js를 활용하여 MVC 패턴을 구현하려면 다음과 같은 구조...
Tailwind CSS를 활용한 Dark Mode 구현하기
다크 모드는 사용자에게 더 편안하고 시각적으로 매력적인 경험을 제공하는 핵심적인 웹 디자인 트렌드 중 하나입니다. 이제 Tailwind CSS를 활용하여 웹 애플리케이션에 Dark Mode를 구현하는 방법을 알아보겠습니다. 시작하기 전에: Tailwind CSS 설치하...
Node.js와 Express.js로 서버 구축하기
Node.js와 Express.js를 사용하여 기본적인 서버를 구축하는 방법을 설명드리겠습니다. 이를 기반으로 더 복잡한 기능을 추가하거나 데이터베이스와 연동하여 실제 웹 애플리케이션을 개발할 수 있습니다. Happy coding! Node.js란 Node.js는 Ch...
FrontEnd Next.js 13 App Dir: Metadata 적용
App Directory에서는 기존 Head 대신 metadata를 활용해 HTML 요소를 수정할 수 있습니다. metadata는 layout.js 또는 page.js 파일에서 export const metadata 를 통해 정의할 수 있습니다. 설명 ex...
Next.js에서 Map 함수를 활용한 코드 효율화
매주 금요일 작성된 코드를 다시 한 번 살펴보고 개선할 수 있는 부분이 있는지 확인하고 있습니다. 반복되는 패턴을 발견할 수 있었고, 코드의 효율성을 높이고 유지 관리를 용이하게 하기 위해 수정을 통해 코드를 효율화할 수 있습니다. Next.js에서 map 함수를 사용...
Next.js에서 경로 별칭(Alias) 사용하기
Next.js 프로젝트에서 모듈 import 시 경로 별칭(alias)를 사용하는 방법에 대해 알아보겠습니다. 이 기능을 활용하면 코드의 가독성을 높이고, 프로젝트의 구조 변경에도 유연하게 대응할 수 있습니다. alias란? 경로 별칭(alias)는 특정 디렉토리에 대...
이벤트 버블링: HTML 문서에서 이벤트의 전파 원리와 활용 방법
이벤트 버블링(Event Bubbling)은 HTML 문서 구조에서 이벤트가 발생했을 때, 그 이벤트가 부모 요소로 계속해서 전파되는 현상을 말합니다. 이것은 이벤트의 처리를 조금 더 직관적으로 만들어주는데 기여합니다. 예를 들어, HTML 구조가 있다고 가정해봅시다....
이벤트 루프: 비동기 프로그래밍의 핵심 이해
이벤트 루프 (Event Loop)는 대부분의 현대적인 웹 브라우저 및 JavaScript 실행 환경에서 비동기 코드 실행을 관리하는 메커니즘입니다. 이벤트 루프는 코드 실행의 흐름을 제어하고, 이벤트 발생, 콜백 함수 호출 및 다른 비동기 작업을 관리하여 프로그램이 ...
package.json의 종속성을 최신버전으로 유지하자 package-json-upgrade
package.json에서 사용 가능한 업데이트를 보여줍니다. 업데이트를 도와주는 빠른 동작을 제공합니다. Features 정규식으로 무시할 종속성 설정 특정 버전에 대한 업데이트를 무시하도록 확장 프로그램을 설정 할 수 있습니다. Semver 범위 무시 설정 Semv...