본문 바로가기

TIL/웹 프로그래밍(풀스택) - boostcourse30

Intellij에서 웹 프로젝트 생성 이 링크를 참고하였다. IntelliJ에서 Java 웹 프로젝트 생성 오늘 기준으로 IntelliJ 2020.2 버전💢의 완전 기본적인 Java 웹 프로젝트를 생성하기 위해 머리를 싸맨 결과 드디어 Java 웹 프로젝트 만들고 Tomcat에서 Servlet을 실행할 수 있었다. 😥Eclipse 너무 불편 velog.io 위의 링크를 참조하여도 계속 저장이 안되어있었는데, 위의 Create configuration을 클릭해야만 했다 ! 2021. 1. 7.
첫번째 파트 내용 정리 파트 1. 웹 프로그래밍 기초 - 웹 프론트엔드 프론트엔드와 백엔드의 역할과 관계 html로 웹페이지 구조 설계 css 레이아웃에 필요한 속성과 활용방법 파트 1. 웹 프로그래밍 기초 - 웹 백엔드 웹 개발에 대한 이해 개발 환경 설정 서블릿 (Servlet) HTTP 서블릿을 상속을 받아 개발 사용자가 어떤 방식으로 요청을 했느냐에 따라 doGet(), doPost(), service() 이런 메서드들을 오버라이딩해서 개발 서블릿 라이프 사이클 첫번째 호출될 때 : init() 서블릿이 갱신됐을 때 호출 : destroy() 출처 Boostcourse 2021. 1. 3.
5-4) Request, Response 객체 이해하기-1 요청과 응답 WAS는 웹 브라우저로부터 Servlet요청을 받으면, 요청할 때 가지고 있는 정보를 HttpServletRequest객체를 생성하여 저장합니다. 웹 브라우저에게 응답을 보낼 때 사용하기 위하여 HttpServletResponse객체를 생성합니다. 생성된 HttpServletRequest, HttpServletResponse 객체를 서블릿에게 전달합니다. HttpServletRequest http프로토콜의 request정보를 서블릿에게 전달하기 위한 목적으로 사용합니다. 헤더정보, 파라미터, 쿠키, URI, URL 등의 정보를 읽어 들이는 메소드를 가지고 있습니다. Body의 Stream을 읽어 들이는 메소드를 가지고 있습니다. HttpServletResponse WAS는 어떤 클라이언트가 .. 2021. 1. 3.
5-3) Servlet 라이프 싸이클-1 어떤 객체의 생성부터 소멸까지의 과정을 라이프 사이클(Life Cycle)라고 합니다. LifecycleServlet HttpServlet의 3가지 메소드를 오버라이딩 init() service(request, response) destroy() package examples; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletConfig; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.Ht.. 2021. 1. 2.
5-1) Servlet 이란? Servlet 작성 방법 자바 웹 어플리케이션(Java Web Application) WAS에 설치(deploy)되어 동작하는 어플리케이션입니다. 자바 웹 어플리케이션에는 HTML, CSS, 이미지, 자바로 작성된 클래스(Servlet도 포함됨, package, 인터페이스 등), 각종 설정 파일 등이 포함됩니다. 자바 웹 어플리케이션의 폴더 구조 WAS, 미들웨어, framework등을 사용할 때는 약속들이 정해져있다. 따라서, 위와 같은 폴더 구조를 반드시 지켜야한다. web.xml(배포 기술자) : 웹 애플리케이션의 정보를 가지고 있음 *) cmd창에서 tree /F 명령어로 트리구조 확인 가능 서블릿이란? 자바 웹 어플리케이션의 구성요소 중 동적인 처리를 하는 프로그램의 역할입니다. 서블릿을 정의해보면 서블릿(servlet.. 2021. 1. 1.
4-6) HelloWorld 서블릿 컴파일 및 실행하기-1 URL 주소 http://localhost:8080/{프로젝트이름}/{URL Mapping값} http://localhost:8080/firstweb/HelloServlet import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * Servlet implementation c.. 2021. 1. 1.
4-5) Tomcat 다운받기 및 설치하기 들어가기 전에 word 파일을 열어서 내용을 확인하기 위해서는 ms office의 word 프로그램이나 viewer가 필요합니다. 웹 어플리케이션을 실행하기 위해서도 필요한 것이 있습니다. 그것이 WAS이고, 이번 학습에서 설치할 Apache Tomcat은 WAS 중 하나입니다. 웹 어플리케이션을 실행하기 위해서 필요하므로 설치해야 합니다. 학습하기 Apache Tomcat이란? 아파치 톰캣(Apache Tomcat)은 아파치 소프트웨어 재단(Apache Software Foundation, ASF)에서 개발한 세계에서 가장 많이 사용되는 WAS(Web Application Server)입니다. 컴퓨터에 운영체제를 설치해야만 컴퓨터를 사용할 수 있는 것처럼, 자바를 이용하여 작성된 웹 어플리케이션은 WA.. 2021. 1. 1.
4-4) HelloWorld 컴파일하고 실행하기 Java Code Conventions (프로그래머들끼리의 약속) 클래스명 : 첫글자를 대문자로 프로젝트명, 패키지명 : 소문자 package first; public class Hello { public static void main(String[] args) { System.out.println("Hello world"); } } 출처 Boostcourse - 4-4) HelloWorld 컴파일하고 실행하기 2021. 1. 1.
3-7) 디버깅-HTML-CSS 크롬 개발자도구의 Element panel을 잘 익혀두는 것이 중요합니다. 개발자도구를 통해서 쉽게 할 수 있는 일들을 정리하면 다음과 같습니다. CSS Style을 inline 방식으로 빠르게 테스트할 수 있습니다. 현재 엘리먼트의 값을 임시로 바꿀 수 있습니다. 최종 결정된 CSS 값을 확인할 수 있습니다. 출처 Boostcourse - 3-7) 디버깅-HTML-CSS 웹 프로그래밍(풀스택) 부스트코스 무료 강의 www.boostcourse.org 2020. 12. 30.
3-6) float 기반 샘플 화면 레이아웃 구성 기본배치를 한 이후에 필요한 부분을 float를 사용해서 좌/우로 배치하는 것이 일반적입니다. 비율조정은 %를 사용해서 배치할 수도 있습니다. 실습코드 html 부스트코스는 정말 유익합니다. menu home name 반가워요! :-) crong jk honux pobi oh~ right 코드스쿼드(주) css li { list-style:none; } header { background-color : #eee; } #wrap { overflow:auto; margin:20px 0px; } .left, .right, .realright { float:left; height: 200px; } .left { width:17%; margin-right:3%; background-color : #47c; } ... 2020. 12. 29.
3-5) Element가 배치되는 방법(CSS layout)-1,2 css파일의 올바른 주석은 무엇일까요? 1과 같은 해석되지 않는 값을 사용할 수도 있지만, 다른 프로그래밍 언어처럼 css도 주석이 있습니다 /* */ 를 사용해서 주석처리를 할 수 있답니다. 엘리먼트가 배치되는 방식 엘리먼트를 화면에 배치하는 것을 layout 작업이라고도 하고, Rendering 과정이라고도 합니다. 편의상 우리는 배치라고 할 겁니다. 기본 엘리먼트는 위에서 아래로 배치되는 것이 기본입니다. 하지만 웹사이트의 배치는 다양하게 표현 가능해야 하므로, 이를 다양한 방식으로 배치할 수 있도록 다양한 속성을 활용합니다. 중요하게 이해해야 할 속성은 다음과 같습니다. display(block, inline, inline-block) position(static, absolute, relativ.. 2020. 12. 27.
3-4) CSS 기본 Style 변경하기 CSS style 적용은 글자색, 배경색 등이 가장 자주 사용되는 것들입니다. 이런 속성은 위치 값과 크기를 지정하는 것과 달리, 색상 위주로 값을 부여합니다. 색상 관련 값은 다양한 색을 일관된 방법으로 표현하기 위해 주로 16진수 표기법을 사용합니다. font 색상 변경 color : red; color : rgba(255, 0, 0, 0.5); color : #ff0000; //16진수 표기법으로 가장 많이 사용되는 방법이죠. font 사이즈 변경 font-size : 16px; font-size : 1em; udemy css 유료강의 강의 노트 참조 (링크) 배경색 background-color : #ff0; background-image, position, repeat 등의 속성이 있습니다. b.. 2020. 12. 27.
반응형

티스토리툴바