[기술면접] Java WEB with SPA(Angular, React, Vue) with JSP, JQuery, JavaScript

JSP / JavaScript / JQuery / Java 차이점

	설명
JSP - 서버언어	JSP(Java Server Pages)의 약자로 HTML 내에 직접 자바 코드를 삽입하여 웹 서버에서 동적으로 웹 페이지를 생성하여 웹브루아저에게 돌려주는 서버 측 웹 프로그래밍중 하나이다. Java EE 스펙 중 일부로 웹 어플리케이션 서버(WAS)에서 동작한다.
JavaScript - 클라이 언트 언어	Front-end 개발 언어로, 정적인 웹 문서에 동작을 부여하는 스크립트 언어(소스 코드를 컴파일하지 않고도 실행할 수 있는 프로그래밍 언어를 의미한다)이다. javaScript도 웹 브라우저에서 바로 실행되며, JSP와 다르게 클라이언트 측 스크립트 언어이다.
JQuery	브라우저 호환성이 있는 HTML 속 자바 스크립트 라이브러리(Library)이다. 클라이언트 사이드 스크립트 언어를 단순화 할 수 있도록 설계 되어있다.
즉, 정리하자면 JSP는 서버에서 자원(코드)들을 사용하는 것이고, Java Script는 클라이언트에서 자원(코드)를 사용한다. JQuery는 Java Script의 라이브러로 생성된 언어이고, Java를 이용하여 HTML 문서를 출력하게 되는데 이것을 서블릿이라고 하며 이 서블릿은 Java로 간편하게 하기 위해 나온것이 JSP이다. 라고 정리하자.

 

---

 

[Servlet, JSP]

기능의 차이는 없고 역할의 차이만 있다.(하는 일은 동일)

Servlet

• Container가 이해할 수 있게 구성된 순수 자바 코드로만 이루어진 것 (Html in Java : 자바 코드안에 html 코드)
• 웹 개발을 위해 만든 표준
• Java 코드 안에 HTML 코드
• Data Processing(Controller)에 좋다.
• 즉 DB와의 통신, Business Logic 호출, 데이터를 읽고 확인하는 작업에 유용하다.
• Servlet이 수정된 이후 java 코드를 컴파일(.class 파일 생성)한 후 동적인 페이지를 처리하기 때문에 전체 코드를 업데이트하고 다시 컴파일하는 재배포하는 작업이 필요하다.

JSP(Java Server Page) :

• html기반에 java코드를 블록화하여 삽입한 것(Java in Html : HTML 코드안에 JAVA 코드)
• HTML 코드안에 Java 코드
• Servlet를 보완하고 기술을 확장한 스크립트 방식 표준

 

 

[JDBC]

Java Data Base Connection의 약자로 JAVA 언어를 통해 데이터 베이스에 접근할 수 있는 프로그래밍 의미.

 

[Get/Post 방식]

Get 방식

Post 방식

 

[JSP]

JavaScript

• 클라이언트 언어
• 웹 브라우저 (사용자의 컴퓨터)에서 실행되는 스크립트 언어
• 자바스크립트 파일은 .js 확장자를 가지며, 자바스크립트 문법에 따라 작성 됨
• 프로그래밍 언어 중 하나 라고 생각하면 된다.

JSP(Java Sever Page)

• 서버 언어(JavaScript 처럼 언어의 종류를 나타내는 것은 아니다.)
• JSP는 서버에서 실행되고, 그 결과가 웹브라우저(사용자 컴퓨터)로 전송된다.
• JSP는 웹 서버에서 실행되는 .JSP파일
  • JSP 파일에는 html태그와 javascript 함수도 사용이 가능하다. 추가로 자바 문법도 사용가능하다.

[Maven]

빌드

• 작성한 소스코드 (Java), 프로젝트에서 쓰인 각각의 파일 및 자원(.xml, .jpg, .jar, .properties)을 JVM이나 톰캣(=WAS)가 인식할 수 있는 구조로 패키징 하는 과정 및 결과물이라고 할 수 있다.

빌드도구

