Fact (사실) : 주요 사건에서 내가 취한 행동을 객관적으로 서술한다

• CSS 디자인, 배포

Feeling (느낌) : 그때 느꼈던 기분을 간략히 정리한다

• 피곤하다

Finding (교훈) : 사건에서 얻은 교훈을 적는다

• heroku를 통한 서버 배포 방법 및 DB 활용 방법을 배움
• Webpack에서 이미지를 로딩하는 과정에서 어려움을 겪음

Future action(행동) : 그래서 내가 앞으로 취할 행동을 미래형으로 적는다

• 마무리 작업 (Devlog에 기록)

To Do List (아래 직접 입력하기)

• 각 경제지표 별 가중치를 두어 점수를 매기고, 투자 가이드를 보여주기
• 추후 중요하게 봐야 할 지표 가이드 남기기
• 경기사이클과 현재 단계 보여주기

Labels (오른쪽에서 테마별로 각 1개, 총 2개 선택)

• Part : client, server, deploy
• 단계 : Bare Minimum, Advanced, Nightmare
• 시간 : 3h ~ 24h

Projects 선택

• 1차 기능구현

Milestone 선택

• 1차 기능구현

Fact (사실) : 주요 사건에서 내가 취한 행동을 객관적으로 서술한다

• 파이어베어스를 사용할 수 없어 서버 코드를 직접 작성
  • HTTPS 요청을 통해 Open API 데이터를 불러오기 위해서는 유료서비스인 function 기능 필요
• 금융감독원의 Open API 데이터는 JSON 형식이 아닌 PDF 파일의 경로를 제공하여, PDF 파일을 다운받고 JSON으로 변환하기 위한 작업 진행

Feeling (느낌) : 그때 느꼈던 기분을 간략히 정리한다

• 파이어베이스를 사용할 수 없어서 허탈했다. 파이어베이스 에러를 처리하기 위해 주말을 다 사용했는데 허무했다.
• Open API 데이터를 JSON 형식이 아니라 PDF 파일 경로를 URL 링크로 전달해줘서, 성의 없는 공공기관에 대해 화가 났다.

Finding (교훈) : 사건에서 얻은 교훈을 적는다

• 공공데이터를 활용하는 것이 쉬운 작업이 아니며, 공공기관의 일처리는 항상 그렇듯 답답하다.

Future action(행동) : 그래서 내가 앞으로 취할 행동을 미래형으로 적는다

• DB 테이블 보완 후 금융감독원 데이터를 입력하기
• 서버의 User API 구축하기
• 클라이언트 SPA 구현하기

진행 과정

Advanced 까지 기능 구현 (12/12 까지)

1주차

• 배포 방법 알아보기 : 파이어베이스
• 공공 API 통해 데이터 가져오기
• 웹 데이터 자동 업데이트 가능한지 확인하기
• 기본 백엔드 구축 (Express, MySQL)
• 국내 지표, 미국 지표, 글로벌 지표 페이지 제작

2주차

• 회원가입, 로그인, Oauth, 인증
• 국내 주식 종목 정보 제작

UI 디자인 (12/26 까지)

• 페이지별 UI 디자인

Nightmare 및 추가기능 구현 (1/9 까지)

• 개인별 관심종목 지정 및 확인

문제 상황 및 에러 로그

• 상황 : 루트페이지(/)를 제외한 나머지 페이지에서 새로고침 또는 URL에 주소를 입력하면 에러 발생
• 에러메세지 : 404 not found

원인 및 해결방안

• 원인 : 해당 URL로 GET 요청 시, 해당 URL이 서버에 없기 때문에 에러 발생
• 해결방안 : 웹팩에서 historyApiFallback 옵션을 사용하여, 설정된 URL 이외의 경로로 접근했을 때 404 응답 대신 index.html 제공

// webpack.config.js

devServer: {
  historyApiFallback: true,
},

To Do List (아래 직접 입력하기)

• 기능 시연하며 보여주기

Labels (오른쪽에서 테마별로 각 1개, 총 2개 선택)

• Part : client, server, deploy
• 단계 : Bare Minimum, Advanced, Nightmare
• 시간 : 3h ~ 24h

Projects 선택

• 1차 기능구현

Milestone 선택

• 1차 기능구현

