KISA 핀테크 아카데미 기초반 3일차 1차시 <수업일지>

프로퍼티를 통해서 handleSerchTextChange 라는것을 전달

 

확장프로그램이용해서 값 전달된거 콘솔에서봐야하는데 모르겠음

import axios from 'axios';
import React ,{useState} from 'react'
import Header from '../component/Header'
import SearchInput from '../component/newsSearch/SearchInput'

const NewsSearch = () => {

    const [searchText, setSearchText] = useState();
    const [searchResult, setSearchResult] = useState();

    const handleSearchTextChange =(e) =>{
        //값이 제대로 입력되는지 확인
        const{value} = e.target //값 위치
        setSearchText(value)
    }

    const handleSearchButtonClick = ()=> {
        //버튼 클릭했을때 이벤트 전달
        console.log(searchText)
        //뉴스 API 요청 전달하고 searchResult 변경하기
        
        axios.get(`https://newsapi.org/v2/everything?q=${searchText}&from=2021-08-01&sortBy=publishedAt&apiKey=9cdf053de3c94f8ca39ded6f423c8af9&language=ko"`).then((response) => {
            console.log(response.data.articles);
            setSearchResult(response.data.articles)
          });
    }
    
    
        return (
        <div>
            <Header title="뉴스 검색"></Header>
            <SearchInput 
            handleInput = {handleSearchTextChange}
            handleClick = {handleSearchButtonClick}
            ></SearchInput>

        </div>
    )
        
}

export default NewsSearch

serchinput.js

import React from 'react'

const SearchInput = ({handleInput, handleClick}) => {
    return (
        <div>
            <input onChange = {handleInput}></input>
            <button onClick = {handleClick}>검색</button>
        </div>
    )
}

export default SearchInput

 

 

검색하면 결과값이 나오도록

NesSearch.js

import axios from 'axios';
import React ,{useState} from 'react'
import Header from '../component/Header'
import SearchInput from '../component/newsSearch/SearchInput'
import NewsList from "../component/newsSearch/NewsList"

const NewsSearch = () => {

    const [searchText, setSearchText] = useState();
    const [searchResult, setSearchResult] = useState([]);

    const handleSearchTextChange =(e) =>{
        //값이 제대로 입력되는지 확인
        const{value} = e.target //값 위치
        setSearchText(value)
    }

    const handleSearchButtonClick = ()=> {
        //버튼 클릭했을때 이벤트 전달
        console.log(searchText)
        //뉴스 API 요청 전달하고 searchResult 변경하기
        
        axios.get(`https://newsapi.org/v2/everything?q=${searchText}&from=2021-08-01&sortBy=publishedAt&apiKey=9cdf053de3c94f8ca39ded6f423c8af9&language=ko`
        
        ).then((response) => {
            console.log(response.data.articles);
            setSearchResult(response.data.articles)
          });
    }
    
    
        return (
        <div>
            <Header title="뉴스 검색"></Header>
            <SearchInput 
            handleInput = {handleSearchTextChange}
            handleClick = {handleSearchButtonClick}
            ></SearchInput>
            <NewsList searchResult={searchResult}></NewsList>
        </div>
        )
        
    }

export default NewsSearch

뉴스리스트 드러나게 코드 삽입해주기

return확인

 

 

 

 

NewsList.js

import React from 'react'
import NewsListitem from './NewsListitem'

const NewsList = ({searchResult}) => {//프롭스사용
    return (
        <div>
                   
            {searchResult.map((news,index) =>{
                return (
                    <NewsListitem
                        title = {news.title}
                        author = {news.author} 
                        url = {news.url}
                        key = {index}
                        

                        >
                    </NewsListitem>

                );
            })}
        </div>
    )
}

export default NewsList

 

NewsItem.js

import React from 'react'

const NewsListitem = ({title,author,url}) => {
    return (
        <div>
            <p>제목 : {title}</p>
            <p>작성자 : {author}</p>
            <a href={url}>기사로 이동하기</a>            
        </div>
    )
}

export default NewsListitem

하.. NewsList 에서 map 함수 리턴할때 <> 꺽쇠를 하나 지워버려서 계속 안뜬거였다..

