수피의 느슨한 개발

백엔드 기능들을 MVC 패턴으로 분리하기 이전에 작업했던 최신 영화 정보 웹 사이트 구현 프로젝트를 MVC 패턴으로 리팩토링하는 작업을 진행했다. 아래 코드는 root 주소에 접근 시 MongoDB Atlas에서 영화 정보를 가져와 프론트에 보내주는 API이다. express 기반으로 백엔드를 구현하고, ejs로 웹사이트를 꾸며준다. // server.js require('dotenv').config(); const express = require('express'); const app = express(); const path = require('path'); const { MongoClient } = require('mongodb'); const PORT = 3000; const HOST = '0.0..

지난주 공부한 내용은 아래와 같다. node.js의 기본 활용법, 비동기 실행, 모듈, 패키지, 프로세스와 쓰레드에 대해서 다뤘다. https://github.com/issuebombom/nodejs_study_alone/blob/main/study_alone_nodejs.md express에서의 간단한 서버 API 구현 (CRUD), nodemon 활용법에 대해서 공부했다. https://github.com/issuebombom/nodejs_study_alone/blob/main/study_alone_express.md express에서 서버 API를 MVC 패턴으로 코드를 리펙토링 하는 방법에 대해서 공부했다. https://github.com/issuebombom/nodejs_study_alone/..

MVC 패턴에 대한 이해 소스 코드를 MVC(Model-View-Controller) 패턴으로 관리함으로써 코드 관리의 효율성을 높인다. Model: 데이터와 비즈니스 로직을 관리 View: 레이아웃과 화면 처리 Controller: 명령을 모델과 뷰 부분으로 라우팅 기존 코드를 MVC 패턴으로 변경하기 프로젝트에서 models, views, controllers 폴더를 생성하여 기능에 따라 분리하여 코드를 관리한다. GET, POST 요청 함수를 Controllers로 보내기 기존 코드 // server.js const express = require('express'); const PORT = 4000; const HOST = '0.0.0.0'; // default, 안적어도 됨 const app =..

클래스 클래스 생성 아래와 같이 클래스 객체 생성 시 아래와 같이 constructor로 파라미터를 __init__하는 과정을 넣는다. class User { constructor(name, age, gender) { this._name = name; this._age = age; this._gender = gender; }; } Getter, Setter Getter: 생성된 객체의 프로퍼티값에 접근하면 프로퍼티의 get 함수로 접근한다. Setter: 생성된 객체의 프로퍼티값을 변경하고자 할 때 해당 프로퍼티의 set 함수로 접근하도록 한다. 이를 활용하여 검증 절차를 추가할 수 있다. // name 프로퍼티에 대한 호출 시 get 또는 set으로 보내진다. get name() { return thi..

nodemon 패키지 설치 과정에 대한 학습 과정에서 npm의 글로벌 설치와 환경 변수에 대해 이해한 내용을 정리했습니다. nodemon 패키지 설치 node와 Express만 사용하면 코드를 수정한 뒤 웹 상에서 확인하기 위해 서버를 껐다가 다시 켜야 하는 번거로움이 있는데 이를 해결해주는 패키지가 nodemon이다. (사실 처음 node main.js를 실행했을 때 Flask에서도 지원해주는 서버 재실행 기능을 node는 왜 안해주지? 라는 생각이 들었다.) nodemon은 코드가 변하면 이를 감지하여 자동으로 서버를 재실행 해주는 기능을 제공한다. 설치는 아래와 같이 터미널에 입력한다. sudo npm install -g nodemon 위 명령어에서 -g 옵션은 global 설치를 의미한다. 글로벌..

팀프로젝트로 웹 사이트 개발 과정에서 게시글이나 댓글이 등록 또는 수정된 시간을 데이터베이스에 기록하는 과정에서 신기한 부분을 발견했다. 1. 들어갈 때랑 나올 때 시간 형식이 변한다. @app.route("/members//comments", methods=["POST"]) def post_comments_with_id(member_id): now = datetime.now() # 한국 기준 현재시각을 출력합니다. data["upload_time"] = now db.comments.insert_one(data) return jsonify({"msg": "방명록 작성 완료!"}) 방명록 POST 과정에서 다른 과정은 생략하고 현재 시각 설정에 관한 코드만 보자 일상에서 현재 시각이 필요한 경우 항상 da..

파이썬으로 DS 분야를 공부했던 입장에서 자바스크립트는 확실히 복잡하게 느껴졌다. 같은 객체 지향 프로그래밍 언어라서 입문 수준의 코드를 익히는게 어려운 일은 아니었지만 왜 이렇게 했을까? 라는 의문이 드는 몇 가지가 있었다. 1. default parameter 출력에 관하여 function greeting(name='apple', name2, name3) { console.log(`Hi ${name}`); console.log(`Hi ${name2}`); console.log(`Hi ${name3}`); }; greeting(undefined, 'ball', 'cat') 위 함수에서 name 파라미터에 디폴트 값을 사용할 경우 undefined를 써줘야 한다. 개인적으로 이 부분이 조금 불편하게 여겨..

지난 일주일간 팀프로젝트로 미니 웹페이지를 생성했지만 배포에 욕심이 났다. beanstalk로 간단하게 배포할 수도 있지만 개인적으로 EC2 인스턴스 생성부터 배포까지 한번 해내고 싶었다. (무엇보다 beanstalk로 생성하니 나도 모르게 EC2 인스턴스 생성되어 실행된다는 사실을 뒤늦게 알았는데, 나도 모르게 인스턴스 생성된다는 점이 조금 맘에 걸렸다...돈이 걸린 문제니까...) 특히 EC2에서 mongoDB 데이터베이스를 구축하는 과정은 경험한 적이 없었는데 메뉴얼을 참고하며 간단한 구축 방법을 익힐 수 있었고, 이를 아래와 같이 정리했다. install guide: (https://www.mongodb.com/docs/manual/tutorial/install-mongodb-on-ubuntu/)..

코멘트 수정 기능 구현 각 코멘트마다 '수정'이라는 a 태그에 해당 코멘트 id와 연결되는 링크를 담았고, 이를 클릭 시 아래 백엔드로 이동한다. @app.route("/comments/", methods=["GET"]) def get_comment_with_id(id): result = db.comments.find_one({"_id": ObjectId(id)}) result["_id"] = str(result["_id"]) return render_template("edit.html", result=result) 수정 버튼을 누르면 우선 기존 코멘트 id에 기록된 내용들을 가져와 edit.html에 함께 전송한다. {{ result['comment'] }} 수정 기존에 사용했던 코멘트 등록 틀만 따로..

프로젝트 목표 본인 소개 페이지와 하단에 코멘트를 남길 수 있는 개인 페이지를 만든다. 구현 내용 Pagination 한 페이지 당 보여질 코멘트의 개수를 지정하고 limit = 5와 같은 형태로 변수 지정한다. 페이지 수가 많을 것을 대비하여 n개 단위로만 페이지 번호가 보여지도록 한다. 예를 들어 5개 단위로 페이지를 그룹지을 경우 최초 1 ~ 5페이지 번호만 보여지며 6페이지로 이동할 경우 6 ~ 10 페이지 번호가 보여지게 한다. 페이지번호 노출 범위에 대한 정보를 page_set = 5와 같은 형태로 변수 지정한다. Previous와 Next 버튼은 다음 페이지 그룹이 노출되도록 하는 기능이다. 가령 현재 페이지가 1 ~ 5페이지 내 있는 경우 Next 버튼을 클릭하면 6페이지로 이동하고, 6 ..