basicinvest's Issues
[22.01.04~05] Devlog - 배포, 차트 페이지 디자인
오늘 프로젝트에 기여한 내용
- CSS 디자인 : 차트페이지, 투자 의견 페이지
- Heroku와 Netlify 통한 배포
오늘 프로젝트에서 힘들었던 점
- Heroku 배포 시 서버와 DB를 연동하는 과정에러 에러 발생
내일 해야 할 일
-
랜딩페이지 만들기
-
Footer 만들기
-
로고 제작
-
홈 페이지 외 새로고침 했을때 오류 안뜨게 하기
-
로그인 후 랜딩페이지 이동 등
-
마이페이지 회원정보 수정 기능
-
로딩 화면 만들기
-
404 에러 페이지 만들기
[Task] 회원가입 페이지
To Do List (아래 직접 입력하기)
- 회원가입 페이지 제작
- 이메일 인증
Labels (오른쪽에서 테마별로 각 1개, 총 2개 선택)
- Part : client, server, deploy
- 단계 : Bare Minimum, Advanced, Nightmare
- 시간 :
3h
~24h
Projects 선택
- 1차 기능구현
Milestone 선택
- 1차 기능구현
[Task] 로그인/로그아웃 서버 기능 구현하기
To Do List (아래 직접 입력하기)
- 로그인 API 구현
- 로그아웃 API 구현
Labels (오른쪽에서 테마별로 각 1개, 총 2개 선택)
- Part : client, server, deploy
- 단계 : Bare Minimum, Advanced, Nightmare
- 시간 :
3h
~24h
Projects 선택
- 1차 기능구현
Milestone 선택
- 1차 기능구현
[Task] 유저 정보에 대한 서버 기능 구현하기
To Do List (아래 직접 입력하기)
- User DB 테이블 제작
- 회원가입 API 제작
- 회원정보 수정 API 제작
Labels (오른쪽에서 테마별로 각 1개, 총 2개 선택)
- Part : client, server, deploy
- 단계 : Bare Minimum, Advanced, Nightmare
- 시간 :
3h
~24h
Projects 선택
- 1차 기능구현
Milestone 선택
- 1차 기능구현
[22.01.06] 회고
Fact (사실) : 주요 사건에서 내가 취한 행동을 객관적으로 서술한다
- CSS 디자인, 배포
Feeling (느낌) : 그때 느꼈던 기분을 간략히 정리한다
- 피곤하다
Finding (교훈) : 사건에서 얻은 교훈을 적는다
- heroku를 통한 서버 배포 방법 및 DB 활용 방법을 배움
- Webpack에서 이미지를 로딩하는 과정에서 어려움을 겪음
Future action(행동) : 그래서 내가 앞으로 취할 행동을 미래형으로 적는다
- 마무리 작업 (Devlog에 기록)
[21.12.09~14] Devlog - 웹팩 및 SPA 구현
프로젝트에 기여한 내용
- 웹팩을 사용하여 번들링 및 8080 포트 설정
- history 객체를 통한 SPA 구현
프로젝트에서 힘들었던 점
- 이전에는 React만 쓰다보니 클라이언트 쪽에서도 port를 지정해야한다는 생각을 못해서 index.html 파일로만 SPA 구현하며 시행착오
- 처음에는 express 사용 → 모든 JS, CSS 파일을 일일이 연결시키려다가, 웹팩을 사용해야겠다고 마음먹기까지 시간 소요
- 웹팩 사용 과정에서 mode 에러 및 hbs 에러 발생
내일 해야 할 일
- 페이지별 차트 표시하기
- 추가 공공 데이터 불러오기
- 데이터를 클라이언트 쪽에 저장할 수 있는지 방법 찾기 (로컬 스토리지 등)
[Task] 웹팩 사용하기
To Do List (아래 직접 입력하기)
- 웹팩 사용하여 8080포트로 연결하기
Labels (오른쪽에서 테마별로 각 1개, 총 2개 선택)
- Part : client, server, deploy
- 단계 : Bare Minimum, Advanced, Nightmare
- 시간 :
3h
~24h
Projects 선택
- 1차 기능구현
Milestone 선택
- 1차 기능구현
[Task] 소셜 로그인 기능 구현
To Do List (아래 직접 입력하기)
- 카카오 소셜 로그인 기능 구현
- 구글 소셜 로그인 기능 구현
Labels (오른쪽에서 테마별로 각 1개, 총 2개 선택)
- Part : client, server, deploy
- 단계 : Bare Minimum, Advanced, Nightmare
- 시간 :
3h
~24h
Projects 선택
- 1차 기능구현
Milestone 선택
- 1차 기능구현
[22.01.06] Devlog
오늘 프로젝트에 기여한 내용
- 랜딩페이지 제작
- 로고 제작
오늘 프로젝트에서 힘들었던 점
- Webpack 사용 시 CSS를 통해 불러온 이미지 파일 오류 발생
내일 해야 할 일
-
Footer 만들기
-
홈 페이지 외 새로고침 했을때 오류 안뜨게 하기
-
로그인 후 랜딩페이지 이동 등
-
마이페이지 회원정보 수정 기능
-
로딩 화면 만들기
-
404 에러 페이지 만들기
[21.12.24~26] Devlog - 브라우저에 차트 표시
오늘 프로젝트에 기여한 내용
- DB 데이터를 불러와 차트에 표시
- DB에 저장된 데이터를 모두 차트로 구현
- 관련 서버 API 제작
오늘 프로젝트에서 힘들었던 점
- 차트의 사이즈 조정 (추가 작업 필요)
내일 해야 할 일
- 유저 기능 추가
- 추가 공공 데이터 불러오기 (해외)
- 차트 해석 로직 구상하기
- 랜딩페이지 제작
[22.01.27] Devlog - 새로고침 시 404 에러 해결
오늘 프로젝트에 기여한 내용
- 새로고침 시 404 에러가 뜨는 문제 해결
오늘 프로젝트에서 힘들었던 점
- 원인을 찾기가 어려워 해결이 어려웠음
추후 해야 할 일
- 로고 클릭 시 이동시키기
- slow 3G로 접근 시 로딩처리
- 반응형 처리 : 햄버거 메뉴까지는 구현
- Footer 바닥에 붙이기
- 페이지 전체적으로 동적 요소 추가하기
- 유효성 검사 등 에러 시 띄우기
[22.01.27] 에러핸들링 - 새로고침 시 404 에러 해결
문제 상황 및 에러 로그
- 상황 : 루트페이지(/)를 제외한 나머지 페이지에서 새로고침 또는 URL에 주소를 입력하면 에러 발생
- 에러메세지 : 404 not found
원인 및 해결방안
- 원인 : 해당 URL로 GET 요청 시, 해당 URL이 서버에 없기 때문에 에러 발생
- 해결방안 : 웹팩에서 historyApiFallback 옵션을 사용하여, 설정된 URL 이외의 경로로 접근했을 때 404 응답 대신 index.html 제공
// webpack.config.js
devServer: {
historyApiFallback: true,
},
[Task] 차트 관련 서버 기능 구현하기
To Do List (아래 직접 입력하기)
- 차트에 대한 DB 스키마 구현
- 차트에 대한 API 구현하기
Labels (오른쪽에서 테마별로 각 1개, 총 2개 선택)
- Part : client, server, deploy
- 단계 : Bare Minimum, Advanced, Nightmare
- 시간 :
3h
~24h
Projects 선택
- 1차 기능구현
Milestone 선택
- 1차 기능구현
[Task] 마이페이지
To Do List (아래 직접 입력하기)
- 회원정보 수정 기능
Labels (오른쪽에서 테마별로 각 1개, 총 2개 선택)
- Part : client, server, deploy
- 단계 : Bare Minimum, Advanced, Nightmare
- 시간 :
3h
~24h
Projects 선택
- 1차 기능구현
Milestone 선택
- 1차 기능구현
[21.12.03] 회고
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 공부하고 다음주부터 사용하기
[21.12.05] Devlog - function 기능 때문에 firebase는 사용 불가
오늘 프로젝트에 기여한 내용
- Open API로 불러온 데이터를 firestore에 입력하려고 했으나, 불가능하다는 것을 깨달음
- https 요청을 보내기 위해서는 유료 서비스인 functions를 사용해야 함
- 차라리 직접 node.js로 서버를 구현하고, heroku를 무료로 사용하는 것이 더 낫다고 판단
오늘 프로젝트에서 힘들었던 점
- firebase를 사용하기 위해 주말 시간을 모두 사용했으나, OPEN API의 https 요청 문제로 사용이 불가능해져서 마음이 힘들다.
내일 해야 할 일
- Node.js, MySQL로 서버를 직접 만들기
[Task] 로그인 페이지
To Do List (아래 직접 입력하기)
- 로그인 기능 추가
Labels (오른쪽에서 테마별로 각 1개, 총 2개 선택)
- Part : client, server, deploy
- 단계 : Bare Minimum, Advanced, Nightmare
- 시간 :
3h
~24h
Projects 선택
- 1차 기능구현
Milestone 선택
- 1차 기능구현
[22.01.03] Devlog - 차트 해석 및 투자 의견 페이지 제작
오늘 프로젝트에 기여한 내용
- 미국, 상품 차트 해석 추가
- 투자 의견 페이지 완성
- Navbar CSS 디자인
오늘 프로젝트에서 힘들었던 점
- CSS 통한 차트 크기 조정
- 경기사이클을 시각화해서 보여주기 (미완성)
내일 해야 할 일
- CSS 디자인 : 차트페이지, 투자의견 페이지, 랜딩페이지 (화)
- 배포 (수)
- UX 개선 작업 (목)
[21.12.28~29] Devlog
오늘 프로젝트에 기여한 내용
- 회원가입, 로그인, 로그아웃 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.
[21.12.23] 회고
Fact (사실) : 주요 사건에서 내가 취한 행동을 객관적으로 서술한다
- DOM 문법으로 HTML 엘리먼트를 생성하고, 이후 JS 코드를 입력할 수 있었다.
- Handlebar 또는 JS의 string type으로 HTML 엘리먼트를 생성했을 때에는 JS파일을 연동하여 동적 기능 구현이 되지 않았다.
Feeling (느낌) : 그때 느꼈던 기분을 간략히 정리한다
- 일주일 넘게 해결하지 못한 부분이 해결할 수 있어서 기쁘고 마음이 놓였다.
Finding (교훈) : 사건에서 얻은 교훈을 적는다
- 처음에는 Vanilla JS 코드 샘플을 가져와 사용했는데, 이해하지 못했기 때문에 원하는 기능을 구현하기 위한 코드 변형이 어려웠다.
- 이해가 부족하다 보니, 해결하기 위한 문제와 원인 자체를 파악하는 것이 힘들었다.
- 문제와 원인을 최대한 작은 단위로 쪼개야겠다고 느꼈다. 예상되는 원인과 해결책을 하나씩 실행하다 보니 결국 해결되었다.
Future action(행동) : 그래서 내가 앞으로 취할 행동을 미래형으로 적는다
- 이제부터 브라우저 화면에 보이는 코드를 짜야겠다.
[Task] Vanilla JavaScript로 SPA 틀 구성하기
To Do List (아래 직접 입력하기)
- SPA 틀 구성하기
- 라우팅 진행
Labels (오른쪽에서 테마별로 각 1개, 총 2개 선택)
- Part : client, server, deploy
- 단계 : Bare Minimum, Advanced, Nightmare
- 시간 :
3h
~24h
Projects 선택
- 1차 기능구현
Milestone 선택
- 1차 기능구현
[Task] 미국 지표 페이지 제작
To Do List (아래 직접 입력하기)
- DB 데이터를 차트로 표현하기
- 기간 선택 기능 구현 : 하루, 일주일, 한달, 분기, 1년, 3년 또는 날짜 직접 입력하기
- 차트의 최소값 설정하기
- x축 날짜 정보를 깔끔하게 정리하기
- 크기 조정하기
- 연동되는 주가 정보 추가하기
- 절대값 또는 기울기에 따른 코멘트 넣기
Labels (오른쪽에서 테마별로 각 1개, 총 2개 선택)
- Part : client, server, deploy
- 단계 : Bare Minimum, Advanced, Nightmare
- 시간 :
3h
~24h
Projects 선택
- 1차 기능구현
Milestone 선택
- 1차 기능구현
[21.12.15~16] Devlog
오늘 프로젝트에 기여한 내용
- charts 표시가 안 되는 원인 발견 : hbs 파일 내 script 태그가 동작이 안 됨
오늘 프로젝트에서 힘들었던 점
- handbars의 원리를 이해하지 못해 의도한 기능 구현이 안 됨
- hbs 파일 내 script 태그가 동작하지 않음
내일 해야 할 일
- script 태그 문제 해결 후 chart 띄우기
[21.12.6~7] Devlog - PDF 파일로 온 공공데이터를 JSON으로 변환하기
오늘 프로젝트에 기여한 내용
- 서버의 DB 스키마 테이블 보완
- 금융감독원 Open API Key 발급 후 DB에 데이터 넣기 위한 코드 작성
오늘 프로젝트에서 힘들었던 점
- API를 통해 요청한 금융데이터가 JSON이 아닌 PDF 파일 경로가 URL 형식으로 응답이 옴
- PDF파일을 다운받고 JSON으로 해싱하여, 필요한 데이터를 필터링하는데 시간 소요
내일 해야 할 일
- 금융데이터에 맞에 DB 스키마 보완 후 데이터 입력하기
- User API 작성하기
- SPA 구현하기
[21.12.04] 에러핸들링 - import 문법을 통해 모듈을 불러올 수 없음 (번들러 부재로 인한 오류)
문제 상황 및 에러 로그
- 상황 : 공식문서에서 제공한 코드를 사용했으나, 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';
[22.01.07] Devlog - footer, 로고, 로그인-로그아웃 후 페이지 전환
오늘 프로젝트에 기여한 내용
- 랜딩페이지 로고 삽입
- Footer 만들기
- 로그인/로그아웃 후 랜딩페이지 자동 이동
오늘 프로젝트에서 힘들었던 점
- 랜딩페이지 외의 페이지에서 새로고침 시 오류 발생 (아직 해결 미완)
추후 해야 할 일
- 홈 페이지 외 새로고침 했을때 오류 안뜨게 하기
- 마이페이지 기능 넣기
- 로딩 화면 만들기
- 404 에러 페이지 만들기
[Task] 금융감동원 정보 API로 가져오기
To Do List (아래 직접 입력하기)
- 금융감동원의 공공 데이터 API 가져오기
- 웹 내용에 따라 자동 업데이트 가능한지 확인하기
- 데이터를 데이터베이스에 넣는 방법 찾기
Labels (오른쪽에서 테마별로 각 1개, 총 2개 선택)
- Part : client, server, deploy
- 단계 : Bare Minimum, Advanced, Nightmare
- 시간 :
3h
~24h
Projects 선택
Milestone 선택
[Task] 랜딩페이지
To Do List (아래 직접 입력하기)
- 기능 시연하며 보여주기
Labels (오른쪽에서 테마별로 각 1개, 총 2개 선택)
- Part : client, server, deploy
- 단계 : Bare Minimum, Advanced, Nightmare
- 시간 :
3h
~24h
Projects 선택
- 1차 기능구현
Milestone 선택
- 1차 기능구현
[Task] 배포 진행하기
To Do List (아래 직접 입력하기)
- 파이어베이스를 통해 배포 진행하기
- 배포 방식에 따른 서버 구상하기
Labels (오른쪽에서 테마별로 각 1개, 총 2개 선택)
- 단계 : Bare Minimum, Advanced, Nightmare
- Part : client, server, deploy
- 시간 :
3h
~24h
Projects 선택
Milestone 선택
[21.12.07] 회고
Fact (사실) : 주요 사건에서 내가 취한 행동을 객관적으로 서술한다
- 파이어베어스를 사용할 수 없어 서버 코드를 직접 작성
- HTTPS 요청을 통해 Open API 데이터를 불러오기 위해서는 유료서비스인 function 기능 필요
- 금융감독원의 Open API 데이터는 JSON 형식이 아닌 PDF 파일의 경로를 제공하여, PDF 파일을 다운받고 JSON으로 변환하기 위한 작업 진행
Feeling (느낌) : 그때 느꼈던 기분을 간략히 정리한다
- 파이어베이스를 사용할 수 없어서 허탈했다. 파이어베이스 에러를 처리하기 위해 주말을 다 사용했는데 허무했다.
- Open API 데이터를 JSON 형식이 아니라 PDF 파일 경로를 URL 링크로 전달해줘서, 성의 없는 공공기관에 대해 화가 났다.
Finding (교훈) : 사건에서 얻은 교훈을 적는다
- 공공데이터를 활용하는 것이 쉬운 작업이 아니며, 공공기관의 일처리는 항상 그렇듯 답답하다.
Future action(행동) : 그래서 내가 앞으로 취할 행동을 미래형으로 적는다
- DB 테이블 보완 후 금융감독원 데이터를 입력하기
- 서버의 User API 구축하기
- 클라이언트 SPA 구현하기
[21.12.04] 에러핸들링 - script 태그를 통한 모듈 사용 에러 (import 문법)
문제 상황 및 에러 로그
- 상황 : 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">
[21.12.30~22.01.02] Devlog
오늘 프로젝트에 기여한 내용
- 마이페이지 마무리
- 미국 실업률 차트 추가
- 국내 지표 해석 (서버/클라이언트)
오늘 프로젝트에서 힘들었던 점
- 데이터를 해석하는 로직을 만드는 것
- DB에서 원하는 date 데이터를 조건으로 자료를 불러오는 것 (between date~date 전날 문법으로 불러옴)
- DB에서 불러온 데이터를 함수 내에서 리턴하는 것 : async await 문법을 상위 컴포넌트 함수에서도 사용해주기
추후 내일 해야 할 일
- 미국 지표 해석, Opinion 페이지 제작, 랜딩페이지 제작 (월)
- 차트 페이지 CSS, 랜딩페이지 CSS, Opinion 페이지 CSS (화, 수)
[Task] 국내 지표 페이지 제작
To Do List (아래 직접 입력하기)
- DB 데이터를 차트로 표현하기
- 기간 선택 기능 구현 : 하루, 일주일, 한달, 분기, 1년, 3년 또는 날짜 직접 입력하기
- 차트의 최소값 설정하기
- x축 날짜 정보를 깔끔하게 정리하기
- 크기 조정하기
- 연동되는 주가 정보 추가하기
- 절대값 또는 기울기에 따른 코멘트 넣기
Labels (오른쪽에서 테마별로 각 1개, 총 2개 선택)
- Part : client, server, deploy
- 단계 : Bare Minimum, Advanced, Nightmare
- 시간 :
3h
~24h
Projects 선택
- 1차 기능구현
Milestone 선택
- 1차 기능구현
[Task] 글로벌 지표 페이지 제작
To Do List (아래 직접 입력하기)
- DB 데이터를 차트로 표현하기
- 기간 선택 기능 구현 : 하루, 일주일, 한달, 분기, 1년, 3년 또는 날짜 직접 입력하기
- 차트의 최소값 설정하기
- x축 날짜 정보를 깔끔하게 정리하기
- 크기 조정하기
- 연동되는 주가 정보 추가하기
- 절대값 또는 기울기에 따른 코멘트 넣기
Labels (오른쪽에서 테마별로 각 1개, 총 2개 선택)
- Part : client, server, deploy
- 단계 : Bare Minimum, Advanced, Nightmare
- 시간 :
3h
~24h
Projects 선택
- 1차 기능구현
Milestone 선택
- 1차 기능구현
[21.12.04] Devlog - firebase DB에 데이터 입력
오늘 프로젝트에 기여한 내용
- firebase를 통해 firestore 데이터를 입력하는 방법 찾기
- 관련 에러핸들링
오늘 프로젝트에서 힘들었던 점
- firebase 공식문서에서 제공하는 문법은 V9 는 웹팩 등 번듈러 사용을 전제로 하여 에러 발생
- JavaScript script 태그 내에서 모듈 사용 방법을 알지 못해서 에러 발생
- Open API를 fetch로 불러올 시 CORS 에러 발생
내일 해야 할 일
- Open API CORS 에러 해결
- TypeScript 학습하기 (벌써 지친다 ㅠㅠ)
- 바닐라 자바스크립트로 SPA 구현하기
[21.12.05] 에러핸들링 - Open API cors 에러
문제 상황 및 에러 로그
- 상황 : 클라이언트에서 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))
프로젝트 일정
진행 과정
Advanced 까지 기능 구현 (12/12 까지)
1주차
- 배포 방법 알아보기 : 파이어베이스
- 공공 API 통해 데이터 가져오기
- 웹 데이터 자동 업데이트 가능한지 확인하기
- 기본 백엔드 구축 (Express, MySQL)
- 국내 지표, 미국 지표, 글로벌 지표 페이지 제작
2주차
- 회원가입, 로그인, Oauth, 인증
- 국내 주식 종목 정보 제작
UI 디자인 (12/26 까지)
- 페이지별 UI 디자인
Nightmare 및 추가기능 구현 (1/9 까지)
- 개인별 관심종목 지정 및 확인
[21.12.04] 에러핸들링 - firestore 권한 허용
문제 상황 및 에러 로그
- 상황 : 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;
}
}
}
[Task] 투자 가이드 페이지
To Do List (아래 직접 입력하기)
- 각 경제지표 별 가중치를 두어 점수를 매기고, 투자 가이드를 보여주기
- 추후 중요하게 봐야 할 지표 가이드 남기기
- 경기사이클과 현재 단계 보여주기
Labels (오른쪽에서 테마별로 각 1개, 총 2개 선택)
- Part : client, server, deploy
- 단계 : Bare Minimum, Advanced, Nightmare
- 시간 :
3h
~24h
Projects 선택
- 1차 기능구현
Milestone 선택
- 1차 기능구현
[21.12.17~23] Devlog - HTML 템플릿에 script 태그 및 JS 파일 코드 적용
오늘 프로젝트에 기여한 내용
- JavaScript로 HTML 엘리먼트를 만든 뒤 이벤트 할당
- 기존 Handlebar로 작성된 HTML 템플릿을 삭제하고, 이를 DOM 문법만으로 구현
오늘 프로젝트에서 힘들었던 점
- SPA 이므로 HTML 파일이 아닌 JS 또는 Handlebar로 HTML 엘리먼트를 만들어야 했음
- Handlebar 또는 JS의 string type으로는 HTML 엘리먼트를 만들 수 있으나, 이벤트 등 JS 코드를 동적으로 입력할 수 없었음
- 따라서 DOM 문법을 사용하여 해결
내일 해야 할 일
- 페이지 전환 시, 이전 DOM 엘리먼트는 삭제하기 (string 타입은 이전 HTML 엘리먼트를 대체하는데, DOM을 사용하니 축적되버림)
- fetch를 통한 DB 데이터를 차트에 표시하기
[21.12.08] Devlog - 금융감독원 데이터를 DB에 저장
오늘 프로젝트에 기여한 내용
- 금융감독원 Open API로 2020~2021 금융데이터 DB에 저장
- KOSPI, KOSDAQ, DOW, 환율, 유가, 미국10년물 채권, 외국인 매매동향
오늘 프로젝트에서 힘들었던 점
- API 요청 링크를 통해 다운받은 PDF 파일을 JSON으로 변환할 경우, 파일마다 데이터의 위치가 달라서 코드 작성 시 애를 먹음
내일 해야 할 일
- Open API 요청 코드는 추후에 더 보완하기
- User API 작성하기
- SPA 구현하기
[21.11.30] 회고
Fact (사실) : 주요 사건에서 내가 취한 행동을 객관적으로 서술한다
- React 프레임워크를 사용할 지, Vanilla JavaScript를 사용할지 결정하기 위해 코드스테이츠에 이슈쉐어링으로 문의를 진행했다.
- SR을 마무리하고 package.json에서 기술 스택에 대한 기본 세팅 진행했다.
- TypeScript를 다운받고, tsconfig.json을 설정했다.
Feeling (느낌) : 그때 느꼈던 기분을 간략히 정리한다
- 방향성이 잡히고 있다는 생각이 들었다.
- 새로운 커리큘럼과 스케줄이 혼란스러웠지만, 여기서 어떻게 시간을 주도적으로 사용할 지 감이 오는 것 같다.
Finding (교훈) : 사건에서 얻은 교훈을 적는다
- 스타트업은 바로 새로운 서비스를 만들 수 있는 프레임워크를 선호
- 큰 기업들은 기존 서비스에서 원리를 이해하고 내부 개선을 잘하는 사람이 필요
- 따라서 이번 프로젝트는 React를 사용하지 않고 Vanilla JavaScript를 사용하고자 한다.
- 동시에 TypeScript도 사용할 계획이다.
Future action(행동) : 그래서 내가 앞으로 취할 행동을 미래형으로 적는다
- Vanilla JavaScript 내용 찾아보기
- TypeScript 내용 찾아보기
- 추가 학습 없이 당장 진행할 수 있는 서버부터 코드 작성하기
- 주중에 배포 진행해보기 : 파이어베이스 or Vercel 알아보기
[21.12.01] 회고
Fact (사실) : 주요 사건에서 내가 취한 행동을 객관적으로 서술한다
- 노마드 코더 Youtube에서 Vanilla JS를 통한 input 구현 방법을 참고했다.
- Vanilla JS로 라우팅을 통해 SPA 구현 방법을 찾아보았으나, 아직 답을 얻지 못했다.
Feeling (느낌) : 그때 느꼈던 기분을 간략히 정리한다
- 새로운 지식과 기술을 배울 수 있어서 설렌다.
- 그러나 아직 방법을 찾지 못해서 답답하다.
Finding (교훈) : 사건에서 얻은 교훈을 적는다
- React 프레임워크의 편리함을 알 수 있었다.
Future action(행동) : 그래서 내가 앞으로 취할 행동을 미래형으로 적는다
- Vanilla JS로 SPA 구현 방법 빨리 찾기
- 파이어베이스로 배포 진행하기
- 주말엔 TypeScript 학습하고 다음주부터 적용하기
[21.12.04] 에러핸들링 - 파이어베이스 중복 initializing
문제 상황 및 에러 로그
- 에러메세지 : 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);
[21.11.29] 회고
Fact (사실) : 주요 사건에서 내가 취한 행동을 객관적으로 서술한다
- 프로젝트과 학습 계획을 작성했다.
Feeling (느낌) : 그때 느꼈던 기분을 간략히 정리한다
- 계획을 실행할 실력이 아직 부족해서 답답하다.
- 코딩 테스트는 아직 준비가 되어 있지 않아서 막막하다.
Finding (교훈) : 사건에서 얻은 교훈을 적는다
- 프로젝트에 필요한 학습 병행이 필요하다.
Future action(행동) : 그래서 내가 앞으로 취할 행동을 미래형으로 적는다
- React 없이 Vanilla Javascript로 프로젝트를 진행하기 위해 필요한 지식 학습하기
- 능력이 불가능하다면 React 사용하기
- API를 활용해 데이터를 불러오고 실시간으로 연동하기 위해 구글링하기
- 코딩테스트는 하루에 2시간 이상 공부하기
[21.12.14] 회고
Fact (사실) : 주요 사건에서 내가 취한 행동을 객관적으로 서술한다
- 웹팩을 사용하여 번들링 후 8080 포트 연결
- history 객체를 통한 SPA 라우팅 구현
- hbs 파일을 통한 HTML 템플릿 구현
Feeling (느낌) : 그때 느꼈던 기분을 간략히 정리한다
- 개념 이해부터 구현까지 어려웠는데, 리액트 없이 구현해서 뿌듯했다.
Finding (교훈) : 사건에서 얻은 교훈을 적는다
- window 객체를 활용하여 코드를 작성하는 방법을 더 학습해야겠다.
- 리액트를 사용했을 땐 몰랐는데 클라이언트쪽에서도 포트 연결을 해야 한다.
- 코드 작성 과정에서 번들러 사용의 유용성을 느꼈다.
Future action(행동) : 그래서 내가 앞으로 취할 행동을 미래형으로 적는다
- 각 페이지 기능 구현 (클라이언트)
- 랜딩페이지 UI 디자인 (기획 단계에서 누락)
- 회원 기능 추가 (서버, 클라이언트)
[22.01.13] Devlog - 마이페이지 기능 구현
오늘 프로젝트에 기여한 내용
- 마이페이지의 회원정보 수정 및 탈퇴 기능 구현
오늘 프로젝트에서 힘들었던 점
- 회원정보 수정 시 새로운 token을 실시간으로 발급하여 local storage에 저장시키는 것
내일 해야 할 일
- 홈 페이지 외 새로고침 했을때 오류 안뜨게 하기
- 로딩 화면 만들기
- 404 에러 페이지 만들기
- 반응형 웹
[21.12.27] Devlog - 기타 데이터 DB에 입력하기
오늘 프로젝트에 기여한 내용
- 기타 데이터 DB에 추가하고 브라우저에 차트로 시각화 (FRED, Investing, Nasdaq, 금융투자협회 데이터)
오늘 프로젝트에서 힘들었던 점
- 엑셀 파일의 데이터를 DB에 입력하는 작업을 처음 해봄
내일 해야 할 일
- 유저 기능 추가
- 차트 해석 로직 구상
- 회원 페이지 구상
- 랜딩페이지 구상
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.