본문 바로가기
  • 삽질하는 자의 블로그
5. MVC 패턴, Contoroller 의 사용 // 여러개의 미들웨어 Routes 폴더에는, 우리가 만들어주는 연결고리인 route 만 있는 것이 좋다. 이게 무슨 뜻이나면, 로직은 컨트롤러에 따로 빼서, 사용하는 것이 적절하다는 말이다. 이는 MVC 패턴의 Contoller 에 해당하고, 이는 로직을 담당하는 역할을 한다. contoller 폴더에 로직을 따로정리해보자. 1. 기존의 Routes 폴더 안의 Route ... router.get("/:userEmail", (req, res, next) => { const userEmail = req.params.userEmail; if (!userEmail.includes("@")) { const error = new Error("이메일이 올바르지 않습니다.") error.code =.. 2023. 2. 18.
4. 잘못된 요청 처리하기, 잘못된 경로로 온 요청 처리하기 1. 잘못된 요청 에 대해, 404 코드 보내기 만약 클라이언트로부터 잘못된 요청이 온다면, 어떻게 처리해야 할까? 적절한 에러코드를 보냄으로써, 요청에 대한 응답을 처리하자. const express = require("express"); const router = express.Router(); router.get("/:userEmail", (req, res, next) => { const userEmail = req.params.userEmail; if (!userEmail.includes("@")) { res.status(404).json({ message: "not found" }); // return이나, if,else 등을 사용하여 return; // .. 2023. 2. 18.
3. 라우터를 사용하여, 미들웨어를 설정하기 라우터는 express 의 핵심 기능중 하나이다. 라우터를 사용하여 클라이언트에서 요청하는 특정 URL 을 바탕으로, "필요한 미들웨어를 아웃소싱하고 하나로 뭉쳐" 기능적으로 유사한 미들웨어들을 하나로 모아 관리할 수 있게 해준다. 0. 라우터의 기본 사용 const express = require("express") const route = express.Router()// Router() 를 사용하여, route 를 만들어서 route.get("/", (req,res,next)=>{// app 과 같은 기능을 하는 route 를 사용한다. console.log("diary") res.json({message : "this is diary"}) }).. 2023. 2. 18.
2. 기본 서버 환경 구성하기 시작하기에 앞서 필요한 여러가지 라이브러리를 설치해본다. 1. nodemon 설치 ( npm i nodemon ) 서버를 시작하고, 코드를 변경했을때 새로고쳐진 코드를 즉각적으로 반영해주는 라이브러리이다. nodemon 을 사용하지 않으면, 코드를 변경하고 계속해서 서버를 껐다 켜야하는 비효율적인 행보를 보여야한다. nodemon 을 설치하고 에 들어가 스크립트에 "start" : "nodemon index.js" 를 적음으로써 nodemon 을 실행시킬 수 있도록 만들자. "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start" : "nodemon index.js" }, 이렇게 설정해두면 터미널창에 npm start 를 통해.. 2023. 2. 18.
1.Node.js 의 기본 Node.js 는 V8 자바스크립트 엔진을 가지고 있는 자바스크립트 런타임(환경) 이다. Node.js 는 자바스크립트를 서버에서도 사용할 수 있도록 만든 프로그램으로, 기본적으로 서버측에서 실행된다. 내장 HTTP 서버 라이브러리를 가지고 있어, 별도의 소프트웨어 없이 웹서버에서 실행이 가능하다. 자바스크립트 언어를 사용하므로, 자바스크립트 하나로 프론트와 백을 동시에 처리 가능한 장점을 가지고 있다. 빈번한 I/O 처리에 있어 우수한 성능을 가지고 있다. 그래서 노드로 무얼 하나? 서버를 만들고 운영할 수 있다! 이제 시작해보자! 2023. 2. 18.
4.[클라이언트] 캘린더 라이브러리, 풀 캘린더 사용하기 [ Fullcalendar ] https://github.com/fullcalendar/fullcalendar-examples/tree/main/react-typescript GitHub - fullcalendar/fullcalendar-examples: Simple example projects for FullCalendar Simple example projects for FullCalendar. Contribute to fullcalendar/fullcalendar-examples development by creating an account on GitHub. github.com 풀캘린더의 DOCS 를 들어가, React-Typescript 의 example 코드를 확인한다. DemoApp (풀캘린더 모든 무료기능 기본) ev.. 2023. 2. 14.
3.[클라이언트] 레이아웃 애니메이션 만들기 [ React-Transition-Group + 오류 ] 레이아웃에 애니메이션을 적용시킨다. 사용 import { CSSTransition } from "react-transition-group"; const LayoutHeader = () => { const [diaryDropdown, setDiaryDropdown] = useState(false); const toggleDiary = () => { setDiaryDropdown((prev) => !prev); }; return ( ... ... // 애니메이션 스타일링 .slide-top-to-bottom-enter { transform: scale(1, 0) translate(0, -150%); } .slide-top-to-bottom-e.. 2023. 2. 14.
2.[클라이언트] 마우스를 올릴 때 마다, 움직이는 버튼 [ animated.css ] 원리 1. state 를 마우스올릴때, 내릴때 변경시킨다. 2. state 에 따라, 삼항연산자로 애니메이션 스타일을 추가했다, 삭제했다 하며 변경한다. 필요 1. `${ }` 를 사용하여 모듈 css 스타일 넣기 2. `${ }` 를 사용하여, 글로벌 css 스타일 넣기 import "animate.css"; const HomePageMain = () => { const [bounce, setBounce] = useState(false); let bouncStyle = `${styles.diary__lock} ${bounce ? "animate__animated animate__jello" : ""}`;// 바운스스타일 return ( ... setBounce(true)}// 마우스 올리면 state .. 2023. 2. 14.
1. 초기 설계 2023. 2. 13.
0. 프로젝트의 목적 0. MERN 아키텍처 를 사용해본다. - MongoDB, Express, React, Node.js - 최종적으로 3개의 서버를 운영한다. 클라이언트를 운영하는 서버, 데이터베이스를 저장하는 서버(클라우드), 서버 1. 클라이언트와 서버를 완전히 분리해놓은 REST API 를 만들어본다. - 초기의 HTML은 서버가 주겠지만, 이후에는 React 에서 클라이언트 사이드를 총괄할것이다. 2. Node.js 에 대해 더 깊히 알아보고, 직접 서버를 구성해보며 각종 에러를 처리해본다. - CORS 에러 등... 3. React와 Node.js (Express) 를 사용한 어플리케이션을 만들어보고, AWS 를 사용하여 배포하여본다. 4. WEB API 를 사용해본다. - Web Speech API, Web A.. 2023. 2. 13.
10. [오류] 배포와 Oauth 배포를 했더니 Oauth 가 먹히지 않는다. 또다시 401 오류다. 문제는 둘중 하나일것이다. 1. 구글 어카운트에서 URI 등록을 하지 않았거나 2. 환경변수 세팅이 잘못되어, 등록된 Oauth 에 승인된 클라이언트 ID, PASSWORD 가 잘못되었던가 URI 는 분명 등록 했으니 1번은 제외 그렇다면 환경변수의 문제가 있겠다. 현재 이 프로젝트는 .env 를 통해, 환경변수를 등록하고 사용했다. 하지만 분명히 기억하건데, next.config.js 를 통해 환경변수를 등록하는 것이 가장 올바른 길 임을 알고있다. 결국 .env 를 버리고 next.config.js 에 적절한 phase 를 넣어 코드를 집어넣었다. const { PHASE_DEVELOPMENT_SERVER } = require("ne.. 2023. 2. 9.
9. 이번 프로젝트의 전체적인 로직에 관하여 이번 프로젝트는 1. 심리검사 2. 검사후 결과보기버튼 을 누른다. 3. 결과보기버튼은 URL 에 "결과ID" 를 담아 동적페이지인 [Result] 페이지로 이동한다. 4. Result 페이지는 "동적페이지"로, URL 정보에 "결과ID" 를 담아, 쿼리로 받을 수 있다. 5. 쿼리로 받은 "결과ID" 를 통해, 결과가 담겨있는 "DB에 API 요청"을 통해 테스트결과를 가져온다. 6. 결과를 확인했다면, "저장 후 개 페이지로 이동" 버튼을 누를 수 있다. (로그인되어있다면) 7. 버튼을 누르면, DB에 결과값을 저장과 동시에 "로컬스토리지" 에 값이 저장되고, 개 페이지로 이동한다. 8. 개 페이지 에서는 로컬스토리지에 담긴, 유저의 TEST결과값을 토대로 개의 성격을 매치시켜준다. 9. 매치된 개들.. 2023. 2. 6.

티스토리툴바