Moostock(7) - 나스닥 종목 일봉 보여주기
·
개발💻/Moostock
드디어 1차적 목표인 일봉 보여주기를 성공했다 내가 그나마 관심있는 종목들의 로고를 보여주고 저 로고를 보여주면 일봉을 볼수있는 페이지로 이동한다 지금은 이런식으로 일봉 차트만 보여준다 그것도 데이터를 한번 받아올때 100개만 받아오기 때문에 지금은 100개의 캔들만 보여줄 수 있다 다음에 할일은 1. 주봉, 월봉 추가하기 2. 나스낙 외의 종목들 보여주기 3. 티커스펠리 검색을 통해 위의 9개 종목 이외에도 종목 보여주기 4. 백엔드 구축 5. 자산평가 페이지 지금 생각나는 다음 할일들은 이정도가 있겠다 또 많은 시행착오가 있겠지만 열심히 해보겠다!!
Moostock(6) - Next.js API 만들기, CORS해결, use client에서 api 호출 등등 고군분투..
·
개발💻/Moostock
문제가 하도 많이 일어나서 두서가 없고 나는 넥스트가 처음이라 바보같아 보일수도 있따 ㅎ. 매우 징징징징 거리는 글이다 약 이틀동안 아주 난리 부르스였다 왜냐? 나는 넥스트가 처음이니까~~~ 이전 포스팅 까지 나름 탄탄대로였다고 생각한다 포스트맨으로 한투 api도 잘 받아와지고, 그래프 그리는것도 잘됐으니까.. 이제 프로젝트에서 axios 써서 한투 api 요청해서 데이터 받아와서 그래프로 보여주면 되겠다 라고 가볍게 생각했다 근데 일단 처음에 CORS 문제부터 발생했다 프론트엔드 개발자라면 아주 익숙한 에러일거다 그래서 당연히 참고자료도 많고 가볍게 해결될 줄 알았다 next js cors 라고 구글링하면 보통 rewrites를 써서 해결을 하는거 같다 그래서 당연히 똑같이 따라했다 근데 이게 웬걸 해..
Moostock(5) - Next.js 캔들스틱 그래프 그리기 (APEXCHARTS)
·
개발💻/Moostock
이제 주식에 일봉이나 주봉등을 캔들스틱 차트로 보여주는 걸 하려고 한다 구글링 해서 apexcharts 라는 라이브러리를 찾았다 ApexCharts.js - Open Source JavaScript Charts for your website ApexCharts is a a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages. apexcharts.com 이미 유명해서 참고할만한 자료들도 많은거 같다 일단 샘플데이터를 넣어서 그래프가 그려지는지만 확인하고 싶었다 그냥 하라는대로 하면 잘 될줄알았는데 문제가 꽤나 많이 발생했다 ..
Moostock(4) - Next.js module css (scss)
·
개발💻/Moostock
오늘은 Next에서 스타일 작성하는 방법에 대해 알아보겠다 노마드 선생님의 강의를 참고했다 리액트에서 css를 작성하는 방법은 여러가지가 있다 당연히 인라인 방식이 있고 styled component 방식이 있고 module 방식이 있다 styled component 도 리액트 하는 사람들이 많이 쓰는거 같은데 나는 옛날 리액트 프로젝트에 모듈방식을 쓰기도했고, 내 개인적 취향도 css파일은 따로 관리하는게 보기 좋기도하고 노마드 선생님도 모듈 방식으로 알려줘서 모듈 방식을 설명해보겠다 일단 나는 scss 사용할거라서 npm i scss 를 터미널에서 입력해서 scss를 설치해준다 일단 global.scss를 적용시켜 주겠다 styles 폴더에 global.scss 파일을 만들어주고 app폴더에 가장 바..
Moostock(3) - Next.js 라우팅 (not found routes, Dynamic routes, layout 등등..)
·
개발💻/Moostock
오늘은 Next js의 라우팅 하는 방법에 대해 알아보겠다 노마드 선생님의 무료 강의를 듣고 내가 필요하고 중요하다고 생각하는 부분들을 정리해 보겠다 혹시나 틀린 정보가 있으면 댓글에 남겨주시길... 기본 라우팅 next js를 배우다 보면 참 편리한 점들이 많은거 같다 라우팅을 공부하면서도 그런점을 많이 느꼈는데 일단 vue에서는 router.js에서 라우터를 관리하고 리액트에서는 app.js에서 라우터 설정을 해줬던거 같다 근데 Next에서는 폴더를 만들어서 그 안에 page.tsx 파일을 만들면 그 폴더명이 url이 된다 누가 생각해낸 아이디어인지 정말 참신한 방법이다 이게 말로만 해서는 잘 이해가 안될거다 일단 app 폴더 바로 밑에 있는 page.tsx는 '/' 이 Url로 갔을때 나타날 페이지..