sideproject4

ww3ysq·2022년 5월 18일
0
  • 목표: 이전처럼 조져지는건 내가 아니라 프론트 너다.. 👹
    React 넌 이제 뒤졌따☠

  • 팀원 : 최, 김, 김

  • 목표 : 3-4주 컷

  • status:
    아이디어:반려 동물 호텔, 동물 병원, 약국, 카페 중계 사이트
    - erd (db scheme): 프로토타입있음
    ( 기획 완성시 table만 변경 예정, rdbms 구조, 기획중 계속 수정 예정.)
    기획 논의 중 (flow chart 및 milestone, 칸반보드, requirement 등 gira 툴 논의)
    언어 : ts , styled-component, react -library & redux
    ui design :Figma
    flow chart :Figma
    프로젝트 관리 : git? gira?
    예상 페이지 수 : 16-30장

  • Media Query (css)

 @media screen and (max-width: 768px) {
    /* border: 3px solid blue; */
    flex-direction: column;
    padding: 30px 0;
  }

  • 문법 only/ not :

    • only 뒤의조건에서만 (제한)
    • not 뒤의 조건 제외 (예외)
  • 미디어 타입 종류
    all : 모든 미디어 타입 (귀찮은데 이거쓰면안돼나??)
    aural : 음성 합성 장치
    braille : 점자 표시 장치
    handheld : 손으로 들고 다니면서 볼 수 있는 작은 스크린에 대응
    print : 인쇄 용도
    projection : 프로젝터
    screen : 컴퓨터 스크린 (이전 pj)
    tty : 디스플레이 능력이 한정된 털렉스, 터미널, 수동 이동 장치 등 고정 된 글자를 사용하는 미디어
    tv : 음성과 영상이 동시 출력되는 장치
    embrossed : 페이지에 인쇄된 점자 표시 장치

  • 속성
    width : 웹 페이지의 가로 길이
    height : 웹 페이지의 세로 길이
    device-width : 단말기의 가로 길이
    device-height : 단말기의 세로 길이
    orientation : width 와 height 을 구해
    width > height 일 경우 landscape
    height > width 일 경우 portrait
    aspect-ratio : width / height 비율
    device-aspect-ratio : 단말기의 물리적인 화면 비율
    color-index : 단말기에서 사용하는 최대 색상 수
    monochrom : 흑백 컬러만을 사용하는 단말기에서 흰색과 검은색 사이의 단계
    resolution : 지원하는 해상도를 판단
    color : 단말기에서 사용하는 최대 색상 수의 비트 수
    (2의 지수를 뜻한다) ex) 1 은 2, 2 는 4, 3 은 8

  • 추가로 알아볼것 ; Grid
    %,rem ,vp 어떤게 좋은건지 확인

  • useMediaQeury

  • 설치 : npm i react-responsive
    -기본 예시

import React from "react";
import { useMediaQuery } from "react-responsive";

export const Mobile: React.FC = ({ children }) => {
  const isMobile = useMediaQuery({
    query: "(min-width:0px) and (max-width:599px)",
  });
  return <React.Fragment>{isMobile && children}</React.Fragment>;
};
  • ts 로 리엑트 사용시

$ npx create-react-app ts-react-tutorial --typescript

  • tc 코드도 만들어보련..?
    $ npm install --save typescript @types/node @types/react @types/react-dom @types/jest

  • props 시 무조건 child가 선언되어야 한다

  • React.FC 를 사용 할 때는 props 의 타입을 Generics 로 넣어서 사용해야한다

  • 두번째는 컴포넌트의 defaultProps, propTypes, contextTypes 를 설정 할 때 자동완성이 될 수 있다는 것

type GreetingsProps = {
  name: string;
  children: React.ReactNode;
};

그냥 설정
이미 만든프로젝트 설정

  • CALL BACK : 다른 함수(고차 함수)의 인자로 전달되는 함수를 의미합니다.

  • Hooks (TIE 작성예정)
    -종류 :
    기본 Hook
    useState
    useEffect
    useContext
    추가 Hooks
    useReducer
    useCallback
    useMemo
    useRef
    useImperativeHandle
    useLayoutEffect
    useDebugValue

훅공식

  • 왜 필요한데?
    CSS Media-Query로 작성 하려면 매번 두가지 케이스를 작성해서 display : none, block;를 하나로 처리함.미디어쿼리 훅
    useRef?
  • 특징 <div ref={myRef} /> 를 아래와 같이
    .current. 프로퍼티로 전달된 인자 > (initialValue)로 초기화된 > 변경 가능한 ref 객체를 반환합니다
  • 언제 씀? <div ref={myRef} /> 처럼 값을 변화할때..?
  • how ? 아래 코드
