React
-
TypeError: req.session.regenerate is not a function using PassportReact 2023. 1. 29. 19:20
Passport는 React 응용 프로그램에서 사용할 수 있는 Node.js용으로 널리 사용되는 인증 미들웨어입니다. OAuth 비롯한 여러 인증 전략을 지원합니다. 사용자 인증 및 API 보안에 사용할 수 있습니다. React 응용 프로그램에 Passport를 통합하려면 Node.js 서버에서 Passport 미들웨어를 설정하고 인증 전략을 구성한 다음 React 구성 요소에서 인증 및 권한 부여 흐름을 처리해야 합니다. 아래는 구글 이메일을 통한 인증을 하는 방법입니다. Google Developer Console에서 새 프로젝트를 설정하고 Google Sign-In API를 구성합니다. Node.js 서버에 passport-google-oauth20 라이브러리를 설치합니다. npm install p..
-
You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0) 오류React 2023. 1. 28. 16:14
오랜만에 리액트 프로젝트폴더를 생성하려고 하니 이런 에러메시지가 발생하면서, 템플릿이 만들어지지 않는다. You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0) 주저리 주저리..... 급 뇌정지...왜그러지...왜그러.....지... 인생은 항상 예상했던데로 흘러가지 않는다. 구글링을 해보니 이미 나의 선배님들이 솔루션들을 적어놓으셨다. npm uninstall -g create-react-app npm add create-react-app 그리고 새로 만든 폴더로 간다음, 아래 명령을 실행 시킨다. npx create-react-app . We suggest that you begin by typing: c..
-
나만의 홈페이지 만들기-09 [Nav&Footer&Profile]React 2023. 1. 18. 21:37
상단의 메뉴바에 몇개 메뉴를 추가해보자. 그리고, 이 메뉴는 컨텐츠 섹션이 움직일때에도 항상 고정되어 있게 해보도록 하자. 먼저 상단메뉴바는 layout.js 파일에 있으니 이곳을 아래처럼 수정한다. {' '} React Myweb Profile Service 1 Service 2 Service 3 All Services react bootstrap 에서 Nav 태그를 이용해서 메뉴를 추가한다. 그리고, fixed="top" props 를 이용하면, Nav 바가 브라우저에 고정되어 있게 된다. 이렇게 고정하게 되면 아래에 컨텐츠 페이지들이 겹쳐지는 문제가 생기는데, 이럴때 아래처럼 css 에 추가해주면 간단히 해결된다. body { padding-top: 70px; } Footer는 layout.js 페..
-
나만의 홈페이지 만들기-08 [카드리스트&디테일페이지]React 2023. 1. 17. 23:32
이전 마스트페이지와 라우트 설명에서 이제는 카드 리스트에서 상세 페이지로 링크되는 컴포넌트를 추가해보자. 지금까지 소스는 아래 깃허브 링크에 있다. https://github.com/JahvoTrust/myweb GitHub - JahvoTrust/myweb Contribute to JahvoTrust/myweb development by creating an account on GitHub. github.com 나도 공부하면서 하는 코드라 조언해주실분은 꼭 댓글에 남겨주기 바란다.^^ 아래 처럼 카드리스트를 컴포넌트로 분리한다. import React from 'react' import Card from 'react-bootstrap/Card'; import Col from 'react-bootstra..
-
나만의 홈페이지 만들기-07 [마스터페이지&페이지Route]React 2022. 10. 4. 22:04
마스터페이지를 만들어서 내부의 컨텐츠 컴포넌트만 변경하기 위해 작업 Layout.js 를 추가한다. import React from 'react' import Navbar from 'react-bootstrap/Navbar'; import Container from 'react-bootstrap/Container'; export default function Layout(props) { return ( header {props.children} footer ) } props 파라미터를 이용해서 부모페이지 안쪽에 들어갈 자식 컴포넌트를 선언해준다. props.children 은 Layout tag 안에 들어올 컴포넌트를 말한다. 위처럼 부모 컴포넌트를 만들고 다른컴포넌트를 감싸주면 {getResult &&..
-
나만의 홈페이지 만들기-06 [파라미터 props 전달하기]React 2022. 9. 8. 19:00
하위 컴포넌트에 파라미터를 전달할때 props를 사용한다. 이전에 만든 카드리스트를 별도의 컴포넌트 CardList로 만들어서 Row를 props로 전달해보자. import React from 'react' import Card from 'react-bootstrap/Card'; import Col from 'react-bootstrap/Col'; export default function CardList({list}) { return ( {list.displayName} {list.category} Last updated 3 mins ago ) } 파라미터로 list를 받는다. app.js 에서 아래와 같이 값을 전달한다. {getResult && getResult.map((r) => // // // ..
-
나만의 홈페이지 만들기-05 [오픈API 호출하여 카드리스트디자인적용]React 2022. 9. 6. 20:31
자바스크립트는 API 데이터를 연동하기 위해서 주로 두개의 라이브러리를 이용한다. 하나는 Fetch API 그리고 다른하나는 Axios 이다. 앞에건 빌트인 라이브러리이고, Axios는 외부 라이브러리이다. 차이저은 잘설명되어 있는 링크를 참고한다. https://velog.io/@shin6403/React-axios%EB%9E%80-feat.-Fetch-API React | axios란? (feat. Fetch API) # Intro 리액트는 효율적인 UI 구현을 위한 라이브러리이다. HTTP Client(HTTP 상에서 커뮤니케이션을 하는 자바 기반 컴포넌트)를 내장하고 있는 Angular와는 다르게, 리액트는 따로 내장 클래스가 존재 velog.io 공공데이터중에 테스트에 활용할만한 API를 탐색한..
-
나만의 홈페이지 만들기-04 [Bootstrap 카드리스트 만들기]React 2022. 9. 5. 18:20
리액트 부트스트랩 페이지에서 참고 https://react-bootstrap.github.io/components/cards/ React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io 카드 레이아웃 App.js 에 위의 샘플을 복사해서 이전에 만든 Navbar 바로 밑에 붙여넣기한다. import React from 'react'; import Container from 'react-bootstrap/Container'; import Navbar from 'react-bootstrap/Navbar'; import Card from 'react-bootstrap/Card'; import ..