[HTML][국비교육] Day 33

Ga02·2023년 2월 13일
eclipsehtml국비교육

국비교육

목록 보기
31/82

🔍 Front End 개발

UI, 화면 관련 개발 👉🏻 Web Client측에서 보여질 화면을 구현
사용자가 프로그램을 이용할 수 있도록 제공되는 화면

  • HTML
  • CSS
  • Javascript
  • jQuery

<교육기간>

  • UI 디자인 ~02.27
  • UI구현 ~03.17
  • 참고 사이트 : 생활코딩
  • JAVA SE API + EE -> EE가 웹개발 할 수 있는 톰캣
  • DNS(Domain Name Service) : IP를 도메인으로 바꿔줌

🔍 설치하기

➰ Apache Tomcat 웹 서버 다운로드

  • 아파치 톰캣
  • https://tomcat.apache.org/ 접속
  • 왼쪽 Download 에서 'Tomcat 9'링크 클릭
  • 하단 '9.0.71' 섹션 확인
  • 'Binary Distributions' 섹션 확인
  • 'Core:' 섹션 확인
  • 'zip' 링크 클릭
  • 'apache-tomcat-9.0.71.zip' 파일 확인
  • 압축 해제
  • 'apache-tomcat-9.0.71' 폴더 확인

➰ 이클립스 JEE(Java Enterprise Editon) 다운 받기

  • 웹 개발용 이클립스
  • https://www.eclipse.org/ 접속
  • Download 버튼 클릭
  • 다운로드 링크 밑에 'Download Packages' 링크 클릭
  • 우측 'MORE DOWNLOADS' 섹션 확인
  • 'Eclipse 2022-06 (4.24)' 링크 클릭
  • Eclipse IDE for Enterprise Java and Web Developers 항목에서 운영체제에 맞게 다운로드
  • 'eclipse-jee-2022-06-R-win32-x86_64.zip' 파일 확인
  • 압축 해제
  • 폴더 내 eclipse.exe 실행

➰ 이클립스에서 사용할 파일들의 한글 인코딩 설정하기

UTF-8 로 변경하기 👉🏻 Window 메뉴의 Preferences 항목에서 설정
1. General - Workspace 선택

  • Text file encoding 항목
  • Other: UTF-8 선택
  • Apply 버튼 클릭
  1. Web 메뉴
  • CSS Files / HTML Files / JSP Files
  • Encoding: ISO 10646/Unicode(UTF-8) 항목 선택
  • 각각 Apply 버튼 클릭

➰ 글꼴 바꾸기

  • General - Appearance - Colors and Fonts
  • Basic - Text Font 선택하고 Edit...
  • 글꼴 선택 (ex. 나눔고딕코딩)
  • Apply

➰ 적용된 Java Compiler 버전 설정

  • Java - Compiler
    Complier compliance level : 11
  • Java - Installed JREs
    • Add.. 버튼 클릭
    • Standard VM 선택, Next
    • JRE home: 항목에서 Directory... 버튼 클릭
    • Java Home 폴더 선택 버튼 클릭
    • Finish
    • Installed JREs 에서 추가된 jdk를 체크
      (이전 jre 항목 선택하고 Remove)

➰ 이클립스에 서버 실행 환경(Server Runtime) 추가하기

  • Server항목 - Runtime Environments 선택
  • Add... 버튼 클릭
  • Apache 폴더 - Apache Tomcat v9.0 선택, Next
  • Tomcat installation directory: 에서 Browse...버튼
  • 톰캣 압축 해제한 폴더 선택
  • 톰캣 서버 환경 추가된 것 확인하고
  • Apply and Close

➰ Tomcat WEB Serv접속하기

  • 톰캣 서버 실행

  • 브라우저를 이용한 접속

    • IP : 127.0.0.1:8088 또는 자기IP:8088
      • cmd 창에서 ipconfig 입력하면 자기 컴퓨터 IP 확인 가능
        👉🏻 IPv4 주소 . . . . . . . . . : 192.168.10.44
    • 호스트 : localhost:8088
      👉🏻 호스트는 PC 이름

  • 접속하고, 그 컴 안에서 어떤 프로그램으로 가야할 지는 포트번호로 구분

    • 포트번호 : 8080, 8088...

  • 프로그램 내에서 어떤 웹 모듈(프로젝트)로 갈지 /Context Path로 구분

    • 프로젝트 하나를 Web Module이라고, 톰캣 하나에 여러 웹모듈을 둘 수 있음
      /Front/test.html

  • 톰캣버전 - 서블릿 버전
    8.0 - 3.0 / 8.5 - 3.1 / 9.0 - 4.0

➰ 서버에 배포(업로드, Deploy)될 프로젝트(웹 모듈) 설정하기

