[BoostCourse] 웹개발 - Handler 라이브러리를 활용한 Template 작업


 - handlebars.js 라이브러리 등록


[ 1. 단일 데이터 ]


[ 2. 단일 데이터 + 다중 댓글 ]


[ 3. 다중 데이터 동적 조작 ]

See the Pen BvYpEe by seokrae (@seokrae) on CodePen.


[ 4. 다중 데이터 핸들러 생성 ]

See the Pen QzQpLb by seokrae (@seokrae) on CodePen.



[BoostCourse] 웹개발 - DOM API 활용


2. DOM API활용 - FE


 1) Element Attribute 사용

  - tagName 같은 경우는 프로젝트 할 때, Event Delegating, Bubbilng 적용 시 사용할 수 있습니다.




 2) Document Method 사용방식

  - 현 프로젝트에서 주로 사용할 수 있는 메소드는 Event Delegation, Bubbling개념 적용할 수 있도록 closest() 메서드 정도가 되지 않을까 싶다.





[BoostCourse] 예약관리시스템: 메인페이지


 JavaScript - FE


 이 프로젝트에서 JavaScript는

 1. 사용자의 요청(Request)를 받아 서버로 필요한 기능을 호출한다.

 2. 서버에서 응답(Response)한 값(Array 또는 Object)을 화면(HTML)에 데이터를 전달한다.


 두 가지의 작업을 하게 된다.


이러한 작업을 하기 위해서 배열(Array)과 객체(Object)를 조작하는 법을 배울 것이다.

 - 배열은 index를 주로 사용할때 사용

 - 객체는 key값을 주로 사용할 때 사용


[Abstract]

 1. 객체(Object)의 선언 및 프로퍼티(Property) 정의

 2. 객체의 메소드 추가

 3. 객체 탐색

  1) for - in

  2) Object.keys() & forEach()

  3) JavaScript에서 Array와 Object 구분방법

  4) Array와 Object가 복합적으로 있는 데이터 탐색



[객체(Object)의 선언 및 프로퍼티(Property) 정의]

 - key, value 구조의 자료구조

 - Object 형태는 {}로 자료를 표현, 서버와 클라이언트간에 이러한 데이터 타입으로 교환하는 JSON이라는 것이 있다.

 - 객체 생성시 프로퍼티(속성)을 정의, 또는 객체 생성 후 프로퍼티를 추가할 수 있다.


 - 왼쪽은 Car의 4개의 속성만을 갖고 있을 때 오른쪽은 color 속성이 추가 되었을때 결과값 





[객체의 메소드 추가]

 - 객체 생성 후 추가적으로 메서드를 추가하고 싶은 경우, 필요한 메서드 생성 후 메서드를 포함하여 객체를 새로 생성하여 적용한다.


[객체 탐색]

 - 객체 탐색 for - in, Object.keys() & forEach()

 - key: value 자료구조에서 value 타입이 number인 entry만을 가져오기




[Array & Object가 섞여 있는 객체 탐색]

 - 자바스크립트에서 Object, Array 구분방법
   (Object와 Array를 "object"로 인식하기 때문에 constructor 속성을 활용)


 - type이 sk인, name으로 구성된 배열만을 출력하기





[BoostCourse] 예약관리시스템: 메인페이지


 JavaScript - FE


 예약관리시스템: 메인페이지 프로젝트는 Spring Framework의 설정, MVC 패턴, 기존에 구축된 데이터 모델을 이용한 API 작성도 중요하지만 

View Layer에서 HTML, JavaScript도 해야할 작업이 많이 있다.


 여기서는 JavaScript의 역할은 사용자의 요청(Request)를 받아 Ajax 통신으로 Controller로 전달하는 일과 Contoller에서 응답(Response) 값을 배열(Array) 또는 객체(Object)타입으로 받아 HTML로 필요한 데이터를 출력하는 역할을 한다.


 정리하자면 JavaScript는

 1. 사용자의 요청(Request)를 받아 서버로 필요한 기능을 호출한다.

 2. 서버에서 응답(Response)한 값(Array 또는 Object)을 화면(HTML)에 데이터를 전달한다.


 두 가지의 작업을 하게 된다.


이러한 작업을 하기 위해서 배열(Array)과 객체(Object)를 조작하는 법을 배울 것이다.

 - 배열은 index를 주로 사용할때 사용

 - 객체는 key값을 주로 사용할 때 사용


 여기서는 배열의 선언, 주로 사용하는 함수, 탐색방법에 대해 알아본다.


[배열(Array)의 선언]


[배열의 함수]


[함수의 탐색]
 기존에 존재하는 for문이나 while문 외에 동적으로 사용할 수 있는 함수

 - forEach()


 - map()


[Connect] 부스트코스 오프라인 스터디


 7월 초부터 시작된 부스트코스 온라인 스터디를 9월 말까지 강남역 11번 출구에 위치한 Hollys Coffee에서 

 (사실 다 못끝내서 메신저를 통해서 아직도 진행중이다.)


