HCD 랩스 10월 5주차 - 1차 프로젝트 및 HTML

우영·2025년 10월 30일

HDC 랩스 풀스택 1기

목록 보기
10/20

assignment
파이썬 성적관리 - 자바 메인 하나에 풀기
https://blog.naver.com/heaves1/224025711023 - sql 최종 완성하고 이해하기

review
fstring, function_args_exam2, 클래스 예제1, join, mro, file_test1. SQL 인라인뷰

10/30 실무자 특강

도어락 플랫폼

  • device API - java (mqtt topic : 펌웨어 업데이트 등등 사용) 들어올때는 HTTP 방식,
    • 쓰고 있는 거 firebase,사진을 s3로 저장(URL을 가지고 들고오는 방식), RDS, Mqtt corew
      • EC2 : AWS 클라우드 위에서 리눅스나 윈도우 서버를 직접 띄워서 쓰는 서비스 = 컴퓨터를 빌리는 것과 같음
      • 람다 : 서버를 직접 띄우지 않고, 코드가 실행될 때만 돈을 내는 서버리스(Serverless) 서비스
      • “ELB”는 AWS (Amazon Web Services)에서 제공하는 로드 밸런서(Load Balancer) 서비스 즉, 여러 서버(EC2, 컨테이너 등) 사이에서 트래픽을 자동으로 분산시켜주는 역할
  • mobile API

통신
BLE 통신 : 디바이스와 앱
Rest API : 앱과 서버
MQTT 단방향 : 디바이스와 서버

  • 프로젝트 구조 잡을 때 DB구조 중요. 기획 단계부터 설계 중요

컨테이너 기반 프로젝트(ECS 중심)
도커 = 컨테이너 만드는 도구
도커 이미지(Docker Image) = “컨테이너가 만들어질 설계도(템플릿)”
컨테이너(Container) = “이미지로부터 실제 실행 중인 인스턴스(실물 앱)”

Rest API
= 통신 규약
= sd

Http 요청 - 응답
polling
SSE
webSocket
MQTT
RabbitMQ
Kafka
등등 개념 정리 필요

10/31 - 프론트엔드

  • assignment
    = 파이썬 성적관리 - 자바 메인 하나에 풀기
    = https://blog.naver.com/heaves1/224025711023 - sql 최종 완성하고 이해하기

  • review
    = fstring, function_args_exam2, 클래스 예제1, join, mro, file_test1. SQL 인라인뷰
    = pub, sub하고 자바에서 쓰레드 만들기

  • 클라이언트 - 서버 - 자바

    • 웹 서버 = 클라이언트가 요청하는 걸 분석하고 클라이언트에 요청받은걸 넘겨줄 수 있는 것
    • 자바쪽에서 웹쪽을 처리하는 기술 : servlet + jsp -> 개념은 알아야함.
    • 스프링 : servlet + jsp가 내장 되어 있음
    • container = 실행 환경, 자바에서 만든 Servlet을 관리하고 실행 시켜주는 역할
    • WAS(Web Application Server) = 웹 서버 + 서블릿 container도 포함

  • client 프론트엔드

    • HTML 웹상에 보여지는 형식문서의 구조를 만드는 작업을
    • CSS : 예쁘게 레이아웃 잡음
    • javaScript : 실행하면 처리되는 것, 코드를 한땀한땀 떠야해서 나온게 라이브러리로 jquery(우리는 javascript 씀)

  • 나중에 음성인식도 해봤으면 좋겠음

  • 프론트엔드 시작 - 백엔드를 위해서 필요한 기술

    • 개발자 도구(f12) - elements 중요 나중에 디버깅 다 여기서 함
    • 꾸미기는 나중에 프로젝트에서 무료 템플릿으로 꾸며보기

  • HTML : 웹페이지 구조를 만들때 사용하는 것 텍스트나 이미지

  • CSS : 시각적, 레이아웃을 잡는 것

  • window = 창

  • 뷰포트 =

  • document =

  • 웹 서버 등록

  • 톰캣
    = 내 컴퓨터를 웹서버로 만들어주는 프로그램

    • 클라이언트(브라우저)가 요청을 보냄
      → “나 hello.html 보여줘!”
    • 톰캣이 그 요청을 받아서 hello.html 같은 정적 파일(HTML/CSS/JS) 이면 그대로 보내주고
      자바 코드(Servlet, JSP) 요청이면 “컨테이너”에서 실행시켜서 결과를 보내줌

  • 톰캣 설치 맨 밑에거

  • 나중에 8080으로 바꿀꺼 뭐랑 겹침 아이디 비번 admin 21버전







  • 내 pc가 웹서버가 됨

  • 메모장으로 연결 프로그램 열기

  • 바디 수정

  • web-inf랑 web.xml이 다 있음 어떤 폴더든 위치 시키는 곳?

  • 기본이 webapps임

  • 톱캣을 쓰나 웹로직을 쓰나 들어가는 경로만 다름.

  • 웹 inf 스펙에 맞춰서 작업해야 톰캣이 디렉토리로 인식 가능

  • 디렉토리 만들고 root꺼 복사 후 hello.html 텍스트파일로 만듦

  • html을 메모장으로 엶.

