Goh pilot - 주로 비주얼 스튜디오에 상주하십니다 Chasey Pity - 작성한 코드를 검수해주시는 분입니다.

Paint라는 함수는 이하 태그를 리턴한다. 이 때 반드시 함수명의 첫 글자는 대문자로 입력한다.

1) OverFetching

• RestAPI에서는 해당 URL의 모든 데이터를 받아야해요. 나는 다 필요 없는데요 !!!!! 뿌에에엥

• 그러다보니 data전송도 느리고 리소스도 많이 잡아먹고 다매!!!!!!!

2) UnderFetching

• URL에 원하는 정보가 없으면 다른 URL을 또 찔러야해요
• 하나의 정보를 얻기 위해 복수의 request는 다매요!!!!

2. GraphQL은 달라요

• 필요한 정보만 1번의 request로 받아요. =>더 빨라요
• 실습실 : https://graphql.org/swapi-graphql?

1) 라이브러리 vs 프레임워크

• 리액트 라이브러리(Create-react-app)로 작업시에는 Routes, Render 등등 작업을 해줘야 됨.
• Next 프레임워크(npm install next@latest)는 pages폴더에 원하는 js문서를 만들어주면 됨. 앞서 리액트 라이브러리에서 해주던 세팅들이 추상화된것.
• Next의 rule에 따라 페이지를 생성하기만 하면되어 간편.
• 이 때 js문서의 function 이름은 리액트와 달리 뭘 해도 상관 없음. js문서의 이름이 곧 url에 표시될 경로.

  pages rules export default function 함수명을 js문서 앞단에 꼭 넣어줄 것 js문서의 이름은 url의 이름이 된다. 앱의 홈은 index.js에서 나온다 jsx문서가 아니더라도 return이하에 html 요소 활용 가능

2) Client Side Render vs Server Side Render

• 기존 리액트의경우, user의 브라우저는 javascript, react를 받아 천천히 HTML로 렌더링하기 시작함. 느린 인터넷 환경에서는 흰 화면부터 천천히 나타나게됨.

• Next의 경우, 서버에서 미리 렌더링 후 HTML을 짜놓고 user에게 바로 보여준다. SEO에도 좋고, user는 미리 만들어진 HTML을 미리 보고있다가 추후에 연결된 react앱을 활용할 수 있어 사용성도 좋아짐.

2.사용가이드

1)Routing

• <a>태그 대신 <Link>를 사용합시다
• <useLocation> 대신 <useRouter>활용해서 화면정보 가져오기, 화면 이동 모두 가능합니다

2)CSS 활용패턴1 :.module.css 확용하기

• 임의지정이름.module.css라는 css파일을 만들고 스타일을 작성합니다

  style01{
     background-color : blue;
  }
  
  style02{
     background-color : red;
  }

• 적용하려는 js파일에서는 아래와 같은 형식으로 적용합니다.

    import sytles from "./임의지정이름.module.css";

  먼저 상단에서 import해주시고

  <div className={styles.style01}>

  통상의 className="XXX"이 아니라 위와같이 해주셔야해요

3)CSS활용패턴2 : styled jsx (only with NEXT js)

      <Link href='/about'>
        <div className={router.pathname === '/about' ? 'active' : 'inactive'}>
          About
        </div>
      </Link>


      <style jsx>{`
        nav {
          display: flex;
          justify-content: space-between;
          background-color: gray;
        }
        .active {
          color: white;
        }
        .inactive {
          color: black;
        }
      `}</style>

<style jsx>내에 중괄호&백틱으로 감싼 css를 적용하여 해당 문서내의 스타일을 간편하게 바꿀 수 있음

<style jsx global>이라고 표시하면 전역에서 활용가능한 스타일이 됨.

3) "_app.js" 활용하기 (언더바는 의무인가요?)

네 의무입니다. 정식 명칭은 App Component지요. 딱 저이름을 쓰기로 우리모두 약속했어요. Next JS는 _app.js를 먼저 확인한 후에 다른 것들을 렌더링할겁니다..

기본적으로 아래의 것들이 먼저 들어가야하고

export default function 앱이름({Component, pageProps}) {
  return (
      <>
        <Component {...pageProps}>
      </>
  )
}

그 윗단에서, 전역에서 사용할 라이브러리, global.css 등등을 import해줍니다. return 이하에서는 전역에서 사용할 <style jsx global> 등도 선언해주고 nav도 넣고 다 넣어서 탬플릿처럼 사용가능합니다.

Redux에서 제공하는 공식도구인 Redux Toolkit을 쓰세요.(RTK)

1. 키워드

1)액션

: 상태변화가 필요할 때 발생시키는 객체

{
    type:"ADD_TODO"
    data:{
        id:0,
        text:"리덕스 배우기"
           }
}

2)액션 생성함수

: 파라미터를 받아, 액션객체를 만드는 함수

export const changeInput = text=>({
    type:"CHANGE_INPUT",
    text
    });

• 컴포넌트에서 액션 쉽게 발생시키기 위해 액션 생성함수 만듬 - export를 붙여 다른 파일에서도 불러올 수 있음

