230315 TIL - 모던 자바스크립트 Deep Dive Lesson 6 / Spring 웹 개발 방법 3가지

---

6. 데이터 타입과 변수

변수 : 값이 위치하고 있는 메모리 주소에 접근하기 위해 사람이 이해할 수 있는 언어로 명명한 식별자
var, let, const 키워드를 사용하여 선언하고 할당 연산자를 사용해 값을 할당. 식별자인 변수명을 사용해 변수에 저장된 값을 참조

var 키워드로 선언된 변수의 문제점

1. 함수 레벨 스코프(Function-level scope)
   전역 변수의 남발
   for loop 초기화식에서 사용한 변수를 for loop 외부 또는 전역에서 참조할 수 있다.
2. var 키워드 생략 허용
   의도하지 않은 변수의 전역화
3. 중복 선언 허용
   의도하지 않은 변수값 변경
4. 변수 호이스팅
   변수를 선언하기 전에 참조가 가능하다.

데이터 타입에 따라 확보해야 할 메모리의 크기(byte)가 다르다.

자바스크립트는 동적 타입 언어이므로 변수의 타입 지정 없이 값이 할당되는 과정에서 자동으로 변수의 타입이 결정(타입 추론, Type Inference)된다.
: 즉 변수는 고정된 타입이 없다.

원시 타입 (Primitive Data Type)

변경 불가능한 값(immutable value)이며 pass-by-value(값에 의한 전달)이다.

• number
  배정밀도 64비트 부동소수점 형
  모든 수를 실수로 처리
  • Infinity : 양의 무한대 (ex. 10 / 0)
  • -Infinity : 음의 무한대 (ex. 10 / -0)
  • NaN : 산술 연산 불가 (not-a-number)
• string
  • 배열처럼 인덱스를 통해 접근할 수 있다. (유사 배열)
    str[0] = 'S'처럼 이미 생성된 문자열의 일부 문자를 변경해도 반영되지 않는다. (에러는 발생 X, 한 번 생성된 문자열은 read only로서 변경 불가능(immutable)이기 때문)
  • 원시 타입 -> 한 번 문자열이 생성되면, 그 문자열을 변경할 수 없다.

    var str = 'Hello';  // 식별자 str은 메모리에 생성된 문자열 'Hello'의 메모리 주소를 가리킨다.
    str = 'world';  // 이전에 생성된 문자열 'Hello'를 수정하는 것이 아니라 새로운 문자열 'world'를 메모리에 생성하고 식별자 str은 이것을 가리킨다.
    // 이 때 문자열 'Hello'와 'world'는 모두 메모리에 존재하고 있다.

• boolean
  true, false
  • 비어 있는 문자열과 null, undefined, 숫자 0은 false로 간주
• undefined
  선언 이후 값을 할당하지 않은 변수
  • 변수 선언에 의해 확보된 메모리 공간을 처음 할당이 이루어질 때까지 빈 상태로 내버려두지 않고 자바스크립트 엔진이 undefined로 초기화하기 때문
    개발자가 의도적으로 할당한 값이 아니라 자바스크립트 엔진에 의해 초기화된 값
• null
  의도적으로 변수에 값이 없다는 것을 명시할 때 사용
  • 또는 함수가 호출되었으나 유효한 값을 반환할 수 없는 경우, 명시적으로 null을 반환하기도 함
  • 타입을 나타내는 문자열을 반환하는 typeof 연산자로 null 값을 연산해 보면 null이 아닌 object가 나옴(자바스크립트 설계상의 오류) -> null 타입을 확인할 때 ===을 사용하여야 한다.
• symbol
  주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키(property key)를 만들기 위해 사용
  • Symbol 함수를 호출해 생성 : 이때 생성된 심볼 값은 다른 심볼 값들과 다른 유일한 심볼 값

    // 심볼 key는 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키
    var key = Symbol('key');
    console.log(typeof key); // symbol
    //
    var obj = {};
    obj[key] = 'value';
    console.log(obj[key]); // value

(Object type, Reference type)

• 객체(object)
  데이터와 그 데이터에 관련된 동작(절차, 방법, 기능)을 모두 포함할 수 있는 개념적 존재
  이름과 값을 가지는 데이터를 의미하는 프로퍼티(property)와 동작을 의미하는 메소드(method)를 포함할 수 있는 독립적 주체

원시 타입을 제외한 나머지 값들 모두(배열, 함수, 정규표현식 등)
pass-by-reference(참조에 의한 전달) 방식으로 전달됨

---

Spring 웹 개발 방법 3가지

정적 컨텐츠

localhost:8080/[파일명].html 접속 시
내장 톰켓 서버가 요청을 받음
-> 스프링 컨텐이너가 hello-static으로 매핑이 된 컨트롤러 있는지 찾음
-> 없으면 resources/static/[파일명].html 있는지 찾아서 있으면 띄워줌

※ resources/static/[파일명].html 없으면 white label error

MVC와 템플릿 엔진

MVC : Model, View, Controller

View - 화면을 그리는데 집중
Model, Controller - 비즈니스 로직, 내부적인 처리에 집중

Model에 담으면 그걸 View에서 렌더링할 때 씀

정형화된 패턴 : 컨트롤러를 통해 외부 요청을 받고 서비스에서 비즈니스 로직을 만들고 리포지토리에서 저장

@RequestParam("[파라미터명]") [자료형] [파라미터명]
default : required = true

localhost:8080/[컨트롤러에 매핑된 메소드명]/?[파라미터명]=[값] 들어오면
내장 톰켓서버에서 스프링 컨테이너로 던짐
-> 컨트롤러 찾음
-> 컨트롤러에 매핑되어 있는 메소드 호출
-> 메소드 [템플릿 명] 리턴, model([파라미터명]: [값])
-> viewResolver에서 templates/[템플릿 명].html찾아서 Thymeleaf 템플릿 엔진 처리해서 변환 한 HTML 웹 브라우저에 반

API

@ResponseBody
HTTP body에 return 하는 데이터를 직접 넣어주겠다
리턴한 값이 요청한 클라이언트한테 그대로 전달
객체를 리턴하면 자동으로 json으로 반환

• @ResponseBody 를 사용하면 viewResolver를 사용하지 않음
• 대신에 HTTP의 body에 문자 내용을 직접 반환

@ResponseBody 사용 원리
localhost:8080/[컨트롤러에 매핑된 메소드명]/?[파라미터명]=[값] 들어오면
내장 톰켓서버에서 스프링 컨테이너로 던짐
-> 컨트롤러 찾음
-> @ResponseBody 어노테이션 붙어있으면
-> viewResolver 대신에 HttpMessageConverter가 동작
-> 리턴값이 문자이면 StringConverter, 객체이면 JsonConverter 동작