[JavaScript] 객체 지향 프로그래밍 가이드
1. 클래스와 객체의 기본 개념 1.1과 1.2를 같이 보셔야 합니다. class 는 객체를 생성하기 위한 양식 이라고 생각하면 쉽습니다. 직접 객체를 생성할 수 있다 그럼 왜 class 를 사용할까요? 객체를 직접 생성하는 것보다 class 를 사용했을 때 가독성이 ...
프론트엔드 개발자 기술 스택 가이드
프론트엔드 개발을 시작하거나 최신 기술 트렌드를 따라가고자 할 때, 기술 선택에 많은 고민이 있습니다. 개발자들이 많이 사용하는 프론트엔드 기술 스택을 소개하고, 각각의 특징과 장점을 살펴보겠습니다. 1. Next.js SSR과 SSG를 모두 지원하여 페이지 로딩 속도...
Next.js 14 프로젝트 폴더 구조 가이드
폴더별 역할과 배치를 설명하며, 자산을 어디에 배치할지에 대한 설명을 드리겠습니다. 1. Next.js 14 권장 폴더 구조 Next.js 14 프로젝트의 기본적인 폴더 구조는 아래와 같습니다. 이 구조를 통해 코드를 모듈화하고, 확장 가능하며, 유지보수하기 쉽게 설계...
?? (Nullish Coalescing Operator)에 대해서 알아보
코드를 작성할 때 || 대신 ?? 연산자를 사용하라는 lint 경고는 nullish coalescing operator ( ?? )의 사용을 권장하는 규칙에 의해 발생합니다. 이 문서는 || 와 ?? 연산자의 차이점과 ?? 를 사용해야 하는 이유를 설명드리겠습니다. F...
JavaScript 객체 지향 프로그래밍 가이드
※ 해당 내용은 FrontEnd Category에 한정할 수 없습니다. 편의상 FrontEnd Category에 작성합니다. JavaScript는 프로토타입 기반 언어입니다. 모든 객체는 프로토타입 객체를 가지며, 이를 통해 속성과 메서드를 상속받습니다. functio...
Tailwind CSS로 구현하는 이미지 Object Fit
1. object-fit 이란 무엇인가? object-fit 은 CSS 속성 중 하나로, 이미지나 비디오 같은 컨텐츠를 부모 요소 안에서 어떻게 크기를 조절하고 위치시킬지를 정의합니다. 주요 값으로는 fill , contain , cover , none , scale-...
Next.js에서 metadata와 generateMetadata 차이점 및 사용법
Next.js에서 SEO와 메타데이터 설정을 위해 metadata 와 generateMetadata 두 가지 방법을 제공합니다. 1. metadata: 정적 메타데이터 설정 metadata 객체는 빌드 시점에 결정되는 정적 메타데이터를 설정할 때 사용합니다. expor...
왜 JavaScript에서 TypeScript로 전환했는가?
타입 안전성 JavaScript 런타임 오류를 방지 할 수 있었습니다. TypeScript는 코드 작성 시점에 오류를 검출하여, 더 안정적이고 오류가 적은 애플리케이션을 만들 수 있습니다. JavaScript도 Prototype을 통해 타입을 설정할 수 있지만, 타입을...
Callback과 Async/Await 개요 및 차이점
1. Callback Callback 함수 는 자바스크립트에서 비동기 작업을 처리하기 위한 오래된 방식 중 하나입니다. 함수가 실행된 후 그 결과를 이용해서 다른 함수를 호출할 때 사용하는 방식입니다. 이는 주로 파일 읽기, HTTP 요청, 타이머와 같은 비동기 작업을...
Next.js 파일 확장자 사용 가이드라인
Next.js 프로젝트에서 .js 와 .jsx 파일 확장자 사용에 관한 글입니다. 결론부터 말씀드리자면 Next.js는 .js 와 .jsx 모두를 지원하므로, 어느 쪽을 사용해도 코드 실행에는 직접적인 영향이 없습니다. 그러나 아래 언급 될 이점들을 고려하여 적절한 확...
Tailwind CSS로 이미지와 객체의 위치 설정하기
Tailwind CSS를 사용하여 이미지와 객체의 위치를 설정하는 방법을 설명드리겠습니다. Object Position이란? object-position 속성은 이미지, 비디오 또는 다른 미디어 요소의 위치를 조정하는 데 사용됩니다. 이를 통해 미디어 요소가 컨테이너 ...
Tailwind CSS Top, Right, Bottom, Left 포지셔닝 가이드
Tailwind의 top , right , bottom , left 유틸리티의 사용법과 부정값 적용, 논리적 속성 사용법을 살펴보겠습니다. 기본 사용법 Tailwind CSS는 위치 지정된 요소의 수평 또는 수직 위치를 설정할 수 있는 유틸리티를 제공합니다. 이러한 유...