금융프로젝트
-
[국민 은행 클론코딩][vue]메인 슬라이드금융프로젝트 2022. 11. 10. 16:34
목표 화면 구현한 화면 컴포넌트 구조 headerWrap.vue에 대해서는 전 기록물에 있다. ActiveWrap.vue template section section1 클래스는 opacity:0,visiblity:hidden으로 로드 직 후에는 보이지 않는 상태다. 이 클래스에 opacity:1,visiblity:visible인 style속성을 가지는 ‘on’이라는 style속성을 부여해야한다. style .wrap-visual .area-con > ul > li { position: absolute; left: 0; top: 0; opacity:0; z-index:-1; color: #333; visibility: hidden; } .wrap-visual .area-con > ul > li.on { z..
-
[react][strokeDasharray][strokeDashoffset]도넛차트금융프로젝트 2022. 11. 7. 16:10
strokeDasharray setDasharray에는 배열이 들어간다. 첫번째 요소에는 원의 길이, 두번째 요소에는 비어있는 길이이다. strokeDashoffset setDashoffset에는 원이 시작되는 위치를 지정한다. 연두색이 시작되는 부분은 전체길이-빨간길이이다. 도넛차트 데이터 불러오기 const [inout,setInout] = useState(0.25); const [deposit,setDeposit] = useState(0.25); const [saving,setSaving] = useState(0.25); const [ensurance,setEnsurance] = useState(0.25); useEffect(()=>{ fetch("").then(res=>res.json()).the..
-
[react][setTimeout]슬라이드금융프로젝트 2022. 11. 4. 15:56
배경이미지 배열 const [bg,setBg] = useState( ["", "", "", "", "", "", "", ""]); 보여줄 데이터가 8개이므로 배경이미지도 8개로 맞춰준다. 배열 인덱스 상태 변수 const [index, setIndex] = useState(0); 초기 값을 0으로 맞춰준다. 로딩 상태변수 const [loading,setLoading] = useState(false); 데이터를 fetch로 받아온 후에 setTimeout을 실행할 것이므로 초기 값을 false로 설정한 후 fetch후 true로 변경해준다. 데이터 받아오기 useEffect ( () => { fetch("").then(res => res.json()).then(res => { setGoods(res); ..
-
[react][circle][svg]도넛차트 만들기금융프로젝트 2022. 10. 31. 16:11
svg태그와 circle태그로 원그리기 viewBox: svg 태그 내부의 좌표를 정의해준다 0 0 100 100이면 가로 0~100, 세로 0~100의 좌표를 정의한 것이다. cx: 원의 중심 x좌표 cy: 원의 중심 y좌표 r: 원의 지름 px단위다 fill: 원 내부 stroke: 원의 경계선 색 stroke-width: 원의 경계선 너비 stroke-dasharray: 얼마나 채울지, 얼마나 비울지 정의 stroke-dashoffset: 어디서부터 원을 시작할 것인지 정의 사분할 원 그리기 const Donut = ()=>{ const [inout,setInout] = useState(0.25); const [deposit,setDeposit] = useState(0.25); const [savi..
-
[react][슬라이드] 3초마다 화면이 변경되는 슬라이드 구현금융프로젝트 2022. 10. 27. 16:08
만들고 싶었던 화면 몇초인지는 모르겠으나 시간마다 화면이 자동으로 바뀌면서 금융상품을 보여주는 화면을 만들고자 한다. 내가 만든 화면 3초마다 화면을 바뀌게 했지만 버벅거리는 게 있다. DB db에 있는 데이터 데이터 받아오기 const [goods, setGoods] = useState([{"gName":"","gInterest":"","gPeriod":"","gMPay":"","gAge":"","gType":""}]); useEffect ( () => { fetch("").then(res => res.json()).then(res => { setLoading(true); setGoods(res); } ); }, []); fetch로 서버로 부터 데이터를 받아와서 상태변수에 넣어준다. 태그 const ..
-
[react][spring]로그인 페이지금융프로젝트 2022. 10. 25. 15:51
탭 페이지 구현 아이디 로그인과 인증서 로그인 두 가지 탭을 만들어서 탭을 클릭하면 각각의 페이지가 보이는 기능을 구현한다. 인증서 로그인 CSS const CertLoginBox = styled.div` margin: 0 auto; margin-top:5vh; width: 60vw; height: 60vh; background: #FFFFFF; `; const ButtonStyle = styled.button` float:right; width: 30vw; height: 10vh; font-family: 'Manjari'; font-style: normal; font-weight: 700; font-size: 2rem; text-align: center; background: #D9D9D9; borde..
-
[spring][react][SSL] 인증서 발급하기금융프로젝트 2022. 10. 24. 10:59
Https와 SSL인증서 HTTP는 HTML을 전송하기 위한 통신규약이다. HTTPS는 데이터를 전송할 때 암호화를 사용하는 통신규약이다. HTTPS는 SSL프로토콜 위에서 돌아가는 프로토콜이다. SSL인증서는 클라이언트와 서버간의 통신을 제3자가 보증해주는 전자화된 문서다. 공인인증서가 그 예이다. SSL인증서를 통해 HTTPS서버로 접속할 수 있다. CA 인증서의 역할은 클라이언트가 접속한 서버가 클라이언트가 의도한 서버가 맞는지 보장하는 역할을 한다. 이 역할을 하는 민간기업들이 있는데 이런 기업들을 CA라고 한다. 사설 인증기관 사설 CA의 인증서를 이용한다면 브라우저는 경고를 출력한다. 공인된 CA의 인증서를 사용한다면 경고를 출력하지 않는다. 프로세스 사용자 데이터 세팅 2. 사용자 신원 확인..