react42 항해99 3주차 주특기 기본 - 날짜별 별점 누르기 + (캘린더 일기 만들기) 이 글은 회고록입니다. 항해99 3주차 주특기 기본주차의 2일차가 되었다. Redux 상태관리와 DB 연결 , useEffect를 통한 렌더링을 완료시킨 상황이다. 오늘의 결과물을 대략 이렇다. 현재 상태관리하는 것은 날짜 데이터, 다이어리 데이터, 기분을 나타내는 하트 데이터 총 3가지이다. DB 역시 이 데이터로만 구성되어있다. 캘린더 클릭 시 날짜의 State가 RootState 에 저장되며, 다른 날짜를 클릭 시 데이터가 dispatch된다. 글쓰기 컴퍼넌트는 모달을 이용했다. 하트를 클릭하거나 일기를 작성할 때 역시 State 가 RootState에 저장되며, State는 event의 value가 변화될 때마다 변한다. 그리고 저장버튼을 클릭 시 홈 화면으로 넘어가고, 해당 데이터가 보인다. 하.. 2022. 1. 22. 항해99 3주차 주특기 기본 - 날짜별 별점 누르기 + (캘린더 일기 만들기) 이 글은 회고록입니다. 항해99 3주차가 시작되었다. 다시 팀이 바뀌었으며, 새로운 마음으로 주특기를 배우는 주이다. 이번주 과제는 이렇다. - 한 주의 기분 상태가 어떤지 별점으로 나타내는 페이지 만들기 나는 더 나아가 캘린더를 누를 시 누른 날짜의 일기와 기분을 나타내고 한 주의 일기를 요약한 데이터를 Accordion 형식으로 나타내는 캘린더 사이트를 만들 예정이다. 현재까지 구현한 것은 이렇다. 캘린더를 클릭 시 => Redux 상태관리를 통해 클릭한 날짜 State를 관리한다. 이유는 부모 Props를 자식 컴퍼넌트에게 전달하는 방식은 과거 너무 많이 사용했으며, Redux 사용 방식에 더 친숙해지기 위해서도 있으며, 한 페이지에 컨테이너와 컴퍼넌트들로 구성할 예정인데, 컨테이너 Prop을 자식.. 2022. 1. 21. [NextJs & Flask] 코인사이트 만들기 1 (Crawling & Save data with MongoDB) 이번에 할 것은 Python Requests를 이용해 코인 데이터를 Crawling한 후 MongoDB에 저장시키고 NextJS Project로 데이터를 보내는 작업을 할 것이다. 먼저, Server 폴더와 Client 폴더를 만들어주었다. 다음 Server 폴더에 가상환경 (venv) 설정을 해주었다. 다음 pip3 를 이용해 Flask, Requests, Flask_cors(CORS 문제 해결을 위해), pymongo 를 설치해주었다. 먼저한 일은 코인 데이터를 수집하는 일이였다. 테스트용으로 비트코인 데이터를 수집한 후, mongoDB에 넣어주었다. - init_db.py import requests from pymongo import MongoClient client = MongoClient('l.. 2021. 12. 31. [Flask & NextJS] Cors 문제 해결 Flask로 API를 만들고, API Data를 이용해 NextJS로 데이터를 렌더링하려고 한다. 여기서 항상 발생하는 것은 CORS 문제인데, 백엔드 부분에서 프록시 서버의 헤더를 추가해주면 문제가 쉽게 풀린다. 또한, Flask를 사용할 시, Flask_cors를 이용하면 CORS 문제를 쉽게 해결할 수 있다. - flask-server/app.py from flask import Flask, render_template, jsonify, request from flask_cors import CORS, cross_origin app = Flask(__name__) cors = CORS(app) app.config['CORS_HEADERS'] = 'Content-Type' @app.route('/me.. 2021. 12. 31. [NextJs] 주식사이트 만들기 11 / Redux 를 이용해 유저가 선택한 코인의 상태를 관리하기 -2 이번에는 Redux를 이용해 유저가 선택한 코인의 상태를 관리하고, 동시에 유저가 코인 리스트를 클릭했는지, 안했는지에 대한 상태관리도 Redux로 할 예정이다. 결과물은 다음과 같다. 유저가 원하는 코인을 선택할 때, 차트와 코인 세부사항이 전부 변하게 만들었다. state 관리를 redux를 이용해 사용한 이유는 다음과 같다. 1. Page, Container, Components의 모든 요소들이 같은 state를 공유하고 있기 때문에 props 늪에 빠질 수 밖에 없다. 2. Container에서도, Components에서도 state 값을 변경시켜주어야 한다. 하지만 SetState를 props로 넘겨주기엔 코드가 복잡해지고 에러가 날 시 어디서 에러가 생겼는지 찾기 어렵다. 따라서 Redux 와.. 2021. 12. 20. [Next JS] Link 안에 Image 를 넣었을 때, 오류 & 해결방법 Next Js에서 Image 클릭 시 원하는 페이지로 Link 하려는 코드를 만들 때, 이러한 오류가 발생한다. 해결방법은 간단하다. 를 감싸주면 된다. (html 렌더링 시 문제라고 한다.) 2021. 12. 20. 이전 1 2 3 4 5 6 7 다음
