코드잇 학습일기 day3. JSON 데이터 자바스크립트 객체 변환, Request와 메소드 종류

한 주의 시작은 코드잇으로~ 원래 하루에 강의 한개씩은 꼬박꼬박 듣고 있었기 때문에, 습관적인 면에서는 어렵지 않지만... 하루에 다섯개 강의를 들어야 하는 것은 조금 부담이다. 그래도 일주일에 두 번 정도라면, 업무가 바쁘지 않은 날이나 점심시간을 이용해서 들을 만 하다. 

---

JSON 데이터 자바스크립트 객체로 변환하기

어떤 변수의 데이터 타입을 확인할 때에는 typeof 연산자를 사용하면 된다.

 

JSON 데이터 타입 확인하기

 

위와 같이 typeof 연산자를 사용하면 JSON 데이터가 string 타입이라는 것을 알 수 있다. 그런데 데이터가 string 타입이라면 작업하는 것이 쉽지 않다. 다행히도 string 타입의 JSON 데이터는 그대로 자바스크립트 객체로 변환할 수 있다.

 

JSON 데이터 자바스크립트 객체로 변환하기

 

위와 같은 JSON 데이터에 parse 라는 메소드를 사용하면 string 타입의 JSON 데이터를 자바스크립트 객체로 변환할 수 있다. 

 

개발자도구 console 자바스크립트 코드 실행

 

forEach 메소드는 배열의 각 요소를 순회하면서 매번 그 파라미터로 받은 함수를 실행하는 기능을 한다. 위의 예제에서 배열의 총 길이인 10, 그리고 각 사용자의 이름이 순서대로 출력된 것을 확인할 수 있다.

 

서버에 보내는 요청(Request)의 종류

서버에 보내는 요청(Request)의 종류는 크게 네가지로 나눌 수 있으며, 우리는 request에 존재하는 메소드를 보고, 어떤 요청인지 알 수 있다. 

 

• 기존 데이터 조회 - GET
• 새로운 데이터 추가 - POST
• 기존 데이터 수정 - PUT
• 기존 데이터 삭제 - DELETE

 

조회, 추가, 수정, 삭제 요청에는 각각 GET, POST, PUT, DELETE 라고 하는 메소드 값이 설정된다. 각 메소드의 데이터 관련 작업은 아래와 같다. 

 

메소드	데이터 처리
GET	READ
POST	CREATE
PUT	UPDATE
DELETE	DELETE

 

cf. 데이터베이스의 관점에서 데이터 처리를 나타낸 합성어로 CRUD가 있다. CRUD는 Create - Read - Update - Delete의 약자라는 것도 함께 알아두면 좋을 것 같다.

 

요청(Request)의 구조

하나의 Request는 Head와 Body로 나뉘어져 있다. (html과 비슷...?) Head는 요청에 대한 여러가지 부가정보들이 들어있으며, 메소드도 이 곳에 있다. 그리고 Body는 실제 데이터를 담고 있다. 만약 Request를 보낼 때 어떤 데이터를 담고 있어야 한다면, 그 데이터가 담기는 부분이다. 

예를 들어 POST, PUT Request의 경우에는 body에 데이터를 담아서 보내주어야 한다. 하지만 새로운 데이터가 필요 없는 GET, DELETE Request의 경우에는 Body가 필요 없게 된다.

 

개발자도구 > Network > Headers

 

Request Header는 브라우저의 개발자 도구 > Network > Headers 탭에서 확인할 수 있다. Head 안에 있는 각각의 Header들은 이 Request에 대한 부가 정보들을 담고 있다.

 

:method: GET 

현재의 요청이 데이터를 조회하려고 하는 Request 임을 나타냄

 

:path: /users 

URL에 있는 경로를 나타냄

---

코드잇 커리큘럼 중간에 있는 실습 문제를 해결하면 '정답입니다!'라는 알림창이 뜬다. 문제가 쉽게 풀리지 않을 때에는 답답하지만 그래도 시간을 들여 해결하고 나면 스스로 성장했다는 생각이 들어 뿌듯하고 기분이 좋다.

 

코드잇 실습 정답을 맞췄을 때

 

오늘 풀었던 실습 내용은 응용이라기 보다는 지난 강의를 복습하는 느낌이어서 쉽게 풀 수 있었다. (야호) 그럼 마지막으로 오늘도 강의 5개를 수강한 인증사진을 끝으로 이 포스팅은 마무리! 안녕~ 내일 또 올게~

 

코드잇 학습 인증