[2021.07.29] React Foundation 1

📌 Code Review Check Point!

✅ HTML 무시하지 말자!

• 시맨틱한 코드를 사용해야 한다
• 파일안에 하나의 컴포넌트만 만들기

✅ CSS도 공부가 필요하다

• flex : 정렬이 원래 세로방향일 때, 의미없이 flex를 남발하지 말자.
• 여백 오사용 : 강제로 위치/크기를 지정해서 화면 정중앙에 놓지말자.
• height 아무데나 주지 말자

✅ styled Component를 사용하면서 className을 지정하는 경우

• 혹시, styled-component와 css/sass를 혼용하여 사용하면 의도치 않은 오염(중복) 발생으로 어려워진다.

✅ 유지보수하기 쉬운 코드. 오로지 그것만 생각하자

• 상수로 관리해야할 변수를 항상 염두해두자!

    export const BASE_URL = `https://jsonplaceholder.typicode.com`;
    export const ERROR_MESSAGE = 'Failed to fetch data';
    export const LIMIT = 10;
    export const DEFAULT_PAGE = 1;

✅ 게으른 개발자에게 좋은 코드가 나온다

• import는 절대경로로 !
• import 순서도 보기 쉽게 나열해야한다.

📌 꼭 알고갈 Keywords

utils 함수

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

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

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

✅ JSON & 통신

JSON
- JSON(JavaScript Object Notation)은 데이터를 주고 받을 수 있는 데이터 형식이다.
- JSON이 자바스크립트와 문법과 유사하긴 하지만 자바스크립트도 아니고, 자바스크립트에서만 사용할 수 있는 것도 아니다. 많은 프로그래밍 언어에서 JSON 파싱과 직렬화를 지원한다.

1. JSON에서 사용 가능한 타입( 6가지 )

1. string
2. number
3. boolean
4. null
5. object
6. array
   → 일반적으로 객체와 배열이 JSON 데이터 구조에서 최상위 레벨에 있다.

   ➡ 사용할 수 없는 타입

   • function
   • date
   • undefined

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

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

    {
    	"name": "wecode"
    }

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

• JSON 데이터를 파싱하면 자바스크립트 객체가 되어 자바스크립트에서 데이터를 사용할 수 있는 것이다.
• 자바스크립트에서의 JSON 객체는 문자열을 JSON 파싱하고 직렬화 하는 메서드를 갖고 있다. 두개 말고는 특별한거 없다! 끝!
• stringify(): 자바스크립트 객체를 JSON 문자열로 직렬화 한다.
• parse(): JSON을 파싱하여 자바스크립트 값으로 바꾼다.

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

• [방법1] public에 json 파일을 생성하고 fetch 하기
• [방법2] .json 파일을 import 하기

✅ 상수 데이터 사용

• data 형태
  • 쉽고 간편
  • 직관적
  • json에서 사용할 수 없는 문법 사용 가능

    const COMMENT_LIST = [
      {
        id: 1,
        userName: 'wecode',
        content: 'Welcome to world best coding bootcamp!',
        isLiked: true
      },
      {
        id: 2,
        userName: 'joonsikyang',
        content: 'Hi there.',
        isLiked: false
      }
    ];

    export default COMMENT_LIST;