3)Reducer

:변화를 일으키는 함수. state, action 두 가지 파라미터 받아, 새로운 state를 반환함.

4)Store

: 현재 앱의 state, reducer, 내장함수가 들어있음. 한 애플리케이션에 하나의 스토어 보유

5)Store의 주요 내장함수

• dispatch : dispatch(action)형식으로, 해당 액션을 발생시킴. store는 리듀서 함수 실행시켜 해당 액션 처리하는 로직과 action을 참고하여 새로운 state만들어줌

• subscribe : action이 dispatch될 때마다 전달해준 함수 호출. 보통 사용할일 없고, connect함수나 useSelector Hook이용하여 리덕스 store의 상태 구독함.

1. 부트캠프시절

• create-react-app하시고, package.json, gitignore 기타등등빼고는 싹 지워주실게요~

2. Now

뭐야 이 생소한 것들은... 일단 하나씩 구글링해보자

1)보일러플레이트

: 자주쓰는 초기세팅 템플릿

2)husky

: 개이름. git hooks를 관리. git 상태가 변화할때 자동실행되는 스크립트가 git hooks. 사용하는 이유는 모름.

3)Next.js (next-env.d.ts, next.config.js)

: 클라이언트가 아니고 서버사이드 렌더링 / SEO때문에 사용

4)vercel

: Next.js랑 같은회사인데 배포할때 쓰는 듯

5)typescript (tsconfig.json)

: 자바스크립트에 자료형 들어가고, private / public 등 상태값 들어가고.. class로 객체지향 가능케하고

6)app.d.ts

:모름

7)changelog.config

:커밋관련 약속인듯 추정

8)jest (jest.config.js / jest.setup.ts)

:코드 테스트 관련 프렘워크라는데, 공식문서 읽어봐야할듯

9)webpack

: 모름

10)바벨

:모름. 아령은 아님

11)yarn.lock

:모름

12)차크라

:나루토와는 무관해보임

읽어야될 공식문서가 산더미...ㅎㅎㅎㅎㅎㅎ

1. *.map is not a function

map을 돌리는 대상이 배열의 형태가 아니다. 혹시 아래과 같은 객체를 놓고 씨름하고 있었다면

{
    id : jaySur,
    name: jayYoon,
}

배열의 형태로 바꿔줍시다...

2.encountered two children with the same key

key 설정을 동일한 값으로 돌리셨군요.. key는 unique한 값으로 꼭 세팅해주셔야합니다. 객체의 id가 있으면 id를 쓰셔도 좋고 없으면 index로 만들어줍니다

{products.map((product, index)=>(
    <productFeature key={index} product={product} />
    ))}

이 때, index와 props는 꼭 꼭 괄호로 묶어줍시다..

ASIS : ID & PWD 유효성검사 후 버튼색 변경하는 함수 TOBE : ID유효성 함수 , PWD유효성 함수, 버튼색 변경 함수로 분리

1)목적

• 하나의 수정사항에는 해당 부분만 변경하기 위해, 단위를 잘게 나눔 =>Divide & Conquer를 용이하게 함.

• Loose Coupling : 낮은 결합도. 독립적으로 분리됨

• High Cohesive : 높은 응집도. 유사한 내용은 비슷한 위치에 모아두기. => 파일경로 직관적으로 설정

2)장점

• 코드 명료해짐
• 코드 재사용성 올라감
• 유지보수 용이함
• 테스트코드 작성 용이함

2. Custom Hook

1)개요

• 컴포넌트는 로직 과 뷰로 분리할 수 있다.
• 관심사 분리를 위한 use로 시작하는 리액트 함수.

ASIS

user정보를 set하는 컴포넌트로, 로직과 뷰가 분리되어있지않다.

TOBE 로직은 useGetUserList()한줄로 실행만하고 view에 집중 user정보 set하는 로직은 별도로 분리

2)참고사항

• 이름은 use로 시작할 것
• Hook안에서Hook 호출 가능
• src내부에 컨벤션으로 위치잡거나, 특정 기능에서 자주 사용되는 경우 해당 컴포넌트 옆에 js파일 생성

3)실습

ASIS TOBE (Custom Hooks)

다른 컨포넌트에서 쓸 떄에는 해당 hooks을 import만 해주면 된다.

-기타 객체로 리턴 vs 배열로 리턴 차이점 =>배열로 리턴 : 이름을 조정하기 쉽다(useState같은 경우) =>객체로 리턴 : 이름이 픽스되어있음

• 서버와 네트워크 등 시스템이 정상적으로 사용가능한 정도를 의미
• 고가용성이란 해당 시스템이 오랜기간동안 지속적으로 장애없이 정상운영이 가능하다는 성질을 의미한다.

2. Five Nines

• 9가 5개라는 뜻으로 99.999%의 고가용성을 지닌다는 의미이다.

3. SLA

• Service Level Agreement의 양자
• 인프라 공급사가 이용자에게 어느 정도의 수준으로 서비스를 제시할 것이지를 정량적으로 명확히 제시하는 약정을 의미한다.