Full-Stack Web Developer 과정에 대한 주제로 https://www.edwith.org/에서 제공하는 강의를 통해 공부하고, 


프로젝트를 진행하면서 그에 대한 이슈를 논의하는 방식으로 스터디를 진행했다.


Connect 재단에서도 이 과정 속에서 오프라인 스터디라는 제공 및 관리가 처음이라 어색하기도 하였지만 


나름 노력을 많이 하려는 모습도 보였다.


구글 스프레드시트를 통해 매번 스터디 진행 과정에 대해서 회의록과 진도표를 작성하도록 하였고, 


중간 중간 강의 및 QnA 시간을 제공하여 기존 프로젝트를 진행하는데에 서포트가 되는 QnA와 


제공되는 프로젝트의 확장판으로 어떠한 내용이 들어갈 수 있는지에 대한 오프라인 서비스를 제공하였다.


그렇게 두 달이라는 시간이 흘러 Connect 재단에서 제공했던 오프라인 스터디의 기간이 끝이 나고 


오프라인 스터디 조장 활동을 증명하는 활동증서를 주셨다.


스터디 하면서 이런것까지 주시다니 생각했지만 


"조장 활동 증서"의 존재는 부스트캠프 가산점 및 입과비 면제, 부스트코스 일정 기간 동안의 무료 수강권이 주어진다. ㄷㄷ


부스트캠프를 갈 수 있을 지는 모르겠지만 남은 프로젝트 진행릉 위해 부스트코스 피드백을 받기 위해서는 좋은 것 같다. ㅎㅎ




[BoostCourse] REST API


 1. REST API의 등장

  - 클라이언트의 종류가 웹 브라우저, 안드로이드 앱, IOS 앱 등 다양해지면서 이러한 클라이언트들에게 정보를 제공하는 방식을 하나로 일원화시키려 했다.

  - 일원화시키는 방식 중에 대표적인 방식이 HTTP 프로토콜로 API를 제공하는 것이다.

  - HTTP 프로토콜로 제공하는 API를 REST API라고 한다.


 2. API의 개념

  - Application Programming Interface의 약자

  - 어떠한 기능을 구현하기 위해 정리해놓은 라이브러리 (function)

  - 응용프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스


 3. REST API란?

  - REST 형식의 API

  - 핵심 컨텐츠 및 기능을 외부 사이트에서 활용할 수 있도록 제공되는 인터페이스


그래서 REST 방식이란건 뭔데? 


 4. REST의 특징 및 스타일 (제약조건)


  - client-server 

  - stateless

  - cache

  - uniform interface **

  - layered system

  - code-on-demand (optional)


 위 해당 사항을 지킨 API만이 RESTful API이다.


** HTTP 프로토콜을 사용하면 위 조건을 충족시킬 수는 있으나 문제는 uniform interface의 조건은 충족하기 어렵다. ** 


uniform interface의 스타일


  - 리소스가 URI로 식별되어야 한다.

  - 리소스를 생성, 수정, 추가하고자 할 때, HTTP메시지에 표현(GET, PUT, POST, DELETE) 을 해서 전송해야 한다.

  - 메시지는 스스로 설명할 수 있어야 한다. (Self-descriptive message)

  - 애플리케이션의 상태는 Hyperlink를 이용해 전이되야 한다. (HATEOAS)


 * HATEOAS: 웹 페이지 자체에 관련된 링크가 있는 것을 말한다.


5. REST 구성

 - 자원(Resource) - URI

 - 행위(Verb) - HTTP METHOD

 - 표현(Representations)


6. REST API 디자인 가이드

 1) URI는 정보의 자원을 표현

 2) 자원에 대한 행위는 HTTP Method(GET, POST, PUT, DELETE)로 표현한다.


 6-1. REST API 중심 규칙

  1) URI는 정보의 자원을 표현해야 한다. (리소스명은 동사보다는 명사를 사용)

GET /member/delete/1


  2) 자원에 대한 행위는 HTTP Method(GET, POST, PUT, DELETE 등)로 표현

DELETE /members/1


* HTTP Method

 Method

 역할 

 POST 

 POST를 통해 해당 URI를 요청하면 리소스를 생성 

 GET

 GET를 통해 해당 리소스를 조회, 리소스 조회 후 해당 도큐먼트에 대한 자세한 정보를 가져온다. 

 PUT 

 PUT를 통해 해당 리소스를 수정 

 DELETE 

 DELETE를 통해 리소스를 삭제 


* URI는 자원을 표현하는데 집중, 행위에 대한 정의는 HTTP Method를 이용하는 것이 REST API를 설계하는 중심 규칙


 6-2. URI 설계 시 주의할 점

  1) 슬래시 구분자(/)는 계층 관계를 나타내는 데 사용

  2) URI 마지막 문자로 슬래시(/)를 포함하지 않는다.

  3) 하이픈(-)URI 가독성을 높이는데 사용

  4) 밑줄(_)은 URI에 사용하지 않는다.

  5) URI 경로에는 소문자가 적합


 6-3 리소스 간의 관계를 표현하는 방법

  GET /users/{userid}/devices

  GET /users/{userid}/likes/devices


 6-4 자원을 표현하는 Collection과 Document

 http:// restapi.example.com/sports/soccer

 http:// restapi.example.com/sports/soccer/players/13