• 빌드도구란 프로젝트 생성, 테스트 빌드, 배포 등의 작업을 위한 전용 프로그램
  • 빠른기간동안 계속해서 늘어나는 라이브러리 추가, 프로젝트 진행하며 라이브러리의 버전 동기화의 어려움을 해소하고자 등장
• 초기의 java 빌드도구는 Ant-> 최근 Maven -> Gralde이 많이 쓰인다.

Maven

• Maven은 자바용 프로젝트 관리도구로 Apache Ant의 대안으로 만들어졌다.
• Maven은 Ant와 마찬가지로 프로젝트의 전체적인 라이프 사이클을 관리하는 도구 이며, 많은 편리함과 이점이 있어 널리 사용되고 있다.
• Maven은 특정문서 (pom.xml)에 정의해 놓으면 내가 사용할 라이브러리 뿐만 아니라 해당 라이브러리가 작동하는데 필요한 다른 라이브러리들까지 관리하여 네트워크를 통해서 자동으로 다운받아 준다.
• 간단한 설정을 통한 배포 관리가 가능하다.

 

[브라우저]

• 우리가 사용하는 브라우저는 사용자가 요청한 자원(URI 주소)을 받아와서 표시해준다. 주로 HTML 파일을 받아와 해석하여 보여주지만, 이미지, PDF 등 여러가지 파일 역시 지원한다.
• 브라우저는 사용자가 요청하여 받아온 HTML파일을 파싱하여 DOM 트리를 그리고, CSS 파일을 파싱하여 이를 결합한 후 렌더링을 하는 작업을 우리의 화면에 그려주게 된다.

[HTML]

• HTML(HyperText Markup Language)은 웹 페이지를 위한 언어로, 특정 영역이 어떤 성질을 갖는지 미리 정해진 규칙에 따라 구조화된 요소들로 이루어진 마크업 언어이다.
  마크업 언어는 태그(<>)를 이용하여 데이터 구조를 명명하는 언어이므로, 태그 안에 담기는 요소들에 따라 영역의 성질이 달라지게 되고 각 영역들이 모여 구조화된 문서를 만든다.
• HTML 요소들은 W3C라는 웹 표준기구에서 정한 가이드라인을 기반으로 정해져왔기 때문에 서로 다른 브라우저에서는 표준에 맞게 해석하여 동일 페이지를 사용자에게 보여줄 수 있다.
• HTML은 인간이 이해하고 구분할 수 있는 언어로 만들어져 있고, 기계는 이렇게 규약된 언어를 해석할 수 없다. 때문에, 파싱이라는 작업을 거쳐 브라우저가 해석할 수 있는 언어와 구조로 변환하는 작업이 필요하다.
  (각 브라우저마다 파서가 다르기 때문에 같은 HTML문서라도 다른 파싱 결과값을 가질 수 있다.)

[DOM]

첫째, 브라우저는 html태그를 파싱 하여 돔 트리를 구성한다.

동시에 브라우저는 스타일시트에서 css를 파싱 하여 스타일 규칙들을 만들어낸다.

둘째, 위에서 언급한 돔 트리와 스타일 규칙 두 가지가 합쳐져서 렌더 트리를 만들어낸다.

DOM은 원본 HTML 문서의 객체 기반 표현 방식입니다. 둘은 서로 비슷하지만, DOM이 갖고 있는 근본적인 차이는 단순 텍스트로 구성된 HTML 문서의 내용과 구조가 객체 모델로 변환되어 다양한 프로그램에서 사용될 수 있다는 점입니다.

• DOM이란 웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체 모델이다.
• javascript는 이 model로 웹 페이지에 접근하고, 페이지를 수정 할 수 있습니다.
• DOM은 HTML인 웹페이지와 스크립팅언어(JavaScript)를 서로 잇는 역할이다.

• 이렇게 파싱된 HTML 언어는 트리구조를 갖는 객체로 표현되는데, 이를 DOM(Document Object Model)이라고 한다.
• DOM은 문서에 접근할 수 있는 API로, node와 property, method를 갖는 객체로 이루어져 스크립트나 CSS와 같은 언어들이 DOM 구조에 접근 하여 커스텀 할 수 있게 만들어주는 연결 부분 역할을 갖는다.
• 때문에 DOM을 이용하여 텍스트값을 변경할 수 있고 스타일링 및 노드 구조까지도 바꿀 수 있다.

 