오늘 프로젝트에 기여한 내용

• JavaScript로 HTML 엘리먼트를 만든 뒤 이벤트 할당
• 기존 Handlebar로 작성된 HTML 템플릿을 삭제하고, 이를 DOM 문법만으로 구현

오늘 프로젝트에서 힘들었던 점

• SPA 이므로 HTML 파일이 아닌 JS 또는 Handlebar로 HTML 엘리먼트를 만들어야 했음
• Handlebar 또는 JS의 string type으로는 HTML 엘리먼트를 만들 수 있으나, 이벤트 등 JS 코드를 동적으로 입력할 수 없었음
• 따라서 DOM 문법을 사용하여 해결

내일 해야 할 일

• 페이지 전환 시, 이전 DOM 엘리먼트는 삭제하기 (string 타입은 이전 HTML 엘리먼트를 대체하는데, DOM을 사용하니 축적되버림)
• fetch를 통한 DB 데이터를 차트에 표시하기

To Do List (아래 직접 입력하기)

• User DB 테이블 제작
• 회원가입 API 제작
• 회원정보 수정 API 제작

Labels (오른쪽에서 테마별로 각 1개, 총 2개 선택)

• Part : client, server, deploy
• 단계 : Bare Minimum, Advanced, Nightmare
• 시간 : 3h ~ 24h

Projects 선택

• 1차 기능구현

Milestone 선택

• 1차 기능구현

오늘 프로젝트에 기여한 내용

• charts 표시가 안 되는 원인 발견 : hbs 파일 내 script 태그가 동작이 안 됨

오늘 프로젝트에서 힘들었던 점

• handbars의 원리를 이해하지 못해 의도한 기능 구현이 안 됨
• hbs 파일 내 script 태그가 동작하지 않음

내일 해야 할 일

• script 태그 문제 해결 후 chart 띄우기

오늘 프로젝트에 기여한 내용

• Open API로 불러온 데이터를 firestore에 입력하려고 했으나, 불가능하다는 것을 깨달음
• https 요청을 보내기 위해서는 유료 서비스인 functions를 사용해야 함
• 차라리 직접 node.js로 서버를 구현하고, heroku를 무료로 사용하는 것이 더 낫다고 판단

오늘 프로젝트에서 힘들었던 점

• firebase를 사용하기 위해 주말 시간을 모두 사용했으나, OPEN API의 https 요청 문제로 사용이 불가능해져서 마음이 힘들다.

내일 해야 할 일

• Node.js, MySQL로 서버를 직접 만들기

To Do List (아래 직접 입력하기)

• DB 데이터를 차트로 표현하기
• 기간 선택 기능 구현 : 하루, 일주일, 한달, 분기, 1년, 3년 또는 날짜 직접 입력하기
• 차트의 최소값 설정하기
• x축 날짜 정보를 깔끔하게 정리하기
• 크기 조정하기
• 연동되는 주가 정보 추가하기
• 절대값 또는 기울기에 따른 코멘트 넣기

Labels (오른쪽에서 테마별로 각 1개, 총 2개 선택)

• Part : client, server, deploy
• 단계 : Bare Minimum, Advanced, Nightmare
• 시간 : 3h ~ 24h

Projects 선택

• 1차 기능구현

Milestone 선택

• 1차 기능구현

Fact (사실) : 주요 사건에서 내가 취한 행동을 객관적으로 서술한다

• 노마드 코더 Youtube에서 Vanilla JS를 통한 input 구현 방법을 참고했다.
• Vanilla JS로 라우팅을 통해 SPA 구현 방법을 찾아보았으나, 아직 답을 얻지 못했다.

Feeling (느낌) : 그때 느꼈던 기분을 간략히 정리한다

• 새로운 지식과 기술을 배울 수 있어서 설렌다.
• 그러나 아직 방법을 찾지 못해서 답답하다.

Finding (교훈) : 사건에서 얻은 교훈을 적는다

• React 프레임워크의 편리함을 알 수 있었다.

Future action(행동) : 그래서 내가 앞으로 취할 행동을 미래형으로 적는다

• Vanilla JS로 SPA 구현 방법 빨리 찾기
• 파이어베이스로 배포 진행하기
• 주말엔 TypeScript 학습하고 다음주부터 적용하기

