231030 [응용SW개발] 리액트 SPA 실습

[23.10.30] 60일차

 

<<진도>>

[DB 연동 응용SW 개발]

- SPA React 실습

- antd(Ant-design) 수정

 

. useEffect() 인수에 따라 어느 타이밍이 되는지 스터디

. 왜 두번씩 출력되는 지 스터디

. 메뉴 짝수 홀수 마다 세팅왜다른지 찾기 (개인)

 

* url이없는 배우사진은 안보이게하기

 

{/* Cast Grid Card */}

        {ActorToggle && // ActorToggle이 true여야 실행(element 생성)

          <Row gutter={[10, 10]}>

            {Casts.map((cast, index) => {

              return (

                <React.Fragment key={index}>

                  {cast.profile_path &&  // js 문법 ~~&& : ~~이true 일 때

                    <AntCard

                      path={`${IMAGE_BASE_URL}w400${cast.profile_path}`}

                      castName={cast.name}

                    />

                  }

                </React.Fragment>

              );

            })}

          </Row>

 

 

~~ && :  ~~이 true 일 때 뒤코드 실행   

** 평소엔 하나의 서버로 운용을 하다가

이벤트 등 사용자가 몰려서 트래픽이 많아질경우를 대비하여 이벤트 처리 (페이지)는 별도로 서버를 추가해서 관리한다.

 

이러한 이벤트 처리의 경우 RDBMS(MySQL)보다 처리가 빠른 리액트 /(Mongo DB)를 이용하는 경우가 많다.

 

* DB 활용

 

실제 배포 시 서버의 MySQL 사용하게되는데 AWS(아마존 웹서비스)를 활용한다.