7월 1주차 스프린트 회고 - 미국주식 주가조회 웹사이트

1일차

 

기획 단계.

 

1주일동안의 스프린트 주제를 정하는 거다보니 어디까지 해야될지 감도 잘 안 오고 어떤 걸 활용해야 될지도 잘 모르겠었다. 특히 API를 활용하여 웹사이트를 만들려고 컨셉을 잡았는데 비슷한 카테고리의 API임에도 각자 제공하는 정보도 너무 달랐고 고르는 데 애를 먹었다.

 

그래서 큰 주제만 정했다. 바로 '주식'

 

가장 관심이 가는 주제를 처음으로 스프린트 해봐야 의지가 잘 살아날 것 같아서 그렇게 정했다. 그래서 github이나 다른 public API들이 뭐가 있을까 찾아보다가 https://www.alphavantage.co/를 활용하기로 결정했다. 문서도 읽기 편해서 접근성이 좋았다. 그래서 여러 개의 데모 json 파일들을 둘러보며 마무리.

 

2일차

 

기획 + 삽 푸는 단계

 

json 파일의 형식은 이러했다.

기업의 심볼과 apikey를 주소로 입력 받아 전날 주가가 어떻게 마무리 됐는지 보여주는 형식이었다.

 

그래서 구성을 홈페이지 + 주가 검색 페이지 이렇게 2개로 하기로 결정했다.

 

사용할 기술스택

-Next.js

-Tailwind CSS

-Lottie Player

 

CSS 부분을 emotion을 활용해볼까 고민했는데 styled-component보다 class로 하는게 더 편해서 이번에는 Tailwind를 골랐다. 

 

create-next-app해서 폴더만 만들어주고 마무리

 

3일차

 

본격 개발 시작

 

먼저 레이아웃을 잡기로 했다.

 

TailBlock 라이브러리에서 헤더와 푸터를 가져와서 만들기로 했고 component로 따로 정리

그리고 뺄거 빼고 메뉴 이름만 수정해서 만든게 이런 형식

그리고 이제 홈페이지 가운데에 들어갈 부분 역시 TailBlock에서 Hero를 가져와서 수정해서 넣었다.

대충 주가검색페이지로 라우팅만 되게 Link 걸고 바로 넘어갔다.

 

이제 주가 검색 페이지 만드는 걸로 넘어가자.

API에서 제공해주는 정보들을 한국식으로 표현해주면 어떨까 생각했다.

그래서 용어를 한국어로 바꾸고 네이버 증권에서 보던 형식의 레이아웃을 응용해서 만들기로 했다.

단어들은 네이버 증권 홈페이지에서 사용하는 어휘들을 가져다가 썼고 왼쪽 티커 오른쪽에 주가 정보 이런 식으로 레이아웃을 구성했다.

 

그리고 티커를 입력받을 input 역시 만들어주었는데 이 부분에서 애를 많이 먹었다.

 

처음에는 SPY의 정보를 보여주고 그 다음에 티커를 useState를 활용해서 입력받는 것으로 했는데 enter를 누르는 순간 다시 입력값이 안 나오고 초기 설정값이 계속 나오는 것이었다. state를 활용한 렌더링 과정 순서에서 뭔가 껄끄럽지 않았다는 건 알았지만 해결책을 못 찾으니 답답했다. 그렇게 3일차 마무리.

 

4일차

계속 개발 진행

 

3일차에서 생겼던 문제를 해결하는데 처음에 포커스를 뒀다. 내가 생각했던 논리는 이랬다.

 

inputValue를 input에서 받은 다음 submit을 하면->inputValue를 ticker 변수에 저장->

ticker가 API 주소에 들어가 해당하는 json 호출 -> json 파일 파싱하여 페이지 렌더링

 

근데 저장 후 데이터를 불러오는 과정이 내가 생각했던 게 아니였다. useState를 활용하면서 setState로 저장하는 부분이 페이지를 새로 고침해버렸던 것이다. 그러니깐 초기값으로 설정했던 SPY에서 inputValue로 변수가 바뀌는 게 아니라 다시 SPY를 선언하는 과정의 반복이었던 것이다.

 