이제 이클립스에 어떻게 하는지 진행

  • 톰캣은 하나만 실행가능 포트점유로
    • 밖에 있는 톰캣을 끊어줌

  • 중지 됨

  • 이클립스 webwork 만들어서 new server


  • 설정
    더블클릭 후 tomcat admin port 설정(원래는 안되어 있음)하고 저장

  • 이클립스에서 서비스할 수 있는 디렉토리 만들기
    정해진 규칙대로 서버가 실행되는 위치까지 가져놔야 실행됨. 기본은 원래 자바 프로젝트 였는데 이제 다이나믹 프로젝트로 만들어야 함.

  • 이름 설정하고 next

  • 배포명세서 설정 클릭

  • 포준화된 구조가 아님 src -

    • 개발자가 편하게끔 만듦.

  • 자바파일은 여기다 생성

  • webapp 선택 - 웹 요소(CSS, html, 이미지, javaScript 파일들)

    • html 파일 만듦.

  • utf-8로 바꾸기 위한 설정

    • general 맨밑에 웹 html, jsp뭐 등등 utf로 바꾸기

  • html 실행 톰캣 서버 설정 next누르면

  • 왼쪽 우리 오른쪽 서버 인식

  • 엣지에서 크롬으로 바꾸기

  • 서버가 인식하는 폴더
    C:\iot_fullstack1\work\webwork.metadata.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps

  • 표준 구조
    frontend\WEB-INF\classes\test

  • 서버 중지

  • 컨트롤 시프트 / -> 주석

  • 들여쓰기

    업로드중..

  • 오류 확인?
    http://validator.w3.org/nu/#textarea

[서버가 인식하는 위치]
C:\iot_fullstack1\work\webwork\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps

[미선]
- testwebwork 라는 워크스페이스를 만들기
- 서버등록
- testweb이라는 dynamic web project만들기 
  html 폴더 만들고 test.html 만들기
  간단한 메시지 추가해서 실행해보기
  
  1. 웹 표준
    => 웹에서 사용되는 표준기술이나 규칙을 의미 
                   ------------
                   전 세계의 개발자들이 모두 사용(W3C)
  HTML : 웹의 구조를 담당(웹 페이지를 구성하는 컨텐츠를 정의)
  CSS : 시각적인 표현 담당(예쁘게 꾸미거나 레이아웃을 구성)
  javascript: 컨텐츠(웹 페이지의 구성요소)를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당
  
  2. 웹 요청
    http://localhost:8088/frontend/html/basic.html
    ---     --------   --- -----    --- -------------
    프로토콜   서버IP     port context  폴더 실행될 web application파일명
    
    
  3. HTML(HyperText Markup Language)
     - 웹페이지의 뼈대를 만드는 목적으로 사용되는 표준 마크업 언어
     - 문서의 구조를 표시
     - 미리 정의되어 있는 태그를 이용해서 구조를 정의
     <!DOCTYPE html> ------------------------- HTML문서의 시작
	 <html>
		<head>  ------------------------------ 웹 브라우저에 표시되지 않지만 문서의 정보를 정의하는 태그의시작
			<meta charset="UTF-8">
			<title>문서의 제목</title>
		</head> ------------------------------ head태그의 끝
		<body> - 실제 웹 페이지에 표시되는 컨텐츠를 정의하는 태그
			<h1>HTML 연습하기</h1>
		</body>
		</html> -------------------------HTML문서의 끝
     - 태그는 여는 태그와 닫는 태그 한 쌍으로 이루어진다.
        <태그></태그>
     - 태그내부에는 속성을 여러 개 정의해서 사용할 수 있다.
 
 4. 이미지 파일
 	- jpg, png,tif ... 이미지 파일을 삽입
 	- <img>태그로 정의
 	- 경로는 이미지파일의 경로 이외에 경로가 나오는 모든 곳에서 동일하게 적용
 	1) 절대경로
       - 현재 문서의 위치를 기준으로 경로를 파악할 수 있도록 
         full name을 모두 명시										   
         ----------
         서버의 ip와 port를 모두 명시
       - ip와 포트는 생략이 가능
       - /frontend/images/bts1.jpg
       - /는 root부터 찾아나겠다는 의미
       - path /로 시작하면 절대경로라는 의미
 	2) 상대경로
 	- 현재 문서의 위치를 기준으로 src에 정의한 경로를 찾는다.
 	  <img src="frontend/images/bts2.jpg" border="5" width="300" height = "400"/><!-- /가 없으면 상대경로 -->
 	  현재 작업중인 imagestest.html파일의 위치가 /frontend/html이 위치이므로 이 위치에서 부터 src속성에
 	  정의한 경로인 frontend/images/bts2.jpg를 찾는다.
 	  - . : 현재 디렉토리
 	  - ..: 상위 디렉토리
 	  
5. 하이퍼링크 
	- 클릭하면 다른 문서나 사이트로 이동할 수 있도록 연결
	- 문서내에서 이동 가능
	- <a> 태그 이용
	- 속성
	  href : 연결할 문서나 사이트주소(절대경로 or 상대경로)
	  target : 하이퍼링크에 연결될 문서가 실행될 위치
	  		_self: 현재문서 위에서 연결(기본값)
	  		_blank : 새 탭에서 실행
profile
우영
이전 포스트

HCD 랩스 10월 4주차

다음 포스트

HCD 랩스 11월 1주차 - 프론트엔드

0개의 댓글