오늘 프로젝트에 기여한 내용

• 마이페이지 마무리
• 미국 실업률 차트 추가
• 국내 지표 해석 (서버/클라이언트)

오늘 프로젝트에서 힘들었던 점

• 데이터를 해석하는 로직을 만드는 것
• DB에서 원하는 date 데이터를 조건으로 자료를 불러오는 것 (between date~date 전날 문법으로 불러옴)
• DB에서 불러온 데이터를 함수 내에서 리턴하는 것 : async await 문법을 상위 컴포넌트 함수에서도 사용해주기

추후 내일 해야 할 일

• 미국 지표 해석, Opinion 페이지 제작, 랜딩페이지 제작 (월)
• 차트 페이지 CSS, 랜딩페이지 CSS, Opinion 페이지 CSS (화, 수)

To Do List (아래 직접 입력하기)

• DB 데이터를 차트로 표현하기
• 기간 선택 기능 구현 : 하루, 일주일, 한달, 분기, 1년, 3년 또는 날짜 직접 입력하기
• 차트의 최소값 설정하기
• x축 날짜 정보를 깔끔하게 정리하기
• 크기 조정하기
• 연동되는 주가 정보 추가하기
• 절대값 또는 기울기에 따른 코멘트 넣기

Labels (오른쪽에서 테마별로 각 1개, 총 2개 선택)

• Part : client, server, deploy
• 단계 : Bare Minimum, Advanced, Nightmare
• 시간 : 3h ~ 24h

Projects 선택

• 1차 기능구현

Milestone 선택

• 1차 기능구현

오늘 프로젝트에 기여한 내용

• 미국, 상품 차트 해석 추가
• 투자 의견 페이지 완성
• Navbar CSS 디자인

오늘 프로젝트에서 힘들었던 점

• CSS 통한 차트 크기 조정
• 경기사이클을 시각화해서 보여주기 (미완성)

내일 해야 할 일

• CSS 디자인 : 차트페이지, 투자의견 페이지, 랜딩페이지 (화)
• 배포 (수)
• UX 개선 작업 (목)

To Do List (아래 직접 입력하기)

• 로그인 기능 추가

Labels (오른쪽에서 테마별로 각 1개, 총 2개 선택)

• Part : client, server, deploy
• 단계 : Bare Minimum, Advanced, Nightmare
• 시간 : 3h ~ 24h

Projects 선택

• 1차 기능구현

Milestone 선택

• 1차 기능구현

문제 상황 및 에러 로그

• 상황 : firebase에서 제공하는 코드를 script 태그에 넣어줬으나 에러 발생
• 에러메세지 : Uncaught SyntaxError: Cannot use import statement outside a module

<script>
// Import the functions you need from the SDKs you need
import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.6.0/firebase-app.js';
import { getAnalytics } from 'https://www.gstatic.com/firebasejs/9.6.0/firebase-analytics.js';
... 생략

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
</script>

원인 및 해결방안

• 해결방안 : ES6부터 JavaScript에서 모듈을 사용하려면, script 태그 type 속성에 "module" 을 입력해야 함
• 관련링크 : https://ko.javascript.info/modules-intro
• 블로그 링크 : https://gwang920.github.io/error/js-error(1)/

<script type="module">

오늘 프로젝트에 기여한 내용

• CSS 디자인 : 차트페이지, 투자 의견 페이지
• Heroku와 Netlify 통한 배포

오늘 프로젝트에서 힘들었던 점

• Heroku 배포 시 서버와 DB를 연동하는 과정에러 에러 발생

내일 해야 할 일

• 랜딩페이지 만들기

• Footer 만들기

• 로고 제작

• 홈 페이지 외 새로고침 했을때 오류 안뜨게 하기

• 로그인 후 랜딩페이지 이동 등

• 마이페이지 회원정보 수정 기능

• 로딩 화면 만들기

• 404 에러 페이지 만들기

To Do List (아래 직접 입력하기)

1. 파이어베이스를 통해 배포 진행하기
2. 배포 방식에 따른 서버 구상하기

Labels (오른쪽에서 테마별로 각 1개, 총 2개 선택)

• 단계 : Bare Minimum, Advanced, Nightmare
• Part : client, server, deploy
• 시간 : 3h ~ 24h

