01. React Component

1. 아토믹 디자인 시스템

1. 개념 및 정의

   1. 디자인 시스템 방법론 중의 하나

   2. 주기율표 상의 원자(atom)들이 어떻게 결합하느냐에 따라서 세상 모든 것들을 생성할 수 있듯이

   3. 웹페이지의 컴포넌트를 5가지 레벨로 나눠 체계화하는 방법

2. 필요성 및 의의

   1. 규칙을 제각각으로 만들면, 관심사가 너무 많거나

   2. 재사용이나 확장할 수 없는 컴포넌트가 생기는 문제를 해결하기 위해

3. 특징

   1. atom - molecule - organism - Template - page으로 컴포넌트를 쪼개는 방법

   2. atom: 더이상 쪼갤 수 없는 단일요소 (ex. 태그, 글꼴, 컬러팔레트, 레이아웃 등)

   3. molecule: 여러 atom을 결합, 고유의 특성을 가짐, 한가지 동작을 함(SRP, Single Responsibility Principle) - 테스트하기 쉽고, 재사용성 높음

   4. organism: 특정 컨텍스트를 가짐, 상대적으로 구체적, 재사용성 낮음 (ex. header)

   5. Template: 컴포넌트를 배치하고 구조를 잡는 와이어프레임, 컨텐츠가 없는 page (스켈레톤)

   6. Page: 유저가 보는, 실제 컨텐츠를 담은 요소, template의 인스턴스라고 볼 수 있음.

4. 방법

   1. Molecule vs Organism

      1. SRP, Single Responsibility Principle을 지킬 수 있느냐

      2. Context가 없어도 컴포넌트의 역할이 설명이 되느냐

      3. 그래도 모호하면 일단 Organism

   2. 중복 컴포넌트

      1. compound 컴포넌트 (합성 컴포넌트)로 해결하기

      2. UI 제어하는 상태 이런거는 다 외부에서 주입하기 (스토리북 유용)

      3. 마진, 패딩과 같은 레이아웃 관련 스타일도 외부에서 주입하기

   3. UI 모델링

      1. 하나의 컴포넌트의 단위를 쪼개고 네이밍 하는 과정을 피그잼을 통해 함께 진행하기

5. 개인적인 생각(추가적인 질문 또는 인사이트)

6. 레퍼런스 모음 아토믹 디자인을 활용한 디자인 시스템 도입기

7. 목업의 개념

   어떻게 작업을 할 것이냐..
   대략적인 모습
   완성은 아니지만
   그렇다고 큰 변화가 있을 것도 아닌 결과물

8. RestAPI

   1. 개념

      1. 두 컴퓨터 시스템이

      2. 인터넷을 통해

      3. 정보를 안전하게 교환하기 위해

      4. 사용하는 인터페이스 (코드)

   2. 용어 정리

      1. Rest:

         1. 소프트웨어 아키텍처의 일종

         2. REpresentational State Transfer의 이니셜

         3. API 작동 방식에 대한 조건을 부과

      2. RESTful 웹서비스:

         1. REST 아키텍처를 구현하는 웹서비스

         2. Representational (대포하는) State (상태) Transfer (이동)

      3. API:

         1. Application Programing Interface

         2. 서로 다른 소프트웨어 사이의

         3. 통신을 위해서

         4. 프로그래밍 적으로 따라야하는 규칙을 정의.

         5. 웹의 경우, 웹 서버의 리소스(데이터)에 접근하려는 사용자와 웹서버 간의 게이트웨이

      4. URI:

         1. 자원(리소스)을 구조와 함께 나타내는 구분자

         2. (uniform resource identifier)

   3. 특징

      1. 균일한 인터페이스

         1. 요청은 리소스를 식별해야함. 균일한 리소스 식별자를 사용

      2. 무상태

      3. 계층화시스템

      4. 캐시가능성

      5. 온디맨드코드

      6. 동사 말고 명사로

   4. 동작 (HTTP METHOD 중 5가지를 사용)

      1. GET,

      2. POST,

      3. PUT: 정보를 통채로 갈아 끼울 때

      4. PATCH: 정보 중 일부만 변경할 때

      5. DELETE

      6. 결론: 어떤 URI에 어떤 METHOD를 사용할 것인가

   5. 역사

      1. 과거의 SOAP이란 복잡한 방식을 보완한것

   6. 장점

      1. 정보를 요청하고 제공할 때 형식을 미리 지정함으로써

      2. 누구든 형식을 알고 있다면 프로그래밍에 활용할 수 있도록 함

      3. 요청만 보고도 이 요청이 어떤 요청인지 추론이 가능하다

   7. 레퍼런스

      1. https://aws.amazon.com/ko/what-is/restful-api/?nc1=h_ls