시간내에 다해낼 수 있었는데 아쉽..

 

 

Header,Search,List Component로 뉴스검색 화면구성함

import styled from "styled-components"

 

const NewsListBlock = styled.div`

  display: flex;

  flex-direction: column;

  border: 1px solid #000;

  margin-bottom: 10px;

  padding: 10px;

`;

     

---

https://developers.kftc.or.kr/dev/login

금융결제원 오픈API 개발자사이트

권한을 확인 (서비스 인증 하는 과정) 이므로 반드시 등록을 해줘야함.

 

4가지의 구성요소가 있음.

Access Token : 사용자의 권한 위임장과 같음

사용자를 > 인증서버로 이동 > 인증완료 코드 받아서 > 금융위 서버의 access token발급하는 부분으로 요청 보냄

---

API사이트 매뉴얼을 통해서 찾아넣기

API URI 맵 오픈뱅킹의 API는 REST(REpresentational State Transfer) 방식으로 구현되어, 인터넷 웹 서비스의 형태로 제공됩니다. 아래와 같은 API를 제공하며, 하나의 API는 하나의 웹 서비스 URI로 매핑됩니다.

 

https://openapi.openbanking.or.kr 은 현재 운영중인 서버임

그래서 테스트API 호출시에는 https://testapi.openbanking.or.kr로 호출하셔야 합니다

 

---

사용자를 > 인증서버로 이동 > 인증완료 코드 받아서 > 금융위 서버의 access token발급하는 부분으로 요청 보내는거 만들어보기

사용자 인증은 2legged 방식으로 사용해본다.

 

매뉴얼 step2 에 있음

이거 했는데 API서버 자체에서 오류뜸

힝~ 근데 이건 내 문제가 아니라고 함.

 

오 된다

postman 에서 작성한 URL을 브라우저에 작성해보면 뜬당~!

링크를 살펴보면

GET방식에서 물음표 뒤쪽에 있는거는 Key Value 방식으로, 데이터를 의미함
총 세개의 데이터가 들어옴

http://localhost:3000/authResult?
code=qGbT72kGcD8oVcncJ0ITyfmdP4aBCx&
scope=inquiry%20login%20transfer&
state=12345678901234567890123456789012

js object 표현한다면
{
code : qGbT72kGcD8oVcncJ0ITyfmdP4aBCx
scope: inquiry%20login%20transfer
state : 12345678901234567890123456789012 이겠지

}

---

POST방식

다 매뉴얼대로 넣어도 113 오류뜸

{

    "rsp_code": "O0001",

    "rsp_message": "인증요청거부-인증 파라미터 오류([3000113])"

}

Code 가 만료되어서 그런거임.다시 인증 -> Code 가져오깅그럼 뜬다!

이러한 내용이 뜰 것이다.

API는 계속해서 토큰을 요구함

유출피해를 최소화 하기 위해서 유통기한 지정

살짝 멍때렸더니 휘리릭지나가버렸다

 

---

사용자정보조회 API

 

 

중요한거!

fintech_use_num": "120211307388932377864236",핀테크이용번호

계좌대상을 시스템적으로 구분할 수 있게 해주는것.

앞으로 계좌 거래내역 조회나 잔액조회는 이 번호를 키 값으로 사용해서 조회할 수 있다.

 

"api_tran_id": "83e2c194-f2c1-4028-a433-a38da3054aa7", 거래고유번호(API)

    "rsp_code": "A0000", 응답코드(API)

    "rsp_message": "",응답메시지(API)

    "api_tran_dtm": "20210825153340900",거래일시(밀리세컨드)

    "user_seq_no": "********72",사용자일련번호

    "user_ci": "",  -> 컴퓨터의 주민번호 같은거

    "user_name": "내이름",

    "res_cnt": "3",등록된 계좌 개수

    "res_list"등록된 계좌 목록

 "fintech_use_num": "120211307388932377864236",핀테크이용번호

 

 

 어우 나머지는 매뉴얼 봐라

 

---

이제 이 일련의 과정들을 프로그램 화 해본다고..!