Dynamic Web Project를 만들어서 배포될 프로젝트로 설정할 수 있음

  • Servers 탭에 추가된 서버 항목에 마우스 우클릭
  • Add and Remove 메뉴 선택
  • 왼쪽 Available 영역 : 개발중인 프로젝트 목록 (아직 서버에 업로드 되기 건)
  • 오른쪽 Configured 영역 : 서버에 업로드(배포)될 프로젝트 목록(웹모듈로 등록될 예정)
  • 업로드할 프로젝트를 오른쪽으로 옮기고 Finish
  • 서버가 (재)시작 될 때 배포가 이루어짐

➰ 웹 서버 기본 접속 주소

http://192.168.10.44:8088/Front/test.html
http://localhost:8088/Front/test.html

➰ URL 형식

Uniform Resource Locator, 형식이 있는 자원(웹) 파일 위치지정자 👉🏻 인터넷 상의 정보(자원, Resource)가 어디 있는지 표현하는 형식
프로토콜://인터넷주소[:포트주소][/디렉토리[/파일이름]][?쿼리스트링]

  • 프로토콜, http : 통신 방식이 WEB 서비스 형식임을 나타냄
  • 인터넷 주소, localhost : 서버의 네트워크 위치를 나타냄
    IP주소나 HOST주소(도메인주소)를 이용할 수 있음
    localhost는 서버의 위치를 자기 자신임을 나타냄 👉🏻 루프백 호스트
  • 포트번호, 포트주소, Port : 해당 컴퓨터에서 어떤 프로그램이 제공하는 서비스인지 표현함
    톰캣 웹서버에 지정한 포트번호를 사용 8088
  • 컨텍스트 패스, Context path : 웹 서버에 등록된 웹 모듈의 이름을 경로로 표현한 것
    여러 개의 모듈이 배포되었을 때 서로 구분하기 위한 경로로 사용
    /Front -> 모듈에서 path경로를 /로만 설정시 생략 가능
  • 자원의 경로 : 웹 모듈 내 존재하는 자원을 지칭
    클라이언트가 서버로부터 서비스받을 자원의 경로를 표현
    폴더가 있으면 폴더 구조까지 전부 표현해야 함
    /test.html, /WebContent/banana/html

➰ 웹 프로젝트가 톰캣 서버에 배포되는 위치(경로)

웹 모듈이 저장(업로드)되는 폴더

  • 웹 서비스 대상 자원(파일, 자바클래스 등)이 모여있는 곳
  • 웹 서버는 이곳에 모듈로 업로드된 파일(자원)을 이용해서 웹 어플리케이션을 작동시킴
  • 이클립스 프로젝트의 Deployment Assenbly 설정 항목에서 세부 사항을 설정할 수 있음
  • 경로
    D:\eclipse-web-workspace(워크스페이스)\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\Front(프로젝트명)
    • Client URL
      http://192.168.10.44:8088/test.html
    • 서버 배포 폴더
      D:/eclipse-web-workspace/.metadata/.plugins/org.eclipse.wst.server.core/tmp0/wtpwebapps/Front/test.html
    • 이클립스 개발 폴더
      file:///D:/eclipse-web-workspace/Front/src/main/webapp/test.html

➰ 웹 화면 구현의 구성 요소

  • Front End
    클라이언트(브라우저)에 보여지는 부분 개발
    사용자 화면(UI)을 구성
    웹 표준으로 정해진 요소와 버전을 따름
  • HTML 5
    웹 화면의 구조를 만들어내는 언어
    화면을 구성하는 구성물들을 코드로 작성
  • CSS 3
    웹 화면의 스타일(모양)을 지정하는 언어
    HTML로 작성한 구성물의 모양(색상, 크기, 위치 등)을 지정
  • Javascript (ECMA Script 6, ES2015)
    웹 화면의 동작을 정의하는 언어
    움직임에 대한 코드를 추가할 수 있음

➰ 개발업무 형태

  • SM, System Management
    유지보수, 운영
  • SI, System Integration
    신규 시스템 구축, 신규 개발
  • 솔루션 자체개발
    자체 소프트웨어 개발 & 유지보수
    고객사 이행

➰ 프로젝트 개발자 역할

  • PM, Project Manager
    • 기술총괄, 프로젝트 관리
    • 인력, 일정 등을 관리
    • 외적요소에 대한 조율
  • PL, Project Leader
    • 개발 중간 책임자
    • 개발 파트별로 한 명씩 배치
    • 구현 담당
  • PE, Project Engineer
    • 개발 실무자
    • 상세 설계 & 개발 책임
profile
Ga02
IT꿈나무 댓츠미
이전 포스트

[DB][SQL][국비교육] Day 31

다음 포스트

[HTML][국비교육] Day 34

0개의 댓글