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에 '?' 이 물음표 뒤에 붙은 것들이다 그래서 원래는 테슬라 ..
Moostock(8) - next.js에서 firestore이용하기 (토큰 저장하기)
·
개발💻/Moostock
이제 종목들의 일봉도 보여줄 수 있게되었고, 다음 스텝을 생각해봤다 나는 지금 한투 오픈 api를 이용하고 있는데 이게 개인키 2개를 보내면 24시간동안 쓸수있는 접근 토큰을 준다 이 3가지 키를 알고있어야 시세등 여러가지 api를 호출할 수 있다 나는 db, 백엔드 지식이 거의 없다시피 하기때문에 (싸피에서 장고를 배웠지만 기억이 하나도 안남 ㅎ..) 그냥 하루마다 포스트맨으로 접근 토큰을 받아서 직접 넣어주고 테스트를 했다 아~~주 만약에 뭐 배포를 한다거나 할때 직접 매일 직접 넣어줄수는 없으니 방법을 모색했다 여러가지 검색을 하다가 https://www.youtube.com/watch?v=5mAgMFNhTBY&list=WL&index=1&t=1862s 요 영상을 찾게되었다 next 버전이 13이긴..
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폴더에 가장 바..
2024년 3월 아무거나 일상
·
일상☀️/그냥 이것 저것 아무거나🌈
요즘 뭐 이래저래 할것도 있고 귀찮기도 해서 블로그에 좀 소홀했다 그냥 3월 일상을 기록해보겠다 처음으로 등갈비 찜? 요리에 도전했다 뼈에 붙은 고기는 뭘 해도 대충 맛있는거같다 근데 내가 해봤던 요리중에 이게 제일 맛있었다 ㅎㅎ 3월을 맞이해서 주말에 놀러 나갔는데 3월이였지만 찬바람이 정말 많이 불고 추웠다 오랜만에 대성성 가서 쌀국수 먹고 카페 가려고 돌아다니다가 우연히 발견해서 들어간 카페겸 바?? 에 갔다 입구만 보면 정말 별거 없어보이는데 막상 들어가보면 근사하다 느낌있는 음악을 틀어주시고 사진엔 없는데 자동으로 내려주는 커피 머신 대신 직접 손으로 압력을 가해서 내리는 도구가 있어서 신기했다 그러고 버스타고 오다가 동묘 옆쪽에 문구거리가 있길래 구경하러 갔다 생각보다 문구점들이 많았고 이날이..
[프로그래머스] 단어변환 Python
·
개발💻/알고리즘
나름 평범한? dfs bfs 문제인거같은데 고민이 된게 방문한 단어를 기록하는 visited를 함수를 돌면서 들고다녀야 하나 그냥 함수 밖에 두고 사용해도 되나였다 함수 밖에두고 실행했더니 무한 재귀에 걸려 에러가 났다.. 그래서 결론은 visited도 들고 다녀야한다!! def solution(begin, target, words): answer = 0 answers = [] def search(count, keyword, visited): if keyword == target: answers.append(count) return for word in words: if word not in visited: diff_count = 0 for i in range(len(begin)): if keyword[..
[프로그래머스] 베스트앨범 Python
·
개발💻/알고리즘
그냥 내림차순 오름차순은 간단히 sort를 쓰면 되는거같은데 만약에 리스트가 [[a,2],[b,8],[c,1]] 이런식으로 있을때 특정 인덱스의 값으로 정렬하려면 어떻게해야할가?? sorted_arr = sorted(arr, key=lambda x: (x[1]) 요런식으로 하면 인덱스 1번째 값을 기준으로 정렬이 된다 위에 예시에서는 숫자가 작은순으로 될것이다 근데 첫번째 인덱스 값으로 정렬하고 만약 값이 같으면 0번째 인덱스 값으로 정렬하려면? sorted_arr = sorted(arr, key=lambda x: (x[1],x[0]) 이런식으로 하면 된다고 한다 아무튼 나는 이 문제를 만나서 거의 모든 정보를 넣은 배열을 만들고 적절하게 정렬하여 문제를 해결했다 (변수 이름 정하는게 젤 어려움.. ㅋㅋ..