• Scale out : 하나의 장비에서 처리하던 일을 여러 장비로 나눠 처리할 수 있도록 증량한다. 수평확장이라고도 한다.

• Scale up : 더 빠른 속도의 CPU나 RAM을 추가하는 것. 일반적으로 Scale out보다 비용부담이 크다. 수직확장이라고도 한다.

디즈니샵 https://www.shopdisney.com/ 제품 카테고리를 줄이고 기능적인 측면을 구현하는데에 집중하기로 하였으며, 자세한 내용은 하기와 같습니다.

1) 구현 범위 설정

• 150여개 카테고리와 다양한 IP를 보유하고 있는 쇼핑몰 => 7개 카테고리와 3개 브랜드로 축소 구현

• 랜딩페이지의 기획전을 비롯하여, 추천상품 등 제품 노출영역 => 기획전 배너 2개, 추천상품 영역 1개

• 그 밖의 제품구매 프로세스는 전체 구현 => 제품탐색(필터링,검색) - 찜하기 - 장바구니 넣기 - 결제

2. 프로젝트 관리

1)일정관리

• 의사결정록 notion 도입

    특정 안건 열람이 어려운 standing회의록의 단점 보완하고자 의사결정록 도입.
    이슈를 한눈에 열람하고 구성원간 공유 원활히 할 수 있도록 함.

• trello + BigPicture

      트렐로 카드는 개별 업무단위를, BigPicture는 전체 진도율 관리.

2)업무 배분

        크게 3가지 단위와 추가구현기능으로 업무를 나누었고, 
        붉은 테두리의 영역을 맡아 구현하기로 함.

3)기타 담당 내역

• 프로젝트 개시 직후, 상품이미지/브랜드/이벤트배너 등 쇼핑몰 전반에 표시될 상품데이터 제작하여 스프레드시트 형태로 Backend에 전달. => 제품데이터를 사전에 픽스함으로써 기능의 범위가 명확해졌으며, Backend와의 소통 원활해짐. 아울러 프로젝트 막바지에 신경쓰기 어려운 이미지작업을 사전에 마쳐놓음으로써 팀원들이 개발에만 전념할 수 있는 환경 조성

3. 프로젝트 개발

GIT : https://github.com/JaySurplusYoon/31-1st-kidsney-frontend

3-1. Query Parameter활용한 제품탐색기능

1)구현화면

2)구성도

• 제품탐색기능은 필터, 가격순정렬, 검색, 페이지네이션 4가지로 구분.

3)구현특징

• 디즈니샵의 경우 필터링시 쇼핑몰 URL이 변하지 않음. 따라서, useLocation에서 url을 받아 렌더링하는 방법 사용할 수 없음.
• 대신 각 조건을 배열의 형태로 state에 저장하여 렌더링의 대상이 되는 queryString으로 만들어 렌더링하는 방식으로 구현함.

4)구현상세

(1) Product List에서는 Filter, Sorter, Search, Pagination에 필요한 state와 이를 수정할 수 있는 function을 만들어 각각의 컴포넌트로 전달.

  const handleFilter = (name, attr) => {
    const filterArr = [...filters];
    filterArr.includes(`${name},${attr}`)
      ? filterArr.splice(filterArr.indexOf(`${name},${attr}`), 1)
      : filterArr.push(`${name},${attr}`);
    setFilters(filterArr);
    setQueryStrings(filterArr);
  };

※필터의 경우 1회 클릭시 적용, 중복 클릭시 적용이 해제되므로, Splice로 중복된 인덱스의 필터배열을 제거하도록 함.

(2)각각의 컴포넌트에서는 onClick, onChange 등을 통해 내려받은 function으로 부모의 state를 수정하고 끌어올림.

 <li
 key={categoryAttr}
 className="categoryAttr"
 onClick={() => handleFilter(categoryName, categoryAttr)}
 >

(3)끌어올린 state값으로 queryParameter를 만들고 이에 의존성에 있는 useEffect내부의 fetch함수로 화면을 렌더링.

   switch (splittedFilter[0]) {
          case 'sub':
            addParamFilters.push(`&sub=${param}-${splittedFilter[1]}`);
            break;
          case 'size':
            addParamFilters.push(`&size=${splittedFilter[1]}`);
            break;
          case 'character':
            addParamFilters.push(`&character=${splittedFilter[1]}`);
            break;
          default:
        }

3-2. 서버통신을 통한 결제 및 주소업데이트 기능

1)구현화면

2)구성도

3)구현특징

• 가입시점에 고객주소정보 입력하지않으므로, 배송정보를 수집 및 고객정보로 저장하는 기능 필요.
• PG를 붙일 수 없으므로 고객마일리지에서 차감하는 형식으로 진행.

4)구현상세

