blockchain이란

• chain + block 즉, 블록들이 모여있는 체인으로 빗코, 이더, 에이다 등등을 돌아가게 하는 기반
• *Append * 여기서의 block은 개발적으로 database를 의미하며, 이 database는 추가(append)만 됨. 삭제 x 편집 x ex) 정부 기준,운전면허증 정보 지원금 이력 개인 기준, 전세계약서
• 탈중앙화(Decentralization) 탈중앙화란 특정 개인이 DB를 관리할 수 없다는 걸 의미함 개개인은 복제된 DB를 가지고 있음 즉 분산된 DB이기도 함
• 이 때문에 크립트를 감시/통제 하기 힘듦 너무 많은 사람들이 비트코인 노드를 돌리고 있고 개개인이 정확하게 동일한 DB 복제본을 갖고 있음

블록의 구조 : 해시(hash), 데이터(data)

해시(hash)

• 이전 블록의 해시(previous block hash)

• 수학함수로 1개의 인풋을 받으면 아웃풋을 줌

• 일방향 함수(oneway function) :아웃풋을 가지고 기존의 인풋을 얻을 수 없음을 의미함 ex) 망고주스 망고 → 망고주스 (⭕️) 망고주스 → 망고 (❌)

• 결정론적(Deterministic) : 인풋에 대한 아웃풋이 항상 같은 것으로 정해져있다는 것을 의미함

데이터(data)

블록체인의 장점

1. 불가역성
2. 단일 장애점 방지
3. 투명한 정보전달
4. 상호 감시 비즈니스

작업증명(Proof of work)

채굴 (Mining)

Next.js

App Component

• 애플리케이션 컴포넌트의 기본적인 기능

  export default function(Component, pageProps) {
    return <Component {...pageProps}/>
  }
  // props인 component에 렌더링하고 싶은 페이지를 넣으면,
  // return에서의 component에서 렌더링해줌
  

#### Next.js 패키지

