2일차. ui-server 프론트엔드를 배우자(HTML)

 

ai-server: 파이썬 (.py)

api-server: 자바 (.java)

ui-server : 프론트엔드 (.html)

 

-java: 컴파일

*컴파일의 유무

*컴파일을 쓰는 언어: 컴파일러 (JDK에 있음) (번역)

*컴파일 필요 없는 언어: 인터프린터 (통역가)

* 통역<>번역

*자바는 번역, HTML은 통역

*통역: 장점: 빠르다/ 단점: 기록이 남지않고 오류가 발생할 수 있다. 돌이킬 수 없다.

-금융시스템을 만들려면 : 번역(돈을 날리면 안되니까)-그래서 느리더라도 기다릴 수 있음 JAVA로 짬

-게임 : 통역 (빨리 죽어버리라거?)

 

- 대전 화재로 인해 파이썬으로 바꾸려고 하고 있음

*파이썬은 통번역임(둘 다 갖고 있음)

 

- 기존 자바를 파이썬으로 넘기는 사람이 제일 좋은 인재가 됨(AI활용해서)

- 자바를 버리는 것은 안됨. 

- 정부가 2026년에 뭐하려고 하는지 봐야함. 새로운 흐름이고 3기니까 좋다~열심히 하자~쉬운 길은 아니다! BUT 틀린 길은 아니다

 

 

 

 

---

ui-server에 html로 헬로우 월드 나오게 해줘

 

1. 문서에서 주소 경로 복사

 

 

2. 윈도우+r : cmd 실행

 

2-1. cd C:\Users\hi\Documents\project\ui-server 넣기

2-2. cursor . 넣기

 

 

 

3. cursor 창이 나오면 

문서 추가-> main.html

* java 외에는 모두 소문자로 시작함. java만 대문자 시작

 

 

3-1.
@main.html 헬로우월드가 출력되게 코딩해줘

keep-run

 

3-2.
@main.html 실행해줘

 

4. 헬로우 월드가 써져있는 페이지가 뜸!

*구글을 기본 브라우저로 설정할 것

 

 

 

* 매번 저장하기 귀찮으니 Auto save

 

 

 

---

 

W3SCHOOL

 

https://www.w3schools.com/

 

 

 

 

 

 

1. HTML 스타일 - CSS

 

 

*java에도 바디가 있어? 있음(2일차 개념정리에서 자세히 다룸)

*body 앞은 head

*title은 이름, 자바의 메인

 

 

 

CSS는 헤드에 들어감

STYLE치고 Tab

p Tab치고 쓰고 싶은 거 쓰기

 

 

@main.html 여기에 하이미디어만 붉은 색으로 표시되는 스타일을 추가해줘

 

@main.html 팁: 캐스 케이딩(cascading) 이부분만 굵게 작성하는 스타일을 추가해줘

 

@main.html 팁: 캐스 케이딩(cascading) 이부분만 굵게 작성하는 스타일을 추가해줘

 

keep만 눌러주고 여기서는 굳이 실행해달라고 안해도 됨, 그냥 폴더에 들어가서 html 누르면 바뀌어져 있음.

 

 

---

GitHub에 올리기

 

 

1.프로필 누르기-Repositories 누르기

 

2. new누르기, 파일명 입력 후 creat repository

 

 

3. 이런 화면이 나오면 윈도우+->화살표 해서 양 옆에 창 띄운다음에

 

 

4. open git bash here 클릭

 

내용 붙여넣기 ctrl+C -paste- enter

 

 

5. 대신 주의할 점은! * git add Read.md 가 아니라 * git add .(한 칸 띄우고 온점)

 

 

 

---

html 계산기 만들기

(나중에 자바랑 연결하기)

 

 

1. 나는 계산기 만들거야, 셀렉트 옵션으로 하되 자바랑 연결하려고 해

@calculator.html 계산기 만들거야, 셀렉트 옵션으로 하려고 하는데 코딩해줘

 

 

이렇게 하고 -keep누르면 계산기 완성! 

와우..굉장히 멋진 세상

 

 

 

 

---

로그인 창 만들기

 

 

 

 

@index.html 여기에 아이디와 비밀번호를 입력하는 인풋박스를 만들고, 그 밑에 보라색으로 로그인 버튼을 생성해줘, 스크립트는 없게하고, 하면 중앙에 오도록 해줘.

 

 

 

 

 

로그인 화면을 누르면 계산기로 연결되게 해줘

배경색과 버튼색도 바꿔줘

 

 

*만약 뭔가 잘못되면 중간에 중단하면 에러뜰 수도 있으니까 일단 실행하게 하고 나중에 수정하기

 

* html과 java는 디즈니와 마블같은 느낌. 완전히 다름

 

 

---

Spring

스프링 부트 + 타임리프(Thymeleaf) + Gradle 기반 프로젝트를 DB 없이 로컬에서 시작하는 방법

 

 

이제 정말 진지하게 한다!

만약 이렇게 해도 버전이 달라지면 방법이 달라지기 때문에 원리를 이해해야함

 

https://spring.io/

Spring | Home

 

 

 