(1)배송정보 유효성 검사 후, 고객이 입력한 주소를 기본배송지로 업데이트하겠다는 의사를 확인하고 이에 따라 결제대금 차감 및 주소 업데이트 진행.

  const submitOrder = () => {
    if (orderNecessaryInfo) {
      if (orderInfo.updateAddress) {
        postBalance();
        patchAddress();
      } else {
        postBalance();
      }
    } else alert('정보를 모두 입력해주세요');
  };

(2)결제는 POST방식으로 서버와 통신하여 진행하며 처리결과는 alert로 안내.

  const postBalance = () => {
    fetch(`${BASE_URL}/orders`, {
      method: 'POST',
      headers: {
        Authorization: localStorage.getItem('token'),
      },
      body: JSON.stringify({
        total_price: subtotal,
      }),
    })
      .then(response => {
        if (response.ok) {
          alert('주문이 완료되었습니다.');
        } else if (response.message === 'moneyless') {
          alert('잔액이 부족합니다.');
        } else if (response.message === 'stockless') {
          alert('재고가 부족합니다.');
        } else {
          throw new Error('Unexpected Error');
        }
      })
      .catch(error => {
        // eslint-disable-next-line no-console
        console.log(error.message);
      });
  };

(3)주소 업데이트는 PATCH방식으로 서버와 통신하여 진행하며 처리결과는 alert로 안내.

const patchAddress = () => {
    fetch(`${BASE_URL}/users/`, {
      method: 'PATCH',
      headers: {
        Authorization: localStorage.getItem('token'),
      },
      body: JSON.stringify({
        zip_code: orderInfo.zipCode,
        location: orderInfo.addressMain,
        datail_address: orderInfo.addressDetail,
      }),
    })
      .then(response => {
        if (response.ok) {
          alert('주소변경이 완료되었습니다.');
        } else {
          throw new Error('Unexpected Error');
        }
      })
      .catch(error => {
        // eslint-disable-next-line no-console
        console.log(error.message);
      });
  };

4. Lesson Learned

1) PR Attitude

• 가능한한 세분화하여 PR 올릴 것.
• Sider 및 컨벤션 면밀히 체크한 후 PR올릴 것.

2) Co work

• 이슈발생시 즉각 논의하고 기록으로 남길 것.
• 기록을 한눈에 찾아볼 수 있는 시스템을 활용하여 불필요한 회의는 줄일 수 있도록 할 것.
• 팀원들의 코드를 리뷰하고 질의함으로써, 담당파트를 더욱 빠르게 구현하고 학습할 수 있음.
• 담당파트와 더불어 전체그림의 진척도를 계속 상기할 것.

3) Hook

• 리액트의 다양한 hook을 사용하며 dependency 및 불변성 학습
• 깊은 복사/ 얕은 복사 개념 학습

4)동적라우팅

• 동적라우팅의 개념 및 리액트 내 다양한 기법 학습(useParams / Router / QueryParameter / Path Parameter)
• 작성 블로그 게시글
  • [동적라우팅]다중필터 처리하기 (1편:라우팅개념)
    • [동적라우팅]다중필터 처리하기 (2편:Query Parameter를 사용해보자)
  • [동적라우팅]다중필터 처리하기 (3편: 카테고리 depth별 서로다른 queryString 만들기)

클릭의 대상이 되는 속성버튼의 id 자체를 쿼리로 입력하면되잖아?

그리하여 상수데이터를 위와같이 변경하게 되는데, 이는 추후에 대카테고리별로 서버에서 카테고리 속성을 달리 가져오는 경우에는 무용지물이 되는 단점이 있고. PR을 올리면 가차없이 철퇴를 맞기에 부족함이 없는 로직이라고 할 수 있겠다...

잠시나마 미쳤었던 마음을 추스리고, 각각의 카테고리속성과 카테고리의 이름을 모두 받아서 switch로 분리하고 처리하는 로직으로 재구현했다.

Step 1 : 버튼의 id를 받을 때 카테고리명과 속성을 모두 받아온다

Step 2 : TYPE, SIZE, CHARACTER 각각으로 들어왔을때 각각 다른 쿼리스트링 제작 로직을 세팅했다.

  const setQueryStrings = () => {
    let queryString = '';
    let addParamFilters = [];
    if (filters) {
      filters.forEach(filter => {
        const splittedFilter = filter.split(`,`);
        switch (splittedFilter[0]) {
          case 'TYPE':
            addParamFilters.push(`&sub=${param}-${splittedFilter[1]}`);
            break;

          case 'SIZE':
            addParamFilters.push(`&size=${splittedFilter[1]}`);
            break;

          case 'CHARACTER':
            addParamFilters.push(`&character=${splittedFilter[1]}`);
            break;

          default:
        }
      });
      queryString = `${API.productList}${param}${addParamFilters.join('')}`;
    } else {
      queryString = `${API.productList}${param}`;
    }
    setUrl(queryString);
  };

아아...돌아간다 잘돌아간다... 하지만 혹여나 정성스레 작성한 PR에 또다른 철퇴가 꽂힌다면..

나는 또 4부를 쓰게 될것이다... 과연 다중필터는 몇부작까지 도달할것인가...거의뭐..대하드라마..