[DOM과 HTML의 차이]

DOM은 HTML 문서로부터 생성되지만 항상 동일하지 않습니다. DOM이 원본 HTML 소스와 다를 수 있는 두 가지 케이스가 있습니다.

• 작성된 HTML 문서가 유효하지 않을 때

올바르게 교정되므로 HTML!=DOM

• 자바스크립트에 의해 DOM이 수정될 때

javascript로 DOM을 업데이트

이 코드는 DOM을 업데이트합니다. 하지만 HTML 문서의 내용을 변경하진 않습니다.

• W3C의 DOM 스펙에선, 문서의 의미는 HTML에만 국한된것이 아니라고 한다. XML 역시 DOM을 사용하여 데이터를 관리할 수 있으며, DOM은 다양한 환경과 어플리케이션에서 사용할 수 있는 API라고 설명한다.
• HTML은 단순히 규칙에 따라 정해진 태그, 속성값으로 이루어진 언어이며,
  DOM은 브라우저가 HTML 파싱한 후 생성되는 객체 모델로, document에 접근가능한 API이다.

요약정리

DOM은 HTML 문서에 대한 인터페이스입니다.

• 첫째로 뷰 포트에 무엇을 렌더링 할지 결정하기 위해 사용되며,
• 둘째로는 페이지의 콘텐츠 및 구조, 그리고 스타일이 자바스크립트 프로그램에 의해 수정되기 위해 사용됩니다.
• DOM은 원본 HTML 문서 형태와 비슷하지만 몇 가지 차이점이 있습니다.
  • 항상 유효한 HTML 형식입니다.
  • 자바스크립트에 수정될 수 있는 동적 모델이어야 합니다.
• Javascript가 getElementbyid()를 같은 함수를 이용하여 HTML문서의 각 요소(li, head같은 태그들)들을 접근하고 사용할 수 있도록 하는 객체 모델입니다.

[가상 돔(Vitual DOM)]

가상돔(Virtual DOM)은 실제 DOM 문서를 추상화한 개념으로, 변화가 많은 View를 실제 DOM에서 직접 처리하는 방식이 아닌 Virtual Dom과 메모리에서 미리 처리하고 저장한 후 실제 DOM과 동기화 하는 프로그래밍 개념입니다.

 

가상 돔이 생긴 원인

기존에는 화면의 변경사항을 돔을 직접 조작하여 브라우저에 반영하였다. 하지만, 이 방법의 가장 큰 단점은 돔 트리가 수정될 때마다 렌더 트리가 계속해서 실시간으로 갱신된다는 점이었다. 즉, 화면에서 10개의 수정사항이 발생하면 수정할 때마다 새로운 랜더 트리가 10번 수정되면서 새롭게 만들어지게 되는 것이다.

효과

가상 돔을 활용하면 이러한 불필요한 렌더링 횟수를 줄일 수 있다. 가상 돔을 활용한 대표적인 프런트 앤드 프레임워크가 리액트, 뷰, 앵귤러이다. 이러한 프레임워크들은 화면에 변화가 있을 때마다 실시간으로 돔 트리를 수정하지 않고 변경사항이 모두 반영된 가상 돔을 만들어낸다. 그 후 가상 돔을 이용해 한 번만 돔수정을 하게 되고 이는 한 번만 렌더 트리를 만들어내게 된다. 결과적으로 브라우저는 한번만 렌더링을 하게 됨으로써 불필요한 렌더링 횟수를 줄일 수 있게 되는 것이다.

[CRS vs SSR]

1. User는 google.com을 Server에게 요청한다.
2. Server는 HTML을 보내준다.
3. 브라우저는 HTML을 랜더링하여 띄운다.

jQuery (=powerFul함)

jQuery (=powerFul함) jQueryTable

Server Side에서 Json 포맷으로 전달하면 jQuery는 테이블로 변환한다.

즉, CSR은 HTML에서 jQuery를 이용하여 랜더링하는 것 SSR은 Server에서 HTML주는 것

 

 

MVC

M : 데이터관련, 수정,삭제,저장 등 주방장

