Act99 기술블로그

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

프로젝트 완료가 다 되었다. 사용한 기술스택은 다음과 같다. 먼저 결과물부터 보면, 이렇게 상대방과 본인이 실시간으로 채팅이 가능하게 만들었다. 웹 소켓에 대한 이해를 하고 넘어가느라 오래걸렸다. 먼저 참고 영상은 다음과 같다. https://www.youtube.com/watch?v=a_xo-SbIfUQ&t=3197s Websocket과 Express를 이용해 realtime chat을 만드는 영상이며, 많은 영상과 github, medium 들을 찾다가 이 영상이 제일 유익해서 링크를 남겨놓았다. 먼저, 웹소켓이란 서버와 클라이언트 간의 소켓 연결을 유지해 양방향통신과 데이터 전송이 가능하게 만든 기술이며, 서버와 클라이언트 간의 웹소켓 연결은 HTTP 프로토콜로 이루어지지만 정상적으로 연결된다면 웹..

현재 Websocket을 이용한 실시간 채팅 구현중입니다. 방법은 express & socket.io 를 이용해 server를 파서, server to server 형태로 전송해 NextJS 에서 websocket 사용시 발생하는 cors 문제를 해결하려고 하고 있습니다. 테스트 중이며, 잘 구현되면 블로그에 게시하겠습니다. ^^

이번에는 Redux를 이용해 유저가 선택한 코인의 상태를 관리하고, 동시에 유저가 코인 리스트를 클릭했는지, 안했는지에 대한 상태관리도 Redux로 할 예정이다. 결과물은 다음과 같다. 유저가 원하는 코인을 선택할 때, 차트와 코인 세부사항이 전부 변하게 만들었다. state 관리를 redux를 이용해 사용한 이유는 다음과 같다. 1. Page, Container, Components의 모든 요소들이 같은 state를 공유하고 있기 때문에 props 늪에 빠질 수 밖에 없다. 2. Container에서도, Components에서도 state 값을 변경시켜주어야 한다. 하지만 SetState를 props로 넘겨주기엔 코드가 복잡해지고 에러가 날 시 어디서 에러가 생겼는지 찾기 어렵다. 따라서 Redux 와..

Next Js에서 Image 클릭 시 원하는 페이지로 Link 하려는 코드를 만들 때, 이러한 오류가 발생한다. 해결방법은 간단하다. 를 감싸주면 된다. (html 렌더링 시 문제라고 한다.)

이번에 할 것은 Redux & RTK 를 이용해 유저가 선택한 코인의 상태를 관리하는 Select Box를 만들 예정이다. 먼저 상태관리를 위해 Redux Toolkit 을 이용해 state 와 reducer를 만들어주었다. import { createSlice, PayloadAction } from "@reduxjs/toolkit"; export interface CoinState { value: string; } const initialState: CoinState = { value: "BTC", }; export const selectedCoinSlice = createSlice({ name: "selectedCoin", initialState, reducers: { selectedCoin: (st..

이번에는 코인 정보 슬라이드를 만들어주었다. 시간초의 경우 setInterval & useEffect & useRef 로 만들지 않고 useInterval hook 을 이용해서 만들었다. 결과물은 아래와 같다. 내용을 딱히 넣을 것이 없어서 Description 데이터를 800자만 불러왔다. 데이터가 html tag 까지 갖고 있어, dangerouslySetInnerHTML 을 이용했다. 코드는 다음과 같다. - homeSlider.tsx import { useEffect, useState } from "react"; import CoinSliderCard from "../../components/slider/coinSliderCard"; import useInterval from "../../hook..