1. 필터리스트 스테이트 관리

 const handleFilter = e => {
    let filterArr = filters;
    filterArr.indexOf(e.target.id) === -1
      ? filterArr.push(e.target.id)
      : filterArr.splice(filterArr.indexOf(e.target.id), 1);
    setFilters(filterArr);
    setQueryParameter();
  };

필터를 클릭할때마다 state로 선언한 filters에 핕터목록을 배열로 넣어준다. 단 이미 해당 필터가 들어있을때에는 splice로 제거한다.

2. 백엔드에 GET요청할 URL 생성

 const setQueryParameter = () => {
    let queryParameter = '';
    let addParamFilters = [];
    if (filters) {
      filters.forEach(filter => {
        addParamFilters.push(`${param}-${filter}`);
      });
      queryParameter = `${API.productList}${param}&sub=${addParamFilters}`;
    } else {
      queryParameter = `${API.productList}${param}`;
    }
    setUrl(queryParameter);
  };

1번에서 만든 필터를 백엔드와 약속한 형태로 전처리한 후 url이라는 state를 최신화한다.

3. useEffect로 렌더링 요청

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(product => {
        setProducts(product.result);
        setSubtotal(product.count);
      });
  }, [url]);

url값이 바뀔때마다 바뀐 url로 fetch를 요청하도록 useEffect를 작성.

4. 총평

일견 괴랄한 코드이나 백엔드와 통신해보니 잘굴러갑니다. 작성 중 useEffect구문 내에서 dependency이슈로 에러가 있었는데, fetch에서 가져오는 url을 하단 의존성배열에 넣어 해결하였습니다. 코드리뷰이후 변경될 경우 해당 코드의 문제점 및 보완사항도 3부작으로 업데이트하고자합니다.

그럼 아디오스

1-1.라우팅이란

• url주소를 기준으로 다른 view를 보여주는 것

1-2. SPA에서의 라우팅이란

• 화면을 이동하여 새로고침하지 않고, 동적으로 화면(뷰)를 그려주는 기술
• react에서는 recat-router-dom을 활용하여 SPA라우팅을 구현

1-3.정적라우팅과 동적라우팅

1)정적라우팅 : /, /users , /products와 같이 정해진 경우에 대해서만 경로를 표현

2)동적라우팅 : url마지막에 특정 id값이 들어감. id값에 따라 무수히 많은 url이 생성됨 ex)/products/1043 1043번째로 등록된 제품 상세페이지

2. 동적 라우팅 처리방법 2가지

우리가 구현하고자하는 것은, SIZE, 제품Type(상의, 하의, 악세서리), 캐릭터(브랜드) 각각의 속성을 다중으로 처리하는 것이다.

1)Path Parameter

해당기능은 useNavigate & useLocation 훅을 사용하여 상품리스트페이지에서 상세페이지로 보내는 기능을 구현하는데에 활용하기로 했다.

user/:id => <users /> // useParams().id

[부모컴포넌트]

return (
    <BrowserRouter>
      <div>
        <h2>Accounts</h2>
        <ul>
          <li>
            <Link to="/Boy">소년용품</Link>
          </li>
          <li>
            <Link to="/Girls">소녀용품</Link>
          </li>
          <li>
            <Link to="/Toys">장난감</Link>
          </li>
        </ul>

        <Routes>
          <Route path="/:id" element={<Child />} /> <-자녀컴포넌트를 element로 삼고 그 path 뒷부분에 id를 넣어주겠다.
        </Routes>
      </div>
    </BrowserRouter>
  );

[자식컴포넌트]

  const { id } = useParams();   <-useParams()로 부모에서 준 id를 받아오겠어요. 

  return (
    <div>
      <h3>ID: {id}</h3>   <--{id}를 쓰겠어요
    </div>
  );
}

2)Query Parameter

/search?keyword=something : <Search /> // useLocation().search

[조부모(?)컴포넌트]

export default function QueryParamsExample() {
  return (
    <Router>
      <QueryParamsDemo />  <-쿼리파라미터라는 하위컴포넌트 따로갈게요~
    </Router>
  );
}

[부모컴포넌트]

return (
    <div>
      <div>
        <h2>Accounts</h2>
        <ul>
          <li>
            <Link to="/account?name=top">상의</Link>
          </li>
          <li>
            <Link to="/account?name=bottom">하의</Link>
          </li>
          <li>
            <Link to="/account?name=acc">악세서리</Link>
          </li>
        </ul>

        <Child name={query.get("name")} />    <=쿼리의 name항목을 가져다가 자식컴포넌트의 name으로 보내준다.
      </div>
    </div>
  );
}

[자식컴포넌트]

