[리액트] 초기세팅 및 실습 3차

[참고]

프론트 실습 - 네이버 오픈 API를 이용해 영화 목록 페이지 만들기

상세 실습 내용은 노션 프론트 페이지 실습란 참고

 

[결과물]

화면

 

코드 : github.com/GoldK11/React/tree/main/practice/simplePage

GoldK11/React

 

---

[실습목표]

1. 리액트 컴포넌트 설계 및 라이프사이클에 익숙해지기
2. 오픈 API로 데이터 통신해와서 화면에 뿌리기
3. 라이브러리 연동해서 사용해보기

[컴포넌트 구조 설계]

 - 디자인 패턴은 아직 고려하지 않음(모델, 뷰, 컨트롤러 등을 분리하지 않음)

 - UI를 기준으로 컴포넌트 계층 구조를 나눠 작업

1. APP : 최상위 컴포넌트

2. MainPage : 레이아웃을 구성하는 컴포넌트의 최상위

3. Header : 페이지 정보를 표시하는 헤더영역. 추후에 네비게이션 링크 추가 예정

4. Contents : 실제 컨텐츠를 표시해줄 영역

5. Toolbar : 컨텐츠에서 사용할 툴바

6. Movie : 메인 컨텐츠인 영화 검색 목록을 보여줄 영역

 

주요 데이터 흐름

1. Toolbar 에서 영화 제목 검색 또는 장르 변경

2. 검색어와 장르코드를 부모 컴포넌트인 Contents로 역방향 데이터 전달 

3. Conents의 state로 관리중이던 urlQuery 업데이트 

4. urlQuery를 props로 가지는 자식 컴포넌트 Movie에 변경된 props 전달

5. Movie 컴포넌트에서 전달받은 props의 변경된 urlQuery값으로 ajax 재호출

6. 검색결과 목록 재 렌더링

 

 

[사용 라이브러리]

1. react-tabulator

 - 데이터 테이블 그리는 용도

 - 리액트 호환이 좋은지는 아직 모르겠음

- 사용해본 경험이 있고, 향후 필요한 필수기능을 모두 제공함

- 리액트 환경 레퍼런스는 전멸수준...

 

2. material-ui

 - 유명하고, 레퍼런스 많고, 제공하는 기능이 많음

 - 필요 이상으로 무거울 수도 있음

 - 나중에 대강 필요한 기능들 나오면 번들링 사이즈 봐가면서 결정하자 

 

 

[오픈 api]

네이버 영화 검색 api 사용

developers.naver.com/docs/search/movie/

검색 API 영화 검색 개발가이드

 - 어플리케이션 등록 후 Client Id, Client Secret 값을 받아서 요청 프로토콜의 헤더에 포함시켜야 사용 가능

 - 필수 파라미터로 영화 제목을 받음 ?query=~~

 

 

[cors]

1. 교차 출처 리소스 공유(Cross-Origin Resource Sharing)란?

최초 자원이 서비스된 웹 애플리케이션이 다른 도메인의 자원을 요청 할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제

 

2. react 해결방안 (node 기반 공통)

package.json에 proxy 설정 추가 ( 요청 서버의 도메인 등록)

  "proxy": "https://openapi.naver.com",

 

3. 한계

빌드 후 배포할 때 적용 안됨

 

4. 그렇다면?

아예 제품 호스팅과 API 도메인을 동일하게 하거나 

서버에서 response를 보낼 때 헤더에 Access-Control-Allow-Origin 값을 지정해줘야 한다.

추가적인 옵션 및 내용 참고 kimyhcj.tistory.com/263

 

 

 

[css관련 뻘짓]

부제 : 퍼블리셔가 절실한 EU

이런 구조에서 크롬 브라우저 환경만 생각하고 display : grid 속성을 사용

// MainPage.css

.MainPage{
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: minmax(200px, 300px) minmax(600px, calc(100% - 300px));
}

Contents 영역에 포함된 테이블에 조작을 가하니 Contents영역이 옆으로 쭉쭉 늘어남 width overflow

Contents.css에 max-width도 줘보고 별짓을 다해도 늘어남

알고보니 그리드 영역을 잡아줬던 부모 영역에서 column 크기 minmax 설정이 없어서 그랬던 듯...

MainPage에 다음 css속성 추가

grid-template-columns: repeat(1, minmax(200px, 1fr));

 

문제는 해결됐으나 css는 해도해도 어렵따. 

 

 

[jsconfig.json]

프로젝트 최상단에 jsconfig.json파일 추가

홈디렉토리 경로를 편하게 사용하기 위해  절대경로 설정 변경

//jsconfig.json

{
    "compilerOptions": {
      "baseUrl": "."
    },
    "include": ["."]
}

참고 : velog.io/@vraimentres/React-ESLint-airbnb-vscode-%EC%84%B8%ED%8C%85

 

 

[tabulator 관련 뻘짓]

1. import 

공식 도큐먼트에는 리액트에서 사용할 경우 다음의 두 줄만 import하면 된다 하였으나 레이아웃이 전부 깨짐

import 'react-tabulator/lib/styles.css';
import { ReactTabulator } from 'react-tabulator'

이 css 파일도 추가로 import 줘야함

import 'react-tabulator/css/bootstrap/tabulator_bootstrap.min.css';

 

2. tabulator 타겟 객체 

리액트는 이렇게 ReactTabulator 컴포넌트로 생성과 동시에 바로 렌더링으로 묶어버려서

tabulator 내장함수를 호출 할 수 있는 타겟 객체가 없어서 난감

<ReactTabulator
	data={data}
	columns={columns}
	tooltips={true}
	layout={"fitData"}
 />

해결책을 찾음

stackoverflow.com/questions/59815224/calling-a-tabulator-table-function-in-react

Calling a tabulator table function in React

 

React.createRef()로 ref를 생성해주고

this.myRef = React.createRef();

ReactTabulator의 ref에 매핑시켜준다음

<ReactTabulator
	ref={this.myRef}	//ref 속성 추가
	data={data}
	columns={columns}
	tooltips={true}
	layout={"fitData"}
 />

tabulator 속성을 사용할 때는 ref.current을 찍고 사용하면 됨

const tabulator = this.myRef.current.table; //tabulator 추출
tabulator.setData(API.ajax.query, this.props.params); // tabulator function call

 

 

[material ui 관련 뻘짓]

1. Autocomplete

 - text input인데 selectable한 리스트를 드롭다운으로 보여주는 기능을 제공

import Autocomplete from '@material-ui/lab/Autocomplete';

Autocomplete을 import했으나 module note found error발생

알고보니 core가 아닌 lab에서 추가로 제공하는 기능이라 라이브러리 추가 설치 필요

npm install @material-ui/lab

 

 

[const, api, library 모듈]

 - 이렇게 사용하는게 맞는지는 모르겠음. 어깨너머로 배운 방식이라.

 - src 밑에 따로 폴더를 만들어 const, lib, api 모듈을 추가해줌

 - cosnt : 정적인 이름, 데이터 등을 관리

 - lib : 라이브러리 사용시 중간다리 역할을 하는 커스텀 모듈 (복잡해지면 파일 분리)

 - api : api 관련 모듈

 

 

 

[그 외 이슈들]

1. 장르검색이 제대로 안됨

 - 네이버 api 서비스 자체 문제인듯. 포스트맨에서 확인해봐도 데이터가 와리가리함

2. 컴포넌트 설계

 - model과 view를 분리

 - 화면 구성요소 추가되는 방향에 따라 재설계 필요