개요

doday 는 todo 기능 과 D-day 기능을 합친 챌린지 앱입니다.
Javasciprt 연습과 Node.js 를 사용해 간단한 풀스택 웹앱을
만드는 목표를 가지고 미니 프로젝트로 진행되었습니다.

DB 의 복잡도가 낮고, 컬럼 자체가 많지 않기때문에
No-SQL인 MongoDB 를 이용해 데이터베이스를 구성하였습니다.

프로젝트 목표

• 모바일 우선으로 설계 및 디자인
• 일반적인 Todo 기능
• Todo 에 D-day 기능 구현
• 데이터의 입출력은 비동기 방식으로 작동할것

기술 사항

• Vanila Javascript 로 프로그램 작성
• Node.js 를 이용한 웹서버 및 백엔드 CRUD 작성
• Npm 패키지 사용법 숙달
• Mongo DB 이용
• Axios API를 이용한 비동기 방식
• OCCSS 적용

---

UI/UX

모바일 우선 & 반응형 UI

• UI/UX 는 fimga 를 이용하여 작성하였습니다.
• 모바일 화면으로 레이아웃을 구성하고, 반응형으로 디자인하였습니다.

---

node express 웹서버 구축

node.js 를 사용하는 이유

• 자바스크립트 개발자가 웹서버 개발까지 가능
• 빠른 웹 애플리케이션 개발이 가능
• 풀스택 지향
• 구글링 으로 node.js 클라이언트 설치 후 실행

Express.js

Node.js 에서 웹 어플리케이션 , API 서버를 구축하는데 가장 많이 사용되는 대표격인 프레임 워크

1. 터미널 에서 명령어 실행

npm init-y

2. express 설치

npm install express

• Express 패키지가 설치 되면, 프로젝트 폴더에 node_modules 라는 폴더가 생성, 자동으로 express 패키지가 참조하고 있는 npm 패키지들이 설치됨

2. root 경로에 app.js 파일 생성

/// app.js

const express = require('express');
const app = express();
const port = 3000; // sever port number

app.get('/',(red, res) => {
    res.send('Hello World');
});
// app.listen( ) 함수를 사용해서 서버를 실행
app.listen(port, ()=>{
    console.log(`서버가 실행 됩니다. http://localhost:${port}`);
})
 No newline at end of file

3. 서버 실행

node app.js

4. 브라우저에서 http://localhost:3000 을 입력 후 , 웹페이지가 뜨면 성공

OOCSS 적용

Obejct Oriented CSS

• OOCSS 는 CSS 모듈 방식으로 작성하여, 중복을 줄이는 방식의 방법론
• OOCSS 는 가장 많이 사용되는 방법 중 하나, 구조와 스타일을 분리하여 작성
• 코드의 재사용성이 높아져 적은 코드량으로 최적의 성능
• 다만, 가독성이 떨어질 수 있다.

<!-- 기존 방식 --> 
  <a class=”instagram_btn instagram_skin”>Instagram</a>
  <a class=”facebook_btn facebook_skin”>Facebook</a>


  <!-- OOCSS 적용 -->
  <a class=”btn skin instagram”>Instagram</a>
  <a class=”btn skin facebook”>Facebook</a>
.btn {
    display: inline-block;
    width: 380px;
    height: 50px;
    text-align: center;
}

.skin {
    margin: 10px 5px;
}

.instagram {
    background-color: #f9f9f9;
}

.facebook {
    background-color: #45B759;
}

google font 적용

• 구글 폰트 사이트에 접속
• 마음에 드는 폰트를 선택 후, Use on the web 탭에서 @import 또는 링크 방식으로 복사 후 해당 코드에 붙여넣기
• CSS 내에서 태그에 해당 font-family 를 지정해주면 폰트 적용