리액트 훅 생명주기와 관련된 부분인 것 같은데 지금도 어렴풋이나마 이해를 하고 있어 좀 더 공부할 필요가 있는 부분. 

 

아무튼 그래서 이걸 어떻게 해결했냐?

그냥 ticker 부분은 훅을 안 썼다.

 

  function handleOnSubmit(event) {
    event.preventDefault();
    ticker = inputValue.toUpperCase();
    fetchData(ticker);
    fetchNewsData(ticker);
    setFirstFetch((prev) => {
      !prev;
    });
    setTimeout(() => {
      setInputValue("");
    }, 50);
  }

setState로 안하고 그냥 등호(=)를 사용하여 바로 변수에 대입을 하는 것으로 했다.

그리고 ticker에 해당하는 데이터를 fetch하는 함수를 호출하고 0.05초 뒤에 InputValue를 비워주어 input을 깔끔하게 해주는 것으로 수정했다.

 

맨 뒤에 setTimeout도 사실 의문점이 있는 부분인데 그냥 눈속임으로 어찌저찌 한 것이다.

 

저걸 바로 호출하니깐 fetchData 함수보다 뒤에 있음에도 불구하고 ticker가 비어있는 inputValue로 인식하는 것이었다.

(근데 지금 회고록 쓰면서 삭제하고 했더니 다시 되네. 훅 쓰면서 안 됐던 부분인데 훅 빼니깐 바로 해결된 걸로)

 

그렇게 submit 부분에서 데이터를 fetch하고 컴포넌트에 대입하여 페이지가 렌더링되는 과정을 수정하였고 작동이 되었다. 그리고 CSS 부분을 수정하면서 마무리.

 

5일차

 

CSS 수정 및 뉴스 컨텐츠 추가

 

큰 페이지에 주가만 덩그러니 있으니 좀 심심해 보였다.

 

그래서 뉴스 컨텐츠를 추가하기로 했다.

API가 참 편하게 되어있어서 똑같이 ticker랑 API key만 넣어주면 알아서 뉴스들을 가져다 준다.

 

레이아웃은 yahoo finance의 레이아웃을 참고해서 만들었다.

뉴스 데이터를 받아올 때 imageURL도 있어서 그 부분도 같이 해볼려고 했는데 next image가 자꾸 이미지 소스를 config 파일에 일일이 넣어달라 그래서 과감히 삭제했다. 

 

그래서 title, author, summary 이렇게 세 개의 정보를 표시하는 간단한 뉴스란을 만들었다. 

이미지가 없는게 많이 아쉽긴 한데 그래도 아예 비어있는 것보다는 낫다는 개인적 의견ㅎㅎ

 

그 외에 CSS로는 마진이나 패딩, 반응형 css를 수정했고 주가표시란에 전일대비 상승했을 때 빨간색, 하락했을 때 파란색을 쓰도록 조건부 css를 추가했다. 화살표 방향도 조건부로 적용.

 

그렇게 해서 마무리한 후 vercel에 간단하게 배포 완료.

https://clipstock.vercel.app/

클립스탁

홈페이지 스샷

 

배웠던 점

- 새로운 API를 적용하여 docs을 읽으며 사용법을 익혔다.

- 데이터 fetch를 함수로 적용시켜 원하는 시점에 적용

- 저번주에 배웠던 Lottie 적용 이제는 확실하게 가능

- next에서 getInitialProps로 페이지 렌더링 초기에만 데이터를 불러올 수 있다.

 

아쉬운 점

- 주가를 맨처음 조회할 때 데이터를 불러오는 과정에서 NaN으로 표시되는 버그가 있다.

- 뉴스 Image를 적용시키지 못한 것 (이거는 아직 모르는 거일 확률이 매우 높아보여 더 찾아봐야됨)

- 검색내역을 저장할 수 있는 기능을 추가할 수 있지 않을까?

- 무조건 티커명으로 검색해야하는데 회사 이름을 검색하면 티커가 자동완성되는 기능 추가 여지

- 데이터 표출을 티커뿐만 아니라 회사명도 같이 보여주고 싶은데 하지 못했음 (ex AAPL 애플 or  AAPL Apple 이런 식으로)