return (
    <div>
      {name ? (   <-중괄호치고 로직들어갑니다~. 부모에서 받은 name에 따라 아래 코드로 렌더링을 가겠다 이겁니다.
        <h3>
          The name in the query string is &quot;{name}
          &quot;    <---쫄지마요 &quot;는 단지 쌍따옴표(")일뿐...쌍따옴표사이에 부모에서 받은 name값을 넣어주겠다라는 것...
        </h3>
      ) : (
        <h3>There is no name in the query string</h3>
      )}
    </div>
  );

그렇다면 다중필터를 위해서는 어떤 동적라우팅 기능을 선택해야할까.. 다음 편에서 계속됩디다..

1. Parents가 내려줄 때

monsters라는 state는 여러 monster의 속성들이 객체의 형태로 담겨있는 배열이다. parents에서 child로 monsters의 id / name / email이라는 속성을 내려주고자 한다.

AS-IS

function CardList({monsters}) {

  return(
  <div className="cardList">
    {monsters.map((monster)=>(
    <Card 
        key={monster.id}
        id = {monster.id}
        name = {monster.name}
        email = {monster.email}
    />
    ))}
  </div>
  );
};

TO-BE

function CardList({monsters}) {

  return(
  <div className="cardList">
    {monsters.map((monster)=>(
    <Card key={monster.id} {...monster}/>
    ))}
  </div>
  );
};

2. child에서 받을 때

AS-IS

props를 불러와 필요한 속성앞에 props.을 붙이고 사용한다

function Card(props) {
  return (
  <div className="cardContainer">
    <img src ={`https://robohash.org/${props.id}?set=set2&size=180x180`} />
    <h2>{props.name}</h2>
    <p>{props.email}</p>
  </div>
  );
}

export default Card;

}

export default Card;

TO-BE

필요한 객체속성을 {}중괄호에 담아서 props.생략하고 사용한다

function Card({id, name, email}) {
  return (
  <div className="cardContainer">
    <img src ={`https://robohash.org/${id}?set=set2&size=180x180`} />
    <h2>{name}</h2>
    <p>{email}</p>
  </div>
  );
}

export default Card;

크-린 코드의 길은 멀고도 험한것.. 그럼 20000....

Promise객체란 비동기 작업이 멎아헐 성공/실패에 대한 결과값을 의미한다. -MDN-

생성된 작업에 대한 상태정보를 하기 3가지 유형으로 가지고 있는 객체이다

1)pending (대기): fulfilled / rejected 둘다 아닌 초기상태

2)fulfilled (이행): 연산 완료

3)rejected (거부) : 연산 실패

2. 왜 필요한지

Promise객체에 대해 찾아보면 비동기처리에 대해 먼저 확인하고 오라는 답변을 익숙하게 받았을 것이다. 이는 Promise객체의 Chaining이라는 강력한 기능때문이다.

1)비동기 처리란

• CPU를 사용한 데이터 처리방식에 비해 하드디스크 읽쓰작업 & 네트워크를 통해 데이터 주고받는 작업(이하 'I/O작업'으로 통칭) 매우 느리다.

• 이에 I/O작업이 다 될때까지 기다리는 것이 아니라, 요청만 해두고 다른 작업을 먼저 하는 것을 비동기처리라고 한다.

  2)그러면 Promise객체는 왜 필요한건지?

  • 비동기 작업들의 상태(pending/fulfulled/rejected)를 동기적으로 반환함으로써 필요한 동작을 실행할 수 있다.
  • Chaining : 비동기 처리들을 순차적으로 처리할 수 있다.
  • fetch와 then의 사례를 들어 확인해보자 이 둘은 promise객체를 리턴하는 함수이다.

  fetch("주소") 
  .then((response) => response.text()) 
  .then(result=> {
   const users = JSON.parse(result);
   return users[0];
  });

  fetch를 실행하면 HTTP Response를 받아온다. 이는 실제 JSON이 아니기떄문에, json()메서드를 사용해야한다. 이 떄, fetch작업이 fulfilled되고난 이후 비로소 .json()메서드가 실행되도록 해야하는데 이를 chaining이라고 한다.

참고자료

• Promise : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise
• fetch : https://developer.mozilla.org/en-US/docs/Web/API/fetch

1)package.json

• (디펜던시)의존성확인

2)index.html -> index.js -> router.js

복잡한 코드에 대해 설명하는 주석 지양해야하는 이유 : 코드가 업데이트될때마다 설명도 업데이트해야되는데 쉽지않다. 그러므로, 코드설명하는 주석 대신 코드를 쉽게 수정할것

코드설명을 제외한 주석활용 : 나중에 들어올 기능, 추가 디벨롭 예정사항 등 마킹

//TODO : 나중에 할일, //FIXME: ~나중에 고칠사항 마킹,

나중에는 TODO / FIXME를 검색해서 업무를 진행하기도 함 개발버전에서 진행하고, 마스터에 MERGE되기 전까지는 TODO/FIXME 모두 해결해서 없도록 하는것이 국룰

useState는 관심사에 따라 묶어준다 =>어떤 목적을 가지고 있는지 판단

isValueTrue ->불리언을 말하는건가? 값이 TRUE라는건가 오해의 소지있음. 변수명과 네이밍 정확하게