const refContainer = useRef(initialValue);
function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

hooks공식

CF ) useMediaQuery Hooks

import React from 'react'
import { useMediaQuery } from 'react-responsive'
 
const Example = () => {
  const isDesktopOrLaptop = useMediaQuery({ minDeviceWidth: 1224 })
  const isBigScreen = useMediaQuery({ minDeviceWidth: 1824 })
  const isTabletOrMobile = useMediaQuery({ maxWidth: 1224 })
  const isTabletOrMobileDevice = useMediaQuery({ maxDeviceWidth: 1224 })
  const isPortrait = useMediaQuery({ orientation: 'portrait' })
  const isRetina = useMediaQuery({ minResolution: '2dppx' })
 
  return (
    <div>
      ...
    </div>
  )
}

-컴포넌트 활용 1
export 하여 PC, Mobile 나눌 것 .

import React from "react"
const { Mobile } from "../mediaQuery"

export const Main = () => {
	return (
    	<div>hello</div>
        <Mobile>
        	<div>hi</div>
        </Mobile>
    )
}

refer
refer2

  • switch 쓴 코드를 봄 . Switch가 뭐지?
import { Switch, Route } from "react-router-dom";
 <Switch>
        <Route exact path="/map">
          <FilmSpotPage />
        </Route>
        <Route exact path="/">
          <MainPage />
        </Route>
        <Route path="/filmlog">
          <FilmLogPage userInfo={userInfo} isLogin={isLogin} />
        </Route>
        <Route path="/filmtalks/total">
          <FilmTalkPage isLogin={isLogin} />
        </Route>
        <Route path="/filmtalks/view">
          <FilmTalkView userInfo={userInfo} isLogin={isLogin} />
        </Route>
        <Route path="/todayfilm">
          <TodayFilmPage />
        </Route>
        <Route path="/signin">
          <SignInPage handleResponseSuccess={handleResponseSuccess} />
        </Route>
        <Route path="/signup">
          <SignUpPage />
        </Route>
        <Route path="/filmtype">
          <FindingFilmTypePage />
        </Route>
        <Route path="/filmlogdetail">
          <FilmLogDetailPage userInfo={userInfo} isLogin={isLogin} />
        </Route>
        <Route path="/filmlogs/total">
          <FilmLogPage />
        </Route>
        <Route path="/users/update">
          <UserInfoUpdatePage
            userInfo={userInfo}
            setUserInfo={setUserInfo}
            setIsLogin={setIsLogin}
          />
        </Route>
        <Route path="/filmtalks/register">
          <FilmTalkResigsterPage userInfo={userInfo} />
        </Route>
        <Route path="/oauth">
          <OauthPage isAuthenticated={isAuthenticated} />
        </Route>
        <Route path="/mylog">
          <MyLogPage userInfo={userInfo} />
        </Route>
      </Switch>
Upgrade all <Switch> elements to <Routes>
React Router v6 introduces a Routes component that is kind of like Switch, but a lot more powerful. The main advantages of Routes over Switch are:

All <Route>s and <Link>s inside a <Routes> are relative. This leads to leaner and more predictable code in <Route path> and <Link to>
Routes are chosen based on the best match instead of being traversed in order. This avoids bugs due to unreachable routes because they were defined later in your <Switch>
Routes may be nested in one place instead of being spread out in different components. In small to medium-sized apps, this lets you easily see all your routes at once. In large apps, you can still nest routes in bundles that you load dynamically via React.lazy
In order to use v6, you'll need to convert all your <Switch> elements to <Routes>. If you already made the upgrade to v5.1, you're halfway there.

First, let's talk about relative routes and links in v6.
  • 요약 : 업데이트 했으니 Switch는 Routes을 써주기바람
    switch error-hand
  • 배포
    to 서비스 제공까지.. 과연?

how ? 로드밸런서
how ? aws cloudfront 배포에 있어서 waf 설정
how ? cloudfront> alb> ssl 설정.. (알고설정좀하자..)

  • 알아보기 :
    • 3-way handshake란?
    • waf ..? 우리는 설정 안했는데요..? (보안개념)

에러핸들링
aws loadbal
elb

과연쌉가능?

예상 : 보안까지는 힘들듯.

주말반납.

profile
🏠치킨은 반반이죠! TECH & GOSSIP

0개의 댓글