2. 블로그의 메인 페이지

오랬만에 글을 올린다!

필자는 블로그를 만들때 client와 server로 나눠서 진행했다. server는 app.js에 여럿 미들웨어를 등록시켰다. 다음은 server의 package.json파일이다.

{
  "name": "blog-server",
  "version": "0.0.1",
  "description": "make blog with node",
  "main": "app.js",
  "scripts": {
    "start": "nodemon app",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bcrypt": "^2.0.1",
    "connect-flash": "^0.1.1",
    "cookie-parser": "^1.4.3",
    "cors": "^2.8.5",
    "dotenv": "^5.0.1",
    "express": "^4.16.2",
    "express-rate-limit": "^3.3.2",
    "express-session": "^1.15.6",
    "jsonwebtoken": "^8.4.0",
    "morgan": "^1.9.0",
    "mysql2": "^1.5.1",
    "passport": "^0.4.0",
    "passport-kakao": "0.0.5",
    "passport-local": "^1.0.0",
    "pug": "^2.0.1",
    "sequelize": "^4.31.2",
    "uuid": "^3.1.0"
  },
  "devDependencies": {
    "eslint": "^5.14.1",
    "nodemon": "^1.14.11"
  }
}

로그인 회원가입을 구현할지는... 모르겠지만 우선 미들웨어로 등록해 놓았다. 또 pug를 사용해서 view를 나타낼지는 잘 모르겠지만... 우선 미들웨어로 등록해 놓았다.

서버는 어려워

서버는 API를 제공하는 방식으로 갈 생각이기 때문에 먼저 만들어볼 생각이었다. 하지만 필자는 부끄럽지만 서버를 잘 다루지 못한다...! 따라서.. 클라이언트를 먼저 만들어보고자 했다.

현재 view를 먼저 만들어보고 있는데 2019.03.10에 Main Page를 완성했다. A List Apart 블로그를 참고하여 디자인 했으며 ( 거의 다 베꼈다 ㅎㅎ; ) 다음은 나의 블로그 App.jsx이다.

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";

import { Main, Header, Footer } from "./container";
import "./App.css";

const App = () => (
  <div className="App">
    <BrowserRouter>
      <>
        <Header />
        <Switch>
          <Route path="/" component={() => <Main />} exact />
        </Switch>
        <Footer />
      </>
    </BrowserRouter>
  </div>
);

export default App;

이제 남은 라우터가 8개 정도 남았다. 남음 페이지를 만들다보면서 많은 이슈가 나올 것 같다.

이슈

메인페이지를 만들면서 공용으로 사용할 컴포넌트인 Header와 Footer를 만들었는데 애니매이션이 적용이 안되서 많은 곤욕을 겪었다.

1년안에 블로그를 만들어서 포트폴리오로 사용할 것이다.