함수 분리하는 이유->유지보수를 최대한 쉽게 하기 위해서. 한가지가 바뀌었을때 어디까지 수정해야하는지를 줄어주는것. 지금은 너무작아서 안쪼개도, 나중에는 점점 커질수 있으므로 목적단위로 쪼개라.

fetch에서 localhost;3000T쓰지마라. 바로 퍼블릭 이하의 경로를 작성해줄것. ㅣocal host3000은 포트번호 변경되거나 배포후에는 url이나 다른 ip로 바뀌게된다.

arr, obj, num, string, data등을 접미사로 변수만들지마라

arr/list등 접미사 쓰지말고 복수형을 써라 feed list-> feeds

fetch는 promise를 반환하고 .then => 그 반환값에 뭔가 이하 처리를한다 그것을 연속해서 처리하는게... .then .then 연속사용도 가능해 마치 (Array.map(x->x).map

.then은 프로미스에만 사용할 수 있다.

비동기상황을 쉽게 표현하기 위해 만든 객체가 바로 promise

feeds.map() 괄호안에 element를 쓰거나 data를 쓰거나 등등... 사실 feed를 쓰면된다. feeds 내부값을 배열로 돌릴건데, 각각의 값이 feed이므로...

]

const Feed=({Feeds})=>{ const {id, topUser img 등등}= Feeds 구조분해 -- prefer const. let쓰면 나중에 얘가바뀔값인지 오해하게됨

코멘트, push하지말고 먼저 newCOmment만들어서 값을 넣고 이후에 newcommentArry=[...commentArr, newComment]이런식으로 선언적으로 쓰면 좋다.

리액트 쓸때 주의할 점

리액트의 근간 - state, props, effect

state를 언제써야하는가? 초기 리액트 개발자는 모든 변수를 state를 가져가려고 하는데, 그럴필요가 있나? 스테이트 바뀔떄마다 리랜더링되므로 부하도 많이 걸린다.데이터를 꼭 set으로 넣어야하므로 불편..

[리액트로 사고하기]다시 읽어보고 코드쳐보기

state쓰는기준 1)부모를 통해 전달됩니까? 아닙니다 =>유지보수가 굉장히 어려워져요. -리액트는 단방형 / 하나의 상태를 표현하는 값은 하나다 -부모에서 받은 코멘트를 자식에서 새로운 스테이트로 수정한다면...양쪽의 씽크를 맞춰야되는건데ㅏ,,,하나의 상태를 표현하는 값이 여러개가 되면 힘들어짐 -부모에서 진리의 원천을 가져오면 (useEffect - fetch - get)거기서 데이터를 조작할 수 있는 함수를 만들어서 내려줄 것

시간이 지나도 변하지 않는다? 아닙니다 컴포넌트안에 다른state props로 대체가능한가? 아닙니다

• 인증 : 올바른 유저인지 확인하는 것
• 인가 : 유저별 권한을 부여하는 것
  • 유저의 이력을 추적하기 위해서

인증에 필요한것은?

• ID/Email : 외부에 노출이 된 개인정보
• Password : 노출안된 정보. 가장 중요하다

1)비밀번호 관리하기

• 상용 암호화 알고리즘으로 법적으로 암호화하도록 되어있다.(회원가입하여 DB에 저장될 때 암호화 진행)
• 통신시 개인정보 주고받을 때 SSL 적용하여 암호화(HTTPS)
• http를 하나의 레이어로 감싸, 외부에서 원본을 볼 수 없게 하는 것

2)단방향 해쉬함수

• 암호화는 가능하지만, 복호화는 불가능
• SHA-256이 대표적
• 결과만 봐서는 당장 식별이 불가능하나 두 가지 단점 존재.

  (문제1)메시지가 같으면 다이제스트도 동일하므로, 다이제스트 하나가 털리면 동일한 다이제스트를 사용하는 다른 사용자의 패스워드도 털려버림 (문제2)Rainbow Attack에 취약 ※RainbowTable에 미리 해시해둔 패스워드를 쌓아놓고 모든 값을 대입해서 로그인 시도하는 것

3)Salting & Key Stretching

• SHA-256에서의 허점 보완하기 위해 나옴

  Rainbow Attack Rainbow Ta해커가 Rainbow테이블 활용해서 무작위대입으로 해시값 계산하는데 필요한 시간을 대폭 늘리기 위해,

• 입력한 비밀번호와 임의로 생성한 문자열(salt)을 합쳐서 해싱한 후 해시값을 저장.
• Salting: 해시값과 Salt값을 함께 저장해준다(Salt는 128bit 정도는 되어야 안전하다.)
• Key Stretching : Salting &해싱을 여러번 반복해서 Rainbow Attack에 소요되는 시간을 늘려 원본값 유추하기 어렵게 만들기위함(Key Stretching)

  일정길이로 해싱된 값에 salt를 붙이고 해싱하고, 그 값에 salt를 또 붙여서 해싱하는 동작을 여러번 반복함. 3개월지나면 비밀번호를 바꿔야하는 이유가 여기에 있다.

4)bcrypt

