react
-
Azure AI Form Recognizer를 활용한 영어단어장 만들기AI&ML 2023. 2. 9. 21:42
안녕하세요. 요즘 매일매일 눈을뜨면 새로운 AI서비스들을 테크기업들이 경쟁적으로 내놓고 있습니다. 기계학습을 해서 내가 직접 커스텀한 모델을 생성할수도 있지만, 실제 생활에 적용되는 모델을 만들려면, 많은 양의 양질의 데이터가 있어야합니다. 그래서, 많은 기업들이 대량의 데이터를 활용하여 이미 좋은 모델들을 오픈하고 있습니다. 오늘은 그중에 하나인 Azure AI 서비스중에 하나인 Form Recognizer 를 이용해서 PDF 문서나 이미지에서 글자를 추출하는 서비스를 만들어 볼게요. Azure Portal에서 Cognitive Services 를 생성하고, 미리 빌드된 여러 AI서비스중에 Form Recognizer를 선택하고, Form Recognizer 스튜디오를 열면, 아래와 같이 샘플이 나오고..
-
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..
-
나만의 홈페이지 만들기-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 페..
-
나만의 홈페이지 만들기-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 &&..
-
나만의 홈페이지 만들기-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를 탐색한..
-
나만의 홈페이지 만들기-02 [프로젝트 생성]React 2022. 8. 29. 15:34
웹페이지는 요즘 핫한 React로 생성한다. 원하는 임의의 폴더를 생성한다. VS Code 를 실행해서 폴더열기- 위에서 만든 폴더를 선택한다. 새터미널을 클릭한다. 터미널에서 아래 명령을 실행한다. npx create-react-app . 실행이 끝나면 아래처럼 템플릿 소스 코드가 생성된다. 다시 터미널에서 아래 코드 실행. 템플릿 웹사이트가 오픈된다. app.js 파일을 아래와 같이 정리하고 저장하면, 아래와 같이 Hello World 가 보인다. 참고링크 https://create-react-app.dev/docs/getting-started Getting Started | Create React App Create React App is an officially supported way to cr..
-
[REACT] .env 환경설정 파일 사용하기React 2022. 7. 21. 14:12
.env 파일은 중요한 설정파일이나 Key 값같은 보안이 필요한 부분을 "키=값"의 형태로 환경설정파일에시 보관하고 관리하기 위한 파일이다. 아래와 같은 형태로 설정값저장. *여기서 중요한사실은 변수들은 반드시 REACT_APP_ 로 시작해야 인식을 한다는 점이다. (이거 찾느라 엄청나게 삽질함.^^) js 파일에서 사용할때는 아래처럼 사용하면 됩니다. 그리고, github를 사용한다면 .gitignore 파일에 아래처럼 추가해서 버전관리에서 빠지게 해야겠죠. 이상입니다.