React 썸네일형 리스트형 [React] Suspense 1. React Suspense 비동기 작업이 진행되는 동안 보여줄 다른 컴포넌트를 정의할 수 있다. 네트워크를 통해 코드 분할 구서 요소를 가져올 때 사용자가 경험하는 약간의 지연의 시간에 유용한 로드 상태를 표기할 수 있게 된다. 2. React.lazy 동적 import를 사용해서 컴포넌트를 랜더링 할 수 있다. React 애플리케이션이 챈더링 초기에 모든 import를 처리하지 않게 할 수 있어 성능 향상에 도움이 된다. 즉 코드 분할 및 지연 로딩을 가능하게 해준다. 3. 사용흐름 MyComponent가 처음 렌더링 될 때 OtherComponent를 포함한 번들을 자동으로 불러옵니다. React.lazy는 동적 import()를 호출하는 함수를 인자로 가집니다. 이 함수는 React 컴포넌트를.. 더보기 [React] useContext 0. useContext를 사용하는 이유 - context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다. - context는 React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법입니다. - context의 주된 용도는 다양한 레벨에 네스팅된 많은 컴포넌트에게 데이터를 전달하는 것입니다. 출처: Context - React 공식 문서 즉 글로벌하게 쓰고 싶은 데이터를 저장하는 곳이 Context이다. 우리의 프로젝트에서는 로그인 정보를 저장하기 위해서 사용하였다. 1. createContext : Context 생성 Context를 생성하기 위해 createContext 함수를 사용한다. .. 더보기 접근 제한 라우팅 구현 1. PrivateRouter, PublicRouter 를 이용한 구현 - PrivateRouter, PublicRouter function PrivateLoginRoute({ children }) { return isLogin() ? children : ; } function PublicRoute({ children }) { return isLogin() ? : children; } - index.jsx , 2. 컴포넌트 사용한 구현 function FilterRoute({ filter, fallback }) { return filter ? : ; } ReactDOM.render( , document.getElementById('root'), ); 짱짱맨! 더보기 경로 설정 1. import 설정 / : 루트 ./ : 현재 위치 ../ : 현재 위치의 상단 폴더 ex) index.php가 C:\index\a에 위치한다면, - 3가지를 간단히 정리하자면, 1 '/' -> 가장 최상의 디렉토리로 이동한다.(Web root) 2 './' -> 파일이 현재 디렉토리를 의미한다. 3 '../' -> 상위 디렉토리로 이동한다. - 만약 두단계 상위 디렉토리로 이동하려면 '../../' 이렇게 사용하면 된다. 출처: https://88240.tistory.com/122 [shaking blog] 2. 링크 설정 // 루트url 뒤에 url 추가 // 현재경로 뒤에 url 추가 아하! 백틱도 조금 헷갈리는데 암튼 저렇게 쓴다! 더보기 React-Roter v6 1. react-router v6 - 현재 프로젝트에서 사용 중! - Switch, component, usehistory 등은 사라졌으니 옜날 글을 보고 혼동하지 말도록 조심하자..! 아래는 현재까지 사용해본 기능들 2. Routes - Switch문 대신 컴포넌트 안에 컴포넌트들을 배치한다. 3. element 와 같이 사용 component, children등을 더이상 사용하지 않음..! 4. useNavigate, - usehistory 같은거 사용하지 않음 - useNavigate은 함수이다. - 은 컴포넌트이다. const navigate = useNavigate(); navigate('/'); // 해당주소로 이동 navigate(-1); // 이전페이지로 이동 4. PrivateRoute .. 더보기 접근 제한 라우팅(Access Control & Authentication) 프론트에서 유저가 로그인 됐는지 확인하려면? 그리고 그에 따른 라우팅은? 라우팅 전 프론트에서는 사용자의 쿠키나 Storage를 조회하여 토큰이 있는지 검사한다. 그리고 그에 따라 유저에게 다른 페이지를 보여준다. 이걸 제한 접근 라우팅이라 한다. 로그인여부에 따른 라우팅 서비스 마다 다르지만 로그인여부에 따라 리디렉션을 해주는게 바람직하다. 예를들어 마이페이지에 들어갔는데 로그인이 안되있다면 로그인페이지로 리디렉션 구현 App.jsx의 Router 컴포넌트 안에 PrivateRoute 컴포넌트와 PublicRoute 컴포넌트를 추가한다. 각각의 루트 컴포넌트 안에 로그인을 검증하는 isLogin()함수를 삽입하여 Rendering할 것인지, 혹은 Redirection할 것인지 판별한다. PrivateR.. 더보기 Oauth 1. 역할 User : Resource Owner mine : Clinent their : Resource Server 사용자의 아이디, 비밀번호 대신 access token 이라는것을 받아와서 인증을 진행한다. 2. 등록, Register Outh를 사용하기 위해서는 서비스를 사용한다고 등록해야한다. 등록방법은 서비스마다 다르며 공통적으로 세가지를 얻어온다. - Client ID - Client Secret -> 외부에 노출되면 안됨 - Authofized redirect URls 3. Resource Owner의 승인 클라이언트는 유저를 리소스서버와 연결하여 인증요청을 해주고 리소스서버는 Client와 일치하는 Client ID , Authofized redirect URls을 확인하면 인증을 진행하.. 더보기 [react, css] 헤더만들기 - position : sticiky, top:0 을 통해 항상 위에 붙어있게 할 수 있고 - z-index : 1 을 통해 항상 가장 앞에 있는 요소로 고정시킬 수 있다.!! const Container = styled.header` display: flex; justify-content: center; align-items: center; padding: 10px; border-bottom: 2px solid ${COLORS.PRIMARY}; min-width: ${SIZES.HEADER_MIN_WIDTH}; position: sticky; top: 0; background-color: white; z-index: 1; `; 더보기 이전 1 2 3 다음
