ES7+ React/Redux/React-Native/JS/TS SnippetsVSCode 확장 프로그램에서 설치JSX, Functional Component, React Hooks 등 기본 구조를 단축키처럼 입력 가능예시:rfce → Functional Component + export 기본 템플릿rfc → Functional Component (export 없음)rce → Class Component + exportrconst → constructoruseState → useState 훅 자동 생성설치:Extensions → ES7+ React/Redux/React-Native/JS/TS Snippets → Install

1️⃣ npm start**React (CRA, Create React App)**에서 기본으로 사용하는 명령어package.json 안 "scripts": { "start": "react-scripts start" }와 연결되어 있음개발 서버를 실행하고, http://localhost:3000에서 바로 확인 가능CRA 기준 → 항상 npm start2️⃣ npm run dev보통 Next.js, Vite, Nuxt 등 최신 프레임워크에서 사용하는 개발 서버 명령어package.json 안 "scripts": { "dev": "next dev" } 처럼 등록되어 있음로컬에서 빠르게 개발용 서버를 띄우고 핫리로드 가능 정리명령어주로 쓰는 환경역할npm startCRA (React)개발 서버 실행, 브라우저..

1. 프로젝트 생성npx create-next-app@latestTypescript 여부 YesEslint 여부 YesTailwind CSS 여부 No / Yessrc/ 사용 여부 YesApp Router 사용 여부 Yes기본 alias 설정 여부 No src/ ├─ app/ # 라우터 (Next.js가 자동으로 인식) │ ├─ layout.js # 전체 레이아웃 │ ├─ page.js # 홈 (/) │ ├─ about/ # /about │ │ └─ page.js │ ├─ weather/ # /weather │ │ └─ page.js │ └─ ....

pages/api/items.js let items = [] // 메모리에 저장 (DB 대체)// API 라우트export default function handler(req, res) { if (req.method === "GET") { // READ: 모든 아이템 조회 res.status(200).json(items) } else if (req.method === "POST") { // CREATE: 아이템 추가 const newItem = { id: Date.now(), ...req.body } items.push(newItem) res.status(201).json(newItem) } else if (req.method === "PUT") { // UPD..