어제 한 JAVA, CLASS는 더 이상하지 않을 것, 이론을 학습하기 위해 작업한 것일 뿐!

 

스프링은 자바를 심플하게 만든다.

스프링은 자바의 현대화를 만든다.

 

 

 

---

스프링 부트 + 타임리프 + 그래들 조합, 커서 AI 개발 환경설정

 

윈도우 11에 스프링 부트+ 타임리프의 조합으로 커서 AI를 통해 로컬에서 개발할거야. 빌드 툴은 그래들을 사용할거야. DB는 아직 연결하지 않을 것이니, 초기 설정에서 DB는 제외해줘.

 * 스프링 부트[자바 담는통] + 타임리프(HTML 담는 통) 

 

* 윈도우 11 환경에서 스프링 부트 + 타임리프(Thymeleaf) + Gradle 기반 프로젝트를 DB 없이 로컬에서 시작하는 방법

 

윈도우 11 에 스프링 부트 + 타임리프 의 조합으로 커서 AI 를 통해 로컬에서 개발할거야 . 빌드 툴은 그래들을 사용할거야 . DB 는 아직 연결하지 않을 것이니, 초기 설정에서 DB 는 제외해줘

윈도우 11 환경에서, Spring Boot + Thymeleaf 조합으로, Cursor AI 에디터를 사용해, Gradle 빌드 도구 기반으로, DB 없이 로컬에서 스프링 프로젝트를 시작하는 거지?

지금부터 완전 초보자도 따라할 수 있도록 아주 쉽게 단계별로 설명해줄게.

 

 

1단계: 필요한 프로그램 설치

 

1. 자바 설치 (Java Development Kit, JDK)

Spring Boot는 Java로 만들어졌기 때문에 JDK 17 이상이 필요해.

• Oracle JDK 또는 OpenJDK 설치 👉

  https://adoptium.net/

  에서 "Temurin 17" 다운로드해서 설치해.

✅ 설치 후 터미널(cmd)에서 확인:

java -version

2. Cursor 설치 (AI 코딩 에디터)

너가 쓰고 싶은 Cursor AI는 VS Code 기반이라 설치도 쉽고, 자동완성도 좋아.

• 다운로드: 👉

  https://cursor.so

설치한 후 실행만 하면 됨!

 

 

2단계: Spring Boot 프로젝트 만들기

방법:

Spring Initializr

사용

이건 스프링 공식 사이트로, 쉽게 프로젝트를 만들 수 있어.

 

https://start.spring.io/

 

✅ 설정 방법:

설정 항목 값 Project Gradle - Groovy Language Java Spring Boot 최신 안정 버전 (예: 3.1.5) Project Metadata Group com.example Artifact myapp (원하는 이름 가능) Name myapp Package name com.example.myapp Packaging Jar Java 17 이상

✅ Dependencies (추가 기능 선택)

🔲 아래 2개만 체크해!

•  
• Spring Web (웹 앱 만들기용)
• Thymeleaf (템플릿 엔진: HTML과 Java 연결)

❌ DB 관련 항목은 선택 안 함!

 

 

 

21버전! 버전 맞춰서 다운 받는 것 중요

 

 

 

*  OAuth, Netflix- 넣으면 간지는 나지만 너무 비싸고 무거워져서 우선 네가지로 하고 기업에서 할 때는 넣으면 좋다.

 

누르기

 

 

알집 다운받으면- 문서로 넣고 압축 풀고 커서 열기

 

 

 

🟢 프로젝트 생성 및 열기

1.  
2. "GENERATE" 버튼 누르면
   myapp.zip
   파일이 다운로드됨.
3. 압축을 풀고, Cursor에서 **폴더 열기(Open Folder)**로 열어줘.

윈도우+r - cmd - cd 문서 복사붙여넣기- cursor .

 

잘했다고 칭찬받았다 ( 뿌듯 ^-^)

 

창 안뜰경우 이거 눌러주면 뜸

 

*** 여기서 인스텔 꼭 누르기!!!! 설치 안해서 다시함

 

*** 여기서 인스텔 꼭 누르기!!!! 설치 안해서 다시함

 

 

 

 

 

static: 이미지

templates: html

-> 여기에 아까 만든 index파일과 calculator파일을 만들고 복사 붙여넣기 한다음에 

 

 

 

터미널 누르기( 밑에 창에 터미널이 떠야함)

 

 

런 누르기

 

@DemoApplication.java 여기에서 run을 눌렀을 때 @index.html 이 실행되게 해줘

 

 

 

 

런 눌렀을때 페이지 뜨게 하는 방법 

 

-여기 누르면 됨!!

 

 

 

 

 

3단계: Cursor에서 프로젝트 실행 준비

 

1. Gradle 빌드 확인

Cursor 왼쪽 하단의 터미널 또는 Ctrl + ` (백틱)로 터미널 열고 아래 입력:

 

./gradlew build

정상 빌드되면 OK! (BUILD SUCCESSFUL 메시지 나옴)

 

2. 프로젝트 실행

./gradlew bootRun

성공하면 아래처럼 뜸:

Tomcat started on port(s): 8080 (http) with context path ''