1주 차 첫 번째 강의 정리

1. 과제 제출 시 확인 사항

• 프론트엔드 - “똑같이 구현”은 기본
  • 클론 : 말 그대로 똑같이 구현했어야 함.
  • HTML, CSS도 중요하다

2. utils 함수

• 주니어와 미들레벨의 차이
• utils: 의존성 없이 공통적으로 자주 사용되는 로직을 모아놓은 폴더
  

3. Client 리소스로 데이터 사용 (mock data)

💌 UI 구성에 필요하지만 백엔드 API가 준비되지 않았을 때, 프론트엔드 개발자가 필요에 의해 샘플로 데이터로 만들어 UI를 미리 개발할 수 있습니다.

4. JSON & 통신

JSON(JavaScript Object Notation)은 데이터를 주고 받을 수 있는 데이터 형식이다.

JSON이 자바스크립트와 문법과 유사하긴 하지만 자바스크립트도 아니고, 자바스크립트에서만 사용할 수 있는 것도 아니다. 많은 프로그래밍 언어에서 JSON 파싱과 직렬화를 지원한다.

1. JSON에서 사용 가능한 타입

• String
• Number
• boolean
• null
• object
• array

→ 일반적으로 객체와 배열이 JSON 데이터 구조에서 최상위 레벨에 있다.

→ 사용할 수 없는 것

• function
• date
• undefined

2. 자바스크립트와 다른 점

• String을 감쌀 때, "쌍따옴표"만 유효함.
• 객체의 Property Name도 "쌍따옴표"로 감싸야함.

  {
  	"name": "wecode"
  }

3. 파싱과 직렬화(Parse & Stringify)

JSON 데이터를 파싱하면 자바스크립트 객체가 되어 자바스크립트에서 데이터를 사용할 수 있는 것이다.

자바스크립트에서의 JSON 객체는 문자열을 JSON 파싱하고 직렬화 하는 메서드를 갖고 있다. 두개 말고는 특별한거 없다! 끝!

• stringify(): 자바스크립트 객체를 JSON 문자열로 직렬화 한다.
• parse(): JSON을 파싱하여 자바스크립트 값으로 바꾼다.

4. json 파일 만들어서 사용하는 방법

• .json 파일로 만들어 통신하면 된다!

  • users.json

    [{
    "name":"마마우"
    }]

• public 폴더 > data 폴더 > users.json
  

• .json 파일을 import 해도 된다.
  • 사용하는 component 파일과 같은 level에 위치