Projects 선택

Milestone 선택

Fact (사실) : 주요 사건에서 내가 취한 행동을 객관적으로 서술한다

• 파이어베이스 사용 여부에 따라서 클라이언트 코드까지 바뀌기 때문에, 백엔드 쪽을 먼저 진행해야 하는 상황
• Open API 데이터를 불러올 수 있어야 하며, 가능하면 무료 배포이면 좋겠다.
• 파이어베이스에서 Open API 데이터 사용이 가능하면, 서버 구축 및 배포가 용이한 파이어베이스를 사용하자
• 파이어베이스 사용이 불가능하면, Node.js와 MySQL 사용 후 heroku로 무료배포를 진행하자
• 금융감독원의 API key 발급은 완료했다.

Feeling (느낌) : 그때 느꼈던 기분을 간략히 정리한다

• 정확한 가이드가 있는 것이 아니라서 방법을 찾기 위한 시행착오가 많아 답답하다.

Finding (교훈) : 사건에서 얻은 교훈을 적는다

• 클라이언트 정적 파일 배포를 위한 방법은 다양하다. (ex. GitHub, Netlify, Vercel)
• Open API 데이터는 XML, JSON 형식으로 다운 받을 수 있으며, XML 데이터는 JSON으로 파싱이 필요하다.
• heroku를 사용하면 서버 사이드의 무료 배포가 가능하다.
• Node.js 서버에서 Open API를 불러오려면 request 모듈이 필요한데, 서버는 요청을 먼저 받는 쪽이기 때문에 이것이 필요하다고 생각된다.
• 파이어베이스의 firestore에 데이터를 CRUD하기 위한 문법이 별개로 존재하는데, 이는 학습이 필요하다.

Future action(행동) : 그래서 내가 앞으로 취할 행동을 미래형으로 적는다

• 파이어베이스를 통해 Open API 데이터 넣어보기 (실패시 Node.js와 MySQL 사용하기)
• 성공하면 파이어베이스로 서버 구축하기
• TypeScript 공부하고 다음주부터 사용하기

To Do List (아래 직접 입력하기)

• DB 데이터를 차트로 표현하기
• 기간 선택 기능 구현 : 하루, 일주일, 한달, 분기, 1년, 3년 또는 날짜 직접 입력하기
• 차트의 최소값 설정하기
• x축 날짜 정보를 깔끔하게 정리하기
• 크기 조정하기
• 연동되는 주가 정보 추가하기
• 절대값 또는 기울기에 따른 코멘트 넣기

Labels (오른쪽에서 테마별로 각 1개, 총 2개 선택)

• Part : client, server, deploy
• 단계 : Bare Minimum, Advanced, Nightmare
• 시간 : 3h ~ 24h

Projects 선택

• 1차 기능구현

Milestone 선택

• 1차 기능구현

To Do List (아래 직접 입력하기)

1. 웹팩 사용하여 8080포트로 연결하기

Labels (오른쪽에서 테마별로 각 1개, 총 2개 선택)

• Part : client, server, deploy
• 단계 : Bare Minimum, Advanced, Nightmare
• 시간 : 3h ~ 24h

Projects 선택

• 1차 기능구현

Milestone 선택

• 1차 기능구현

오늘 프로젝트에 기여한 내용

• 랜딩페이지 로고 삽입
• Footer 만들기
• 로그인/로그아웃 후 랜딩페이지 자동 이동

오늘 프로젝트에서 힘들었던 점

• 랜딩페이지 외의 페이지에서 새로고침 시 오류 발생 (아직 해결 미완)

추후 해야 할 일

• 홈 페이지 외 새로고침 했을때 오류 안뜨게 하기
• 마이페이지 기능 넣기
• 로딩 화면 만들기
• 404 에러 페이지 만들기

문제 상황 및 에러 로그

• 에러메세지 : Firebase App named '[DEFAULT]' already exists (app/duplicate-app) [duplicate]

원인 및 해결방안

• 원인 : initializing 을 2번 했기 때문
• 해결방안 : 중복된 코드 지우기
• 관련 링크 : https://stackoverflow.com/questions/43331011/firebase-app-named-default-already-exists-app-duplicate-app

import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.6.0/firebase-app.js';
const app = initializeApp(firebaseConfig);

