노트북이 바뀌어도,
수업은 이어서.

오늘 실습할 과목부터 선택하세요

Java 웹 수업을 이어간다면 JSP · Servlet 순서로 진행하세요. 모든 도구를 한 번에 설치할 필요는 없습니다.

JDK 안에 자바 컴파일러 javac가 들어 있습니다. 자바 실습용으로 C/C++ 컴파일러를 따로 설치하지 않아도 됩니다.

수업에 맞는 버전으로 설치하기

JDK 21 · Tomcat 10.1 조합을 유지하세요. 그 계열 안의 최신 안정 패치를 선택하면 됩니다. 아래 링크는 공식 배포처입니다. 설치 파일은 저장소에 포함하지 않습니다.

Temurin과 Node 24는 새 설치 권장값입니다. 예전 JDK 공급사·세부 패치, Node 정확한 버전은 기록에 없습니다. Connector/J는 확인일 기준 3.3.6이 같은 계열의 안정 패치입니다. 3.3.3 그대로 비교 실습할 수 있지만 최신 보안 패치를 우선하세요.

수업 코드를 이 노트북에 가져오기

Git 설치 후 새 PowerShell 창에서 아래 명령을 실행하세요. 저장소 전체를 한 번 받으면 모든 과목 폴더를 사용할 수 있습니다.

New-Item -ItemType Directory -Force "$HOME\source" | Out-Null
Set-Location "$HOME\source"
git clone https://github.com/MoriochoRadio/web-study-notes.git
Set-Location web-study-notes

Git 없이 받으려면 저장소 ZIP 다운로드 후 압축을 풀어도 됩니다. 이미 받았다면 해당 폴더에서 git status로 작업을 확인한 뒤 git pull --ff-only로 갱신하세요. 충돌이나 로컬 수정 경고가 나면 작업을 보존하고 먼저 해결합니다.

Git에는 실습 코드와 설정 안내가 있습니다. JDK·DB 서버·JDBC JAR·npm 의존성·개인 DB 비밀번호는 새 노트북에서 준비해야 합니다.

JSP · Servlet 수업 바로 이어가기

대상: Back_end/web_edu_project의 두 Eclipse 프로젝트. 아래 순서를 위에서부터 진행하세요.

1. Java 21을 확인하고 Eclipse에 연결

java -version
javac -version
$env:JAVA_HOME
where.exe java
where.exe javac

java와 javac 모두 21.x여야 합니다. JAVA_HOME은 실제 JDK 설치 폴더이며 끝에 \bin을 붙이지 않습니다.

1. Eclipse → Window → Preferences → Java → Installed JREs → Add → Standard VM에서 JDK 21 폴더를 등록합니다.
2. Java → Installed JREs → Execution Environments → JavaSE-21을 같은 JDK에 연결합니다.
3. Server → Runtime Environments → Add → Apache Tomcat v10.1에서 Tomcat 압축 해제 폴더와 JDK 21을 선택합니다. 이름은 프로젝트 설정과 같은 Apache Tomcat v10.1로 둡니다.

Eclipse 자체를 구동하는 Java와 수업 프로젝트의 Java는 별개입니다. Eclipse가 다른 실행용 JVM을 요구해도 프로젝트의 JavaSE-21·컴파일러 21 설정은 유지하세요.

2. 기존 프로젝트 두 개 불러오기

1. File → Import → General → Existing Projects into Workspace를 선택합니다.
2. Root directory로 받은 저장소의 Back_end\web_edu_project를 지정하고 01_userboard_sepa, 02_hkboard_MVC1을 선택합니다.
3. Copy projects into workspace는 끕니다. 받은 저장소의 소스를 그대로 편집합니다.
4. 프로젝트 우클릭 → Properties에서 Java Compiler 21, Project Facets: Java 21 / Dynamic Web Module 6.0, Targeted Runtimes: Tomcat v10.1을 확인합니다. 텍스트 인코딩은 UTF-8입니다.

3. MariaDB 접속과 실습 테이블 만들기

HeidiSQL에서 새 세션을 만들고 네트워크 유형 MariaDB or MySQL (TCP/IP), 호스트 127.0.0.1, 사용자 root, 포트 3306, 설치할 때 정한 비밀번호로 연결합니다.

실습 DB 준비 SQL 다운로드 ↓

