실버라인의 잡다한 정보

Vite로 만든 프로젝트를 기준으로 설명하겠습니다.1단계: 라이브러리 설치터미널(VS Code 하단 터미널)에서 현재 프로젝트 폴더 안으로 이동한 뒤 아래 명령어를 입력합니다.Bash npm install react-router-dom이 명령어를 치면 package.json 파일의 dependencies 항목에 react-router-dom이 추가된 것을 확인할 수 있습니다.2단계: 최상단 컴포넌트 감싸기 (main.jsx 또는 index.jsx)라우팅 기능을 앱 전체에서 사용하려면, 가장 뿌리가 되는 부분을 로 감싸야 합니다.main.jsx 수정 예시:JavaScript import React from 'react';import ReactDOM from 'react-dom/client';import A..

1. JSX (JavaScript XML)JSX는 자바스크립트 확장 문법으로, HTML과 매우 유사하게 생겼지만 몇 가지 엄격한 규칙이 있습니다.반드시 하나의 부모 태그로 감싸야 함: 여러 요소를 반환할 때는 나 빈 태그인 (Fragment)로 감싸야 합니다.카멜 케이스(CamelCase) 사용: HTML의 class는 className으로, onclick은 onClick으로 작성합니다.자바스크립트 표현식은 중괄호 { } 사용: 변수나 함수를 HTML 사이에서 사용할 때 필수입니다.JavaScript function Profile() { const name = "Gemini"; return ( Hello, {name} {/* 변수 사용 */} );}2. 컴포넌트 (Comp..

어떤 도구를 사용해 리액트를 설치했느냐에 따라 기본 포트 번호가 다릅니다.1. 왜 5173인가요? (Vite)최근 제가 안내해 드린 방식인 **Vite(비트)**라는 도구를 사용하면 기본 포트가 **5173**으로 설정됩니다.Vite는 차세대 프레임워크 빌드 도구로, 매우 빠른 속도 덕분에 최근 리액트 개발의 표준으로 자리 잡았습니다.2. 예전에는 3000이었나요? (CRA)과거에 가장 많이 쓰였던 **CRA(Create React App)**라는 도구는 기본 포트가 **3000**이었습니다.많은 강의나 블로그 글이 예전 기준으로 작성되어 있어 리액트 하면 3000번 포트를 떠올리시는 경우가 많습니다.3. 주요 도구별 기본 포트 요약도구 (Tool)기본 포트 (Default Port)비고Vite5173현..

1. 리액트 게시판 컴포넌트 구조이 코드는 **데이터(State)**가 바뀌면 화면이 어떻게 자동으로 변하는지 보여주는 가장 기초적이고 중요한 예시입니다.JavaScript import React, { useState } from 'react';// 1. 작은 블록(컴포넌트) 만들기function BoardItem({ post }) { return ( {post.id} {post.title} {post.writer} );}// 2. 메인 화면 컴포넌트export default function BoardApp() { // 💡 State: 게시글 데이터 관리 (이 값이 변하면 화면이 다시 그려짐) const [posts, setPosts] = useState..

1. 컴포넌트 (Component): 레고 블록식 개발React의 가장 큰 특징은 UI를 독립적이고 재사용 가능한 '레고 블록' 단위로 쪼개는 것입니다.기존 방식: 하나의 거대한 HTML 파일에 모든 내용을 다 적음.React 방식: 헤더, 게시판 목록, 버튼 등을 각각의 파일(.js)로 만든 뒤 조립함.장점: 한 번 만든 Button 컴포넌트를 사이트 곳곳에서 재사용할 수 있고, 수정할 때도 해당 파일만 고치면 됩니다.2. JSX (JavaScript XML): JS 안의 HTMLReact에서는 자바스크립트 파일 안에서 직접 HTML 태그를 작성합니다. 이것을 JSX라고 부릅니다.특징: HTML처럼 보이지만 실제로는 자바스크립트입니다.장점: 자바스크립트 변수를 HTML 태그 안에 바로 넣거나, 반복문(..