목표: 이전처럼 조져지는건 내가 아니라 프론트 너다.. 👹
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 :
미디어 타입 종류
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>;
};
$ 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
<div ref={myRef} />
를 아래와 같이<div ref={myRef} />
처럼 값을 변화할때..? 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>
</>
);
}
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>
)
}
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.
how ? 로드밸런서
how ? aws cloudfront 배포에 있어서 waf 설정
how ? cloudfront> alb> ssl 설정.. (알고설정좀하자..)
과연쌉가능?
예상 : 보안까지는 힘들듯.
주말반납.