1. 로컬 실습 서버에 연결했는지 확인합니다. HeidiSQL의 File → Load SQL file로 저장소의 setup/bootstrap-hk.sql을 UTF-8로 엽니다.
2. 내용을 확인한 뒤 실행(F9)합니다. hk DB에 userTbl, buyTbl, hkboard와 첫 화면 확인용 회원 한 명을 만듭니다.
3. 결과 표에 DEMO01 / 실습회원이 보이면 성공입니다. 구매·게시글 목록은 처음에는 비어 있어도 정상입니다.

이 SQL에는 삭제 명령이 없고 다시 실행해도 같은 샘플 회원을 중복 추가하지 않습니다. 기존 스키마를 자동 수정하거나 수업 당시 데이터를 복원하지는 않습니다. hkboard 컬럼 길이는 수업 DAO/DTO와 README를 바탕으로 한 값입니다.

4. JDBC 드라이버와 접속 정보 준비

Connector/J의 mariadb-java-client-3.3.x.jar를 아래 두 위치에 각각 한 개씩 넣고 Eclipse에서 프로젝트를 선택해 F5로 새로고침합니다. 폴더가 없으면 만드세요. sources·javadoc JAR는 실행용이 아닙니다.

Back_end/web_edu_project/01_userboard_sepa/src/main/webapp/WEB-INF/lib/
Back_end/web_edu_project/02_hkboard_MVC1/src/main/webapp/WEB-INF/lib/

공개 수업 소스는 jdbc:mariadb://localhost:3306/hk, 사용자 root, 빈 비밀번호로 저장되어 있습니다. 아래 파일의 String password = "";에 이 노트북에서 정한 DB 비밀번호를 로컬에서 입력합니다.

• 01 프로젝트: com/hk/board/dao/UserDao.java, BuyDao.java의 각 메서드, 총 10곳.
• 02 프로젝트: com/hk/board/datasource/DataBase.java 1곳.

비밀번호를 GitHub에 올리지 마세요. 현재 수업 원본은 소스에 직접 채우는 방식입니다. 커밋 전 변경 내역을 보고 실제 비밀번호가 들어간 줄은 제외하세요. 파일이 이미 추적 중이면 .gitignore만 추가해도 숨겨지지 않습니다. DB 계정을 바꿨다면 사용자 값도 맞춰야 합니다.

5. 첫 웹 실습 실행

1. Window → Show View → Servers에서 Tomcat v10.1 서버를 만들고 두 프로젝트를 추가합니다.
2. 01 프로젝트 우클릭 → Run As → Run on Server를 선택합니다.
3. http://localhost:8080/01_userboard_sepa/의 회원 목록에서 DEMO01을 확인합니다.
4. 02 프로젝트는 http://localhost:8080/02_hkboard_MVC1/에서 게시판 목록까지 확인합니다.

주소의 localhost는 서버를 실행한 노트북입니다. GitHub Pages는 JSP/DB를 실행하지 않습니다. 자세한 수업 동작과 남은 미구현 기능은 웹 실습 README를 참고하세요.

다른 과목의 첫 실행

Java 기초 — JDK 21 + VS Code

VS Code에서 Extension Pack for Java를 설치합니다. File → Open Folder로 Back_end/java_edu_project를 열고 main 메서드 위의 Run을 누릅니다. 프로젝트의 JDK는 명령 팔레트 Java: Configure Java Runtime에서 21로 확인하세요.

컴파일러 자체를 확인하려면 빈 실습 폴더에 아래 파일을 Hello.java라는 이름으로 저장합니다.

public class Hello {
    public static void main(String[] args) {
        System.out.println("Java 21 ready");
    }
}

javac -encoding UTF-8 Hello.java
java Hello

Java 21 ready가 출력되면 컴파일·실행 성공입니다. 날짜별 수업 파일에는 패키지와 다른 클래스 의존성이 있으므로 전체를 확인 없이 한 번에 컴파일하기보다 IDE에서 해당 main을 실행합니다.

SQL — DB 서버와 편집기는 서로 다른 프로그램

MariaDB가 데이터를 저장하는 서버이고 HeidiSQL은 쿼리를 보내는 편집기입니다. 접속한 쿼리 탭에서 아래 결과를 확인하세요.

SELECT VERSION();
SHOW DATABASES;

Back_end/sql_edu_project의 해당 일자 파일을 열고 필요한 문장만 선택해 실행합니다. 쿼리 #1.sql 등 수업 원본은 삭제·변경 실습도 섞여 있으므로 전체를 일괄 실행하지 않습니다. SQL 과목의 sqldb·hr·scott은 Java 웹의 hk와 별개입니다.

