수피의 느슨한 개발

로그인, 인증 기능 구축을 위한 기능 인증기능이 왜 필요할까? 서버가 클라이언트로부터 어떠한 정보를 요청받았을 때 해당 클라이언트가 누구냐에 따라 응답 데이터가 달라지거나 또는 제공해서는 안되는 보완적인 절차가 필요한 경우가 있기 떄문이다. 가령 A 유저에게 B 유저에 대한 개인정보, 플레이리스트, 결제내역 등을 보여줘서는 안되기 때문이다. 이러한 클라이언트 구분을 위해 로그인 시스템이 존재한다. 최초 로그인 시 클라이언트는 로그인 정보를 body에 담아 전달하면 서버는 그것을 내장 시크릿 키와 잘 버무려 토큰 이라는 hashing text를 생성하여 클라이언트에게 제공해준다. 이 토큰은 곧 인증서 역할을 한다. 그래서 클라이언트는 로그인한 후 해당 사이트에서 여러가지 요청(게시글 보기, 플레이리스트 보..

데이터베이스에 첫 데이터(seed) 넣기 데이터베이스와 테이블 정의가 끝났다면 첫 데이터를 입력하는 과정을 seed데이터를 넣는다고 표현한다. 이 과정에서는 아래와 같은 순서를 따른다. sequelize-cli를 통해 시드데이터 추가를 위한 파일을 생성한다. (마이그레이션 틀을 만드는 것과 비슷합니다.)위 명령어 실행을 완료하면 seeders 폴더가 생성되고, 그 안에 initialMembers이름이 딸린 파일이 생성된 것을 확인할 수 있다. npx sequelize seed:generate --name initialMembers seed 파일을 살펴보면 아래와 같이 작성 방법이 제공되는데 가이드를 따라서 입력할 데이터를 작성합니다.이전에 봤던 migration처럼 up, down 메소드로 구분되어 생성..

프로젝트를 공유하고 협업하기 본인이 만든 레포지토리에 다른 깃헙 유저를 초대하여 본인의 레포지토리에 수정 권한을 주고, 함께 기능을 구현하는 협업 방법입니다. 이를 위해 레포지토리의 settings-collaborator 항목에 들어가 유저를 초대합니다. collaborators와 협업 시 업무 세부 순서는 아래와 같습니다. 초대받은 유저는 프로젝트 레포지토리를 git clone 합니다. 팀장이 issues란에 To do list를 정리해 뒀다면 담당 업무를 확인합니다. git checkout -b 브랜치이름을 통해 브랜치를 생성합니다. 브랜치명은 영어로 작성하시되 컨벤션을 지켜주세요. (작업형태/내용) ex) 상세페이지 기능구현 시 feat/detail_page_html와 같은 형태로 지어주세요. 생성..

자바스크립트 개인 프로젝트 후기 프로젝트 개요 및 기능 자바스크립트 기본 문법에 익숙해지기 위한 미니 프로젝트입니다. TMDB에서 Top rated movie API를 통해 영화 정보를 제공합니다. 키워드 검색 구현을 통해 영화 title과 overview를 기준으로 일치하는 단어가 포함된 영화 필터링을 구현합니다. 주요 구현 기능 페이지네이션 ▶︎ 페이지 번호에 쿼리문 추가하여 TMDB API 주소의 page 쿼리와 연동 ▶︎ 페이지를 5개 단위로 보여지도록 구현 (ex. 1 2 3 4 5 >>) ▶︎ '이전 페이지', '다음 페이지'를 꺽쇠 기호로 구현 ▶︎ 조회 가능한 페이지를 100페이지로 제한함 ▶︎ 동적 구현 1: 꺽쇠 기호가 필요없을 경우 숨김 ▶︎ 동적 구현 2: 현재 페이지가 7페이지면 ..

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

라디오 버튼에 대한 오해와 진실로 인해 많은 시간을 흘려 보낸 과정을 정리합니다. 라디오버튼 구현 English Korean 라디오버튼은 위와 같이 간단하게 구현할 수 있습니다. 위 코드에서 input 태그가 선택버튼에 해당하고, label 태그를 통해 각 선택 항목이 어떤 항목인지에 대한 텍스트를 부여합니다. 여기서 중요한 부분은 `name` 부분입니다. 두 개의 input 태그의 name을 language로 설정해두었는데 이렇게 같은 이름을 붙여줘야 한 묶음으로 인식하고, 그렇게 해야 양자택일이 가능해집니다. 또한 `checked` 라는 단어가 부여된 input 태그는 사이트 접속 시 기본적으로 선택되도록 하는 옵션입니다. 오해와 진실 처음에 라디오버튼을 사용하기로 했을 때 저는 input태그의 ch..

단어 포함 확인 시 대소문자 구분 없이 필터링 하도록 구현 const keyword = 'Apple'; const keywordRegExp = new RegExp(keyword, 'i'); movies = movies.filter((movie) => keywordRegExp.test(movie.original_title)); 위 코드와 같이 특정 단어가 데이터베이스에 포함되어 있는지 확인할 때 정규표현식을 활용할 수 있습니다. 위 예시는 영화 데이터에서 제목 부분을 가져와 keyword가 제목에 포함되어 있는지 확인합니다. RegExp의 작동 방식은 아래와 같습니다. RegExp 객체를 생성하여 찾고자 하는 키워드를 정규표현식으로 등록 'i' 옵션을 통해 검증 시 대소문자를 구분하지 않도록 지정 movi..

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