본문 바로가기
반응형

전체보기83

[부스트코스] 1. 웹 프로그래밍 기초 | 4. 개발환경 설정 - BE | 6) HelloWorld 서블릿 컴파일 및 실행하기 자바로 작성된 웹 어플리케이션을 실행하기 위해서는 이전 포스팅에서 다운로드 했던 Apache Tomcat이 필요하다. 이 Tomcat을 이용하여 로컬 서버의 URL로 접속했을 때 Hello World 를 출력하는 작업을 해보겠다. 일단 Servlet 이란 간단히 말하자면, 서버의 특정 URL로 접속했을때 (요청) 응답을 하는 역할을 하는 어플리케이션을 말한다. 위키백과에서는 https://ko.wikipedia.org/wiki/%EC%9E%90%EB%B0%94_%EC%84%9C%EB%B8%94%EB%A6%BF 자바 서블릿 - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. 자바 서블릿(Java Servlet)은 자바를 사용하여 웹페이지를 동적으로 생성하는 서버측 프로그램 혹은 그 사양을.. 2020. 2. 21.
[부스트코스] 1. 웹 프로그래밍 기초 | 4. 개발환경 설정 - BE | 5) Tomcat 다운받기 및 설치하기 세계에서 가장 많이 사용되는 WAS(Web Application Server)인 Apache Tomcat의 설치 방법에 대해 알아보겠습니다. 먼저 http://tomcat.apache.org/ Apache Tomcat® - Welcome! The Apache Tomcat® software is an open source implementation of the Java Servlet, JavaServer Pages, Java Expression Language and Java WebSocket technologies. The Java Servlet, JavaServer Pages, Java Expression Language and Java WebSocket specifications are tomcat... 2020. 2. 20.
[부스트코스] 1. 웹 프로그래밍 기초 | 4. 개발환경 설정 - BE | 3) 이클립스 다운받기 및 설치하고 인코딩 설정하기 Java 기반의 웹 백엔드를 구축하기 위해서는, 통합개발환경, IDE를 필요로합니다. 그중에서도 가장 유명한 이클립스의 다운로드와 설정방법에 대해서 알아보겠습니다. 이클립스는 원래 IBM의 WebSpheare Studio Application Developer 란 이름으로 개발되었는데, 엔진부분을 오픈소스로 공개한 것을 기반으로 지금의 이클립스로 발전해왔다고 합니다. 윈도우, 맥, 리눅스 등 다양한 운영체제에서 동작하며, 다양한 프로그래밍 언어를 개발할 수 있기에 통합개발환경 ( Integrated Development Environment, IDE )라고 할 수 있습니다. 또한 플러그인 구조로 이루어져 있어서 다양한 기능을 쉽게 추가할 수 있다고 합니다. https://www.eclipse.org/do.. 2020. 2. 14.
[부스트코스] 1. 웹 프로그래밍 기초 | 3. CSS -FE | 5) Element가 배치되는 방법(CSS layout) Element는 HTML로 작성한 태그들을 의미합니다. 웹페이지의 가독성을 높이기 위해서는 이러한 태그들을 적절하게 화면에 배치해주어야 하는데요, CSS의 display, position, float 속성을 활용하면 기초적인 레이아웃을 구성할 수 있습니다. 대표적으로 위 세개의 속성들은 다음과 같이 정의할 수 있습니다. 1. display 속성 || display:block; display:inline; display:inline-block; 2. position 속성 || position:static; position:absolute; position:relative, position:fixed; 3. float 속성 || float:left; float:right 1. display 아래와 같이 HT.. 2020. 2. 14.
카카오맵(Kakao Map) Javascript API 사용하기 - 2) 저번 포스팅에서 카카오맵 api를 사용할 앱과 도메인을 등록하는 과정까지 마쳤습니다. 이 다음 단계로, 리액트 웹 앱에 직접 api를 가져와서 지도를 띄워보겠습니다. 1. 개요 1. localhost 도메인 등록 2. HTML script 추가 3. React component에서 map 생성 4. 서버 실행 2. 실행 1. localhost 도메인 등록 저번 포스팅에서는 카카오맵 apif를 사용할 깃허브 페이지 주소를 추가했었습니다. 개발 단계에서 카카오맵 api를 가져와야 하기 때문에, localhost:3000 과 같은 로컬호스트 url을 추가해줍니다. (로컬 서버라 안될 줄 알았는데, 잘 되더라구요..) 2. HTML 스크립트 추가 이제는 카카오맵 api모듈을 가져오는 스크립트를 html파일에 추.. 2020. 2. 11.
카카오맵(Kakao Map) Javascript API 사용하기 - 1) http://apis.map.kakao.com/web/guide/ 불러오는 중입니다... 1. 개요 카카오맵 Api를 사용하기 위해서는 아래와 같은 과정을 따라야 합니다. 1. 카카오 개발자사이트 (https://developers.kakao.com) 접속 2. 개발자 등록 및 앱 생성 3. 웹 플랫폼 추가: 앱 선택 – [설정] – [일반] – [플랫폼 추가] – 웹 선택 후 추가 4. 사이트 도메인 등록: [웹] 플랫폼을 선택하고, [사이트 도메인] 을 등록합니다. (예: http://localhost:8080) 5. 페이지 상단의 [JavaScript 키]를 지도 API의 appkey로 사용합니다. 6. 앱을 실행합니다. 이 순서를 따르며 카카오맵 Api를 사용해보도록 하겠습니다! 2. 실행 2. .. 2020. 2. 8.
[부스트코스] 1. 웹 프로그래밍 기초 | 1. Web개발의 이해 -FE/BE | 7) WAS 1. 클라이언트 / 서버 구조 이전 포스팅에서 언급했던 바와 같이, Client / Server 구조는 위의 다이어그램으로 설명할 수 있습니다. 클라이언트는 컴퓨터뿐만 아니라, 스마트폰, 노트북, 혹은 키오스크와 같은 여러 기기가 될 수 있습니다. 이런 기기들이 인터넷을 통해 서버와 연결되고 많은 작업을 수행할 수 있게 되는 것이죠. 2. DBMS (DataBase Management System) 그 다음으로 중요한 개념이 바로 'DBMS' 입니다. DBMS가 없던 때에는 데이터베이스 즉 DB를 사용자와 어플리케이션(APP)이 직접 조작했었습니다. 하지만, 그렇게 된다면, 데이터베이스의 안정성을 장담할 수 없을 뿐더러, 어플리케이션을 제작하는데 필요한 로직 또한 증가하게 됩니다. 그리고 데이터의 무결성.. 2020. 2. 7.
[부스트코스] 1. 웹 프로그래밍 기초 | 1. Web개발의 이해 -FE/BE | 6) 웹서버 1. 웹 서버? Web Server에 대한 MDN의 정의는 아래와 같습니다. 하드웨어 측면에서, web server는 website의 컴포넌트 파일들을 저장하는 컴퓨터입니다. (컴포넌트 파일에는 HTML 문서, images, CSS stylesheets, 그리고 JavaScript files가 있습니다.) 그리고 이 파일들을 최종 소비자의 디바이스에 전달합니다. web server는 인터넷에 연결되어 있고, mozilla.org와 같은 domain name을 통해 접속될 수 있습니다. 소프트웨어 측면에서, web server는 기본적으로 웹 사용자가 어떻게 호스트 파일들에 접근하는지를 관리합니다. 이 문서에서 web server는 HTTP서버로 국한합니다. HTTP 서버는 URL(Web addresses.. 2020. 2. 6.
[부스트코스] 1. 웹 프로그래밍 기초 | 1. Web개발의 이해 -FE/BE | 5) browser에서의 웹 개발 우리가 자주 사용하는 브라우저에는 거의 대부분 '개발자 도구'를 사용할 수 있게 되어 있습니다. 크롬 브라우저에서 Ctrl+Shift+i 혹은 F12를 누르면 아래와 같은 개발자 도구를 실행시킬 수 있습니다. 상단에 여러 탭이 있는데 그중에서 Element탭에서는 현재 웹페이지의 HTML과 CSS 설정을 볼 수 있습니다. Console 탭을 이용하면 스크립트 관련 설정을 보거나 수정할 수 있는데, 이외에도 현재 HTML파일을 직접 수정하거나, 이벤트리스너를 추가하여 웹페이지의 이벤트들을 분리해서 볼 수 있는 등 여러가지 기능을 할 수도 있습니다. 아래의 링크에서 자세하게 볼 수 있습니다. https://www.vobour.com/%EB%8B%B9%EC%8B%A0%EC%9D%B4-%EB%AA%A8%EB%A.. 2020. 2. 6.
[부스트코스] 1. 웹 프로그래밍 기초 | 1-4) browser의 동작 1. Browsers HTML + CSS + Javascript로 웹페이지를 만들었다 하더라도, 이들을 해석해서 렌더링 해주는 과정이 빠진다면, 이들도 모두 무용지물일 수 밖에 없습니다. 그렇기에 웹의 컴파일러라고 할 수 있는 '브라우저'가 이러한 역할을 하게 됩니다. 대표적인 브라우저는 아래와 같은 것들이 있습니다. 순서대로 Chrome, Firefox, Safari, Microsoft Edge, Internet Explorer 입니다. 이 브라우저들은 모두 웹페이지를 렌더링한다는 점에서는 공통점을 가지고 있지만, 이들은 서로 다른 렌더링 엔진 (Rendering Engine)을 사용한다는 점에서 차이점을 보입니다. Chrome은 Blink, Firefox는 Gecko, Safari는 Webkit, I.. 2020. 2. 5.
반응형

티스토리툴바