React에 있는 사용자의 클라이언트 데이터베이스 구축

React에 있는 사용자의 클라이언트 데이터베이스 구축

반응형

인터넷에 있는 사람들에 대한 많은 정보에 어떻게 접근할 수 있는지 궁금해 본 적이 있는가? 다른 사람에 대한 정보는 없나요?

이 기사에서는 React를 사용하여 클라이언트측 애플리케이션을 구축합니다.프런트엔드에서 켈빈 데이터 API를 통합하는 웹상의 JS. 켈빈 데이터는 웹에 있는 사람들의 프로필에 액세스할 수 있게 해주는 API 플랫폼입니다.

이메일 주소, LinkedIn 프로필(여기서는 해당 사용자의 LinkedIn URL(예: https://linkedin.com/in/example-person ) 또는 전화 번호를 사용하여 특정 사용자를 검색할 수 있습니다.

이제 이 API를 사용할 앱을 어떻게 만들 수 있는지 알아보겠습니다. 그러나 이 기사를 더 읽기 전에 다음 사항에 대한 기본 지식을 습득해야 합니다.

리액션

반응 시 후크를 사용하여 데이터를 가져옵니다.

반응의 조건부 렌더링,

자바스크립트의 문자열/템플릿 리터럴,

구성 요소 및 소품 반응

KelvinData 대시보드.

플랫폼에 등록하면 구독을 감시하고 API 키를 관리하는 데 사용할 수 있는 개인화된 대시보드에 액세스할 수 있습니다.

API의 기능을 테스트할 수 있는 검색 놀이터도 대시보드에 있습니다.

이름, 전자 메일 주소, LinkedIn 프로필 또는 전화 번호로 모든 사용자를 검색하도록 결정할 수 있습니다. 이 기사는 이름만으로 사람을 검색하는 방법에 대해 다룰 것이다.

시작하기

이 기사의 범위에서는 NextJS를 사용하여 애플리케이션을 부트스트랩할 것입니다. 그렇다고 해서 생성-반응-앱 라이브러리가 작동하지 않는 것은 아닙니다. 당신이 편하다고 생각하는 사람은 누구나 이용할 수 있다. 우리는 단순성 때문에 nextjs를 사용하고 있습니다. NextJS에 대한 자세한 내용은 여기에서 확인할 수 있습니다.

이 프로젝트에서 필요한 종속성을 설치하는 것으로 시작하겠습니다. 다음 앱을 만드는 것부터 시작하겠습니다. 아래 명령은 우리를 위해 그것을 합니다.

npx create-next-app [name-of-your-app]

"스타일 구성 요소" 라이브러리를 앱 스타일링에 활용하고 "axios" 라이브러리를 사용하여 API에서 데이터를 가져올 것입니다. 우리는 이 기사에서 스타일링 측면의 많은 부분을 다루지 않을 것이다. 여기에서 전체 앱 스타일을 찾을 수 있습니다.

단말기에 아래 명령을 입력하여 위의 의존성을 얻도록 합시다.

npm install axios styled-components react-icons

아래 앱의 파일 구조를 살펴보자. 이 앱에서 필요한 중요한 파일에 초점을 맞춰 간략하게 설명하겠습니다.

|--pages | |-- api | | |-- users.js | |-- _app.js | |-- index.js |--src | |-- components | | |-- Card.js |__ .env.local

Next.js 앱의 구성 요소 개요

이 섹션에서는 이 프로젝트의 아키텍처를 구성하는 여러 파일과 각 기능을 아래에서 살펴보겠습니다.

페이지 디렉토리는 앱의 모든 라우팅을 수행하는 곳입니다. 이것은 Nextjs의 기본 기능입니다. 따라서 독립 경로를 하드 코딩해야 하는 부담을 줄일 수 있습니다.

pages/api: API 디렉토리를 사용하면 REST 또는 GraphQL API를 위한 별도의 저장소를 만들고 Heroku와 같은 백엔드 호스팅 플랫폼에 배포하는 일반적인 방법 대신 동일한 코드베이스 내에 nextjs 앱의 백엔드를 사용할 수 있습니다.

API 디렉토리를 사용하면 모든 파일이 API 엔드포인트로 처리됩니다. api 폴더를 보시면 user.js라는 파일이 있습니다.

해당 파일은 끝점이 됩니다. 즉, 파일의 경로를 기본 URL로 사용하여 API 호출을 수행할 수 있습니다.

const getData = async() => { axios.get("/api/users") .then(response => response()) .then(response => console.log(response.data)) .catch(err => console.log(err) } ``` - 페이지/_app.js: 모든 구성 요소가 DOM에 연결됩니다. 구성요소 구조를 살펴보면 모든 구성요소가 구성요소 구성요소에 페이지 제안으로 전달된다는 것을 볼 수 있습니다. 이 파일은 Create-React-App을 사용할 때 index.js 파일과 같습니다. 여기서 유일한 차이점은 "root"라고 하는 DOM 노드에 앱을 후킹하지 않는다는 것입니다. ```js React.render(document.getElementById("root), ) ``` - index.js는 페이지 폴더의 기본 경로입니다. 그곳이 우리가 이 프로젝트에 대한 대부분의 작업을 하게 될 곳입니다. 아래 명령을 실행하면 개발 서버가 시작되고 index.js의 내용이 웹 페이지에 렌더링됩니다. ```js npm run dev ``` - Card.js: 웹 페이지의 API에서 얻은 데이터를 표시하는 구성 요소입니다. - .env.local: 이 API를 사용할 수 있는 API 키를 저장하는 곳입니다. ## 서버측 API 호출 작성 중입니다. 이전 섹션에서는 상호 작용할 파일과 해당 파일의 특정 기능을 살펴보았습니다. 이 섹션에서는 API를 사용하는 방법에 대해 설명합니다. 서버 측에서 API 호출을 작성하는 이유는 API 키를 보호하기 위한 것이며 Nextjs에서는 이미 쉬운 작업을 수행하고 있습니다. Nextjs의 API 경로를 사용하면 클라이언트 측에서 API 키가 노출될 염려 없이 API 호출을 수행할 수 있습니다. 이 시나리오에서 .env 파일의 환경 변수의 본질은 무엇인지 궁금했을 수 있습니다. 환경 변수(API 키)는 개발 모드에서만 사용할 수 있습니다. 그렇기 때문에 process.env.api_key와 같은 작업을 수행하고 환경 변수에 액세스할 수 있습니다. 그러나 애플리케이션을 netlify 또는 vercel과 같은 플랫폼에 배포하는 순간 운영 모드로 변경되어 nodej 프로세스 개체를 클라이언트 측에서 사용할 수 없게 됩니다. 이제 서버측 API 호출을 작성해야 하는 이유를 알게 되었습니다. 지금 바로 시작합시다. ```js // users.js import axios from "axios" export default async function users(req, res) { const { query: { firstName, lastName }, } = req; const baseUrl = `https://api.kelvindata.com/rest/v1/search-v2? lastName=${lastName}&firstName;=${firstName}&apiKey;=${process.env.KEY}`; const response = await axios.get(baseUrl); res.status(200).json({ data: response.data, }); } ``` 위의 토막글에서 사용자라는 비동기 함수를 만들었습니다. 두 개의 인수, 즉 "req"는 "requ"는 "requ"를 의미하며 "requ"는 "requ"는 "requ"를 의미한다. req 인수에는 API를 사용할 때 액세스할 수 있는 속성(또는 Nextjs 문서에서는 "middlewares"라고 함)이 있습니다. 그 중 하나가 req.query입니다. 위의 스니펫에서 쿼리 속성을 구조화하기 때문에 이러한 변수를 값으로 API 엔드포인트의 쿼리 속성에 전달할 수 있습니다. 아래를 보세요. 여기서 req 인수와 함께 제공되는 내장 미들웨어에 대한 자세한 내용을 읽을 수 있습니다. ```js const { query: { firstName, lastName }, } = req; ``` 기본 URL은 destorged 쿼리 속성을 값으로 사용하고 apiKey는 nodejs 프로세스 개체를 통해 .env 파일에서 가져옵니다. 비구조적 쿼리 속성은 양식 구성 요소의 입력 값(다음 섹션에서 생성)에서 API로 전송되는 요청으로 간주되며, 요청이 수신되면 요청에 해당하는 응답을 받습니다. ```js const baseUrl = `https://api.kelvindata.com/rest/v1/searchv2? lastName=${lastName}&firstName;=${firstName}&apiKey;=${process.env.KEY}`; ``` 함수가 완료해야 하는 다음 프로세스는 비동기 API 호출로부터의 응답입니다. 아래 토막글은 axios 라이브러리와 함께 수행하는 API 호출을 변수 응답에 할당합니다. 다음 줄에서 res 인수는 우리에게 JSON 응답을 보내는 데 사용되는 상태 메소드를 사용하며, 그러면 응답 변수를 데이터의 속성으로 할당할 수 있습니다. 당신은 여기서 다양한 HTTP 상태 코드에 대해 더 많이 읽을 수 있습니다. ```js const response = await axios.get(baseUrl); res.status(200).json({ data: response.data, }); ``` ## 양식 구성 요소 작성 이전 섹션에서 서버 측에서 API 호출을 작성하는 방법에 대해 알아보았습니다. 입력 필드에서 API 쿼리 매개변수로 첫 번째 및 성 값을 보내는 양식 구성요소를 만들 때 이 섹션에서 API 호출을 사용합니다. 이 기사가 너무 길지 않도록 코드 조각은 짧게 하겠습니다. 먼저 아래의 인덱스.js의 내용을 살펴보겠습니다. ```js import React from "react"; import styled from "styled-components"; import axios from "axios"; import Card from "../../components/Card"; const Wrapper = styled.section` padding: 0 100px 0 100px; height: 100%; width: 100%; // remaining style goes here `; const UserAPIComponent = () => { const [userData, setUserData] = React.useState([]); const [firstName, setFirstName] = React.useState(""); const [lastName, setLastName] = React.useState(""); const getuserData = async () => { // api call goes here }; const handleSubmit = (e) => { e.preventDefault(); getuserData(); }; return ( Search for Anyone First name setFirstName(e.target.value)} /> Lastname setLastName(e.target.value)} /> Search {userData ? : "loading..."} ); }; export default UserAPIComponent; ``` 이 구성 요소는 API 엔드포인트에서 데이터를 수신하는 React 구성 요소이므로 자체 내부 상태를 가져야 합니다. 아래 스니펫은 React Hook을 사용하여 서로 다른 상태 변수를 정의한 방법을 보여줍니다. ```js const [userData, setUserData] = React.useState([]); const [firstName, setFirstName] = React.useState(""); const [lastName, setLastName] = React.useState(""); ``` 이름 및 성 변수는 모든 사용자가 입력 필드에 입력한 텍스트 값을 수신합니다. userData 상태 변수는 API 호출에서 얻은 응답을 배열에 저장하는 데 도움이 되므로 자바스크립트 맵() 방법을 사용하여 웹 페이지에 응답을 렌더링할 수 있습니다. API 엔드포인트에서 데이터를 가져오는 데 axios를 사용하는 방법과 기본 URL이 일반적인 https:// URL이 아닌 대신 이전에 서버측 API를 호출했던 파일의 경로입니다. ```js const getuserData = async () => { axios.get(`/api/usersfirstName=${firstName}&lastName;=${lastName}`, { headers: { Accept: "application/json", "Access-Control-Allow-Origin": "*", }, }) .then((response) => response) .then((response) => { setUserData(response.data.data); }) .catch((err) => console.log(err)); }; ``` 우리는 user.js 파일에서 거의 동일한 프로세스를 반복하지만, 이번에는 필요한 가져오기 헤더와 API 쿼리 파라미터에 상태 변수를 할당한다. 두 번째 .then() 방법에서는 API 호출의 응답이 배열로 처리되므로 response.data.data가 필요합니다. setUserData(response.data)에서 중지했다면 다음 작업을 시도할 때마다 자바스크립트가 유형 오류를 발생시킵니다. ```js { userData.map((users, index) => { return ( // some JSX ) }) } ``` 그 이유는 response.data에 객체 데이터 형식이 있고 맵() 연산은 자바스크립트 객체에서 작동하지 않고 어레이에서만 작동하기 때문입니다. handleSubmit 핸들러는 검색 단추를 클릭하면 모든 API 호출 시 웹 페이지가 다시 로드되지 않도록 합니다. ```js const handleSubmit = (e) => { e.preventDefault(); getuserData(); }; ``` ## 카드 구성요소 구축 카드 구성 요소는 앱의 현재 구성 요소 역할을 합니다. 반응의 프로포트를 사용하면 데이터가 이 프로포트로 전달됩니다. 다시 한 번 말씀드리지만, 간결함을 위해 카드 구성요소의 주요 내용을 모두 살펴보지는 않을 것입니다. 아래 수정된 구조를 살펴봅시다. ```js import React from "react"; import { FiUser } from "react-icons/fi"; import styled from "styled-components"; const Wrapper = styled.div` height: 56%; width: 32%; margin: 0 15px 30px 0; background: #fff; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.05); border-radius: 8px; padding: 0 15px 0 15px; `; const Card = ({ result }) => { return ( <> {result.map((users, index) => { return ( {users.name.full !== null ? users.name.full : "no name data" } Title: {users.employments[0].title} Organization: { users.employments[0].organization.name !== null ? users.employments[0].organization.name : "no employment info"} ); })} ); }; export default Card; ``` 결과 프로플은 카드 컴포넌트로 전달되고, 다시 앱 컴포넌트에서 활용됩니다(index.js). 3항 연산자는 userData의 유효성을 검사하며, true일 경우 Card 구성 요소가 렌더링됩니다. 그렇지 않으면 로드 문자열이 웹 페이지에 표시됩니다. ```js {userData ? : "loading..." } ``` 아래 "구성" 단락에서 삼항 연산자를 사용하여 조건부 렌더링을 수행하는 방법도 확인할 수 있습니다. 사용자의 조직 세부 정보에 해당하는 데이터가 없으면 "고용 정보 없음" 문자열이 표시됩니다. 있는 경우 사용자의 조직이 표시됩니다. ```js Organization: {users.employments[0].organization.name !== null ? users.employments[0].organization.name : "no employment info"} ``` ## 결론 아래 비디오는 이 기사의 시작부터 지금까지 우리가 구축해 온 것의 최종 결과를 보여 줍니다. 언제든지 브라우저의 개발 도구를 확인하고 네트워크 탭으로 이동하여 API 키가 표시되는지 여부를 확인할 수 있습니다.  코드 베이스를 보고 싶으시다면, 여기에 링크가 있습니다. 링크는 리포지토리의 특정 파일(이 문서의)을 가리킵니다. 여기서 다른 기사 데모를 확인하고 저장소 전체를 살펴볼 수도 있습니다. 지금까지 이 기사를 읽어 주신다면, 그렇게 해주셔서 감사드리며, 잊지 말고 공유해 주시기 바랍니다.

from http://every-issue.tistory.com/14 by ccl(A) rewrite - 2021-10-12 08:26:44