⚛️ React.js라이브러리예요.UI(화면)를 만들기 위한 뷰 라이브러리로, “페이지 라우팅”이나 “서버사이드렌더링” 같은 건 직접 제공하지 않아요.CSR(Client Side Rendering)이 기본이고, 필요한 기능(라우터, 상태관리, 빌드 시스템 등)은 따로 붙여야 함.👉 쉽게 말해 레고 블록이에요. 화면을 만드는 도구만 제공하고, 어떻게 조립할지는 개발자가 직접 선택해야 해요.🌐 Next.js프레임워크예요.React를 기반으로 만든 프레임워크라서, 내부적으로는 React.js를 사용해요.React 단독으로 부족한 기능들을 “한 세트”로 제공합니다.Next.js가 제공하는 주요 기능:라우팅pages/ 디렉토리 기반 자동 라우팅 제공 (React에서는 react-router-dom 같은 걸 설..

🟢 1단계: 깃 초기화 & 원격 저장소 연결프로젝트 루트로 이동 cd "C:\Users\user\OneDrive\바탕 화면\portfolio\project" 깃 초기화 git init 처음이라면 로컬에서 깃을 사용할 수 있게 초기화원격 저장소 연결 git remote add origin https://github.com/깃허브프로젝트링크연결 확인 git remote -v 출력 예시: origin https://github.com/깃허브프로젝트링크 .git (fetch) origin h https://github.com/깃허브프로젝트링크 (push) ✅ fetch와 push URL이 동일하면 정상 연결🟢 2단계: 첫 커밋 만들기모든 파일 스테이지에 올리기 git add . 커밋 git commit ..

자바스크립트에서 클래스는 생성자(constructor)를 사용하여 객체가 생성될 때 초기값을 받아옵니다. 만약에 클래스에서 다른 형식의 정보를 받을 수 있도록 하려면, 생성자에서 매개변수를 유연하게 설정하거나 조건부 로직을 추가하는 방법을 사용할 수 있습니다.1. 매개변수에 기본값 설정하기먼저, 클래스 생성자에서 매개변수로 받는 값을 유연하게 설정할 수 있어요. 예를 들어, 매개변수의 개수나 형식이 다르더라도 기본값을 설정하거나, 조건에 따라 다른 값을 처리할 수 있습니다.예시: 다양한 형식의 데이터를 받는 생성자class Info { constructor(a, b, c = '기본값', d = '추가값') { this.a = a; // 필수값 this.b = b; // 필수값 thi..

1. 일반 함수에서의 this일반 함수에서 this는 함수를 호출한 객체를 가리킵니다. 하지만 **엄격 모드(strict mode)**에서는 this가 undefined로 설정될 수도 있습니다.예시 1: 일반 함수에서의 thisfunction greet() { console.log(this); // `this`는 전역 객체를 가리킴 (브라우저에서는 `window` 객체)}greet(); // 일반적으로 `window` 객체를 출력함이 경우, this는 전역 객체인 window를 가리킵니다. 함수가 객체에 소속되지 않고 일반적으로 호출되었기 때문이에요.2. 객체의 메서드에서의 this객체의 메서드 내에서 this는 해당 메서드를 호출한 객체를 가리킵니다.예시 2: 객체 메서드에서의 thisconst ..

1. 클래스란 무엇인가요?클래스는 **"객체를 만들기 위한 설계도"**입니다. 이 설계도를 기반으로 여러 객체를 만들 수 있어요.예를 들어, 사람을 나타내는 Person 클래스를 만들면, 이 클래스를 이용해서 여러 사람 객체를 만들 수 있습니다.2. 클래스 만들기class Person { // 생성자: 객체를 만들 때 기본적인 값을 설정해주는 곳 constructor(name, age) { this.name = name; // name은 객체의 이름 this.age = age; // age는 객체의 나이 } // 메서드: 객체가 할 수 있는 행동을 정의 greet() { console.log(`안녕하세요, 제 이름은 ${this.name}이고, 나이는 ${this.age}..

JavaScript ES6 (ECMAScript 2015)에서 새로 추가된 주요 문법let과 const:let: 블록 스코프를 가진 변수 선언 (기존 var는 함수 스코프).const: 상수 선언, 한 번 값이 할당되면 재할당할 수 없음.let x = 10;const y = 20; 2. 화살표 함수 (Arrow Functions):function 키워드를 사용하지 않고 간결하게 함수를 작성할 수 있게 해줍니다.this 바인딩을 다르게 처리하므로, 다른 함수 내에서 사용시 유용합니다.const sum = (a, b) => a + b; 3.템플릿 리터럴 (Template Literals):문자열을 만들 때 ${}를 사용하여 변수나 표현식을 삽입할 수 있습니다.멀티라인 문자열도 쉽게 다룰 수 있습니다.cons..

function solution(n) { const sqrt = Math.sqrt(n); if (Number.isInteger(sqrt)) { return (sqrt + 1) ** 2; } else { return -1; }}function solution(n) { // 제곱근 계산 const sqrt = Math.sqrt(n); // 제곱근이 정수인지 확인 if (Number.isInteger(sqrt)) { // 정수라면 (sqrt + 1)의 제곱 반환 return (sqrt + 1) ** 2; } else { // 정수가 아니라면 -1 반환 return -1; }}..

Q. if 정수 n 이 289752 라면, 987522로 정렬하는 함수를 제작하여라function solution(n) { // 1. 숫자를 문자열로 변환하여 자릿수를 배열로 나눕니다. let digits = String(n).split(''); // 2. 자릿수를 내림차순으로 정렬합니다. digits.sort((a, b) => b - a); // 3. 정렬된 배열을 문자열로 합친 후 숫자로 변환하여 반환합니다. return Number(digits.join(''));}