To Do List (아래 직접 입력하기)

1. SPA 틀 구성하기
2. 라우팅 진행

Labels (오른쪽에서 테마별로 각 1개, 총 2개 선택)

• Part : client, server, deploy
• 단계 : Bare Minimum, Advanced, Nightmare
• 시간 : 3h ~ 24h

Projects 선택

• 1차 기능구현

Milestone 선택

• 1차 기능구현

To Do List (아래 직접 입력하기)

• 카카오 소셜 로그인 기능 구현
• 구글 소셜 로그인 기능 구현

Labels (오른쪽에서 테마별로 각 1개, 총 2개 선택)

• Part : client, server, deploy
• 단계 : Bare Minimum, Advanced, Nightmare
• 시간 : 3h ~ 24h

Projects 선택

• 1차 기능구현

Milestone 선택

• 1차 기능구현

문제 상황 및 에러 로그

• 상황 : 클라이언트에서 Open API url로 get 요청 시 CORS 에러 발생
• 에러메세지 : 'url' has been blocked by CORS policy

fetch('https://www.fss.or.kr/fss/kr/openApi/api/fnncMrkt.jsp? apiType=json&startDate=2021-11-01&endDate=2021-11-30&authKey=f8216ed544e394b00cc96bbc9a67a606')
.then((res)=>console.log(res))
.catch((err)=>console.log(err))

원인 및 해결방안

• 원인 : 클라이언트에서 서버로 요청할 때 오리진이 다른 경우 에러 발생

• 해결방안 : 서버에서 서버로 요청할 경우 CORS 에러가 발생하지 않음

  • 서버를 직접 만들어 API 요청하기
  • "https://cors-anywhere.herokuapp.com/"으로 프록시 서버 사용하기
  • "https://app.cors.bridged.cc/ko"를 통한 프록시 서버도 사용 가능
  • 프록시 서버 직접 만들기

fetch('https://cors-anywhere.herokuapp.com/https://www.fss.or.kr/fss/kr/openApi/api/fnncMrkt.jsp? apiType=json&startDate=2021-11-01&endDate=2021-11-30&authKey=f8216ed544e394b00cc96bbc9a67a606')
.then((res)=>console.log(res))
.catch((err)=>console.log(err))

오늘 프로젝트에 기여한 내용

• DB 데이터를 불러와 차트에 표시
• DB에 저장된 데이터를 모두 차트로 구현
• 관련 서버 API 제작

오늘 프로젝트에서 힘들었던 점

• 차트의 사이즈 조정 (추가 작업 필요)

내일 해야 할 일

• 유저 기능 추가
• 추가 공공 데이터 불러오기 (해외)
• 차트 해석 로직 구상하기
• 랜딩페이지 제작

오늘 프로젝트에 기여한 내용

• 마이페이지의 회원정보 수정 및 탈퇴 기능 구현

오늘 프로젝트에서 힘들었던 점

• 회원정보 수정 시 새로운 token을 실시간으로 발급하여 local storage에 저장시키는 것

내일 해야 할 일

• 홈 페이지 외 새로고침 했을때 오류 안뜨게 하기
• 로딩 화면 만들기
• 404 에러 페이지 만들기
• 반응형 웹

To Do List (아래 직접 입력하기)

• 회원가입 페이지 제작
• 이메일 인증

Labels (오른쪽에서 테마별로 각 1개, 총 2개 선택)

• Part : client, server, deploy
• 단계 : Bare Minimum, Advanced, Nightmare
• 시간 : 3h ~ 24h

Projects 선택

• 1차 기능구현

Milestone 선택

• 1차 기능구현

Fact (사실) : 주요 사건에서 내가 취한 행동을 객관적으로 서술한다

• DOM 문법으로 HTML 엘리먼트를 생성하고, 이후 JS 코드를 입력할 수 있었다.
• Handlebar 또는 JS의 string type으로 HTML 엘리먼트를 생성했을 때에는 JS파일을 연동하여 동적 기능 구현이 되지 않았다.

Feeling (느낌) : 그때 느꼈던 기분을 간략히 정리한다

• 일주일 넘게 해결하지 못한 부분이 해결할 수 있어서 기쁘고 마음이 놓였다.

