문제: 배열에서 가장 큰 수 찾기주어진 숫자 배열에서 가장 큰 수를 찾는 함수를 작성하세요.예시입력:[1, 5, 3, 9, 2]출력:9풀이단계:숫자 배열을 순회하면서 각 숫자를 확인합니다.현재 숫자가 가장 큰 수보다 크면 가장 큰 수를 갱신합니다.배열의 모든 숫자를 확인한 후 최종적으로 가장 큰 수를 반환합니다.코드:function findMaxNumber(arr) { let max = arr[0]; // 배열의 첫 번째 숫자를 최대값으로 초기화 for (let i = 1; i max) { max = arr[i]; // 더 큰 숫자가 있으면 최대값 갱신 } } return max;}// 테스트const numbers = [1, 5, 3, 9, 2];console.log(findMa..

Node.js의 렌더링 과정은 클라이언트 요청을 처리하고 서버가 응답을 반환하는 일련의 흐름을 의미합니다. 렌더링 방식은 SSR (서버 사이드 렌더링), CSR (클라이언트 사이드 렌더링), 그리고 SSG (정적 사이트 생성) 등 여러 가지 방식으로 나눌 수 있습니다.아래에서 Node.js의 렌더링 과정과 각 방식의 개념을 설명드리겠습니다.1. 기본적인 Node.js 요청-응답 흐름과정 설명클라이언트 (브라우저)가 서버로 HTTP 요청을 보냅니다.Node.js 서버는 요청을 수신하고 라우터를 통해 적절한 핸들러로 전달합니다.서버는 데이터베이스에서 데이터를 가져오거나 비즈니스 로직을 처리합니다.처리된 데이터를 기반으로 HTML, JSON 또는 파일 등을 반환합니다.브라우저는 서버의 응답을 받아 화면에 렌더..

이 에러는 Next.js 13+의 App Router에서 발생하는 **"클라이언트 컴포넌트"**와 관련된 문제입니다. useState와 같은 React Hook은 클라이언트 사이드에서만 동작하므로 "use client" 지시어를 사용해야 한다는 의미입니다.문제 설명Next.js 13+의 App Router는 기본적으로 서버 컴포넌트를 사용합니다.하지만 useState, useEffect와 같은 React의 클라이언트 사이드 기능은 서버 컴포넌트에서는 사용할 수 없습니다.app/page.tsx 파일에서 **useState**를 사용하려면 이 컴포넌트를 클라이언트 컴포넌트로 명시해줘야 합니다.해결 방법"use client" 지시어를 app/page.tsx 파일의 최상단에 추가하세요.

[상황]- console 에 오류 안뜸- terminal 에도 오류 없음- npm run dev 했을 때 start 와 함께 chome 무한로딩 상황 발생 [해결방법]npx next dev --turbo 로 캐시 지우니까 해결됨

next js는 라우터 설장이 따로 필요없다. next 작업용 파일을 만든 후에 page.tsx / page.jsx 를 사용하면 next가 알아서 파일을 찾아준다... 맨 처음에는  app/page.jsx를 기본으로 찾아가는 시스템이기 때문에 다른 이름은 사용할 수 없다. (ex home/index.jsx) 이름 규칙에만 유의하여 사용하면 아주 편한거같다 리액트는 하나 하나 다 연결해줘야해서 불편했는데  "use client" >> usePathname 썼을 때 오류를 use client 를 써서 없앨 수 있음import Link from "next/link";import { usePathname } from "next/navigation";export default function Navigatio..

1. JSXJSX는 JavaScript XML의 줄임말이야. HTML과 비슷하게 생겼지만 JavaScript 코드 안에서 사용되는 특별한 문법이야.React 컴포넌트에서 UI를 그리는 데 사용돼!예시:function Hello() { return Hello, React!;} 위 코드는 HTML처럼 보이지만 실제로는 JavaScript야. JSX 덕분에 UI를 선언적으로 작성할 수 있어. 그리고 컴파일되면 JavaScript 코드로 변환돼!  2. StateState는 컴포넌트의 "내부 데이터"를 말해. 컴포넌트가 가지고 있는 데이터를 관리하고, 그 데이터가 바뀌면 UI가 자동으로 업데이트돼.예시:import React, { useState } from 'react';function Counter() {..

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