Study (43) 썸네일형 리스트형 HTML 시작하기에 앞서, HTML이란 무엇인가? HTML은 HyperText Markup Language을 기반으로 둔다. HTML은 창조적인 웹 페이지를 위한 표준의 markup 언어이다. HTML은 웹 페이지의 구조를 묘사한다. HTML은 elements들의 연속으로 구성되어있다. HTML의 elements들은 브라우저에게 내용을 어떻게 진열하는지를 말해준다. HTML의 elements들은 '이것은 heading이다', '이것은 paragraph이다' 같은 내용의 조각들을 라벨 화한다. 는 주로 character set, page description, keywords, author of the document, and viewport setting를 구체화하는 데 사용된다. page에 표시되지는 않지만, .. '웹 서비스 구축' 사전 준비 웹서버 설정 : 무료 호스팅 - 닷홈 가입, 공간만 설치(APM) filezilla client설치(ftp 프로그램) vscode 설치(editor) extension설치(html snippets, sftp) 한글사용설정(utf-8) vscode와 ftp 연동(dothome) lab filezilla를 이용하여 dothome 홈 디렉터리에 접속 (포트21) filezilla를 이용하여 /html/2021camp/img 폴더 생성하여 이미지 upload하기 vscode에 ftp 설정하기 - view > command pallate > sftp:config 클릭 index.html 파일 만들어서 /html/2021camp/에 upload하기 JSP CRUD 게시판 만들기 -3 CRUD 게시판 만들기 순서 응용할 서비스 선택 --> 데이터 구조 기획 테이블 생성 및 CRUD 쿼리문 구성 새로운 project 생성 (dynamic web project) -> maven db4free.net 에서 phpMyAdmin 테이블 생성 프로젝트에 Library 추가 (MySQL Connector, JSTL(JavaScript Standard Library) JDBCUtil class 생성, 테스트 Java bean 생성 (???VO class) ???DAO class 생성 (db접속 후 실행) CRUD front-end 처리를 위한 JSP 페이지 작성 Tomcat 서버를 이용해 local에서 테스트 Deploy (heroku 이용) 0. 준비 지난번 CRUD 게시판만들기의 순서와 거의 동.. JSP CRUD 게시판 만들기 - 2 오늘은 지난번 게시글에 이어, Category Update 기능을 추가할 것이다. DB table 변경 Package Class 수정 JSP page source 수정 CRUD Project Deploy --> 누구나 웹 페이지에 접근할 수 있도록 변경 heroku.com server와 public DB server(db4free) 를 사용 1. Data Base Table 변경 1) category 라는 필드를 추가해준다. 이 때 필드의 형식은 varchar(32)로 해주었다. - 아래 사진 속 SQL 문장에서 BOARD라는 이름의 테이블에서 ALTER 을 사용해 테이블의 구조를 바꾸는 것. 2. Package class 소스 변경 1) BoardVO.java 수정 - 변경한 테이블 구조와 일치시켜야 .. JSP CRUD 게시판 만들기 * Create Read Update Delete 를 줄여서 CRUD라고 부른다. 게시판을 제작하는데 필요한 것들을 대략 6가지로 정리할 수 있다. Database 선택, 설치하기 (여기서는 MySQL을 사용한다) Table, Query 생성 새 프로젝트 생성 (STS > new project > dynamic web project > Maven Project 변환) Maven(pom.xml) 라이브러리 추가: MySQL Connector, JSTL JDBC(Java Database Connectivity)를 사용한 클래스 추가 웹페이지 제작 (list.jsp, nform.html, nform_ok.jsp, eform.html, eform_ok.jsp, delete_ok.jsp) 1. MySQL DB 설.. [STS] JSP 개발환경 설정하기 웹 브라우저(clients)와 웹 서버 사이에서 단순히 HTML파일로만 주고 받는것은 정적인 static이다. 하지만 여기에서 Data Base를 기반으로 웹 페이지를 구축할 수 있는데, 이 때 웹 서버와 데이터베이스 사이에서 사용되는 것들 중 하나가 오늘 알아보려고 하는 JSP(JavaServer Pages)이다. JSP는 HTML 코드에 JAVA 코드를 넣어 동적인 웹페이지를 생성하게 해주는 Web Application 도구이다. Client로부터 요청이 들어오면, 먼저 .jsp파일을 해독해 java 코드 부분을 확인 -> compile -> class 로딩 및 실행 -> 그 결과를 HTML 페이지에 결합 -> 다시 client로 전송 의 과정을 거친다. 그리고 JSP의 서버환경을 구.. Node.js (3) - URL의 이해 나의 Node.js 의 최종 목표는 JavaScript를 이용해서 Node.js가 가지고 있는 기능을 호출하며 우리가 Web application을 Node.js로 만들 수 있게 되는 것이다. 이제 Web application을 구현하는 아주 중요한 테크닉을 살펴볼 것이다. 먼저, cmd 창에서 node main.js 를 실행시키고 웹 브라우저에서 localhost:3000 을 입력하면 이런 창이 뜬다. 그리고 여기서 목차에 있는 HTML, CSS, JavaScript 는 각각 1.html 2.html 3.html 과 같은 정적인 파일을 가지고 있다. 예를 들어, 우리가 수백 개의 페이지를 가져온다면 그에 해당하는 수백 개의 정적인 파일들을 가지고 있어야 한다. 이때 URL의 값을 달리 하는 것을 통해서.. Node.js (2) - 웹 서버 만들기 Node.js 시리즈의 목표는, 웹 어플리케이션을 만드는 것이다. (Node.js Application) 이렇게 하기 위해서는 각각의 스텝마다 Node.js 가 가지고 있는 기능을 실행시켜야 한다. (Node.js runtime) 그리고 Node.js 기능을 실행하기 위한 조작 장치는 JavaScript라는 컴퓨터 언어이다. WEB Browser가 있고 WEB Server가 있을 때, 우리가 웹 브라우저에 주소를 입력해서 요청을 하면 웹서버가 그 요청에 따른 정보를 찾아서 응답해 주는 관계에 있다. 예를 들어 웹서버는 Apache, 엔진 x 등이 있다. https://opentutorials.org/course/3332/21032 여기 링크를 클릭한 후, 아래쪽의 참고 부분을 클릭해서 github 페이지.. Node.js (1) - 시작 (설치하기) 이번 글은 JavaScript를 이용해 Node.js를 제어해 동적으로 HTML 코드를 생성하는 웹 어플리케이션을 만들어 볼 것이다. Node.js가 생기기 전, html 코드를 바꾸려면 수 많은 웹 페이지들의 html 코드를 직접 수정해야만 했다. 또한, 웹 페이지의 방문자들이 직접 글을 올리도록 하고 싶었지만 그렇다고 그들에게 웹 페이지가 담긴 파일을 마음대로 수정하게 할 수도 없었다. 이런 문제점들로 인해, 사람들은 귀찮고 반복되는 html의 작성 방법을 기계에게 시키고 싶다는 생각을 하게 된다. 이들은 이미 JavaScript에 익숙한 웹 개발자들이 새로운 언어를 배우지 않고도 웹 페이지를 자동으로 생성하는 서버쪽 어플리케이션을 만들 수 있게 했다. 이렇게 Node.js가 만들어지게 됐다. 그럼 .. Home Server (6) - DHCP 이란 이번 글에서는 자신의 IP 주소를 변경하는 방법을 적어볼 것이다. 그리고 그렇게 주소를 변경하는 것이 얼마나 까다로운지를 보면서, 어떻게 자동으로 설정되는지를 살펴볼 것이다. 원래는, 우리가 컴퓨터를 사용해서 인터넷을 쓰기 위해서는 접속하고자 하는 사이트의 IP 주소를 직접 입력해야 했다. 그리고 우리 IP 주소를 수동으로 지정하는 방법을 windows 기준으로 잠시 살펴보자. 제어판-네트워크 및 인터넷-네트워크 및 공유센터-본인이 접속한 Wi-Fi (혹은 인터넷 연결)-속성 여기서 인터넷 프로토콜 버전4를 클릭하고 속성을 누르면 이런 창이 나온다. 기본적으로는 '자동으로 IP 주소 받기' 라고 설정이 되어 있다. 만약 직접 IP 주소를 지정하고 싶다면 '서브넷 마스크', '기본 게이트웨이' 등을 또한 .. Home Server (5) - Dynamic&Static IP address 유동/고정 아이피 이번 글의 주인공은 Dynamic IP address 이다. 부족한 IP 주소를 가지고 좀 더 효율적으로 사용하기 위해 도입한 여러 방법 중 하나가 Dynamic IP이다. 보통 가정 집에서 인터넷을 사용하기 위해서 통신사 (다른 말로는 ISP - Internet Service Provider) 를 이용해 케이블을 컴퓨터나 공유기에 연결해 IP주소를 부여받는다. 그리고 만약 그 컴퓨터에 웹 서버같은 서버를 설치하고 누군가에게 저 IP 주소를 알려준다고 하자. 그럼 그 사람은 그 IP 주소를 웹 브라우저와 같은 클라이언트에 입력하고 엔터를 하면 내 컴퓨터에 요청이 온다. 하지만, 모든 집마다 IP주소를 하나씩 주다보면 IP 주소가 턱없이 부족하게 된다. 그래서 이 때 Dynamic IP 주소를 사용하는 것.. Home Server (4) - Port Forwarding 포트 포워딩 예를 들어, 192.168.04 의 IP 주소를 가지고 있는 컴퓨터에 웹서버를 설치했다고 생각해보자. 그러면 사람들이 이 웹 서버에 접속할 수 있게 하기 위해서는, 먼저 public IP 주소를 알려주어야 한다. 그리고 나서 192.168.04의 private IP 주소로 접속하도록 해주어야 한다. (이 때 port 를 이용) 우리가 공유기에다가 port forwarding 설정을 한다. 그리고 그 공유기의 public IP에 8081로 (public IP가 59.6.66.238:8081) 누군가가 접속을 한다면, 내부 네트워크에 있는 192.168.0.4:80번 port 로 공유기가 보내는 것이다. 그리고 또 설정을 하면 누군가가 59.6.66.238:8080번 port로 들어왔을 때, 내부 네트워크의.. Home Server (3) - port 이전 게시글에서, 내 컴퓨터를 클라이언트로 사용했을 경우 NAT가 동작하는 경우를 살펴보았다. 그리고 이제 그 컴퓨터를 홈 서버로 이용하기 위해 (서버로 사용하는 경우), 어떻게 처리를 해야 외부의 클라이언트가 내 컴퓨터로 접속할 수 있을지 알아보자. 기본적으로 내 컴퓨터가 client 상태인 경우, 외부 클라이언트가 public IP address로 접근을 했을 때 내부 네트워크 안에서 어느 LAN으로 연결해야 할지 모르기 때문에 무언가 조치를 해야 한다. 이를 위해서 준비된 개념이 port 이다. IP 주소가 컴퓨터에 접속하는 주소라고 하면, port는 컴퓨터 안에 설치된 서버에 접속하는 주소라고 할 수 있다. 예를 들어, 이런 항구가 있다. 여기에 있는 배들은 자신의 번호를 가지고 있고, 그에 해당.. Home Server (2) - NAT NAT란 Network Address Translation 의 약자로, private IP를 쓰고 있는 각각의 디바이스들이 외부의 인터넷에 접속할 수 있게 해주는 것이다. 예를 들어, 내 컴퓨터는 192.168.0.4 라는 IP 주소를 가지고 있다. 그리고 naver 에 접속을 한다면, 내부적으로 어떤 일이 일어나는지 살펴보자. 먼저, 내 컴퓨터는 Gateway address에 해당되는 IP 머신에게 신호를 보낸다. 공유기가 봤을 때, 그 사이트가 내부 네트워크 내의 요청이 아니기 때문에 이 요청을 WAN을 통해 외부로 보낸다. 그리고 요청을 보내기 전 두가지 일을 한다. 첫째, 이 요청이 192.168.0.4 라는 IP를 가지고 있는 컴퓨터의 요청이라는 것을 이 공유기 안에다가 기록한다. 둘째, 내 컴.. Home Server (1) - 공유기의 원리 먼저, IP address 란 무엇인가? 우리가 인터넷을 사용하기 위해서, 컴퓨터는 ip 주소를 가지고 있어야 한다. 그래서 다른 컴퓨터와 통신을 할 수 있다. (client 컴퓨터에서 server가 설치되어 있는 컴퓨터에 요청을 하면, 그 server에서 정보를 다시 그 client 컴퓨터의 ip주소로 다시 보낸다.) 우리는 보통 통신사와 계약을 해서 회선을 받는다. 그러면 그 케이블을 우리 컴퓨터에 꽂거나, 어떤 스마트폰을 와이파이에 연결하는 그 순간에 자동으로 그 컴퓨터에는 ip 주소가 부여된다. 하지만, 컴퓨터 뿐만 아니라 여러 개의 기기를 인터넷에 연결하기 위해서는 각 device 마다 ip 주소가 있어야 한다. 이때 보통 통신사와 계약을 다시 해 두 개의 회선을 받는 것이 아니라, 회선은 하나.. JS DOM DOM DOM은 W3C(World Wide Web Consortium) 표준이다. DOM은 문서 접근을 위한 표준을 정의한다. W3C DOM(Document Object Model)은 프로그램과 스크립트가 문서의 내용과 구조, 스타일을 동적으로 액세스하고 업데이트할 수 있는 플랫폼이자 언어 중립적인 인터페이스다. W3C DOM 표준은 세 부분으로 구분된다. Core DOM - 모든 문서 유형에 대한 표준 모델 XML DOM - XML 문서의 표준 모델 HTML DOM - HTML 문서용 표준 모델 HTML DOM (Document Object Model) 웹 페이지가 로드될 때, 브라우저는 그 페이지의 DOM(Document Object Model) 을 만든다. HTML DOM model은 Objects.. JS Form 만들기 JavaScript 를 이용해 이렇게 생긴 Form을 만들어 보자. 먼저, 몇 가지 조건을 만들었다. 빨간색으로 표시된 부분은 필수 입력 (Required 를 추가해 자동으로 입력 검사를 할 수 있지만, javascript를 이용) Company 이름은 5글자 이상 Email 유효성 검사 Phone 번호 검사 먼저 css 부분이다. 제일 밑에 있는 span 부분은, Form에서 필수 입력 부분으로 앞에 빨간색 표시를 따로 해주기 위한 것이다. 필수 입력 if (Cname.value == "") { alert("회사명을 입력하세요!"); Cname.focus(); return false; } 이렇게 필수 입력란에 제대로 입력이 되지 않으면 알림창이 뜨도록 설정했다. 회사명 이름 5글자 이상 else { i.. JavaScript JavaScript는 모든 웹 개발자이 필수로 배워야 하는 3가지의 언어 중 하나이다. HTML은 web page의 내용을 정의한다. CSS는 web page의 레이아웃을 지정한다. JavaScript는 web page의 동작을 프로그래밍한다. Events HTML event들이 있다. Event 설명 onchange HTML element가 바뀌게 됨 onclick 사용자가 HTML element를 클릭할 때 onmouseover 사용자가 HTML element 위로 마우스를 이동할 때 onmouseout 사용자가 HTML element로부터 마우스를 다른곳으로 이동할 때 onkeydown 사용자가 키보드 키를 눌렀을 때 onload 브라우저가 page를 로드하는것을 끝냈을 때 여기서 JavaScrip.. CSS CSS란 무엇인가? CSS는 계단식 스타일시트를 의미한다. CSS는 HTML 요소를 화면, 용지 또는 다른 미디어에 표시하는 방법을 설명한다. CSS는 많은 일을 절약한다. 여러 웹 페이지의 layout을 동시에 제어할 수 있다. 외부 스타일시트가 CSS 파일에 저장된다. CSS Selectors CSS selectors는 style을 입히고 싶은 HTML elements들을 찾는데 사용된다. 이것은 5가지로 나누어 분류할 수 있다. Simple (이름, id, class에 따른 요소 선택) Combinator (특정 관계에 따른 요소 선택) Pseudo-class (특정 상태에 따른 요소 선택) Pseudo-elements (element의 부분을 지정하고 스타일 지정) Attribute (속성 혹은 .. 이전 1 2 다음
