Next.js는 요즘 웹 개발자들 사이에서 정말 핫한 프레임워크야. React 기반으로 만들어져 있는데, 이걸 사용하면 SEO 최적화부터 페이지 속도 향상까지 한 번에 잡을 수 있거든. React를 써봤다면, "아, 이거 내가 쓰던 거랑 비슷한데 더 편한데?" 싶을 거야.  Next.js가 뭔데?Next.js는 쉽게 말해서, React의 업그레이드 버전 같은 느낌이야. React로 프로젝트 만들다 보면 서버에서 렌더링해야 할 때나, SEO 때문에 골치 아플 때가 있잖아? Next.js는 이런 문제들을 쉽게 해결해줘.주요 특징 몇 가지를 간단히 살펴보면:서버사이드 렌더링(SSR)→ 서버에서 HTML을 만들어서 사용자에게 딱 보여주는 거야. 그래서 화면이 바로 뜨고, 검색 엔진이 페이지를 잘 읽을 수 있어...

TypeScript 가이드   1. TypeScript 소개TypeScript는 Microsoft에서 개발한 오픈 소스 프로그래밍 언어로, JavaScript의 상위 집합(superset)입니다. 정적 타입을 지원하여 개발 시 발생할 수 있는 오류를 미리 잡아내고, 코드의 가독성과 유지보수성을 향상시킵니다.  2. TypeScript 설치 및 설정Node.js 설치: https://nodejs.org/에서 다운로드 및 설치TypeScript 전역 설치:Copynpm install -g typescript프로젝트에 TypeScript 설치:Copynpm init -y npm install --save-dev typescripttsconfig.json 파일 생성:Copynpx tsc --init  3. 간단..

TypeScript와 JavaScript의 차이점은 단순히 타입을 지정해주는 것 이상의 기능들을 포함합니다. TypeScript는 JavaScript의 상위 집합으로, JavaScript의 기능을 모두 포함하면서도 추가적인 기능을 제공합니다. 몇 가지 주요 차이점을 설명하겠습니다.1. 정적 타입(Type Annotations)TypeScript: 위 예시에서 볼 수 있듯이, TypeScript에서는 interface, type, enum 등을 사용하여 변수, 함수, 객체 등의 타입을 명시적으로 지정할 수 있습니다. 예를 들어:interface Person { firstName: string; lastName: string;}function greet(person: Person) { con..

document.querySelector(".main")?.classList.add("active"); document.querySelector(".main"):HTML 문서에서 .main이라는 클래스를 가진 첫 번째 요소를 선택합니다.만약 해당 클래스의 요소가 존재하지 않는다면 null을 반환합니다.?. (옵셔널 체이닝 연산자):옵셔널 체이닝 연산자는 앞에 있는 표현식이 null 또는 undefined일 경우, 그 뒤의 코드를 실행하지 않고 undefined를 반환합니다.즉, 선택한 요소가 존재하지 않으면 뒤에 있는 classList.add("active")가 실행되지 않게 막아줍니다..classList.add("active"):선택된 요소의 클래스 목록(classList)에 "active"라는 클래스..

const WrapTextInSpans = ({ text }) => { return ( {text.split('').map((char, index) => ( {char} ))} ); };

https://velog.io/@3436rngus/R3FReact-Three-Fiber-Material

Ambient Occlusion Map : 메쉬 표면에 이미 만들어둔 그림자 맵 (메쉬의 입체감을 더 살릴 수 있다)ambient light 를 설정해주어야 적용 가능하다 / geometry 에 uv2 코드를 추가해주어야한다메테리얼에 aoMap = {textures.aoMap} 으로 설정한다 alpha map : 투명도를 조정할 수 있다 검정색으로 갈 수록 투명해지고, 흰색으로 갈 수록 불투명해진다 (포토샵의 mask 기능과 유사) 광원 / proceduer material / 성능차이 -> 모델의 차이를 불러일으킴

자바스크립트에서 객체(Object)와 배열(Array)는 둘 다 데이터 구조를 저장하는 방법이지만, 구조와 사용 목적이 다릅니다. 주요 차이점을 아래와 같이 설명할 수 있습니다.  1. 구조객체(Object): 키(key)-값(value) 쌍으로 이루어진 데이터 구조입니다. 키는 문자열 또는 심볼일 수 있으며, 각각의 키는 고유해야 합니다. 객체는 특정 속성이나 메서드를 가진 엔터티(entity)를 표현할 때 유용합니다.const person = { name: "John", age: 30, job: "Developer"}; 배열(Array): 인덱스(index)를 사용하여 순서대로 데이터를 저장하는 리스트 형태의 구조입니다. 인덱스는 0부터 시작하는 숫자입니다. 배열은 순서가 있는 데이터..

프로그래밍 : 컴퓨터에게 실행을 요구하는 커뮤니케이션syntax((문법구조)와 semantics(의미) 로 나뉜다 사람 -> 프로그래밍언어 -> 컴파일러(인터프리터) -> 기계어 -> 컴퓨터 로 소통한다:: 컴퓨터는 기계어로 소통을 하는데 기계어는 복잡하기 때문에 사람이 알아보기 쉬운 프로그래밍 언어를 컴파일(컴퓨터가 인식할 수 있도록 기계어로 번역하는 과정)을 통해 컴퓨터와 소통을 하게 된다.

객체를 **"생성"**하는 것과 **"반환"**하는 것의 차이를 이해하는 것은 중요한 개념입니다. 둘의 차이는 객체를 만드는 과정과 그 결과물이 어떻게 처리되는지에 따라 구분됩니다.1. 객체 생성 (Creation)객체 생성은 메모리 공간에 새로운 객체를 만드는 행위입니다. 이 과정에서 객체의 속성들이 정의되고, 그 객체를 가리키는 참조가 생깁니다.new 키워드 사용:new 키워드를 사용하여 생성자 함수를 호출하면, 자바스크립트 엔진은 자동으로 새로운 빈 객체를 메모리에 생성합니다.이 객체는 생성자 함수의 prototype 속성과 연결됩니다.생성자 함수 내부의 this는 이 새로 생성된 객체를 가리키며, 생성자 함수는 이 객체의 속성들을 초기화합니다.특별히 return 문이 없는 경우, 이 새로 생성된 ..

new 키워드생성자 함수와 함께 사용되며, 자동으로 객체를 생성합니다.객체가 생성되면, 그 객체는 생성자 함수의 prototype과 연결됩니다.생성자 함수 내부에서 this 키워드는 새로 생성된 객체를 가리킵니다.특별히 return 문이 없다면, 생성자 함수는 자동으로 새로 생성된 객체를 반환합니다.예시:function YalcoChicken(name, no) { this.name = name; this.no = no;}const chain3 = new YalcoChicken('제주', 24); // 새로운 객체가 생성되고 chain3에 저장됩니다.이 경우 chain3은 YalcoChicken 생성자 함수로부터 만들어진 객체를 가리키게 됩니다.객체 반환 함수 (createYalcoChicke..

const product = { name: '핸드폰', color: 'red', price: 80}function add (obj, key, value) { // obj.key = value; // ⚠️ obj[key] = value;}function delete (obj, key) { // delete obj.key // ⚠️ delete obj[key];}