이수증 일부 사진 첨부
현재 repository에 있는 내용은 fintech academy를 수강하며, 학습했던 내용을 담고 있습니다.
용어 정리 라우팅 : 라우터를 관리하는 것 (라우터를 설정해주는 것) 라우터 : 쉽게 말해서 특정 주소를 가리킴
React에서는 react-router-dom라는 라이브러리를 통해 이런 라우팅을 쉽게 설정할 수 있다.
BrowserRouter 컴포넌트로 라우팅을 설정하는 부분을 감쌉니다. 이 컴포넌트 안에 있는 Routes와 Route 컴포넌트는 BrowserRouter가 제공하는 context에 접근할 수 있습니다. (return 내부에서 JSX문법 쓰기 전에 <></> , <div></div> 를 써주는 것과 같은 역할)
Routes 컴포넌트는 여러 Route 컴포넌트를 자식으로 가집니다. 이 컴포넌트는 주어진 경로와 일치하는 첫 번째 Route 컴포넌트의 요소를 렌더링합니다.
<Route path="/test" element={}> Route 컴포넌트는 특정 경로에 어떤 컴포넌트를 보여줄지 설정합니다. 여기서는 "/test" 경로로 접근하면 ListComponent 컴포넌트를 보여주도록 설정되어 있습니다.
git끼리 merge 시키는 것 -> 내가 작업하고 있던 vscode랑 해당 프로젝트와 연결된 git의 version이 서로 다른 경우, 필요. 해결법) git pull origin main을 해준 다음, git push origin main해주면 됨.
postman -> API로 작업할 때, 일어날 수 있는 문제에 대해 해결할 수 있도록 도와줌. 여기서 발생 가능한 문제들을 해결한 다음에 vscode에서 코드 상으로 적용하기 -> get에 해당하는 url을 입력해준 다음, 임의로 조건들을 변경시켜서, 원하는 url을 찾은 경우, 그것을 가져가서 복붙하면 되는 것!
버전 관리? -> props에 대해서.. 원래 component마다 element를 주고 받기 위해서 props를 만들었는데, component끼리 딱히 연관이 없는 경우, 내용을 전달하는 것이 쉽지 않다. 이러한 경우, 상위 compoent에서 데이터를 관리해줘야한다. 이것을 위해 상위 component의 library에서 각종 데이터 관리함. (rudux같은 것. 이후에 공부해보기)
js에서 map을 이용한 배열 내부 요소 연결은 공부 좀 더 필요할 듯
axios는 좀 더 적용 연습이 필요해보임.
<!-- 형태 -->
.axios
.get("url주소")
.then( (response)=>{} )
.catch( (err)=>{} )
News api를 사용할 수 있던 이유는 해당 apiKey까지 제공해주었기 때문이다. 해당 key가 없으면, 인증된 사용자가 아니라고 접근 차단. (일반적으로 apiKey가 있으면 접근 가능.) 하지만, 금융 api는 좀 더 복잡한 과정을 요한다.
출처) fintech academy ppt
http://localhost:3000/authResult?code=___여기가 code!!___&scope=~/~&state=~/~
금융위api에 있는 openapi -> testapi로 바꿔줄 것! Postman에서 token할 때, GET이면, PARAM에서! POST면, Body에서! 토큰 발급한 다음, 발급받은 토큰(code)를 사용해서 post하는 것! 그런데, 제한 시간이 있음을 기억!
순서 정리) 개인 정보 입력 후, 본인 확인 완료 (여기서 code 얻을 수 있음.) -> 얻은 코드 기반으로 token 발급 가능! 해당 토큰으로 이제 보증(?)하는 것!
받은 토큰은 jwt.io에서 decoded 가능! (해석이 가능하기 때문에, 개인 정보가 토큰에 있으면 안 된다!)
서비스 중이 아니라 교육용이라 무관하지만, 토큰 관련 내용은 암호화/제거 하고 open된 곳에 올릴 것! (주의!) 실제 이 내용으로 서비스를 할 경우, 토큰 관련 ID는 다시 받아서 해야함. 그 이외 secret관련 내용은 금지.
인증을 완료한 다음, 지정해준 곳으로 callback해줘서 사이트를 옮겼어. 그러면, server <-> api 끼리 상호작용은 어떻게 해? ::> 약속된 곳으로 보내! (이게 call back 관련 내용) 개인 정보 입력한 다음, 넘어간 곳에서 code에 해당하는 부분을 가져오려면..! useLocation이라는 훅을 사용하면 됨!
4일차에 해당하는 부분을 수강하면서.. 금융위API 적용을 어떻게 해야하는지는 대충은 알겠는데, React의 적용을 완전히 이해하지 못해서 좀 어려운 것 같다. 그래도 react 기본적인 것은 학습했다 생각했는데, 이번에 사용한 storage라는 것 안에 react 자체적으로 이미 내제된 함수들을 사용하기에는 어려움이 있는 것 같다. 해당 부분은 핀테크 분야, 금융위 분야로 가게 된다면 추가로 학습이 필요할 것 같다.
react 개념을 복귀할 수 있어서 좋았고, API를 F.E에서 사용할 때 어떠한 과정을 통해 가져오는지를 상기할 수 있었다. 당시에는 하나도 이해를 못했지만, 지금은 조금이나마 이해를 할 수 있게 되어 이 점은 다행이라 생각한다. 하지만, REACT의 개념이 아직은 부족한 탓인지, 다른 npm의 종류를 많이 사용해보지 않은 탓인지는 잘 모르겠지만, 직접 코드를 작성하는 건 아직 부족한 것 같다. 다만, 어떤 흐름으로 이런 코드가 작성되는 것인지는 이해할 수 있게 된 것 같다. 다음 프로젝트에서는 html, css, js, react를 모두 사용하는 프로젝트/clone coding을 해보면서 개념을 좀 더 익힌 다음, 근래에 하는 핀테크 아카데미를 다시 수강하여, 최신 동향을 학습하고 싶다는 생각을 하게 되었다.
마지막에 사무자동화 내용 간략히 설명해주신 부분이 흥미가 갔다.
사무자동화 관련 도서 내용