부스트코스 코딩일지/웹 프로그래밍 기초
-
[부스트코스] Servlet -BE부스트코스 코딩일지/웹 프로그래밍 기초 2020. 2. 14. 01:45
JDK와 eclipse ee 그리고 WAS 종류의 하나인 Tomcat까지 설치하여 본격적으로 웹 애플리케이션을 동작할 준비를 마치었습니다. 웹 어플리케이션은 정적인 콘텐츠와 동적인 콘텐츠로 나누어 볼 수 있는데요. 프로그램을 수행해서 페이지를 동적으로 만들어 주는 것이 바로 서블릿입니다. 서블릿의 역할과 작성 방법에 대해 알아보도록 하겠습니다! Servlet 이란? 자바 웹 애플리케이션의 구성요소 중 동적인 처리를 하는 프로그램입니다. 서블릿은 WAS에 동작하는 JAVA 클래스인데요, HttpServlet 클래스를 상속받아 동작합니다. 웹페이지의 화면 자체를 JSP로 표현한다면, 그 안에서 이뤄지는 복잡한 프로그래밍은 서블릿으로 구현하는 것입니다. 서블릿은 요청이 들어오면 그때 코드가 실행되어 응답 결과..
-
[부스트코스] CSS layout부스트코스 코딩일지/웹 프로그래밍 기초 2020. 2. 2. 18:08
엘리먼트를 화면에 배치하는 것을 Layout 작업이라고 하고, Rendering 과정이라고도 합니다. 기본적으로 엘리먼트는 위에서 아래로 배치됩니다. 더 다양한 방식으로 배치할 수 있도록 다양한 속성이 제공되고 있는데요. 오늘은 이 속성에 대해 공부해보도록 하겠습니다! display - block / inline-block : 위에서 아래로 쌓이는 레이아웃 속성입니다. - inline : 왼측에서 우측으로 빈자리를 차지하며 흐르듯이 엘리먼트가 공간을 차지하는 속성입니다. 높이와 넓이를 지정해도 반영이 되지 않습니다. position 엘리먼트가 상대적/절대적으로 배치되도록 하는 속성입니다. -staitic (기본) : 순서대로 배치 - absolute : 기준점을 상위엘리먼트로 단계적으로 찾아가는데 sta..
-
[부스트코스] CSS -FE부스트코스 코딩일지/웹 프로그래밍 기초 2020. 2. 2. 15:02
전 글에서 웹 페이지의 구조를 담당하는 HTML에 대한 기초적인 공부를 하였습니다. 이번 시간에는 스타일을 담당하는 CSS에 대해 공부해 보도록 하겠습니다. 선언방법 우선, CSS의 구성을 먼저 살피어보겠습니다. span: selecor color: property red: value 의 역할을 합니다. 이렇게 만든 style을 HTML 페이지에 적용하는 3가지 방법이 있습니다. 1. inline HTML 태그 안에 속성으로 적용합니다. 아래 그림처럼 말이죠. 이렇게 적용된 스타일은 css파일에 적용한 것보다 가장 먼저 적용됩니다. 2. internal style 태그로 지정합니다. 이렇게 되면, html 문서 안에 구조에 관한 태그와 스타일에 관한 태그가 섞이게 되면서 가독성이 떨어지고, 따라서 유지 ..
-
[부스트코스] HTML -FE부스트코스 코딩일지/웹 프로그래밍 기초 2020. 2. 2. 13:16
Tags 개발자 도구를 통해 웹 페이지의 소스 코드를 보면 형태의 다양한 태그들이 사용된다는 것을 알 수 있습니다. HTML 태그는 다양한 만큼 모두 각각의 용도와 의미를 갖고 있습니다. 이런 특징을 'Semantic 하다'라고 표현합니다. 이러한 HTML 태그를 모두 외워야 할 필요는 없습니다. 자주 사용되는 것 위주로 공부하면 좋을 것 같습니다. 하지만, 더 우선시되는 것은 적절한 의미에 맞는 태그를 찾아 사용하는 것이 겠지요. HTML 태그 종류는 태그 정리 사이트를 통해 쉽게 알 수 있습니다. [출처: https://www.edwith.org/boostcourse-web/lecture/16669/] Layout 태그 여러 개의 HTML 화면을 동시에 보면 레이아웃이 어느 정도 동일한 것을 알 수 ..
-
[부스트코스] WAS부스트코스 코딩일지/웹 프로그래밍 기초 2020. 1. 19. 17:47
WAS는 저도 웹 프로그래밍을 공부하면서 처음 들어보는 용어인데요 오늘은 WAS의 정의와 역할, 종류를 알아보도록 하겠습니다. WAS는 미들웨어의 한 종류입니다. 그렇다면 미들웨어는 무엇일까요? DBMS라는 것이 있습니다. 이것은 데이터베이스를 관리하는 소프트웨어입니다. 대표적으로 MySQL, Oracle, MariaDB 등이 있습니다. 이를 통해, 개발자들은 데이터를 쉽게 관리할 수 있게 되었습니다. DBMS는 서버 형태로 서비스를 제공하기 때문에, 이러한 DBMS에 접속해서 동작하는 클라이언트 프로그램 또한 많이 만들어졌습니다. 하지만 이 클라이언트 프로그램은 프로그램 로직이 변경될 때마다 매번 다시 배포되어야 한다는 것과 클라이언트 프로그램의 크기가 커진다는 단점을 갖고 있었는데요. 즉, DBMS에..
-
[부스트코스] 웹 서버부스트코스 코딩일지/웹 프로그래밍 기초 2020. 1. 19. 17:01
웹 브라우저를 실행한 후 주소 입력창에 url 주소를 입력하면, url 주소에 해당하는 결과물이 화면에 보이게 됩니다. 이를 가능하게 해주는 것이 바로 웹 서버인데요. 클라이언트인 웹 브라우저가 웹 서버에 url을 요청하고 이에 해당하는 정보를 보여주게 되는 것입니다. 오늘은 웹 브라우저의 요청을 받아 HTML 문서나 오브젝트를 반환하는 웹 서버의 역할과 종류 대해 알아보도록 하겠습니다. 웹 서버의 역할 : 클라리언트가 요청하는 HTML 문서나 리소스를 전달하는 것 여기서 클라이언트는 웹 브라우저나 웹 크롤러를 의미합니다. 웹 브라우저는 많이 익숙한 반면, 웹 크롤러는 생소하신 분도 있으실 텐데요. 웹 크롤러란, 네이버나 구글 같은 검색 사이트에서 다른 웹사이트 정보를 읽어갈 때 사용하는 소프트웨어입니다..
-
[부스트코스] Browser에서의 웹 개발부스트코스 코딩일지/웹 프로그래밍 기초 2020. 1. 19. 16:03
오늘은 크롬 브라우저 소스 코드를 보며 소스의 구성에 대해 알아보도록 하겠습니다. 전 시간에 말했듯이 크롬 브라우저는 개발자 도구를 제공하고 있는데요. 마우스 우클릭 > 개발자 도구를 통해서 확인할 수 있고 단축기 (Ctrl + Shift + I)를 통해서 볼 수 있습니다. 소스 코드를 살피어 보면 첫 부분에 을 확인할 수 있습니다. 그리고 소스의 마지막 부분을 보면 이라고 적혀있는데요. 이렇듯 html 태그를 통해 HTML 문서임을 확인할 수 있습니다. 또한 코드를 살피어보면 head, body 같은 것들을 통해 html이 계층적 구조로 이루어져 있음을 알 수 있습니다. head 요소의 정의는 '문서의 메타데이터 집합'입니다. 메타 데이터는 웹 페이지에 직접적으로 보이지 않는 정보라고 이해하면 되는데요..
-
[부스트코스] Browser의 동작부스트코스 코딩일지/웹 프로그래밍 기초 2020. 1. 17. 19:22
안녕하세요 valid_ming입니다 : ) 오늘은 서버에서 클라이언트로 전송된 데이터가 처리되어 화면에 보이게 되는 과정에 대해 알아보도록 하겠습니다. 우선, 서버에서 전송한 데이터가 클라이언트에 도착해야 할 곳이 바로 Browser입니다. Browser에는 데이터를 해석해주는 파서와 데이터를 화면에 표현해주는 렌더링엔징이 포함되어있습니다. 오늘의 주제인 브라우저 또한 코드로 이루어져있는데요. 이렇게 브라우저의 페이지 소스 보기를 이용해 확인하실 수 있습니다. 사실 브라우저가 스스로 동작하기 때문에 따로 동작 과정을 따로 공부할 필요는 없습니다. 하지만, 내가 짠 코드가 브라우저에서 내 생각과 다르게 해석되어 동작된다던가 조금 더 효율적으로 브라우저에서 동작하도록 하기 위해 개발자들이 브라우저를 공부하게..