i can do ik!

@RequestMapping

• 요청 정보를 매핑
• 해당 url이 호출되면 해당 메소드가 호출
• 어노테이션 기반 동작이기 때문에 메소드 이름은 자유
• 방식은 GET, POST, PUT, DELETE

@RequestMapping(value = "/url", method = RequestMethod."방식")

@RequestMapping 예제

사실상 기본 예제는 스프링으로 프로젝트만 만들어도 바로 볼 수 있다.

@RequestMapping(value = "/", method = RequestMethod.GET)
public String home(Locale locale, Model model) {
    logger.info("Welcome home! The client locale is {}.", locale);

    Date date = new Date();
    DateFormat dateFormat = DateFormat.getDateTimeInstance(DateFormat.LONG, DateFormat.LONG, locale);

    String formattedDate = dateFormat.format(date);

    model.addAttribute("serverTime", formattedDate );

    return "home";
}

참고

• @RequestMapping을 많이 사용하긴 했지만 스프링 4.3부터 새로운 어노테이션 5개가 추가됨.
• @PostMapping
• @GetMapping
• @PutMapping
• @DeleteMapping 
• @PatchMapping

위 5개 어노테이션은 따로 정리 해보자

Map

• Map은 리스트나 배열처럼 순차적으로 해당 요소 값을 구하지 않고 Key를 통해 Value를 얻는다.
• 값(Value)은 중복될 수 있지만, Key는 고유한 값(Unique)을 가져야 한다.

Map<String, String> map = new HashMap<>();

Map 예제

Map<String, String> map = new HashMap<>();

map.put("name", "doik");
map.put("age", "33");

System.out.println(map.get("name")); // "doik"

결론

• Key를 통해 Value를 찾는다.
• Key는 중복될 수 없지만, Value는 중복될 수 있다.
• Key로 Value를 찾기 때문에 순서를 유지하지 않아도 된다.
• Key에 해당하는 값이 이미 존재하면 값을 갱신한다.

for...in (객체 순환)

• es6 에서 추가된 문법
• 객체에 사용 할 수 있다.
• 객체의 key값과 value 값을 추출하는데 유용.
• 객체의 키값의 갯수만큼 반복하여 첫번쨰키값부터 마지막 키값까지 반복.

for (variable in object) { ... }

for...in 예제

See the Pen for...in by Kim Jae Ik (@doitdoik) on CodePen.

for...of (배열 순환)

• es6 에서 추가된 문법
• 반복할 수 있는 객체(iterable objects)를 순회할 수 있도록 해주는 반복문
• 객체 Map, Set, Array, String 등을 반복(Object X)
  
• 배열과 문자열 등, for of 으로 반복

for (variable of iterable) {
  statement
}

for...of 예제

See the Pen Untitled by Kim Jae Ik (@doitdoik) on CodePen.

Ajax

• Ajax는 Asynchronous Javascript and Xml의 약자.
• 자바스크립트의 라이브러리 중 하나이며, 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해 전체 페이지를 새로 고치지 않고 페이지의 일부만을 로드하는 기법.
• 자바스크립트를 사용한 비동기 통신이며, 클라이언트와 서버간에 XML 데이터를 주고받는 기술.

Ajax 장단점

장점

• 페이지 이동 없이 고속으로 화면을 전환할 수 있다.
• 서버 처리를 기다리지 않고, 비동기 요청이 가능하다.
• 수신하는 데이터 양을 줄일 수 있고, 클라이언트에게 처리를 위임할 수도 있다.
• 플러그인 없이도 인터렉티브 한 웹페이지 구현할 수 있다.

단점

• Ajax를 쓸 수 없는 브라우저에 대한 문제가 있다.
• HTTP 클라이언트의 기능이 한정되어 있다.
• 페이지 이동없는 통신으로 인한 보안상의 문제
• 지원하는 Charset이 한정되어 있다.
• 스크립트로 작성되므로 디버깅이 용이하지 않다.
• 요청을 남발하면 역으로 서버 부하가 늘 수 있다.

동기식, 비동기식 비교

location.href, location.replace() 비교

• 기본적인 페이지는 location.href를 사용.
• 뒤로가면 안되는 페이지(로그인 후)들은 location.replace()사용

String.length

문자열의 길이를 반환한다.

let text = 'abcd';

console.log(text.length); // 4

Array.length

배열의 길이를 반환한다. 

let arr = ['aa', 'bb', 'cc', 'dd'];

console.log(arr.length); // 4

JSON이란

JSON은 JavaScript Object Notation라는 의미의 축약어.

데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식.

JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작다.

JSON은 데이터 포맷일 뿐이며 어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법이다.

JSON 특징

1. JSON은 자바스크립트를 확장하여 만들어짐

2. JSON은 자바스크립트 객체 표기법을 따름

3. JSON은 사람과 기계가 모두 읽기 편하도록 고안됨

4. JSON은 프로그래밍 언어와 운영체제에 독립적

JSON 자료형

JSON 예제

{
  "이름":"유재석",
  "나이":51,
  "주소":"서울특별시 강남구 압구정동",
  "방송":["런닝맨", "유퀴즈", "놀면뭐하니"],
  "가족":{
    "부인":"나경은",
    "아들":"유지호",
    "딸":"유나은"
  }
}

EXISTS

• 한 테이블이 다른 테이블과 외래키(FK)와 같은 관계가 있을 때 유용.
• 조건에 해당하는 ROW의 존재 유무와 이후 더 수행하지 않음.
• 일반적으로 SELECT절까지 가지 않기에 IN에 비해 속도나 성능면에서 더 좋음.
• 메인 쿼리 -> EXISTS 쿼리

※ IN절은 IN 쿼리 -> 메인 쿼리의 순서. 이 부분이 IN절과 EXISTS절의 가장 큰 차이

-- 검색어1 또는 검색어2인 값만 출력 
WHERE [컬럼명] EXISTS ('검색어1', '검색어2'); 

-- SELECT문의 조건만 출력 
WHERE [컬럼명] EXISTS (SELECT문);

NOT EXISTS

NOT EXISTS는 EXISTS와 반대로 해당 조건을 제외하고 출력 할 때 사용.

-- 검색어1 또는 검색어2이 아닌 값만 출력 
WHERE [컬럼명] NOT EXISTS ('검색어1', '검색어2'); 

-- SELECT문의 조건이 아닌 값만 출력 
WHERE [컬럼명] NOT EXISTS (SELECT문);