[클론 코딩] 커피 주문 관리 (4)

Feat: Add react config and REST API controller

• REST API

  • rest api구현
  • api가 다른 도메인(리액트 서버)에서 호출될 수 있도록 CORS 설정

• 람다식

  • 생략 조건
    1. 반환값이 있는 메서드의 경우, return문 대신 '식'으로 대신 할 수 있습니다.
    식의 연산결과가 자동으로 반환값이 됩니다.
    문장이 아닌 '식'이므로 끝에 ';'를 붙이지 않습니다.
    2. 매개변수의 타입은 추론이 가능한 경우 생략할 수 있습니다.
    3. 선언된 매개변수가 하나뿐인 경우에는 괄호()를 생략할 수 있습니다.
    출처 : https://ksabs.tistory.com/207

• 메소드 참조

  • Function<Integer, MyClass> f = (i) -> new MyClass(i); // 람다식
    Function<Integer, MyClass> f = MyClass::new; // 메서드 참조
    
    
  • 메소드 참조 사용 조건
    1. static 메서드 참조
    2. 인스턴스메서드 참조
    3. 특정 객체 인스턴스메서드 참조
       
       

• @RequestParam
  메소드의 인자값으로 @RequestParam() 어노테이션을 넣어서 값을 받아온다.
  @RequestParam("가져올 데이터의 이름") [데이터타입] [가져온데이터를 담을 변수]
  위와 같은 형식으로 사용한다.
  출처: https://hongku.tistory.com/119 [IT에 취.하.개.:티스토리]

• REST API controller 의 productList 코드 설명

    // 1. getProductsByCategory 메소드 : 매개 변수 있음
    return category.map((e) -> productService.getProductsByCategory(e)).orElse(productService.getAllProducts());

    // 메소드 참조식으로 변환
    return category.map(productService::getProductsByCategory).orElse(productService.getAllProducts()); 


    // 2. getProductsByCategory 메소드 : 매개 변수 없음
    return productService.getAllProducts();

• CORS지원 방식 : 서버단 config 에서 처리

• npx

  • node 패키지 실행 가능
  • Create React App 실행 가능
  • $ npx create-react-app kdt-react-order-ui

• package.json

  • node 프로젝트에서 node 패키지를 알려주는 명세서
  • start 명령어 사용가능 (npm에 명령어 날릴 수 있는 명령어 -> react 어플리케이션 실행)

• flow

  • 대부분 HTML과 CSS는 퍼블리셔에게 전달받게 되어있다. 퍼블리셔는 대체로 디자이너에게서 이미지를 전달받고, HTML과 CSS를 작성한다. 프론트엔드 엔지니어가 HTML과 CSS (정적컨텐츠)를 react 어플리케이션으로 전환하는 작업을 진행한다.
  • 스타트업에서는 프론트엔드에서 이미지를 받아서 HTML과 CSS생성하는 경우도 있지만 큰 회사에서는 분업화가 되어있다.

• react

  • 사용자 인터페이스르 만들기 위한 JavaScript라이브러리
  • React Native - 리액트 어플리케이션을 이용해 모바일 앱처럼 만들 수도 있다?
  • 컴포넌트를 정의하고 그것으로 어플리케이션 구성
  • 컴포넌트
    • 엘리먼트의 묶음
    • 클래스 or 함수로 정의 가능
    • 상태를 가지고 있다.
  • 엘리먼트
    • div태그
    • 인자들로 파라미터, 컨텐츠, 속성 전달 가능
  • 엘리먼트에 컴포넌트를 전달하면 또 다른 엘리먼트 생성 가능 -> 결국 모든 것은 엘리먼트
  • JSX
    • 자바 스크립트 내부에 HTML 문법이 있는 형태
    • 바벨을 이용한 transcomplie가능 -> 변경된 코드는 순수 자바스크립트 코드

Feat : Add product list page

• HTML / CSS 코드
  • sample.html 적용
• flow
  • 시작점은 index.js
  • DOM으로 App을 root에 그린다
    • 그래서 실질적으로 index.gtml 의 body - div에 리액트 어플리케이션이 그려지게 된다.
  • App.js 에서 개발 진행
• App.js
  • 샘플코드 body부 적용하기
  • 인텔리제이가 class -> className으로 자동 변환
  • 닫히지 않은 이미지 태그 닫아주기
• App.css
  • 샘플코드의 style부 적용
• 부트스트랩 추가
  • $ npm install bootstrap
  • 부트 스트랩의 CSS를 import가능
• node 서버 재시작

Refactoring :

• 함수로 product list 리액트 컴포넌트 생성

  • 상품목록 코드 복사 - > 붙여넣기
  • 리액트 컴포넌트는 무조건 하나의 엘리먼트가 반환되어야 한다.
  • 상품목록 컴포넌트의 <React.Fragment> 내부에 상품 목록 코드 옮기기
  • 원래 상품목록이 있었던 App 내부에는 컴포넌트 이름() 넣어주기

• Summary 컴포넌트 생성

  • <React.Fragment><React.Fragment/>는 <></>으로도 표현 가능

• Product 컴포넌트 생성

  • ProductList 컴포넌트에서 상품 코드 가져오기

• props

  • App.js 내부의 상품이름, 가격 등의 정보가 데이터베이스 속 데이터에 의해 이루어져야 함.
  • props는 객체 데이터를 Argument로 전달할 수 있게 해준다.
  • Product 컴포넌트를 사용하는 부모가 전달한 내용이 -> 자식에게 파라미터로 전달
  • 자바스크립트 표현식 {productName}
  • 사용 예

        function Product(props) {
            const productName = props.porductName;
            const category = props.category;
            const price = props.price;
            return (
                <>
                    <div className='col-2'><img className='img-fluid' src='https://i.imgur.com/HKOFQYa.jpeg' alt=''/>
                    </div>
                    <div className='col'>
                        <div className='row text-muted'>{productName}</div>
                        <div className='row'>{category}</div>
                    </div>
                    <div className='col text-center price'>{price}원</div>
                    <div className='col text-end action'>
                        <button className='btn btn-small btn-outline-dark'>추가</button>
                    </div>
                </>
            )
        }

        function ProductList() {
            return (
                <React.Fragment>
                    <h5 className='flex-grow-0'><b>상품 목록</b></h5>
                    <ul className='list-group products'>
                        <li className='list-group-item d-flex mt-3'>
                            {/*product 컴포넌트에 전달*/}
                            <Product productName={'Columbia 커피'} category={'커피콩'} price={300}/>
                        </li>
        				...
    						{/*반복 -> 이 부분도 부모의 props로 만들 수 있다.*/}                       

• ProductList 리팩토링

  • ProductList 를 사용하는 부모(App)로부터 props를 가져오게 바꾼다.
  • prodicts = [] (디폴트값 제공)
  • 루프를 돌 때 꼭 key를 만들어줘야 함

• App 리팩토링

  • 클래스형 컴포넌트에서는 this.state로 상태에 접근 가능
  • 함수형 컴포넌트에서는 useState라는 hook을 이용해야 한다.
  • const [상태에 접근가능한 변수명, 상태값을 바꾸는 함수] = useState();

Fix: Fix totalPrice

• NaN 오류 발생
  • 첫번째 문제 : 변수에 할당된 데이터 값을 숫자형으로 인식하지 않고 문자열로 인식할 때 이런 문제가 발생하는 경우가 있다.
    출처: https://sasada.tistory.com/93 [살다살다:티스토리]