Moostock(13) - Vercel로 Next js 배포하기
·
개발💻/Moostock
사실 배포한지 꽤 오래됐는데 블로그 포스팅하기가 귀찮아서 이제야 쓴다 정말 별거 아니지만 그래프를 보여주고 자산평가 페이지를 만들어서 배포가 궁금해져서 이것저것 검색해봤다 뭐 여러가지 도구들이 있겠지만 next js를 만든 vercel에서 배포를 정말 간단하게 할 수 있었다 배포 하는 방법은 vercel에 깃허브 계정으로 회원가입을 하고 깃 레포지토리를 연결해주면 된다 다른 블로그에 방법이 자세히 나와있으니 그걸 참고하길 바라구  vercel에서 배포를 하면 이러한 화면을 볼수있다 이게 진짜 편한게 뭐 다른거 도구 안쓰고  깃에 커밋하면 저절로 빌드하고 새로운 버전으로 배포를 해준다 근데 여기서 주의할 사항이 있다 .env파일은 깃에 올라가지 않기때문에 velcel 페이지에서 직접 입력을 해줘야한다.(나..
Moostock(12) - Next.js 자산평가 페이지, 환율 api
·
개발💻/Moostock
진도가 아주 느리지만 이제 자산평가 페이지를 만들었다직접 계좌에 있는 주식들을 가져올수 있으면 좋겠지만 지금 그 기능을 만들기는 힘들거같구 직접 추가를 해줘야한다추가하기 버튼을 누르면 이런 모달이 나오고 정보를 입력하고 추가하면 표에 추가가 된다 수정, 삭제 기능도 만들려 했는데 수정은 굳이 불필요해보이고 귀찮아서 일단 삭제하는 기능만 만들었다저기서 삭제 버튼을 누르면 해당 목록이 삭제된다 그래도 현재가도 다 받아와서 자동으로 손익을 계산해준다 하지만 한국에서 미국 주식을 사고 팔때 환율이 맨날 달라지기때문에 저 손익은 정확하지 않을 수 있다 그래도 환율을 받아와서 원화 단위로도 가격이나 손익을 보여주면 좋을거같아서 환율을 받아오기 까지는 했다 (아직 화면에 보여주진 않음) 환율 api는 한국수출입은행을..
Moostock(11) - Next.js bcrypt 비밀번호 암호화
·
개발💻/Moostock
이제 차트를 보여주는 곳은 1차적으로 완성한거 같아서 자산평가 페이지를 만들어보려 한다 내가 무슨 종목을 가지고 있는지 직접 가져올수는 없기때문에 종목, 평단가, 수량등을 수동으로 입력해서 현재가와 비교하여 지금 자산이 얼마가 되는지 보여주려 한다 나중에 최종적으로는 배포하는게 목적인데 창피한 나의 포폴은 보여줄수 없으므로 비밀번호를 설정하려 한다 회원가입까지는 만들기도 귀찮고 굳이 필요 없을거 같아서 비밀번호를 db에 저장하고 그것과 비교하여 비밀번호가 일치하면 페이지에 접근할 수 있도록 하려고 한다 근데 비밀번호를 그대로 저장하는건 아무래도 찝찝하고 보안상에도 문제가 있을거같아 암호화 해서 저장하는 방법을 찾아봤다 검색을 해보니 bcrypt를 많이 쓰고 있는거 같다 https://www.npmjs.c..
Moostock(10) - apexchart tooltip, 주봉, 월봉 그래프 보여주기
·
개발💻/Moostock
그래프 보여주는 페이지에서 그냥 그래프만 보여주긴 아쉬우니 다른 정보들을 더 보여주고자 했다 먼저 apexchart에서 캔들스틱 그래프를 사용하면 기본적으로 그래프위에 마우스를 올리면 저렇게 open high low close 이 4가지 항목을 보여준다 근데 영어인것도 맘에 안들고 등락률도 보여주면 좋을거같아서 커스텀을 했다 다행히 구글링하면 자료들이 꽤 있었지만 따라하는것도 생각보단 쉽지않아서 꽤 오래걸렸다 options={{ tooltip: { custom: ({ series, seriesIndex, dataPointIndex, w }) => { var data = w.globals.initialSeries[seriesIndex].data[dataPointIndex]; return ( "" + "" ..
Moostock(9) - next js 모달, 해외주식 종목 검색 기능 만들기
·
개발💻/Moostock
이 전까지는 이렇게 내가 미리 입력해놓은 이 9종목만 시세 조회가 가능했다 이 종목들은 다 나스닥에 있는 종목들인데 나는 우리나라의 코스피처럼 나스닥에 대기업들이 다 있을줄 알았는데 뉴욕증시? 에 있는것도 있고 해서 나스닥으로는 역부족이겠다는걸 느끼고 검색 기능이 있으면 좋겠다고 생각했다 시세를 보여주는 페이지에 URL에 종목코드를 파라미터로 보내고 있었는데 이제 종목코드 말고 거래소 코드도 보내야 겠다고 생각했다 근데 파라미터로 보내기보단 이번엔 쿼리스트링 으로 보내고 싶다는 생각이 들었다 쿼리 파라미터라고도 하고 용어가 아직은 정확히 뭔지 모르겠다 ㅎ.. url 파라미터는 그냥 url에 붙은 단어이고 쿼리스트링은 키,밸류 값을 가진 url에 '?' 이 물음표 뒤에 붙은 것들이다 그래서 원래는 테슬라 ..