7. HTTP 응답 상태 코드

상태코드 

 

 200 

클라이언트의 요청을 정상적으로 수행 

 201

클라이언트가 어떠한 리소스 생성을 요청, 해당 리소스가 성공적으로 생성됨
(POST를 통한 리소스 생성 작업 시) 

 400

클라이언트의 요청이 부적절할 경우 사용 

 401 

클라이언트가 인증되지 않은 상태에서 보호된 리소스를 요청했을 때 사용 

(로그인 하지 않은 유저가 로그인 했을 떄, 요청 가능한 리소스를 요청 했을 때)

 403

유저 인증상태와 관계 없이 응답하고 싶지 않은 리소스를 클라이언트가 요청했을 때 사용하는 응답 코드

(403보다는 400이나 404을 사용할 것을 권고, 403 자체가 리소스가 존재한다는 뜻이기 때문)

 405

클라이언트가 요청한 리소스에서는 사용 불가능한 Method를 이용했을 경우 사용하는 응답 코드 

 301

클라이언트가 요청한 리소스에 대한 URI가 변경되었을 때 사용하는 응답 코드

(응답 시 Location Header에 변경된 URI를 적어 줘야 함)

 500

서버에 문제가 있을 경우 사용하는 응답 코드 


* 참고

https://ko.wikipedia.org/wiki/REST

https://meetup.toast.com/posts/92

https://www.edwith.org/boostcourse-web/lecture/16740/

1. Maven 프로젝트 생성

 - Maven Project > webapp으 생성 > Group Id, Artifact Id는 자유 finish


2. Pom.xml 

 1) 플러그인 추가

<project xmlns="http://maven.apache.org/POM/4.0.0"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">

<modelVersion>4.0.0</modelVersion>

<groupId>kr.or.seok</groupId>

<artifactId>naver</artifactId>

<packaging>war</packaging>

<version>0.0.1-SNAPSHOT</version>

<name>naver Maven Webapp</name>

<url>http://maven.apache.org</url>

<dependencies>

<dependency>

<groupId>junit</groupId>

<artifactId>junit</artifactId>

<version>3.8.1</version>

<scope>test</scope>

</dependency>

</dependencies>

<build>

<finalName>naver</finalName>

<plugins>

<plugin>

<groupId>org.apache.maven.plugins</groupId>

<artifactId>maven-compiler-plugin</artifactId>

<version>3.6.1</version>

<configuration>

<source>1.8</source>

<target>1.8</target>

</configuration>

</plugin>

</plugins>

</build>

</project>


 * <plugins> 추가시 생기는 오류


 2) Maven update 


 * Maven update 결과



 3) Navigator

  - project > .setting > org.eclipse.wst.common.project.facet.core.xml 파일 내용 수정

<?xml version="1.0" encoding="UTF-8"?>

<faceted-project>

<fixed facet="wst.jsdt.web"/>

// 기존 내용 (버전 수정 필요) <installed facet="jst.web" version="2.3"/>

<installed facet="jst.web" version="3.1"/>

<installed facet="wst.jsdt.web" version="1.0"/>

<installed facet="java" version="1.8"/>

</faceted-project>


 * 혹시 이런 에러가 또 ?


 4) web.xml

  - Tomcat 버전에 따라 web.xml의 버전이 수정되지 않아서 발생하는 에러

<?xml version="1.0" encoding="UTF-8" ?>

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee 

http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"

version="3.1">


  <display-name>Archetype Created Web Application</display-name>

</web-app>


 5) 다시 Maven update

  * 해결!! 


이 방법으로 안되시는 분들은 댓글 남겨주세요 ~

자바스크립트를 공부하는데 예제가 한 두개 정도 밖에 없어서 기존 강의 내용과 비슷한 예제를 찾아보았다.

또 기존 프로젝트에 적용된 자바스크립트를 객체리터럴 패턴으로 구현해야하는 요구사항이 있다.


[BoostCourse] 객체 리터럴(Object Literal) 패턴


 1. 자바스크립트 객체

  - 자바스크립트의 객체는 단순히 key : value의 쌍이다.

  - value로 원시 데이터 타입, 객체, 함수까지 허용한다.

  - 프로그램의 Life Cycle 중 언제든지 객체를 정의한 후 프로퍼티 함수를 추가 또는 삭제할 수 있다.


 2. 객체 리터럴의 생성

  - 객체의 생성

  - 원시 데이터를 값으로 갖는 프로퍼티 생성

  - 함수를 값으로 갖는 프로퍼티 생성


 3. 객체 리터럴의 프로퍼티 값 출력

  - 원시 데이터를 값으로 하는 프로퍼티


  - 함수를 값으로 하는 프로퍼티


+ Recent posts