Act99 기술블로그

테이스티 서울 항해99 1주차 미니프로젝트 항해99 B반 6조 팀 함께한 팀원 : 이주석(본인), 차민재님, 김종훈님, 최예진님 사용 기술 Server: AWS EC2 (Ubuntu 20.04) DB: MongoDB Backend: Flask(Jinja2) Frontend : JQuery, Ajax, Bulma 기능설명 로그인 화면 : 로그인 및 회원가입 후 홈 화면으로 이동 홈 화면 : 유저들의 맛집 추천 리스트가 최신 순으로 나옴, 좋아요 댓글 기능 구현 디테일 화면 : 해당 게시물 내용과 좋아요, 댓글기능 (본인 글의 경우 삭제 기능) 글쓰기 버튼 : 음식점과 장소, 설명, 사진을 올릴 수 있음 마이페이지 : 본인이 쓴 글과 좋아요를 누른 글을 확인할 수 있음 목적 및 기능 테이스티서울은 모바일 반..

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

아래 링크를 참고하면 해결할 수 있습니다. 특히 ubuntu20.04 를 윈도우 스토어에서 다운로드를 받았을 경우 System V init 을 사용하기 때문에 systemctl 이 아닌 service 를 이용해야합니다. https://jipro.tistory.com/45 윈도우10 하위 시스템 우분투에서 mongod: unrecognized service 해결 방법 몽고DB를 실습하려고 우분투에서 4.0 버전을 설치하고 $ sudo service mongod start 타이핑 하고 엔터키를 딱 눌렀는데 mongod: unrecognized service 라는 에러를 뱉었다. 저 service라는 명령어는 알아보니 /etc.. jipro.tistory.com

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 렌더링 시 문제라고 한다.)