Finding (교훈) : 사건에서 얻은 교훈을 적는다

• 처음에는 Vanilla JS 코드 샘플을 가져와 사용했는데, 이해하지 못했기 때문에 원하는 기능을 구현하기 위한 코드 변형이 어려웠다.
• 이해가 부족하다 보니, 해결하기 위한 문제와 원인 자체를 파악하는 것이 힘들었다.
• 문제와 원인을 최대한 작은 단위로 쪼개야겠다고 느꼈다. 예상되는 원인과 해결책을 하나씩 실행하다 보니 결국 해결되었다.

Future action(행동) : 그래서 내가 앞으로 취할 행동을 미래형으로 적는다

• 이제부터 브라우저 화면에 보이는 코드를 짜야겠다.

To Do List (아래 직접 입력하기)

• 차트에 대한 DB 스키마 구현
• 차트에 대한 API 구현하기

Labels (오른쪽에서 테마별로 각 1개, 총 2개 선택)

• Part : client, server, deploy
• 단계 : Bare Minimum, Advanced, Nightmare
• 시간 : 3h ~ 24h

Projects 선택

• 1차 기능구현

Milestone 선택

• 1차 기능구현

오늘 프로젝트에 기여한 내용

• 기타 데이터 DB에 추가하고 브라우저에 차트로 시각화 (FRED, Investing, Nasdaq, 금융투자협회 데이터)

오늘 프로젝트에서 힘들었던 점

• 엑셀 파일의 데이터를 DB에 입력하는 작업을 처음 해봄

내일 해야 할 일

• 유저 기능 추가
• 차트 해석 로직 구상
• 회원 페이지 구상
• 랜딩페이지 구상

To Do List (아래 직접 입력하기)

• 로그인 API 구현
• 로그아웃 API 구현

Labels (오른쪽에서 테마별로 각 1개, 총 2개 선택)

• Part : client, server, deploy
• 단계 : Bare Minimum, Advanced, Nightmare
• 시간 : 3h ~ 24h

Projects 선택

• 1차 기능구현

Milestone 선택

• 1차 기능구현

문제 상황 및 에러 로그

• 상황 : 공식문서에서 제공한 코드를 사용했으나, firebase app 모듈을 불러오지 못함
• 에러메세지 : Uncaught TypeError: Failed to resolve module specifier "firebase/app". Relative references must start with either "/", "./", or "../".

import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";

원인 및 해결방안

• 원인 : import {} from "package" 코드는 웹팩 등의 번들러를 사용할 때 유효함
  • 특히 파이어베이스 v9는 모듈 번들러를 지원하데 초점을 맞추고 있다고 함
• 원인 관련 링크 : https://stackoverflow.com/questions/69230383/failed-to-resolve-module-specifier-firebase-app
• 해결방안 : "from" 뒤에 url을 통해 불러오기
• 공식 문서 링크 : https://firebase.google.com/docs/web/learn-more?hl=ko#available-libraries

import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.6.0/firebase-app.js';
import { getAnalytics } from 'https://www.gstatic.com/firebasejs/9.6.0/firebase-analytics.js';

프로젝트에 기여한 내용

• 웹팩을 사용하여 번들링 및 8080 포트 설정
• history 객체를 통한 SPA 구현

프로젝트에서 힘들었던 점

• 이전에는 React만 쓰다보니 클라이언트 쪽에서도 port를 지정해야한다는 생각을 못해서 index.html 파일로만 SPA 구현하며 시행착오
• 처음에는 express 사용 → 모든 JS, CSS 파일을 일일이 연결시키려다가, 웹팩을 사용해야겠다고 마음먹기까지 시간 소요
• 웹팩 사용 과정에서 mode 에러 및 hbs 에러 발생

내일 해야 할 일

• 페이지별 차트 표시하기
• 추가 공공 데이터 불러오기
• 데이터를 클라이언트 쪽에 저장할 수 있는지 방법 찾기 (로컬 스토리지 등)

Fact (사실) : 주요 사건에서 내가 취한 행동을 객관적으로 서술한다

• 프로젝트과 학습 계획을 작성했다.

Feeling (느낌) : 그때 느꼈던 기분을 간략히 정리한다

• 계획을 실행할 실력이 아직 부족해서 답답하다.
• 코딩 테스트는 아직 준비가 되어 있지 않아서 막막하다.

