Study/Web (16) 썸네일형 리스트형 [Spring] w/ MyBatis 지난번 에브리타임 을 보고 따라 만든 웹 서비스 프로젝트를 다시 한 번 정리하려고 한다. github Wiki에서 프로젝트 생성~로그인 기능까지 생성하는 과정을 간단히 정리했다. lyw3447/2021WebCamp Contribute to lyw3447/2021WebCamp development by creating an account on GitHub. github.com 이 Spring MVC Project의 구조는 아래와 같다 1. Dispatcher Servlet : Spring MVC 에서 dispatcher-servlet은 클라이언트로부터 URL로 접근해 들어온 요청(Request) 접수 : View로부터 받은 결과 클라이언트에게 전달(Response) > servlet-context.xml .. HTML Forms & Graphics Form Form - element는 type attribute에 의존하여 많은 방법으로 나타내 진다. Type 설명 Displays a single-line text input field Displays a radio button (for selecting one of many choices) Displays a checkbox (for selecting zero or more of many choices) Displays a clickable button Displays a submit button (for submitting the form). action 속성에서 구체화된다 Defines a password field Defines a reset button that will reset all f.. 웹사이트 개발 과정 1. 정보 수집 2. 계획 3. 디자인 4. 내용 작성, assembly 5. 코딩 6. 테스트, 리뷰, 출범 7. 유지보수 위는 웹 개발의 일곱 가지 주요 단계라고 할 수 있다. 1. 정보 수집: 의도, 주요 목적, 타겟층 설정 탐색과 수집을 하는 첫 번째 단계는, 앞으로 따라올 단계들을 어떻게 만들지 결정 해준다. 이 시점에서 가장 중요한 것은 이 웹사이트의 의도, 얻고 싶은 주요 목표, 그리고 타겟층을 잘 이해하는 것이다. 예상 기간: 1~2 주 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가 만들어지게 됐다. 그럼 .. 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 다음
