수피의 느슨한 개발

프로젝트를 공유하고 협업하기 본인이 만든 레포지토리에 다른 깃헙 유저를 초대하여 본인의 레포지토리에 수정 권한을 주고, 함께 기능을 구현하는 협업 방법입니다. 이를 위해 레포지토리의 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 =..

클래스 클래스 생성 아래와 같이 클래스 객체 생성 시 아래와 같이 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 설치를 의미한다. 글로벌..