티스토리 뷰

개발자교육

2024_06_18_오늘의 수업내용

regnator 2024. 6. 18. 11:00
728x90
반응형

오전수업내용 요약 - 첫 프로젝트 생성, 실행, 백업

 

1. 프론트앤드 = 클라이언트 측 언어

  • HTML
  • CSS
  • JavaScript
  • jQuery
  • 이미지, 영상, 음악 파일 등 각종 리소스

프로젝트 파일 위치: D:\leehyoungyeol\exwork52\ex\src\main\webapp

설정 및 개발 환경 구성

  1. JDK와 JRE 설치
  2. Apache Tomcat 위치: D:\leehyoungyeol\apache-tomcat
  3. Eclipse 위치: D:\leehyoungyeol\eclipse
  4. 작업공간 폴더 생성: D:\leehyoungyeol\htmlwork
  5. 프로젝트 생성: Dynamic Web Project
  6. HTML, CSS로 화면 개발 / JSP 파일 생성
  7. 프로젝트 실행: Ctrl + F11

JSP 파일 생성 방법

  1. webapp 폴더 선택
  2. 우클릭 -> New -> JSP 선택
  3. 파일명: a 입력 후 Finish 클릭

JSP 개념

  • Java: 컴파일 후 클래스 파일 생성
  • JSP: Java Server Page, JSP 파일은 Java로 변환되어 클래스 파일로 컴파일됨

JSP 파일 예시 (a.jsp)

<%@ page language="java" contentType="text/html; charset=EUC-KR"

pageEncoding="EUC-KR"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>

</head>

<body>

홍길동 입니다.<br/>

첫번째 실습입니다

</body>

</html>

프로젝트 실행 및 주소

  • Ctrl + F11로  실행
  • http://localhost:8080/ex/a.jsp 가 실행 주소 localhost대신 자기pc ip주소를 넣어도 실행가능

 

2. 자기 PC IP 주소 확인 방법

  1. 명령 프롬프트 열기
    • cmd
  2. 명령어 입력: ipconfig

3. 백업의 개념

  • 작업공간 폴더 전체 백업
    • 예) 원본: exwork52 -> 복사 후 백업 폴더: exwork52_backup_240617_1032
  • 프로젝트 백업
    • 예) 원본: D:\leehyoungyeol\exwork52\ex
    • 다른 폴더를 생성 후 프로젝트 백업
  • 프로젝트 내 폴더 백업
  • 프로젝트 내 파일 백업

4. 프로젝트 백업 방법

  1. 작성한 프로젝트 백업하기
    • 작성한 프로젝트 선택 후 우클릭 -> Export -> WAR file
    • 자세한 설정은 아래 첨부파일1 참조
    • 첨부파일1 - 밑줄부분은 나중에 java코드가 있을때 같이 백업할때 사용할 부분

    • 밑줄 부분은 나중에 Java 코드가 있을 때 함께 백업할 때 사용, 선택하지 않으면 Java 코드는 백업하지 않고 프론트엔드 부분만 백업
  2. 백업한 WAR 파일 불러오기
    • Project Explorer 빈 부분 우클릭 -> Import -> WAR file
    • WAR file 부분에서 작성된 ***.war 파일을 선택 후 Finish
  3. 프로젝트백업파일 작성시 파일명 규칙 예시
    • 년도별 / 버전 / 제목 / 작성자 / 작성일자 / 작성 시각 / 파일 상태(작성중 or 완료 or 검토 요청 등)
      • 예) v1_24년_52기_제목_작성자_검토요청_작성일자_작성시각.doc
      • 예) v1_24년_52기_제목_작성자_검토요청_작성일자_작성시각.docx
      • 예) v1_24년_52기_제목_작성자_검토요청_작성일자_작성시각.xls
      • 예) v1_24년_52기_제목_작성자_검토요청_작성일자_작성시각.ppt
      • 예) v1_24년_52기_제목_작성자_검토요청_작성일자_작성시각.html or jsp or java or xml 등

5. (약간 앞서간) JSP파일에서 이미지를 실행시키는 여러가지 방식 예제

<%@ page language="java" contentType="text/html; charset=EUC-KR"

pageEncoding="EUC-KR"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>

</head>

<body>

<h2>HTML Image</h2>

<img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="Trulli" width="500" height="333"><br/>

<!-- 상대경로 -->

<img src="./img/pic_trulli.jpg" alt="Trulli" width="500" height="333">

<img src="img/pic_trulli.jpg" alt="Trulli" width="500" height="333">

<br/>

<!-- 절대경로 -->

<img src="/ex/img/pic_trulli.jpg" alt="Trulli" width="500" height="333">

<br/>

<!-- 절대경로를 잡아주는 다른방법 -->

<img src="<%=request.getContextPath() %>/img/pic_trulli.jpg" alt="Trulli" width="500" height="333">

</body>

</html>

 

6.  프로젝트 생성시 프로젝트내 경로와 실제 경로 비교

좌측의 eclipse내의 프로젝트 경로와 우측의 windows탐색기 상의 경로

 

 

 

오후 수업 요약 - 이클립스를 통해 간단히 패키지&클래스 생성

1. 프로젝트에 패키지 생성하는 방법

프로젝트에 패키지 생성하는 방법

  • 패키지 이름은 보편적으로 주소부분을 거꾸로 쓴다. ex) ksmart.or.kr -> kr.or.ksmart

2. 간단한 class 생성

위에서 생성한 패키지에 class파일 생성하는 방법
public static void main(String[] args)를 채크해야 만들어진 class내에서 앞의 부분이 자동입력됨

3. 생성한 class설명 및 간단한 실습

  • 입력없고 리턴이 없는 경우 메소드 선언 및 호출

package kr.or.ksmart.a;

// 1. 하나의 패키지내 하나의 클래스에서 리턴 없고 입력 없는 메소드 선언 및 호출

// 패키지명 : kr.or.ksmart.a;

// 클래스명 : AA01

// class body(몸통,본체) = block : 7번라인 중괄호 열고 부터

// 21번 중괄호 닫고까지 입니다.

public class AA01 {

 

// 메소드명 : main

// method body(몸통,본체) = block

public static void main(String[] args) {

// 메소드 호출 : 작성순서 2번 / 실행순서 1번

a();

}

 

// 리턴 없고 입력 없는 메소드 선언 : 작성순서 1번 선언 / 실행순서 2번

// 메소드명 입력후 소괄호 열고 enter 중괄호 열고 enter

public static void a() {

System.out.println("01 a 메소드 실행");

}

}

 

 

  • 메소드내에 입력값이 있는 경우

package kr.or.ksmart.a;

 

public class AA01 {

 

public static void main(String[] args) {

// 메소드 호출

a("문성민");

}

 

// 메소드 선언

// String name = "문성민"

public static void a(String name) {

 

System.out.println("a 메소드 실행");

System.out.println(name + "<-name 변수에 담긴 값");

}

}

 

728x90
반응형

'개발자교육' 카테고리의 다른 글

24_06_24 오늘의 수업내용  (0) 2024.06.24
24_06_21 오늘의 수업내용  (0) 2024.06.21
2024_06_20 오늘의 수업내용  (0) 2024.06.20
2024_06_19 오늘의 수업내용  (0) 2024.06.19
2024_06_17 오늘 학습내용  (0) 2024.06.17