V : 보여지는 것 -> HTML, CSS 직원(접시에담음)

C : 제어연결(프로그래밍) : JS 서빙

 

MVC 프레임워크란

이미 MVC 골격을 미리 짜놓은 것

 

라이브러리 vs 프레임워크

라이브러리는 가져다 쓰는 것 (재료)

프레임워크는 기본 틀로 삼아서 그 위에 뭘 덧붙여 만드는 것

 

SPA(Single Page Application)

"jQuery이용하여 특정데이터말고 전체 화면을 랜더링하고 싶다"라는 needs가 생김

왜 SPA가 등장 했는가

강력한 MVC 웹 프레임워크(=Spring, C# .NET Framework)들이 등장하고 발전하면서 편리하고 빠르게 웹 사이트를 개발할 수 있게 됐다. 

기존 MVC 웹 프레임워크의 문제점

1. 오래된 웹 사이트 경우 좋아요 하나를 눌렀는데 모든 창이 다시 랜더링 되는 경우, 해결책으로 ajax가 나와서 특정 부분만 변경가능해짐 단 일일이 프로그래밍해야되는 불편함이 생김  
2. 웹 브라우저 뿐만 아니라 모바일로도 웹을 구현해야하는 일이 생김 

웹, 웹앱, 안드로이드용 앱, IOS용 앱

 

• 백앤드 개발자는 그냥 DB에서 데이터만 전송하면 프로트앤드 단에서 알아서 상위의 4개의 상황에 맡게 랜더링을 실행하는 기술을 구현한다. 그것이 SPA 프레임워크이다. 
• 서버에서 데이터만 보내줘도 알아서 브라우저에서 알아서 HTML, CSS, JS로 랜더링해낸다.
  • 즉 기존의 서버에서 프로그래밍 하던 것이 클라이언트의 브라우저에서 돌아가는 개념이다. 
  • 따라서 서버 개발자는 서버에만 집중할 수 있다.
• 정적 : 편의점 (=서버에서 이미 깔아놓는 느낌)
• 동적 : 음식점 (=서버에서 손질을 해서 완성품을 주는느낌)
• SPA : 종업원(=서버)이 재료를 가져다 주면 손님(=클라)이 직접 불판에서 구워먹는 고기집

 

• React : 프레임워크 보다는 라이브러리에 가깝다는 느낌, 막강한 라이브러리
• Angular : 구글에서 만들었고 약간 어렵지만 단단하다라는 느낌, TypeScript 사용
• Vue.js : 아주 쉽게 접할 수 있다는 특징

 

TypeScript

컴파일 언어, 정적 타입 언어이다. JS는 인터프리터 언어지만, TypeScript는 컴파일 언어로 코드 수준에서 미리 타입을 체크하여 오류를 체크한다.
쉽게 말해
TypeScript = JavaScript + type
JS의 var와 같은 자료형 대신 string, number 같은 자료형을 지정함으로써 안정성을 확보한다. 
type이 생김으로서 
1) 안정성이 확보된다.
2) type에 대한 예외처리를 하지않아도 된다.
Angular에서 사용하는 것으로 알고있습니다.

컴파일러와 인터프리터

컴파일러는 고급 언어로 작성된 프로그램 전체를 목적 프로그램으로 번역한 후, 링킹 작업을 통해 컴퓨터에서 실행 가능한 프로그램으로 생성한다. C/C++, 등 

인터프리터
BASIC, LISP, APL 프로그램이 직접 실행됨, 고급언어로 작성된 프로그램을 한줄 단위로 받아들여 번역하고 번역과 동시에 프로그램을 한줄 단위로 즉시 실행시키는 프로그램.

CSR방식

SSR의 경우 Btn을 이전페이지 누를 때 마다 HTML 모두 생성해서 Client로 보낸다. (=비효율적)

CSR의 경우 이전의 받아던 파란색 btn은 keep 해주고 새로운 data를 Server에서 가져온다.(=효율적)

단점

• 첫 로딩이 느리다.

처음에 ini할 때 js파일을 다 가져와야함으로 첫로딩이 느리다.

• 페이지 캐싱이 잘 안된다.