Act99 기술블로그

React 에서 Firebase Auth 를 사용하기 위해 다음과 같은 코드를 짰다가 에러가 발생했다. - firebase.js import firebase from "firebase/app"; import "firebase/auth"; const firebaseConfig = { apiKey: process.env.REACT_APP_apiKey, authDomain: process.env.REACT_APP_authDomain, projectId: process.env.REACT_APP_projectId, storageBucket: process.env.REACT_APP_storageBucket, messagingSenderId: process.env.REACT_APP_messagingSenderId, ..

먼저 노드 버전을 14버전 이상인지 확인한다. 다음 16버전 이상이면 이런 에러가 발생할 수 있다. please remove any global installs with one of the following commands 이는 create-react-app 을 4.0.3 을 사용할 때 발생한다. 먼저, npx clear-npx-cache 를 통해 5.0.0 이상을 맞춰주기 위한 작업을 한다. 그럼 잘 된다.

*자바스크립트에서 유사배열과 배열의 차이는 무엇인가? 또한 유사배열의 각 요소를 수정하고 싶다면 어떤 과정을 거쳐야 하는가? 유사배열의 한 예시는 HTMLCollection Array 가 있다. 유사배열은 Array의 내장함수를 바로 사용할 수 없다. 때문에 배열의 프로토타입에서 forEach 등의 내장함수 메서드를 빌려오는 방법이 있다. 그것은 바로 call 과 apply 이다. 가장 흔하게 사용하는 것은 Array.from이 있다. let nodes = document.querySelectorAll('div'); // call 사용 Array.prototype.forEach.call(nodes, (el) => {console.log(el)}) // Array from 사용 Array.from(node..

먼저 결과물을 이렇다. 캘린더를 누를 때 상태값을 유지시키고, 고양이 버튼을 클릭하면 글쓰기 모달페이지로 넘어간다. 글을 저장시키면 파이어베이스 파이어스토어에 저장되며, db 구조는 해당 날짜와 다이어리에 적은 일기, 별점 데이터이다. collection의 doc은 다이어리 날짜로 구성되며, 같은 doc이 있을 시, 글쓰기에서 중복방지 기능으로 저장이 안되게끔 만든다. 그리고 해당 날짜의 일주일 전 데이터는 우측 하단에 리스트 형태로 나타나며, 이 리스트를 클릭하면 해당 일기를 볼 수 있다. 마지막 수정해야하는 사항은 일기가 있을 때 글쓰기 버튼을 누르면 update 형태로 바꿔주는 것이다. 하지만 항해99 기본과제 수행을 위해 프로젝트를 마무리짓고 수정사항은 추후 수정할 계획이다. https://git..

이 글은 회고록입니다. 항해99 3주차 주특기 기본주차의 2일차가 되었다. Redux 상태관리와 DB 연결 , useEffect를 통한 렌더링을 완료시킨 상황이다. 오늘의 결과물을 대략 이렇다. 현재 상태관리하는 것은 날짜 데이터, 다이어리 데이터, 기분을 나타내는 하트 데이터 총 3가지이다. DB 역시 이 데이터로만 구성되어있다. 캘린더 클릭 시 날짜의 State가 RootState 에 저장되며, 다른 날짜를 클릭 시 데이터가 dispatch된다. 글쓰기 컴퍼넌트는 모달을 이용했다. 하트를 클릭하거나 일기를 작성할 때 역시 State 가 RootState에 저장되며, State는 event의 value가 변화될 때마다 변한다. 그리고 저장버튼을 클릭 시 홈 화면으로 넘어가고, 해당 데이터가 보인다. 하..

이 글은 회고록입니다. 항해99 3주차가 시작되었다. 다시 팀이 바뀌었으며, 새로운 마음으로 주특기를 배우는 주이다. 이번주 과제는 이렇다. - 한 주의 기분 상태가 어떤지 별점으로 나타내는 페이지 만들기 나는 더 나아가 캘린더를 누를 시 누른 날짜의 일기와 기분을 나타내고 한 주의 일기를 요약한 데이터를 Accordion 형식으로 나타내는 캘린더 사이트를 만들 예정이다. 현재까지 구현한 것은 이렇다. 캘린더를 클릭 시 => Redux 상태관리를 통해 클릭한 날짜 State를 관리한다. 이유는 부모 Props를 자식 컴퍼넌트에게 전달하는 방식은 과거 너무 많이 사용했으며, Redux 사용 방식에 더 친숙해지기 위해서도 있으며, 한 페이지에 컨테이너와 컴퍼넌트들로 구성할 예정인데, 컨테이너 Prop을 자식..

이번에 할 것은 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..

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..