employees 대용량 데이터는 저장소에 전부 포함되지 않습니다. 해당 수업에서 필요하면 원본 test_db와 SQL 수업 README의 설명에 따라 별도로 준비하세요.

HTML · CSS · JavaScript

Front_end의 해당 실습 HTML을 브라우저로 엽니다. fetch/AJAX처럼 HTTP가 필요한 단원은 VS Code 확장 Microsoft Live Preview로 폴더를 열어 실행합니다. 정적 실습에는 Node가 필수는 아닙니다.

React · Next.js — 프로젝트마다 의존성 설치

Node 24 LTS를 설치하고 새 PowerShell 창에서 node --version, npm.cmd --version을 확인합니다. 아래 cd 명령은 저장소 루트에서 실행합니다.

첫 React/Vite 실습 (레슨 01):

cd Front_end\4.react\lessons\01_react_jsx_props
npm.cmd ci
npm.cmd run dev

터미널에 표시된 Local 주소(보통 http://localhost:5173)를 엽니다. 서버를 멈출 때는 Ctrl+C입니다.

Next.js 졸업 과제: 저장소 루트에서 새 터미널을 열고 실행합니다.

cd Front_end\4.react\stock-dashboard
npm.cmd ci
npm.cmd run dev

터미널의 Local 주소(보통 http://localhost:3000)를 엽니다. macOS/Linux에서는 npm.cmd 대신 npm, 경로 구분자는 /를 사용합니다.

설치 상태를 한 번에 확인하기

Windows용 점검 도구를 넣었습니다. 설치·삭제·시스템 설정 변경 없이 현재 터미널의 도구 버전, JDBC 파일 유무, 로컬 포트만 확인합니다. 비밀번호는 읽지 않으며 관리자 권한도 필요하지 않습니다.

점검 스크립트 다운로드 ↓ 실행 전 코드 보기 ↗

저장소 루트에서 필요한 과목 명령 하나를 실행하세요. 실행 정책에 막히면 정책을 바꾸지 않고 위의 개별 확인 명령을 사용해도 됩니다.

powershell -NoProfile -File .\setup\Check-Environment.ps1 -Track Web

Web 대신 Java, SQL, React, Static, All도 가능합니다. 다운로드한 파일만 따로 실행하면 버전은 확인할 수 있지만 저장소의 JDBC 경로를 찾지 못할 수 있습니다.

• PASS: 그 검사 항목을 통과했습니다.
• CHECK / MISSING: 버전·경로를 확인하거나 필요한 도구를 설치합니다.
• INFO: 참고 정보입니다. 열린 포트는 다른 프로그램일 수도 있어 DB 인증 성공을 뜻하지 않습니다.

자동 점검만으로 실습 준비 완료를 판단하지 않습니다. Java 웹은 Java 21 확인 → DB 쿼리 성공 → Tomcat 회원 목록 표시, React는 의존성 설치 → 개발 서버 실행 → 브라우저 화면 표시까지 확인하세요.

여기에서 막혔다면

무엇을 근거로 정한 환경인가요?

과거 설치 목록을 전부 복원한 문서가 아니라, GitHub에 남은 수업 자료와 프로젝트 설정으로 다시 준비할 수 있게 만든 안내입니다.

• 웹 개발 개념 01: JDK 21, Tomcat 10.1, MariaDB 12.3.3, Connector 3.3.x 기록.
• 웹 실습 README: Eclipse 2026-03 및 JDBC 3.3.3 기록, DB 스키마와 실행 절차.
• Eclipse .classpath와 Project Facets: JavaSE-21, Tomcat v10.1, Web 6.0 설정.
• React 첫 레슨 package.json · 졸업 과제 package.json: 프런트엔드 의존성 근거. 과거 Node 버전은 확정하지 않습니다.

노트에 Maven 3.9.16, Spring Framework 6.1.x / Boot 3.2~3.3, MyBatis 3.5.15+ 조합도 있지만, 현재 두 Eclipse 웹 프로젝트에는 Maven/Gradle 빌드 파일이 없습니다. 해당 수업에서 필요해질 때 추가하면 됩니다.

공식 기준: Tomcat 호환 표 · JDK 21 · Node LTS 현황 · MariaDB 릴리스 · Connector/J 릴리스 · VS Code Java 안내