Finding (교훈) : 사건에서 얻은 교훈을 적는다

• 프로젝트에 필요한 학습 병행이 필요하다.

Future action(행동) : 그래서 내가 앞으로 취할 행동을 미래형으로 적는다

• React 없이 Vanilla Javascript로 프로젝트를 진행하기 위해 필요한 지식 학습하기
• 능력이 불가능하다면 React 사용하기
• API를 활용해 데이터를 불러오고 실시간으로 연동하기 위해 구글링하기
• 코딩테스트는 하루에 2시간 이상 공부하기

오늘 프로젝트에 기여한 내용

• 서버의 DB 스키마 테이블 보완
• 금융감독원 Open API Key 발급 후 DB에 데이터 넣기 위한 코드 작성

오늘 프로젝트에서 힘들었던 점

• API를 통해 요청한 금융데이터가 JSON이 아닌 PDF 파일 경로가 URL 형식으로 응답이 옴
• PDF파일을 다운받고 JSON으로 해싱하여, 필요한 데이터를 필터링하는데 시간 소요

내일 해야 할 일

• 금융데이터에 맞에 DB 스키마 보완 후 데이터 입력하기
• User API 작성하기
• SPA 구현하기

오늘 프로젝트에 기여한 내용

• 새로고침 시 404 에러가 뜨는 문제 해결

오늘 프로젝트에서 힘들었던 점

• 원인을 찾기가 어려워 해결이 어려웠음

추후 해야 할 일

• 로고 클릭 시 이동시키기
• slow 3G로 접근 시 로딩처리
• 반응형 처리 : 햄버거 메뉴까지는 구현
• Footer 바닥에 붙이기
• 페이지 전체적으로 동적 요소 추가하기
• 유효성 검사 등 에러 시 띄우기

Fact (사실) : 주요 사건에서 내가 취한 행동을 객관적으로 서술한다

• React 프레임워크를 사용할 지, Vanilla JavaScript를 사용할지 결정하기 위해 코드스테이츠에 이슈쉐어링으로 문의를 진행했다.
• SR을 마무리하고 package.json에서 기술 스택에 대한 기본 세팅 진행했다.
• TypeScript를 다운받고, tsconfig.json을 설정했다.

Feeling (느낌) : 그때 느꼈던 기분을 간략히 정리한다

• 방향성이 잡히고 있다는 생각이 들었다.
• 새로운 커리큘럼과 스케줄이 혼란스러웠지만, 여기서 어떻게 시간을 주도적으로 사용할 지 감이 오는 것 같다.

Finding (교훈) : 사건에서 얻은 교훈을 적는다

• 스타트업은 바로 새로운 서비스를 만들 수 있는 프레임워크를 선호
• 큰 기업들은 기존 서비스에서 원리를 이해하고 내부 개선을 잘하는 사람이 필요
• 따라서 이번 프로젝트는 React를 사용하지 않고 Vanilla JavaScript를 사용하고자 한다.
• 동시에 TypeScript도 사용할 계획이다.

Future action(행동) : 그래서 내가 앞으로 취할 행동을 미래형으로 적는다

• Vanilla JavaScript 내용 찾아보기
• TypeScript 내용 찾아보기
• 추가 학습 없이 당장 진행할 수 있는 서버부터 코드 작성하기
• 주중에 배포 진행해보기 : 파이어베이스 or Vercel 알아보기

To Do List (아래 직접 입력하기)

• 회원정보 수정 기능

Labels (오른쪽에서 테마별로 각 1개, 총 2개 선택)

• Part : client, server, deploy
• 단계 : Bare Minimum, Advanced, Nightmare
• 시간 : 3h ~ 24h

Projects 선택

• 1차 기능구현

Milestone 선택

• 1차 기능구현

To Do List (아래 직접 입력하기)

1. 금융감동원의 공공 데이터 API 가져오기
2. 웹 내용에 따라 자동 업데이트 가능한지 확인하기
3. 데이터를 데이터베이스에 넣는 방법 찾기

Labels (오른쪽에서 테마별로 각 1개, 총 2개 선택)

• Part : client, server, deploy
• 단계 : Bare Minimum, Advanced, Nightmare
• 시간 : 3h ~ 24h

