230314 TIL - 모던 자바스크립트 Deep Dive Lesson 5 / Spring View 환경설정

thumbzzero·2023년 3월 14일

JavaScript Spring TIL

TIL

목록 보기

8/21

5. 자바스크립트의 기본 문법

데이터 타입 : 프로그래밍 언어에서 사용할 수 있는 값의 종류
- 원시 타입 : number, string, boolean, null, undefined, symbol(New in ECMAScript 6)
- 객체 타입 : object
변수 : 값이 저장된 메모리 공간의 주소를 가리키는 식별자
리터럴 : 소스코드 안에서 직접 만들어 낸 상수 값 자체를 말하며 값을 구성하는 최소 단위 (숫자 리터럴, 문자열 리터럴, 불리언 리터럴, null 리터럴, undefined 리터럴, 객체 리터럴, 배열 리터럴, 정규표현식 리터럴, 함수 리터럴)

동적 타이핑

변수를 선언할 때 데이터 타입을 미리 지정 X
변수에 할당된 값의 타입에 의해 동적으로 변수의 타입 결정

표현식

표현식(Expression)은 하나의 값으로 평가(Evaluation)된다.
값(리터럴), 변수, 객체의 프로퍼티, 배열의 요소, 함수 호출, 메소드 호출, 피연산자와 연산자의 조합은 모두 표현식이며 하나의 값으로 평가됨

객체

: 키와 값으로 구성된 프로퍼티의 집합, 프로퍼티의 값으로 자바스크립트에서 사용할 수 있는 모든 값 사용 가능
프로퍼티 값으로 함수를 사용할 수도 있으며 프로퍼티 값이 함수일 경우, 일반 함수와 구부하기 위해 메소드라 부른다.
자바스크립트는 객체(object) 기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 "모든 것"이 객체이다.
원시 타입을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체이다.

var person = {
  name: 'Lee',
  gender: 'male',
  sayHello: function () {
    console.log('Hi! My name is ' + this.name);
  }
};

console.log(typeof person); // object
console.log(person); // { name: 'Lee', gender: 'male', sayHello: [Function: sayHello] }

person.sayHello(); // Hi! My name is Lee

자바스크립트의 객체는 객체지향의 상속을 구현하기 위해 “프로토타입”이라고 불리는 객체의 프로퍼티와 메소드를 상속받을 수 있다. 이 프로토타입은 타 언어와 구별되는 중요한 개념이다.

Spring View 환경설정

Welcome Page

도메인으로 들어왔을 때 자동으로 resource/static/index.html 파일을 첫 화면으로 사용

thymeleaf 템플릿 엔진

Controller : 웹 어플리케이션에서 첫 번째 진입점

 @Controller
  public class HelloController {
      @GetMapping("hello")  // /hello URL에 매칭
      public String hello(Model model) {  // 이 contoller에 있는 이 메서드 실행
          model.addAttribute("data", "hello");
          return "hello";  // model에 있는 data 넘기면서 resources/templates에 있는 hello.html 찾아서 렌더링 해라
      }
}

<!-- hello.html -->
<!DOCTYPE HTML>
  <html xmlns:th="http://www.thymeleaf.org">
  <head>
      <title>Hello</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  </head>
<body>
<p th:text="'안녕하세요. ' + ${data}" >안녕하세요</p>
  </body>
  </html>