[ JavaScript ] JSON, 톰캣 서버 열기 (웹 애플리케이션 실행하기)

하루입니다.

 

 

 

---

 

 

 

JSON(JavaScript Object Notation)

- 자바스크립트 객체 표기법을 활용한 경량의 데이터 교환형식이다.

- 사람이 읽고 쓰기 쉽다. (읽고 쓰기 쉽게 데이터를 작성하는 방법임.)

- 기계(프로그램)가 분석하고 생성하기 쉽다.

- 프로그램 언어에 완전히 독립적이다.

- 이상적인 데이터-교환 형식이다.

- 거의 대부분의 프로그램 언어에서 실행 가능하다.

 

 

 

JSON 표기법으로 작성된 텍스트 데이터

JSON Object 구조

key:value의 쌍들의 비순서화된 집합이다.

        {}

        {string:value}

        {string:value, string:value, string:value}

 

작성예

자바스크립트

        let text ='{"no":100, "name":"홍길동", "salary":1000000}';

자바

        String text = "{\"no\":100, \"name\":\"홍길동\", \"salary\":1000000}"

 

작성예

        {"no":100, "name":"홍길동", "salary":1000000, "expired":false}

        {"name":"블랙핑크", "members":["지수", "제니", "로제", "리사"]}

        {"no":100, "name":"홍길동", "car":{"name":"제네시스", "model":"GB80", "price":7000000}}

 

 

 

JSON Array 구조

value들의 순서화된 리스트다.

        []

        [value]

        [value, value, value, value]

 

 

작성예

        ["이것이 자바다", "자바의 정석", "혼자서 공부하는 자바", "Do it! 자바"]

        [{"no":100, "name":"홍길동", "salary":450}, {"no":101, "name":"김유신", "salary":600}, {"no":103, "name":"강감찬", "salary":500}]

 

 

자바스트립트에서의 JSON 데이터 활용

JSON.parse(json 데이터 형식의 텍스트)                    // 언마샬링

        json 데이터 형식의 텍스트를 자바스크립트 객체나 자바스크립트 배열로 변환한 후 반환한다.

JSON.stringify(자바스크립트 객체 혹은 배열)             // 마샬링

        자바스크립트 객체 혹은 배열을 json 데이터형식의 텍스트로 변환한 후 반환한다.

 

 

json 데이터 형식의 텍스트를  JSON.parse를 사용해 자바스크립트 객체로 바꾸었다. data 객체 안에는 no, name 등 text의 요소들이 들어가 있다. 배열을 가진 text에 JSON.parse를 사용하고 그 값을 data에 담으니 배열이 담긴다.

 

 

 

 

자바스크립트 애플리케이션에서 JSON 데이터 활용

• 서버가 JSON 형식의 데이터를 제공하는 경우
• 서버가 JSON 형식의 텍스트를 데이터로 제공한다.
• 자바스크립트 애플리케이션에서는 JSON.parse()메소드를 사용해서 JSON 형식의 텍스트를 분석하기 쉬운 자바스크립트 객체나 배열로 변환한다.
• 데이터를 분석(조회, 반복처리)해서 HTML 컨텐츠를 생성한다.
• 생성된 HTML 컨텐츠를 웹페이지에 반영한다.
• 웹페이지의 화면이 갱신된다.

 

• 자바스크립트 애플리케이션에서 서버로 JSON 형식에 데이터를 전송하는 경우
• 폼의 입력값을 자바스크립트 객체나 배열에 저장한다.
• 자바스크립트 애플리케이션에서는 JSON.stringify() 메소드를 사용해서 자바스크립트 객체나 배열을 JSON 형식의 텍스트 데이터로 변환한다.
• JSON 형식의 텍스트 데이터를 서버로 보낸다.

 

마샬링 언마샬링

마샬링 : 컴퓨터 과학에서 마셜링이란 한 객체의 메모리에서 표현방식을 저장 또는 전송에 적합한 다른 데이터 형식으로 변환하는 과정이다. 또한 이는 데이터를 컴퓨터 프로그램의 서로 다른 부분 간에 혹은 한 프로그램에서 다른 프로그램으로 이동해야 할 때도 사용된다. (출처 : 위키백과)

 

 나는 이 데이터를 전해주고 싶다. 텍스트로 변환해 전달한다. 나는 이 텍스트를 분석하고 싶다. 객체로 바꾼다. 이 과정이 마샬링과 언마샬링이고, JSON이 이 과정을 쉽게 하도록한다.

 

 

 

TOMCAT 서버를 ECLIPSE와 연동해요

웹 애플리케이션 실행하기
1. Web Application Server(WAS) 설치
WAS는 웹 애플리케이션을 실행시키는 서버다. Tomcat, jBoss, WebLogic 등이 있다.

2. Eclipse에 Tomcat 등록
Server -> Runtime Environments -> Apache Tomcat v10.0 등록

3. Dynamic Web Project 생성
project name : web

 

Add and Remove를 통해 web을 서버에 add해준다.

4. 웹애플리케이션 작성하기
src/main/webapp폴더에 home.jsp 파일을 생성한다. 

5. 생성한 Dynamic Web Project를 로컬 서버에 배포
해당 프로젝트를 식별하는 경로는 /web으로 지정되고, Tomcat 서버에 배포된다.

6. Tomcat 서버를 실행
웹 애플리케이션 서버가 시작됨
배포된 웹 애플리케이션(web 프로젝트 배포, home.jsp 애플리케이션)의 실행을 요청할 수 있다.

7. 웹브라우저에서 웹애플리케이션 실행을 요청하기
웹브라우저의 주소창에 http://localhost/web/home.jsp 주소를 입력한다.

8. Tomcat이 웹브라우저의 요청을 처리하고, HTML 컨텐츠를 응답으로 제공한다.

• 1. 요청URL을 분석한다.
  경로 : /web
  웹애플리케이션 : home.jsp
• 2. home.jsp를 실행한다.
  home.jsp를 home_jsp.java로 변환한다.
  home_jsp.java를 home_jsp.class로 컴파일한다.
  home_jsp.class로 객체를 생성한다.
  생성된 객체의 _jspService()메소드를 실행한다.
           home.jsp에서 작성한 모든 html코드와 자바코드가 실행된다.
  html 컨텐츠를 브라우저로 전송한다.

9. 웹브라우저에 웹 페이지가 표시된다.

 

모듈의 path는 해당 프로젝트를 식별 가능하게 한다.

 

내일부터는 이걸 이용해서 진짜 웹페이지를 만든다고 한다. 지금까지 한 건 구경 ... 구경 치고 프로젝트가 많던데용. 아주 재밌을 거라고 하시지만 긴장되는 건 어쩔 수 없는 걸 잘 따라가야 할텐데 음 열심히 해야지 별수있나 기대되긴 한다 지금까지 배운 게 합쳐지는 순간임

 

 

 

---

 

 

 

잘못된 정보에 대한 지적은 언제나 환영입니다.

 

 

 

복습 끝!