• Salting & Key Stretching의 대표적인 라이브러리
• DB에 Salt 컬럼을 따로 설계하지않아도 저장없이 알아서 해줌.

2. 인가는 무엇인가?

• 해당 유저가 request에 해당하는 권한이 있는지 확인하는 절차

  HTTP는 stateless한 특성을 지니므로, 각 통신의 상태는 저장되지 않는다. 그러나 매번 새 페이지를 요청할때마다 로그인을 해야 한다면 사용이 불가능할 것이다.

상기 문제 해결위해 Session과 Token 등장

1)Session과 Token

• 유저의 로그인 시도 후 서버에서 일치하는 값을 찾은 후 유저에게 Session 또는 Token을 발급함.

• 브라우저는 request마다 해당 Session 또는 Token을 함께 보냄

• Session은 서버에서 관리, Token은 웹브라우저에 저장되므로 민감정보를 담지 않고 유효기간 짧게 설정함. 짧은 유효기간으로 인한 불편함은 Refresh Token 발행하여 유효기간 연장하고 좀 더 안전한곳에 저장하도록 하여 해소.

• Session은 오늘날 분산된 서버형태에서는 사용하기 어렵고 서버부하 많이 걸림. 확장성에 유연하지 못함. 이에 주로 Token을 사용함

2) JASON web Token

• 서버는 사용자가 로그인했을 경우 headers에 메타데이터를 보내 확인하는데, 해당 메타정보를 JWT(Jason Web Token)이라고 함.

  토큰이 우리서버에서 발급한게 맞는지 확인하기 위한 것. 개인정보를 담긴 담아야하는데, 우리 DB에서만 인식할 수 있는 값을 넣어준다

  • 헤더 인코딩(암호화 아님)

    • 토큰타입과 해시알고리즘정보를 BASE64로 인코딩
    • 인코딩은 암호화는 아님. 단 개인정보를 노출하지 않기 ex) {"alg":"HS256", "typ":"JWT"}

  • 내용(payload) 인코딩(암호화 아님)

    • Registered Claim : 만료시간 나타내는 exp 등 미리 정의된 집합
    • Public Claim : 공개용 정보전달을 목적으로 함
    • Private Claim : 클라이언트-서버간 협의하 사용
    • 위의 세 가지 요소를 조합하여 작성후 BASE64인코딩함 ex) {"user-id" : 1, "exp":1539517391}

• 서명(signature) 암호화됨

  BASE64로 인코딩된 header와 playload와 JWT secret을 헤더에 지정된 양방향 암호 알고리즘으로 함호화하여 전송
  • 프론트에서 전달받은 JWT의 서명부분을 백엔드 API에서 복호화 한 후, 서버에서 생성한 JWT가 맞는지 진본여부 확인

다른 읽어볼 자료

마스터시점에서 feature/main , feature/list로 나누어 두 사람이 작업을함

list가 먼저 pr한후 merge되어 업데이트 된 상황 main이 pull한후 push하였는데 충돌이 남. 원인은 list가 수정한 파일을 main도 수정했기 떄문

만약 공통의 파일을 동시간대에 두 사람이 건드렸다면, masters는 같은 내용중 누구의 것을 받아야되는지 판단이 어려워진다. 이 때, 두 작업자에게 충돌됨을 고지하고 해결할 필요있음

2. 해결 프로세스

일단 후발작업자인 main작업자는 로컬에서 feature/main에서 master에 있는 내용을 가져와서 합쳐봐야한다

gir merge master

VS코드 좌측 공유작업 클릭하면 하기와같이 확인 current change (내가 한거) incoming change(남이한거 받아온거)

버튼눌러서 수정하거나 지워서 수정할수있는데 처음에는 걍 직접 지워가며 수정할 것

수정이후에는 커밋

리모트 마스터가 머징하려고하면 충돌메시지 상기와 같이 확인하게됨

후발주자는 자신의 로컬마스터로 이동해서 git pull origin master로 리모트 마스터의 내용을 가져온다 (충돌상황 확인해야하므로)

PR내역에서 컨플릭 사항 먼저 확인하고 진행하자

이후 git checkout feature/main으로 이동해서 로그 확인(master의 내용이 없을것이다) 여기서 git merge master (마스터의 내용을 가져와서 feature/main에서 작업해보겠다. 마스터 내용은 건드리지말고, 브랜치 작업공간에서 수정하는걸로)

이 지점에서 팀원과 상의하거나 간단한것은 직접 의사결정해서 문서 수정한이후 동일하게 애드-커밋-푸시-피알

리모트 마스터가 merge하면 끝

CRA섩치를 위해 터미널에서 상기와 같이 입력하면 아래의 에러를 만나게 됩니다..

npm ERR! could not determine executable to run

만약 당신이 이 문제에 직면했다면 당황하지 마시고..

npx < install > create-react-app 경로명

install을 빼주시면 정상적으로 설치됩니다...

이것 때문에 잡아먹은 1시간이 안타까워서 남깁니다... 혹시 도움이 되셨다면 따봉을 눌러주세요..저만 이런실수하나싶어 외롭습디다...