Projects 선택

Milestone 선택

오늘 프로젝트에 기여한 내용

• 회원가입, 로그인, 로그아웃 API 제작
• 회원가입, 로그인 페이지 제작
• 마이페이지 제작중
• jwt 사용

오늘 프로젝트에서 힘들었던 점

• Vanilla Js에서 로그인 여부에 따라 NavBar 변경하기 : class명이 hidden인 HTML 요소는 CSS 의 display none 적용
• cookie 저장 장소 : local Storage 활용
• Local Storage 또는 cookie의 token이 서버로 전송되지 않음 : req.params에 담아보기

내일 해야 할 일

• 마이페이지 마무리
• 랜딩페이지 구상
• 차트 해석 로직 및 Opinion 페이지 구상

Additional context
Add any other context or screenshots about the feature request here.

오늘 프로젝트에 기여한 내용

• firebase를 통해 firestore 데이터를 입력하는 방법 찾기
• 관련 에러핸들링

오늘 프로젝트에서 힘들었던 점

• firebase 공식문서에서 제공하는 문법은 V9 는 웹팩 등 번듈러 사용을 전제로 하여 에러 발생
• JavaScript script 태그 내에서 모듈 사용 방법을 알지 못해서 에러 발생
• Open API를 fetch로 불러올 시 CORS 에러 발생

내일 해야 할 일

• Open API CORS 에러 해결
• TypeScript 학습하기 (벌써 지친다 ㅠㅠ)
• 바닐라 자바스크립트로 SPA 구현하기

문제 상황 및 에러 로그

• 상황 : firebase의 firestore에 데이터가 입력되지 않음
• 에러메세지 : Uncaught FirebaseError: Missing or insufficient permissions.

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if false;
    }
  }
}

원인 및 해결방안

• 원인 : firestore 데이터베이스에 접근 권한 허용이 안 됨
• 해결방안 : Cloud Firestore의 '규칙'에서 false를 true로 변경

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

오늘 프로젝트에 기여한 내용

• 랜딩페이지 제작
• 로고 제작

오늘 프로젝트에서 힘들었던 점

• Webpack 사용 시 CSS를 통해 불러온 이미지 파일 오류 발생

내일 해야 할 일

• Footer 만들기

• 홈 페이지 외 새로고침 했을때 오류 안뜨게 하기

• 로그인 후 랜딩페이지 이동 등

• 마이페이지 회원정보 수정 기능

• 로딩 화면 만들기

• 404 에러 페이지 만들기

오늘 프로젝트에 기여한 내용

• 금융감독원 Open API로 2020~2021 금융데이터 DB에 저장
  • KOSPI, KOSDAQ, DOW, 환율, 유가, 미국10년물 채권, 외국인 매매동향

오늘 프로젝트에서 힘들었던 점

• API 요청 링크를 통해 다운받은 PDF 파일을 JSON으로 변환할 경우, 파일마다 데이터의 위치가 달라서 코드 작성 시 애를 먹음

내일 해야 할 일

• Open API 요청 코드는 추후에 더 보완하기
• User API 작성하기
• SPA 구현하기

Fact (사실) : 주요 사건에서 내가 취한 행동을 객관적으로 서술한다

• 웹팩을 사용하여 번들링 후 8080 포트 연결
• history 객체를 통한 SPA 라우팅 구현
• hbs 파일을 통한 HTML 템플릿 구현

Feeling (느낌) : 그때 느꼈던 기분을 간략히 정리한다

• 개념 이해부터 구현까지 어려웠는데, 리액트 없이 구현해서 뿌듯했다.

Finding (교훈) : 사건에서 얻은 교훈을 적는다

• window 객체를 활용하여 코드를 작성하는 방법을 더 학습해야겠다.
• 리액트를 사용했을 땐 몰랐는데 클라이언트쪽에서도 포트 연결을 해야 한다.
• 코드 작성 과정에서 번들러 사용의 유용성을 느꼈다.

Future action(행동) : 그래서 내가 앞으로 취할 행동을 미래형으로 적는다

• 각 페이지 기능 구현 (클라이언트)
• 랜딩페이지 UI 디자인 (기획 단계에서 누락)
• 회원 기능 추가 (서버, 클라이언트)