수피의 느슨한 개발

제작 배경 평소 교회 갈 때는 성경이 무겁다는 핑계로 잘 들고 다니지 않게 되다 보니 간단한 성경 조회 사이트를 만들어서 휴대폰으로 볼 수 있게 만들어야겠다는 결심을 하게 되었다. 사실 성경을 볼 수 있는 무료 앱도 있지만 상단에 비치되는 배너 광고가 보고 싶지 않았다. 얼핏 생각해도 금방 만들 수 있을 것 같아서 시작하게 되었고, 예상대로 금방 만들었다. 먼저 제작 과정은 아래와 같았다. 성경 내용 수집, 조회 방식을 고려한 데이터 형식 선정 성경 조회 서비스 개발(백엔드) 성경 조회 및 결과 확인을 위한 정적 html 제작 (프론트) 위 제작 과정에 따라 차근차근 살펴보도록 하겠다. 성경 내용 수집 사이트 선정 (http://www.holybible.or.kr/) 성경 수집을 위해 구글, 네이버 서칭..

Socket.io Socket.io가 무엇인지, 어떤 기능에 활용되는지 공부합니다. 시작에 앞서 알아야할 부분 TCP와 UDP TCP란? 서버와 클라이언트 간 데이터 송수신을 위해 만들어진 프로토콜 연결 지향성 프로토콜이라고도 부르는데 그 이유는 서버와 클라이언트가 양방향으로 소통함으로서 데이터 요청 및 전송에 있어 차질이 없도록 하여 데이터의 누락 또는 순서가 뒤바뀌는 일을 방지하는 것, 즉 통신의 안정성을 바탕으로 한 신뢰에 중점을 두기 때문입니다. 가령 클라이언트가 데이터를 요청했고, 서버가 보내주는 과정에서 데이터가 누락되었다면 클라이언트에서 "누락됐다."라고 알려주면 서버가 다시 보내주는 방식으로 서로 소통하므로 아무래도 데이터 전송이 잘못된 가능성이 현저히 낮아 신뢰가 높아집니다. 하지만 UD..

백엔드를 공부하는 입장에서 프로젝트에서 프론트 작업을 하는 비중이 낮은데, 그렇다 보니 기초적인 부분에 대한 기억을 다시 끌어올려야 할 때가 많다. 오늘과 같은 예시도 그러한 부분 중 하나이다. ejs 파일에서 우리가 일반적으로 생각하는 경로 설정 방법으로 css나 js파일을 불러오도록 아래와 같이 작성할 경우 오류를 만날 수 있다. 나의 경우 static 폴더 내 css와 js폴더를 생성 후 각각 파일을 넣어뒀는데 아래와 같은 오류를 만날 수 있었다. 'Refused to execute script from 'http://localhost:3000/static/js/index.js' because its MIME type ('text/html') is not executable, and strict M..

모델생성 및 테이블 연동하기 마이그레이션을 통해 테이블을 생성하면 아래와 같이 models 폴더 내 members.js파일이 함께 생성된다. 코드를 보면 마이그레이션과 비슷한 형태로 생성된 것을 확인할 수 있다. const { Model } = require('sequelize'); module.exports = (sequelize, DataTypes) => { class Member extends Model {} Member.init( { name: DataTypes.STRING, team: DataTypes.STRING, position: DataTypes.STRING, emailAddress: DataTypes.STRING, phoneNumber: DataTypes.STRING, admissionD..

기본 환경 설정하기 node에서 MySQL 데이터베이스를 사용하기 위해 Community Server 설치가 필요하다. https://dev.mysql.com/downloads/ 또한 node와 데이터베이스를 ORM 방식으로 사용하기 위해 추가적인 npm 패키지 설치가 필요하며 여기서는 sequalize라는 패키지를 활용한다. npm install mysql2 sequelize sequelize-cli 위 패키지 중 sequelize-cli는 필수 패키지는 아니나 데이터베이스 생성이나 마이그레이션 등을 cli 명령으로 가능하게 하여 작업의 편의성을 더해준다. 💡 Tip ORM은 데이터베이스에 있는 객체를 하나의 객체에 매핑시키는 기술 데이터베이스 문법을 잘 모르더라도 자바스크립트 언어로 비교적 쉽게 상호..

백엔드 기능들을 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..

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