- Head
next.js 의 패키지를 이용할 수 있음
```javascript
import Head from "next/head";

📍cf) create-react-app의 경우, react-helmet 같은 걸 다운받아야 하는데 그럼 새로운 컴포넌트, 코드, 오류가 생기게 됨

library (ReactJs)

-내가 코드를 불러오는 것 -쉽게말해 library는 언제든 내가 사용하고 싶을때 언제든 어떤방법으로든 가능 ex) create-react-app으로 할 경우,

1. ReactDom.render() 부분을 통해 react앱이 만들어졌을 때의 모든 것을 볼 수 있음
2. create-react-app 에서 component를 어디에 둘지 등등 내가 정할 수 있는 것처럼
3. framework에선 우리가 직접 이 과정을 커스텀하려고 접근 할 수는 없음

framework (NextJs)

-내 코드를 불러오는 것 -쉽게 말해 framework는 내가 원하는 대로가 아닌 정해진 규칙에 따라 사용해야함 -우리가 정해진 작성해야하는 곳(page폴더 내)에 코드를 적으면, framework가 그 코드를 부르는 방식으로 되어있음 -routing의 설정 없이 page 안에 react.js component를 export하고 있는 파일을 두면 파일의 이름이 그대로 url로 사용됨 ↔️ react앱의 경우,

1. React Router Dom 다운 및 설정
2. Router 생성, Routes 설계
3. Component import
4. Router Render 이렇게 여러 과정을 거쳐야하지만 framework인 next.js의 경우 시간이 확실히 단축되는 것을 느낄 수 있었음

ex) react앱과는 달리 next는 ReactDom.render와 같이 우리가 직접 커스텀하려고 접근할 수 없고 추상화되어있음

NextJs

초기세팅

create-next-app@latest

NextJs의 장점

1. jsx 사용하면, React.js import하지 않아도됨
2. static pre-rendering ** 앱에 있는 페이지들이 **미리 렌더링되며 정적으로 생성됨

초기상태로 pre-rendering함 3. 연결속도고 매우 느리거나, javascript가 비활성화되어도 유저가 html은 볼 수 있음 = html 소스코드 보여짐 cf) create react app은 client-side render를 하는 앱을 만듦 = 브라우저가 유저가 보는 UI의 모든 것을 한다는 의미임 = 유저가 보는 html 소스코드 안에는 없음

📍 client-side render란?

: 브라우저가 자바스크립트를 가져와서 client-side의 자바스크립트가 모든 UI를 만드는 것을 의미함

1. 브라우저가 html을 가져올 때 비어있는 div로 가져옴
2. 브라우저가 모든 자바스크립트를 요청
3. 브라우저가 자바스크립트와 React.js 실행
4. 유저가 앱 볼 수 있음 (= UI 생성)

4. hydration : React.js를 프론트엔드 안에서 실행하는 것을 의미함 : next.js는 react.js를 백엔드에서 동작시켜서 해당 페이지를 미리만듦 : 아래코드처럼 초깃값이 0으로 되어있기 때문에 HTML도 초깃값 0으로 !

   *페이지가 로딩됐을때, * 1.아래 코드들이 렌더링되고 그게 html이 됨

   2. next.js는 그 html을 페이지의 소스코드에 넣음 (=유저는 자바스크립트와 react.js 실행되지 않아도 콘텐츠 볼 수 있음)
   3. react.js가 넘겨받고
   4. react.js가 (클라이언트로) 전송했을때 -> react.js앱이 되는것

export default function Home(){
    const [counter, setCounter] = useState(0);
    return (
        <div>
            <h1>Hello {counter}</h1>
            <button onClick={() => setCounter((prev)=> prev + 1)}>+</button>
        </div>
    )
}

Navigation

: Next.js는 특정 link 컴포넌트가 있음

import Link from "next/link"

: 우리에게 Next.js 어플리케이션의 클라이언트 사이드 네비게이션을 제공해줌 : anchor 쓰지 않고, Link 사용 -> Link는 href를 위해 사용, style이나 className 등은 적용되지 않음 -> href를 제외한 나머지는 a태그에 적용하면 됨

Next.js에서 styles 추가

CSS moudules

• 말그대로 module이기 때문에, 기존의 className="nav"으로는 적용되지 않음

  import styles from "./NavBar.module.css"
  className = {styles.nav}

• 클래스 이름을 추가할때, 클래스이름을 텍스트로서 적지 않음 javascript에서의 property형식으로 작성함 (ex: styles)
• 아래 이미지와 같이, nav이름이 아닌 NavBar_nav + 랜덤text 이런 경우 충돌이 나지 않으며, 다른 컴포넌트에서도 똑같이 nav라는 className사용 가능

Styled JSX

• Next.js의 고유한 방법일 수 있음?

  <style jsx> {``} </style>

• style 해당 컴포넌트 내부로 한정됨

  export default function NavBar() {
    const router = useRouter();
  
    return <nav>
        <Link href="/">
        <a className={router.pathname === "/" ? "active" : ""}>Home </a>
        </Link>
  
        <Link href="/about">
        <a className={router.pathname === "/about" ? "active" : ""}>About</a>
        </Link>
        <style jsx>{`
        nav {
            background-color: tomato;
        }
        a {
            text-decoration: none;
  
        }
        .active{
            color:yellow;
             //color: ${props.color};
        }
        `}
        </style>
  

<br>

### Global styles
>- Next.js에서는 React.js에서와 다르게 Page를 신경써야함
- Next.js는 다른 파일보다 App(Next.js가 모든 페이지를 렌더링 할 수 있음)을 우선적으로 봄
- 파일명은 **_app.js** 여야함
= Next.js에서는 자동적으로 _app.js를 불러옴
프레임워크는 내 코드를 불러옴 

TIL02

1. Next.js : 서버 사이드 렌더링(SSR)과 Static Generation 이해
2. GraphQL : fragment 사용
3. Apollo Client와 React를 활용

참고사이트

• GraphQL https://graphql-kr.github.io/learn/queries/ https://velog.io/@wheezy_han/Node.js-nodemon-설치-및-실행방법
• Next.js https://well-balanced.medium.com/next-js-%EA%B7%B8%EA%B1%B0-%EC%96%B4%EB%96%BB%EA%B2%8C-%ED%95%98%EB%8A%94-%EA%B1%B4%EB%8D%B0-ea5637f25fa4

Next.js

SSG

• 정적 사이트 생성 (Static Site Generation)

• next build 시, 정적인 HTML파일들이 서버에 생성됨

• 유저가 페이지를 요청시 이미 생성된 HTML만 반환하면 되어서 해당 HTML들은 재사용할 수 있음

• 기존의 생성된 파일이 있기 때문에, 다른 유저가 같은 url로 요청했을 때 다른 작업 없이 해당 HTML만 반환하면 되어 응답속도가 빠름

Apollo?

GrapgQL은 REST API와 마찬가지로 명세, 형식일뿐이어서 GrapgQL 구현할 솔루션 필요함

솔루션이란?

• 백엔드에서 정보를 제공 및 처리

• 프론트에서 요청 전송

• GraphQL.js, GraphQL Yoga, AWS Amplify, Relay 등등

• GraphQL로 로컬 및 원격 데이터를 모두 관리 할 수있는 JavaScript를 위한 포괄적인 상태 관리 라이브러리

• Apollo Client는 UI를 자동으로 업데이트 하는 동시에 fetch, cache, application data 수정을 할 수 있음

Apollo 장점

• 백엔드와 프론트엔드 모두 제공 즉 작동함
• 사용하기에 간편하고 쉬운 설정
• 풍성한 기능들 제공

GraphQL

fragment

• 요청에 사용되기 때문에 서버가 아니라 클라이언트 단에서 사용하게 됨
• 여러 쿼리에 사용될 수 있는, 재사용 가능한 필드셋
• 중복을 줄임으로써 전체 코드를 간소화

『Do it! 클론코딩 트위터 』 💻

노마드 코더 니꼴라스・김준혁 지음

현재 위코드에서 프론트엔드 개발자로 공부하고 있는 중에, Do it 클론코딩 트위터 서평단으로 참여할 수 있는 기회가 생겨 이렇게 velog를 적게 되었다

먼저 프론트엔드 개발공부를 하면서 노마드 코더의 무료, 유료 강의들을 들었을 때 개념의 큰 틀이나 흐름 등을 쉽게 이해할 수 있어서 이번 서평단 참여 기회가 반가웠다.🕊

클론코딩 트위터는 React에 Firebase를 이용해 백엔드에 공부해볼 수 있다. 그리고 해당 내용이 너무 형식적이지 않고, 이해하기 쉬운 흐름으로 되어있어, 어려움 없이 따라 갈 수 있어 클론코딩을 빠르게 해보고 싶다면 이책과 니꼴라스의 무료강의를 함께 해볼 것을 추천한다

Do it! 클론 코딩 트위터 노마드 코더 니꼴라스와 만드는 트위터 서비스 책소개 포스팅은 서평단 이벤트 참여로 이루어졌습니다.

TIL 1

1. REST API의 정의와 한계
2. GraphQL의 정의

   추가 공부용 검색 키워드

   restful api design guidelines (구글링) 비동기 프로그래밍

REST API의 한계

1. OverFetching 내가 불러오고 싶지 않은 데이터까지 불러와짐 -> 네트워크 시간이나 비용 등이 많이 듦
   2. **UnderFetching** 한번의 요청에 내가 원하는 충분한 데이터가 불러지지 않음 ex) 특정팀의 매니저와 해당 팀의 팀원들 정보가 필요시, 각각 요청해야함 요청1 :특정팀 요청 1번 요청2 :해당 팀 팀원(people)

GraphQL이란?

1. 한번의 네트워크 호출로 처리 가능

GraphQL 강점

1. 필요한 정보들만 선택하여 받아올 수 있음

• Overfetching 문제해결
• 데이터 전송량 감소

2. 여러 계층의 정보들을 한 번에 받아올 수 있음

• Underfetching 문제 해결
• 요청 횟수 감소 (REST API에서 불가능한 것은 아니나, REST API의 정해진 원칙을 지켜야하기 때문에 한계가 있음)

3. 하나의 endpoint에서 모든 요청을 처리

• 하나의 URI에서 POST로 모든 요청 가능 (REST API에서는 URI를 각각 다르게 함 GET, POST 등등)

API란?

1. 하드웨어 - Interface 어떤 기계를 만들면, 사용자가 그 기능을 전부 사용할 수 있도록 만들어야함 tv : 리모컨으로 음량조절, 채널 선택 등 / 그 외 에어컨, 자판기, 키보드 마우스, 모니터 -> 이런 걸 interface 라고 함 기계와 사람 간의 소통 창구
   2. 소프트웨어 - UI 소프트웨어로 본다면 버튼, 스크롤바, 브라우저 창이 해당함 UI (user interface) : 소프트웨어와 인간 사이의 소통창구
   
2. API (Application Programming Interface) : 소프트웨어가 다른 소프트웨어로부터 지정된 형식으로 요청, 명령을 받을 수 있는 수단 : 기계와 기계, 소프트웨어와 소프트웨어 사이에서도 수 많은 소통이 필요하며, 소통할 수 있는 창구가 필요함 ex 1) 기상청: 다양한 웹사이트들이 실시간으로 날씨정보 받아감 ex 2) 카카오지도

REST API란?

: HTTP 요청을 보낼때 어떤 URI에 어떤 메소드를 사용할지 정한 약속

• REST란 형식의 API !
  • 과거의 SOAP이란 복잡한 형식을 대체함
  • ** 각 요청이 어떤 동작이나 정보를 위한 것인지를 그 요청의 모습 자체로 추론 가능함** → RESTful하게 만든 API는 요청을 보내는 주소만으로도 대략 이게 어떤 요청인지 알 수 있음 ex) http://(도메인)/classes/2/students?page=2
• 소프트웨어간 정보를 주고받는 형식 so, 형식이기 때문에 기술에 구애받지 않음(무슨 프레임워크를 쓰든 상관없음)
• GraphQL 이전부터 사용해왔으며, 특성이 다르므로 작업특성에 따라 적합한 것을 사용하면 됨 → REST API 보완하기 위해 GraphQL 만들어짐

URI란?

• 자원을 구조와 함께 나타내는 형태의 구분자

CRUD란?

• CRUD? URI와 같은 조회작업뿐만 아니라, 정보를 새로 넣거나 수정, 삭제 작업을 통틀어 말함

  • CREATE 생성

  • READ 조회

  • UPDATE 수정

  • DELETE 삭제

  • 서버에 REST API 요청 보낼때는 http 라는 통신규약에 맞춰서 신호 전송함 http에도 여러가지 메소드가 있는데, REST API에서는 아래 4가지, 혹은 5가지를 사용함

  • GET , POST , DELETE, PUT, PATCH

  • 이중 post, put, patch (look like 소포 )는 body란 주머니가 있어서

  1. 정보를 get, delete보다 많이 담고
  2. 비교적 안전하게 감춰서 실어보낼 수 있음
  • GET , POST , DELETE, PUT, PATCH 이것들의 기능이 특정 용도에 제한되어 있지는 않음 ex) POST 하나로도 데이터를 쓰고 읽고 수정하고 지울 수 있음 BUT, 누구든 각 요청의 의도를 쉽게 파악할 수 있도록 RESTful하게 API를 작성하기 위해서는 용도에 맞게 구분해서 API를 사용해야함

  PUT: 정보 전체를 갈아끼울 때 사용 PATCH: 정보 중 일부를 특정 방식으로 변경할 때 사용

  여러 소프트웨어들이 정보를 주고받으면서 돌아가는 것도 많음 배달어플 들어가서 특정조건으로 조회하면 -> 서버에서 특정조건에 맞는 데이터를 전달함

데이터를 주고받을 주체들간 약속된 형식 REST API도 그 형식들 중 많이 쓰는 하나의 형식임

• URI 형식(어떤 정보를) + 요청 방식(어떻게 할 것인가)

REST API 실습 초기세팅

nodemon 해당 프로젝트에 코드가 바뀔 때마다 이 앱을 껐다 킬 필요없이 바로 노드js가 인식해서 코드 실행해줌

위코드 초반 자기소개때 제가 좋아하는 영화 대사를 말하면서
앞으로 하루하루 조금씩이라도 성장해 나간다면 그걸로 된 거니까 다 같이 조급해하지 말고 위코드 기간을 같이 건너자고 했었는데 역시는 역시..말처럼 쉽지는 않았어요 🙃
중간중간 왜 시간이 지나도 잘 안되지? 잘하고 있는 게 맞나? 라는 생각이 많이 들었거든요 그래도 새삼 확실하게 느낀 점은 포기하지 않고 이리저리 부딪히며 해나가다보면 우리도 모르게 앞으로 나아가고 결국 가려던 곳에 도착한다는 거예요
이리저리 부딪히느라 수고 많았어요 여러분 Attraversiamo ! (우리 함께 건너자) 지금까지 같이 건너온 것처럼 남은 기간도 같이 건너요 🥰
                          -나의 개인 notion에 숨겨놨던 1차 최종회고 중-

팀명: POSEA

기능구현 및 blocker

1. 캐러셀 기능 구현 (1) 상품이미지들을 감싸는 부모태그와 조상태그 중 조상태그에 useRef를 적용하여 이동이 제대로 되지 않음 조상태그에 적용하여 수정함 (2) IMG_MAX는 이미지의 마지막 인덱스값으로 설정해주었고 slideState값이 IMG_MAX값과 같거나 크다면 setSlideState값에 0을 주어서 다시 첫번째 이미지로 돌아감

  const handleRight = () => {
    if (slideState >= IMG_MAX) {
      setSlideState(0);
    } else {
      setSlideState(slideState + 1);
    }
  };

(3) useEffect에서 ref에 transform으로 traslateX를 주어 설정된 크기만큼 이동시키려고 하였으나 되지 않음 transform이 아닌 translate로 잘못적혀있어 수정 후..정상적으로 작동함

 const [slideState, setSlideState] = useState(0);
  const IMG_MAX = 3;
  const slideRef = useRef();

  useEffect(() => {
    slideRef.current.style.transition = 'all 0.5s ease-in-out';
    slideRef.current.style.transform = `translateX(-${slideState * 427}px)`;
  }, [slideState]);

2. 모달창 구현 (1) 수정 전 모달창 구현

   (2)모달창 조건부 렌더링 사용하여 효율적으로 관리 : isModalShow가 true면 modal창 활성화 : 조건부 렌더링 사용할 경우 클릭 전에는 모달창 dom 자체가 보이지 않음

   {isModalShow && (

    <div className="modalBox">
      <Modal
        isModalShow={isModalShow}
        onModalShowBtnClick={onModalShowBtnClick}
        noShow={onModalExitBtnClick}
      />
    </div>

   )} (3) display:none과 visibility:hidden의 차이점 visibility:hidden

보이지만 않고 해당 공간은 존재함. width와 height값을 주었다면 그만큼 공간은 존재하게 됨 display:none

아예 사라짐. 보이지 않고 해당 공간도 존재하지 않게 됨 (4) 상세페이지의 footer 하단으로 공백 스크롤 생기는 버그 발생 →조건부 렌더링 적용할 경우 공백 사라졌지만, 적용한 애니메이션이 사라짐 →조건부 렌더링 지우고 모달의 부모태그에 fixed 적용하여 수정

3.merge 후 버그 (1) merge 후 버튼 작동하지 않음 Nav를 합친 후 상세페에지상 모달창 버튼과 장바구니 버튼이 작동하지 않음 z-index 값을 설정 및 nav 담당자 css 수정으로 완료함

4. 장바구니 버튼

나에게 팀플젝이란?

1. 함께 하면 못할 건 없다 2. 처음부터 모든 개념을 온전히 이해하고 코딩할 순 없다

1차 프로젝트를 통해 2가지를 새삼 다시 알게되었다
개발분야뿐만 아니라 모든 분야에서 적용되는 당연한 기본적인 사실들이라고 할 수 있는데, 이래서 기본이 제일 중요하다고 하나보다

함께하면 못할 건 없다

프로젝트 팀이 발표되고 첫날, 설렘 반의반 나머지는 막막함이었다 "내가 맡은 파트를 완전하게 구현하려면 어떻게 해야할까?"가 주된 고민이었던 것 같다.

처음에는 백엔드 분들의 용어나 계획들을 잘 이해하지 못했다 그래서 종종 시간이 좀 더 걸리게 돌아가는 경우도 있었지만, 백,프론트가 서로 쉽게 풀어서 설명하고 변경사항이나 문제가 있을 때 빠르게 공유를 하면서 풀어나갔다 막연했던 프로젝트 과정들과 개념들이 어렴풋이 익숙해져가고 그렇게 시간이 지날수록 나의 파트, 나의 기능구현이 아닌 우리의 프로젝트라는 생각으로 바뀌어 갔다

처음부터 모든 개념을 알고 코딩할 순 없다

혼자하는 공부였다면, 나는 이해가 안 가는 부분에 대해 파고들어서 영상도 찾아보고 여기저기 정리글도 탐방하며 이해하는 데에 시간을 썼을 것이다 하지만 프로젝트는 기한이 있고, 나의 것이 아닌 우리의 것을 만들어가는 과정이니 스프린트에 맞춰 움직였다

또, 나는 코딩을 하면서 오류가 나고, 깃에서 conflict가 나는 걸 최대한 피하고 싶어했던 것 같다 특히 modal창이나 carousel을 구현할 때 vscode에 일단 쳐보면서 이런저런 알 수 없는 오류들을 고쳐나가면서 알게되었다

영상을 통해 보거나, 이런 저런 정리된 글들보다 내가 직접 고치고 다듬은 내용들이 더 찐하게 남고 다른 사람에게도 설명할 수 있다는 걸.

function isValid(s) {   

    if (s.length % 2) {    
        return false;  
    }  

    const openingBrackets = []  
    const obj = {    
        "{" : "}",    
        "(" : ")",    
        "[" : "]"  
        }  

    for (let i=0 ; i<s.length; i++){    

    if (obj[s[i]] !== undefined){      
            openingBrackets.push(s[i]);    
      } else if ( obj[openingBrackets.pop()] !== s[i] ) {    
 
       return false;    
    }  
    }  
    return true;

fetch("https://jsonplaceholder.typicode.com/posts", option)   .then(res => res.text())   .then(text => console.log(text));

1. fetch 에는 기본적으로 첫 번째 인자에 요청할 url이 들어간다.
2. 기본적으로 http 메소드 중 GET으로 동작한다.
3. fetch를 통해 ajax를 호출 시 해당 주소에 요청을 보낸 다음, 응답 객체(Promise object Response)를 받는다.
4. 그러면 첫 번째 then에서 그 응답을 받게되고, res.text() 메서드로 파싱한 text값을 리턴한다.
5. 그러면 그 다음 then에서 리턴받은 text 값을 받고, 원하는 처리를 할 수 있게 된다.

개발자 도구의 네트워크 탭에 가보면 fetch를 통해 얻어온 데이터를 볼수 있다.

출처:

https://inpa.tistory.com/entry/JS-📚-AJAX-서버-요청-및-응답-fetch-api-방식

[👨‍💻 Dev Scroll]

학습목표 1.Path Parameter와 Query Parameter 의 차이점에 대해서 설명할 수 있다. 2.useNavigate, useLocation, useParams 훅의 용도가 무엇인지 설명할 수 있다. 3.URL 에서 동적인 부분을 변수로 처리할 수 있고, 이를 통해 동적 라우팅 기능을 구현할 수 있다. 4.offset 과 limit 개념을 사용하여 페이지네이션 기능을 구현할 수 있다.

멘토가이드 🔥동적 라우팅은 상품 목록 페이지에서 상품 상세 페이지로 이동할 때 활용되는 기능입니다. 이때 페이지를 이동하는 흐름이 한번에 와 닿지 않을 수 있습니다. 하지만 내용이 어렵다기 보다, 흐름이 어색한 것이기 때문에 지엽적인 코드 보다는 시각화 자료를 통해 큰 그림을 먼저 파악하는게 우선입니다!
🔥사용자 브라우저에 입력되는 url 주소와 백엔드에 요청하는 API 주소를 구분해야 합니다. 주소라는 공통점만 있을 뿐, 이 둘은 서로 다른 목적으로 사용됩니다. 혼동하지 않도록 주의하세요!

정적라우팅 :방법이 딱 정해져있음 :지정되어 있지 않은 경로로 접속하면(=라우터에 path에 지정하지 않은 경로로) 컴포넌

동적라우팅

동적라우팅 : 내가 경로를 정해주지 않았어도, 변수를 가져와서 화면에 뿌릴 수 있게 해주는 것 특정데이터에 접근해서 그걸 백엔드에게 보내줌 : 내가 그 특정경로로 들어갔을 때, 화면에 받아올 수 있게 함 (id, title 등등) id 확인 개발자도구 -> 네트워크 탭 ->

Path Parameter vs Query Parameter

• 검색할때(보내는 값이 많을때 길게 붙여서) 쿼리 파라미터
• 상세페이지(딱 한가지의 정보에 대해 보낼때) path 파라미터

Path Parameter

// Bad
"/users/1" => <Users id={1} />
"/users/2" => <Users id={2} />
"/users/3" => <Users id={3} />
"/users/4" => <Users id={4} />
"/users/5" => <Users id={5} />

// Good
"/users/:id" => <Users /> // useParams().id

Query Parameter 물음표로 시작~ &연산자로 붙여나갈 수 있음

// Bad
"/search?keyword=위코드"    : <Search keyword="위코드" />
"/search?keyword=리액트"    : <Search keyword="리액트" />
"/search?keyword=라우팅"    : <Search keyword="라우팅" />
"/search?keyword=쿼리스트링" : <Search keyword="쿼리스트링" />
"/search?keyword=SPA"     : <Search keyword="SPA" />

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

useNavigate url의 경로를 바꾸는 hook useparams: path parameter값을 가져옴 -> 객체로 변환해서 반환함:

producth/1 중 1 부분을 path parameter로 처리

클릭 -> navigate로 이동 -> params로 주솟값 조회 -> 백엔드에 데이터 요청 -> 수리한 데이터 렌더링 순인 건가요? navigate로 경로를 바꿔주는 것 자체는 라우트에 id값을 추가로 붙이는 것 말고는 하는 게 없는 거네요? path parameter fetch로 보내서 백엔드에 보내는 것

Q:상품리스트에서 디테일로 넘어갈때 navigate로 props id 컨트롤이되고, 디테일에서 데이터 받아올때 params로 해당 데이터만 뽑아오는걸로 이해하면 되나요? A:네비게이트 의 props id는 전달만해주는 것뿐 = 즉 해당하는 변수를 여기에 넣어주는 것으로 이해해야함 A:디테일에서 데이터 받아올때 params로 해당 데이터만 뽑아오는걸로 이해하면 되나요? yes

Pagination & Query Parameter

Pagination :해당 스크롤이 해당 위치까지 내려오면 데이터를 받아와라 (몇개씩 짤라가지구) :more 버튼 같은 걸 누르면 몇개씩 끊어서 데이터를 받아옴 -> 이렇게 데이터를 끊어서 받아오는 이유는? A: 유저가 페이지에 들어갔을 때 3초동안 페이지가 안 뜨면 그 페이지를 떠난다구 함 :데이터를 한번에 받아온다는 건 그만큼 시간이 오래 걸리고, 사용성이 좋지 않고 과부하가 걸릴 수 있기 때문

Today's Goal

• RESTful API란?
• RESTful API 설계규칙
• Path parameter, Query parameter
• RESTful 하지 못한 API 설계 예시
• Status Code 🔆 🔆

REST API? : 라이브나 모듈 설치 없이 가지고 있는 라이브러리를 가지고 restful하게 api 작성 가능 : 진입장벽이 낮음 (= 신입이더라도 참고자료 확인만으로 restful하게 작성가능)

1. SOAP
2. Graphql : 페이스북,인스타 만들어 uri 아키텍쳐이므로 어떠한 요청도 빠르게 가능 ! but, 신입 개발자에겐 어려울 수 있음..!

REST (Representational State Transfer) :무언가 상태를 나타내는 거를 보내준다라는 의미 :request로 무언가 가는데 누가 봐도 명확하게 나타낸다는 의미 : 즉, 리소스(HTTP URI로 정의된)를 어떻게 한다 (HTTP ~)

장점 :self-descriptiveness, RESTful API는 그 자체만으로도 API의 목적이 쉽게 이해된다.

단점 :표준규약이 없어, '안티패턴'으로 작성되는 경우가 흔하다 -> 안티패턴: 실제 많이 사용되는 패턴이지만 비효율적이거나 비생산적인 패턴

기본 배경지식 Payload : 화물..?-?..

Path parameter - POST, PATCH

DELETE : 204 No Content 삭제가 되어서 content가 없다는 의미 !

GET 과 POST의 차이 !

Query parameter - Filtering : Query parameter에서는 GET요청 많이함 ! 알아둘 것~!

• & 로 내가 원하는 키값들 = 조건 들을 부여할 수 있음

Ordering : id순 -> 변경 가능

Pagination : offset - 시작점 / limit - 끝점 : limit 100으로 해뒀으니 1000개 더라도 100개씩 끊어서 백 -> 프론트로 전달 가능 : 프론트 또한 백엔드에게 요청할 개수 정해서 요청 가능!

Searching

: 결과는 똑같지만 1, 2 쓸 수 있음

클라우드 시장의 선구자, 올타임 리더! 2019년 기준 세계 시장 점유율 47%. 백만 이상의 액티브 유저 보유.

AWS를 쓰는 이유

클라우드 컴퓨팅의 장점을 그대로 제공. 그와 더불어 퀵 서비스, UI 등을 포함해 모든 것이 계속 업데이트 되는 중. 간단한 가입 프로세스. 아마존의 브랜드 가치. 굉장히 안정적이다. 다양한 서비스들

AWS-글로벌 인프라

한국, 서울에도 데이터 센터가 있고, 전 세계 곳곳에 데이터 센터가 구축되어 있다. 서로 멀 수록 지연시간이 길어지고, 그것을 최소화하기 위해 전 세계 곳곳에 데이터 센터를 구축하는 것이다.

scale up / scale out

• scale up: vertical scaling

    : 사양을 높이는 것 (cpu, 하드디스크 등 부품 업데이트)
    <br>

• scale out : 서버 대수를 늘리는 것

Traditional IT 방식의 문제점

1. Datacenter 렌트 비용을 지불해야함 (보통 monthly/yearly contract)
2. Power supply, cooling, maintenance 비용을 지불해야함
3. 새로운 하드웨어(서버)를 추가하거나 교체할 떄 시간이 많이 소모됨
4. 현재 유지되고 있는 인프라르 24/7 모니터링 할 인원을 고용해야함
5. 천재지변에 대응하기 어려움 (지진,화재, power shutdown 등)

Cloud Computing

1. Colound computing이란, IT 리소스를 인터넷을 통해 on-demand로 제공해주는 서비스를 말함 (서버가 필요할때 바로)
2. Cloud 서비스를 이용하면 사용한 만큼만 지불하면 되는 pay-as-you-go pricing
3. 정확하게 필요한 타입과 크기의 리소스를 지정하여 사용할 수 있음
4. 기존보다 간편하게 서버, 스토리지, 데이터베이스 등에 접근가능한 솔루션을 제공함

클라우드가 해결해주는 문제들

• flexibility : 유동적으로 원하는 리소스의 타입과 사이즈를 쉽게 변경 가능함

• cost-effectiveness: pay-as-you-go(내가 사용한만큼만 금액 지불)
• scalability: 쉽게 새로운 리소스를 추가할 수 있음
• high-availability and fault-tolerance:

IaaS, PaaS, SaaS

SaaS : 네이버, 모바일 은행, 카톡 등

AWS - Key Services

1. EC2 (Elastic ComputeCloud) : 몇 분 안에 구동 가능한 가상 서버

2. VPC (Virtual Private Cloud) :AWS네트워크 망안의 사용자 전용의 사설 네트워크 망

3. S3(Simple Storage Service) - 파일 업로드 및 공유 (구글드라이브와 비슷)

4. CloudFront - CDN : 지연 줄어들고 속도 빨라짐
   
5. Routes53 - DNS
   
6. RDS (Relational Database Service) : 클라우드에서 데이터베이스 관리
   
7. ELB (Elastic Load Balancing) : 서버로 들어오는 트래픽을 골고루 여러개의 머신으로 전달

**Load Blancing에 대해 추가 적인 공부 필요

-> RDS 비용 비싼 데도 굳이 사용하는 이유: os, 업데이트 등 따로 할 필요가 없어짐

useEffect

useEffect(() => {
fetch("API주소");
}, []);

처음 렌더 될 때만 찍히고 다른 작은 변화가 있다해도 계속 렌더되지 않도록 !

fetch : 백엔드에서 데이터를 받아올 때 사용

Clean up Effect

1. state 하나로 관리하기
2. 유효성 검사
3. 컴포넌트 분리
4. variables

state관리

 const handleInput = e => {
    const { name, value } = e.target;
    setInputValues(inputValues => ({ ...inputValues, [name]: value }));
  };

구조분해할당

const { name } = e.target;
// e.target이 name에 할당됨

const { name, value } = e.target;
// id 
// 123123123

유효성 검사

state 아닌 변수로도 관리 가능

1️⃣ aside scss import 수정

//기존에 Aside.scss에 Main.scss를 import해서 aside 와장창..! 
  @import '.Main.scss';

//1. Aside.scss -> Main.scss로 이동
//2. Main.scss -> ./Aside/Aside.scss 로 변경 
   @import './Aside/Aside.scss';

Main.scss에 Aside.scss를 가져온다

2️⃣ import 순서 수정 : React → Library(Package) → Component → 변수/이미지 → css파일(scss)

import React from 'react';
import Aside from './Aside/Aside';
import './Main.scss';  // css는 제일 하단에 위치해야함
import { useState } from 'react';

import React from 'react';
import Aside from './Aside/Aside';
import { useState } from 'react';
import './Main.scss'; // 수정완료

3️⃣ className 컨벤션 하나로 통일 (snake_case 혹은 camelCase)

• 온라인서비스로 https://stackblitz.com/edit/react-loxtgx 곧바로 서비스 이용 가능

• 추천 툴체인 : 리액트를 개발하기 위한 모든 환경을 기본적으로 제공하는 편리한 도구 : create

react 명령어

• npm start :리액트 개발환경이 실행되면서 코딩할 수 있는 환경 시작

• npm run build
• npm test
• npm run eject

would you like to run the app on another port instead?

: y 누르면 3000 아닌 다른 포트번호를 만들어서 이용할 수 있게 해줌

react 동작

1. npm start를 이용해서 create react app을 구동시키면
2. index.js 파일을 찾고 거기에 적혀있는 대로 동작하게 됨 (index.js = 입구)

react 수정

- App

"<App / > 은 import App from './App'에서 App에 해당됨 cf) ./App 뒤에는 .js가 생략된 것

. : 현재 디렉토리를 의미함

- Css

보이는 페이지의 css는 import './App.css'; 즉, App.css에서 가져옴

• "App이라는 태그가 id값이 root인 태그로 랜더링 되라"는 의미

• "root"는 public -> index.html에 있음

react 배포

- npm run build

• build:배포판을 만드는 과정
  • npm run build 명령어를 사용하면 build라는 폴더 생성됨 :build 폴더 안의 index.html 보면 띄어쓰기조차 없음 (불필요한 것 삭제)

serve라는 앱을 쓰는 것을 추천하고 있음
serve앱은 web serve이며, serve앱의 옵션중 -s 라는 옵션을 주면 사용자가 어떤 경로로 들어오던지 index.html 파일을 서브해주게됨
: build폴더에 있는 html을 서비스하는 웹서버가 실행됨 : 아래처럼 접속할 수 있는 주소들이 나옴

Component

https://velopert.com/3417 https://vimeo.com/698462779 (Usenavigate부분 / 220412 2팀 세션영상 37:00~ )

- mpa

: multiple page application 안에 데이터만 바껴도 되는 거지만 페이지 전체가 갈아끼워짐 -> 비효율적

:비효율적인 부분을 효율적으로 하는 게 SPA ->

Routing

• 한 개의 웹페이지 안에서 여러 개의 페이지를 보여주는 방법
• Route: 경로라는 의미
• 다른 경로(url주소)에 따라 View(화면)을 보여주는 것
• 리액트 자체에 내재된 기능은 아님

  React-router는 리액트의 라우팅 기능을 위해 가장 많이 사용되는 라이브러리임

ROUTE 이동하기

import { BrowserRouter, Routes, Route } from "react-router-dom";

<br>
react-router-dom에서 {} 안의 3가지 컴포넌트를 꺼내서 쓰는 것
<br>
 - Routes :  지정해준 경로들을 묶어두는 컴포넌트



### - BrowserRouter
: reactr-router-dom을 적용하고 싶은 컴포넌트의 최상위 컴포넌트를 감싸주는 wrapper 컴포넌트임
### - Routes

### - Route
: url에 따른 적당한 컴포넌트가 위치하기 위해 Route가 필요함
: Route에 path 지정 


<br><br>

### a태그 vs link

- a태그
: 페이지 전체를 갈아끼움
: 인스타, 페이스북 페이지 등등 내부가 아닌 아예 외부 페이지를 불러와야할 때

- link태그
: page가 reload되지 않고 변화되는 부분(동적으로 가져오는 데이터)만 불러옴
: 내부에서 불러올 때 
: nav, footer 등은 그대로 

>link to="/"


### useNavigate
- 선언 필요함
- 버튼의 경우, onClick 하나만으로 가능

onClick = {}

  : 클릭 이벤트가 발생했을 때 중괄호 안의 내용을 실행하겠다
  : 중괄호 안에 함수명 넣는 경우 위에 함수 선언 필요함

![](https://velog.velcdn.com/images/ny_plus_ny/post/615867e1-7919-411f-bed7-f3cedd5084f9/image.png)




### link vs useNavigate

- link: 단순 이동

- useNavigate : 이동 + 타 기능 필요시
 **앞에 use 가 들어가면 hook이라고 생각하면 됨**
 ![](https://velog.velcdn.com/images/ny_plus_ny/post/a414adce-9a8a-4b09-9f3e-7a5646d2babd/image.png)

:타기능으로는 goToMain 함수 내의 if문 처럼 !

<br>

### Sass
(css 전처리기
:jsx 처럼 컴퓨터에게는 css파일로 바꿔서 전달됨!)

- Nesting
:html 문법 구조와도 비슷해서 오류 발생시 찾아가기도 편리함
:css가 각각 적용될 수 있게 지정 가능 
:SPA이기 때문에 처음 서버에서 받아올 때  그 페이지에 css파일을 다 다운 받아짐 (다른 페이지에 적용하려 했던 css 다른 부분까지도 싹 다 적용되는 경우가 발생 )

main { display: flex; flex-direction: column; width: 550px; align-items: center; //로그인 페이지에 column을 줬지만 다른 main에서 적용한 row가 적용된 듯?.. }

![](https://velog.velcdn.com/images/ny_plus_ny/post/a5bd7ce4-a617-478d-b184-c55227d4c6fd/image.png)


![](https://velog.velcdn.com/images/ny_plus_ny/post/d041fa13-cdbb-4e0e-abb2-569ce32eed0d/image.png)

#### mixin / include
mixin으로 설정한 건 Include로 불러온다

>-  $
:변수 설정하겠다는 의미

>- @
:이 안에있는 조합을 섞어서 표현을 해줄거시야라는 의미


cf) variables.scss이용

: class형에서 사용하는 생명주기 등을 함수형에서도 사용하기 위해 외부에서 긁어서 가져온다 (갈고리)

state & event

• state vs props

  props :성별, 국적 등의 부모로 받아 변경되지 않는 것

  state :컴포넌트의 상태값으로 바뀔 수 있음 (ex 잠옴 배고픔 등)

• 배열 구조분해 할당 : 내가 원하는 값을 조금 더 가공하는 것

• 여기서 document는 html을 의미함
• dom의 계층 구조를 가장 잘 나타낼 수 있는 게 object여서 object로 한 거라고 생각하면 됨
• 객체 접근과 같이 key와 value 이용하면 됨

객체 접근 두가지 방법

. []

: 함수호출문이 함수 선언식 보다 위에 있어도 괜찮다 : 즉, 어디에 선언했느냐에 상관 없이 항상 제일 위로 선언을 끌어 올려주는 것이다

함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다. 실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것이다. 실제 메모리에서는 변화가 없다.

함수표현식은 불가능함

(참고: https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html)

개발자 도구

문제가 생겼을 때 콘솔 페널과 네트워크 패널 먼저 확인해야함

user agent stylesheet

브 라우저에 기본적으로 셋팅되어 있는 css 요소 reset css 등으로 브라우저의 css 리셋 후 코딩

elements - styles 부분의 순서

위: 구체적 (element style) -> 아래로 갈 수록 포괄적 (body) inline > id > class > _____

elements 패널

conseol 패널

preserve log 설정

-console에서 기록된 로그를 모두 지울 때 사용하는 메소드는?

버튼으로도 가능

console.clear

clear()

network 패널

내가 naver에 접속을 한다면,
- naver 웹페이지를 로드하기 시작하면서 웹페이지를 구성하는 데에 필요한 이미지, 리소스 등을 서버(network)를 통해 가져온다

프론트와 백의 소통창구 프론트에서 요청 -> 백에서 데이터 전송

fetch/XHR 프론트 요청에 대한 답변

200 ok :통신이 되었을때 상태 코드임 :200이 뜨면 통신이 잘 되었다

오류 400번대 오류: 프론트 500번대 오류: 백엔드