9. GraphQL

   1. 역사

      1. RESTful api - 메소드와 uri를 조합해서 예측 가능하고 일정한 정보와 작업을 요청

      2. 버튼마다 나오는 것이 확실한 자판기처럼..

      3. 하지만 여러 뎁스에 있는 정보들을 요청하려면, 요청을 두 번 보내야한다거나, 데이터 중 일부만 필요할 때에도 전체 정보를 전송해주어서 리소스를 낭비할 수 있음.

      4. RESTful api는 요청 자체를 간단하게 하는 대신 응답이 명확하지 않지만, GraphQL은 요청이 복잡해지는 대신 응답이 명확해진다.

   2. 사용법 (언어마다 사용법이 있음!)

      1. nodejs, express

         1. schema (데이터의 구조나 표현법, 관계를 나타내는 말) query에서 얻고자 하는 걸 스키마처럼 넣어주거든요. 쿼리 자체에서 지정을 해줘요. 쿼리 랭귀지라서 SQL이랑 비슷해요. Query(Read), Mutation(Command: Create, Update, Delete), Subscription(Event)

지금은 key로 쓸 수 있는게 없어서 전체를 하나의 문자열로 만든다거나 하는 방법으로 고유의 key를 만들어줘야해요.

1. JSON

JavaScript Object Notation : 경량의 데이터 교환형식이다.

json.org 더글라스 어쩌구님이 js를 제대로 쓰는 방법에 대한 ..

문자열과 오브젝트 사이의 데이터

문자열 -> 오브젝트: parse 오브젝트 -> 문자열: stringify

1. 컴포넌트 계층구조

자동차 조립하듯

1. 나누는 기준

   1. SRP (Single Responsibility Principle)

      1. SOLID

      2. 캡슐화된 컴포넌트

      3. 하나의 책임만 갖도록

      4. 컴포넌트가 너무 길어져 -> 쪼개줘야됨

   2. CSS 클래스 선택자 참고하기

   3. Design's Layer 디자이너가 짜놓은 그룹, 컴포넌트 기준 참고하기

   4. Information Architecture: JSON의 스키마 활용 => 바로 활용할 수 없다면 백엔드한테 요청 (아샬's pick) => 자연스럽게 SRP가능 / 혹은 받은 데이터를 한 번 더 가공

   장점: 만들고 나면 조립 방식을 쉽게 변경 가능해짐

2. 아토믹디자인 => 계층형 구조를 몇 가지 카테고리로 묶은 방법

3. 정적인 ui먼저 구현 (ex. html 구조)

• DSL(Domain-Specific Language)

• 선언형 프로그래밍

• 명령형 프로그래밍

• React component 와 props

1. map 사용 -> 이름이 겹치지 않는다는 전제하에 이름을 키로 잡는다.

2. Extract Function

   1. Refactoring.com

   2. 코드를 함수로 뺀다 = 이 코드가 어떤 의도를 갖고 작성된 코드인지, 어떤 동작을 하는지 설명을 하겠다

   3. useRef

   4. selectCategories... 어쩌구.. 계속계속 쪼개고 쪼개고..

3. 여기까지가 정적인것 작동하게 하려면 어떻게 해야할까?

   1. 바로 파일을 새로 만들지 말고 일단 한 파일 내에서 함수로 뺀다.