Dani's Dev TokTok

0. 2차 팀프로젝트가 끝난 후 쓰는 회고록기간 : 2024.08.21 ~ 2024.09.13개발인원 : FE 3명 BE 3명담당 역할 : 프론트엔드주제 : 팬 굿즈에 특화된 중고 거래 서비스 플랫폼깃허브 :- Read me : https://github.com/SeSAC-2nd/.github- frontend code : https://github.com/SeSAC-2nd/SeSAC-2nd-Front  1. 프로젝트 주제이번 프로젝트는 클라이언트는 React, 서버는 Node.js를 이용해서 만들었다.주제는 오타쿠(..)를 대상으로 한 중고 거래 서비스 플랫폼이다.순화해서 말하자면 팬 굿즈 거래에 특화된 중고 거래 서비스다.  기존의 중고 거래 플랫폼들의 장점을 차용하되,  좀 더 대상을 명확히 하는 ..

1. 들어가며Node.js와 MySQL을 연결해서 회원가입과 로그인 기능 구현하기(MVC 패턴 적용하기)2. Node.js 와 MySQL 연결이번 실습은 Node.js와 MySQL을 연결하고, 이것을 MVC  패턴을 적용하여 프로젝트를 구성하는 것이었다.프로젝트 구조는 다음과 위와 같이 적용했다.Model, View, Controller 로 구분하고 프론트 파트의 css와 js 파일들은 static 폴더에 넣어주었다.그리고 라우터 연결을 위한 routes 폴더도 따로 구분해주었다. 최상단의 app.js 에는 다음과 같이 구현했다.// express 모듈 등록const express = require('express')const app = express();const PORT = 8888;// 뷰 템플릿a..

1. 들어가며MVC 패턴에 대해 알아보고 MVC 패턴으로 프로젝트 구축하기2. MVC 패턴MVC 패턴이란?모델(Model), 뷰(View), 컨트롤러(Controller) 로 이루어진 소프트웨어 설계와 관련된 디자인 패턴이다.💡 디자인 패턴이란?소프트웨어를 설계할 때 발생하는 문제를 해결하기 위한 방법 중 하나로, 상황에 따라 자주 쓰이는 설계 방법을 정리한 코딩 방법론이다.  MVC의 장점과 단점 ✔ 장점패턴들을 구분해서 개발한다(기능 단위 별로 나눠서 처리)디버깅이나 코드 가독성을 높여서 유지보수에 용이하다유연성과 확장성이 높다협업에 용이하다✔ 단점설계 단계가 복잡해서 설계 시간이 오래 걸린다.단위가 많아진다.애플리케이션이 복잡해질수록 모델과 뷰의 관계가 복잡해진다. MVC 디자인 패턴 흐름  모델..

1. 들어가며비동기 HTTP 통신을 이용해서 동적 form 전송 구현해보기2. Axios 를 이용해서 동적 form 전송 구현하기form 요소를 이용해서 데이터를 전송하면 페이지 이동이 일어난다.(form 요소의 action 속성에 지정된 경로로 이동하며 데이터 전송)그러나 비동기 HTTP 통신을 이용하면 폼의 데이터를 서버와 동적으로 송수신해서 실시간으로 변경된 것을 보여줄 수 있다.위의 예시처럼 아이디와 비밀번호가 일치하지 않을 때, 페이지가 변경되지 않으면서 동적으로 데이터를 송수신해서 변경된 내용을 보여줄 수 있다. 비동기 HTTP 통신 방법비동기 HTTP 통신 방법에는 크게 3가지가 있으며 아래와 같다.AjaxAxiosFetch본 포스팅에서는 Axios 를 이용한 동적 form 구현을 다룰 거지..

1. 들어가며Node.js의 fs 모듈에서 사용하는 메서드인 readFile() 과 readFileSync() 를 통해 비동기와 동기의 차이에 대해 알아보기2. 비동기와 동기Node.js 에서 제공되는 모듈 중 하나인 fs 모듈은 파일을 관리할 때 사용하는 모듈이다.위 모듈에서 사용하는 readFile()과 readFileSync()는 둘 다 파일을 읽어오는 메서드다.이 둘의 차이는 readFile()은 비동기식으로 파일을 읽어오고, readFileSync()는 동기식으로 파일을 불러온다는 것이다.이 둘의 차이를 확인하면서 비동기와 동기의 차이에 대해 알아보고자 한다. readFile() 로 파일 읽기// fs 모듈const fs = require('fs')console.log('abc');fs.read..

1. 들어가며Node.js의 모듈 중 http 모듈을 사용해서 웹 서버를 만들어보자2. Node.js를 이용한 웹 서버 만들기Node.js 를 통해서 서버를 만드는 방법은 크게 두가지가 있다.하나는 http 모듈을 사용하는 것이고 다른 하나는 Express를 사용하는 것이다.Express 를 이용하는 방법은 다음 시간에 할 것 같고 이번에는 http 모듈을 사용해서 웹 서버를 만드는 방법을 해봤다. http 모듈로 웹 서버 만들기 노드에 기본적으로 있는 http 모듈을 사용하면 웹 서버 기능을 담당하는 서버 객체를 만들 수 있다.const http = require('http');// 웹 서버 객체 만들기const server = http.createServer();// 웹 서버를 시작하여 8000번 포..