CoxeMonkey

최근 편의점 아르바이트를 시작하며 비흡연자 입장에선 담배 위치 외우는게 보통 일이 아니었습니다.

한국산 담배만 약 100개 가량이 되었기에 쌩으로 외우기에는 한계가 있다고 생각이 들었습니다.

(외국산 담배, 전자 담배 까지 한다면 200개는 그냥 넘을것 같네요..)

기본적으로 담배 종류를 알고 담배 이름을 알아야 외우기를 연습할수있는데 종류와 이름 조차 알지 못하여

담배를 랜덤으로 뽑아내서 그걸 보고 찾아내며 담배 이름을 외우기로 결정했습니다.

기본적으로 Vanilla JS가 아닌 React를 사용하기로 했습니다.

Cigarette Component를 만들고 그 밑 View 와 Option Component를 배치해두었습니다.

Option Component는 즉 옵션, 힌트 이미지 체크박스, 추가 할 담배 종류 체크박스 등을 두는 Component

이며,

View Component는 담배를 랜덤으로 돌릴수 있는 돌리기 버튼이 있고 그에 따라 담배가 랜덤으로 보이는 박스가 존재합니다.

이번에 v1.0.0 버전으로 릴리즈 하며 github.io 를 이용하여 배포하였습니다. 🎉

https://gangon0215.github.io/b04-simple-cigarette-app/

디자인은 그렇게 신경쓰지 않았습니다.

지금은 v1.2.0 까지 릴리즈 되었으며 릴리즈 정보는 다음 링크를 확인하시면 알수있습니다.

담배 어플리케이션 Releases

앞으로 계획은 React 에서 Router Page 처리와 Context 와 useReducer을 이용할것이고 CRUD를 사용하며 페이지로 나눠볼 예정입니다.

전에 만들었던 프로젝트 일정서를 바탕으로 만들어 보았습니다.

전에 만들었던 간트차트를 바탕으로 만들어 보았습니다.

정리했던 글들도 있으니 보실분은 보셔도 괜찮을것 같습니당.

프로젝트 기간을 넉넉히 잡았습니다.

이유는 다른 팀 프로젝트 진행하는것도 있고 개인 공부도 따로 필요하다고 생각이 들어서 넉넉하게 잡았습니당

개발하면서 프로젝트 계획서를 처음 써봤습니다.

그래서 부족한점이 있지만 구글링해서 괜찮은 프로젝트 계획서를 보고 참고하여 만들어 보았습니다.

1Day 3Pill

작성자: CoxeMonkey, Anon

날짜: 2022년 3월 30일

서두

  React를 간단하게 공부하기 위해 만든 프로젝트 이며 그렇기 때문에 심도 있는 프로젝트는 하지 않고 차후에 Spring 을 계속공부하게 된다면 이 프로젝트는 계속 진행이 될 예정이며 그렇게 된다면 프로젝트 팀원과 함께 실 서비스 까지 진행 해볼 예정 입니다.

무엇을 만들것인가요?

  약을 먹기 위한 알약 또는 비타민을 챙기는 사람들이 많아졌습니다.

그러나 바쁜 일상을 보내다 보면 잊어버리는 경우가 있기에 이를 해결하기 위해 웹&앱으로 1일 3알약이라는 이름으로 프로젝트를 진행하게 되었습니다.

현재 기술 스택 ( 현재 제가 개발이 가능한 기술 스택 입니다 )

  FE: React

  BE: Express

차후 예상 기술 스택 ( 아직 실 적용하지 않았습니다 )

  1. FE: React, React Native

  2. BE: Spring Boot, Express - Socket IO

기능

  1-1. Home

    1-1-1. List

      1-1-1-1. Item

  1-2. Create

    1-2-1 Create Editor

  1-3. Edit

    1-3-1 Update Editor

  1-4. Chat

    1-4-1 Chat View

  1-5. MyPage

    1-5-1. Login

    1-5-2. Register

    1-5-3. My Profile

      1-5-3-1. My Profile View

      1-5-3-2. My Profile Editor

설명

  Home: 유저가 작성한 글들의 리스트를 보여주는 공간

  Create: 유저가 글을 작성하는 공간

  Edit: 유저가 썻던 글을 수정하는 공

  Chat: 다른 사람들과 채팅을 하는 공간 ( 미정 )

  MyPage: 내 정보가 있는 공간

    Login - 홈페이지 내에서 로그인 or OAuth 를 이용한 Kakao or Google 로 로그인 할수있게 만들 예정

    Register - 홈페이지 내에서 회원가입 or OAuth 를 이용한 Kakao or Google 로 회원가입 할수있게 만들 예정

    My Profile - 내 정보들을 볼수있으며 수정 버튼을 통해 수정도 가능 ( 비밀번호로 본인 확인 )

서버에서 api 받아오는 작업을 일단 하겠습니다.

사실 아직 초반 작업이라 아주 간단하게 해결이 가능합니다.

/server/Router/api.js 에서 bookReports 배열 객체를 만든뒤 dummy 데이터들을 집어넣은뒤 res.send로 날려주면 됩니다.

/server/Router/api.js

const express = require("express");
const router = express.Router();

const bookReports = [];

router.get("/rest/book", (req, res) => {
  res.send({ api: bookReports });
});

module.exports = router;

이렇게 코드를 짠뒤

const bookReports = [
  {
    "postId": 1,
    "id": 1,
    "name": "id labore ex et quam laborum",
    "email": "Eliseo@gardner.biz",
    "body": "laudantium enim quasi est quidem magnam voluptate ipsam eos\ntempora quo necessitatibus\ndolor quam autem quasi\nreiciendis et nam sapiente accusantium"
  },
  {
    "postId": 1,
    "id": 2,
    "name": "quo vero reiciendis velit similique earum",
    "email": "Jayne_Kuhic@sydney.com",
    "body": "est natus enim nihil est dolore omnis voluptatem numquam\net omnis occaecati quod ullam at\nvoluptatem error expedita pariatur\nnihil sint nostrum voluptatem reiciendis et"
  },
  {
    "postId": 1,
    "id": 3,
    "name": "odio adipisci rerum aut animi",
    "email": "Nikita@garfield.biz",
    "body": "quia molestiae reprehenderit quasi aspernatur\naut expedita occaecati aliquam eveniet laudantium\nomnis quibusdam delectus saepe quia accusamus maiores nam est\ncum et ducimus et vero voluptates excepturi deleniti ratione"
  },
  
  ...
  
  {
    "postId": 4,
    "id": 19,
    "name": "sed impedit rerum quia et et inventore unde officiis",
    "email": "Madelynn.Gorczany@darion.biz",
    "body": "doloribus est illo sed minima aperiam\nut dignissimos accusantium tempore atque et aut molestiae\nmagni ut accusamus voluptatem quos ut voluptates\nquisquam porro sed architecto ut"
  },
  {
    "postId": 4,
    "id": 20,
    "name": "molestias expedita iste aliquid voluptates",
    "email": "Mariana_Orn@preston.org",
    "body": "qui harum consequatur fugiat\net eligendi perferendis at molestiae commodi ducimus\ndoloremque asperiores numquam qui\nut sit dignissimos reprehenderit tempore"
  },
]

bookReports 데이터에 이렇게 넣어줍니다.

저는 총 20개의 데이터를 넣었고 

https://jsonplaceholder.typicode.com/

이 사이트를 통하여 데이터를 받아서 조금 추출하여 제 express 서버에서 dummy 데이터로 쓰고 있습니다.

그리고 postman 또는 브라우저 주소창에 'http://localhost:5000/api/rest/book' 이러한 url을 넣게되면

엉청난 양의 json 데이터 들이 나온다면 정상적으로 된것입니다.

이제 react에서 받아오는 코드를 짜보겠습니다.

/client/src/App.js

import axios from "axios";
import React, {useEffect, useState, useRef} from "react";

function App() {
  const [data, setData] = useState([]);

  const callApi = async () => {
    const getData = await axios.get("/api/rest/book").then((res) => res.data.api);

    console.log(getData);
  };

  useEffect(() => {
    callApi();
  }, []);
  
  return (
    <div className="reports-container">
    </div>
  );
}

export default App;

axios를 이용하여 /api/rest/book 이라는 url 을 넣고 get 요청을 합니다.

async await 함수를 이용하여 getData에 데이터가 담겼을때 console.log에 찍어주는 코드 입니다.

console 을 확인해보면 20개의 배열 객체가 나오는것을 볼수 있습니다.

이제 이것을 이용해 가공을 할것입니다.

가공은 Array.prototype.map() 함수를 이용할것이구요 

const [data, setData] = useState([]);
const dataID = useRef();

const callApi = async () => {
  const getData = await axios.get("/api/rest/book").then((res) => res.data.api);
  const initData = getData.map((item) => {
    return {
      author: item.email,
      comment: item.body,
      create_date: new Date().getTime(),
      id: dataID.current++
    }
  });
  
  console.log(initData)
};

다음과 같이 코드를 짤수있습니다.

그리고 나서 initData를 console에서 확인해본다면 우리가 원하는 대로 데이터가 가공되어 나오는것을 확인할 수 있습니다.

다음 블로그 포스트는 Component 구조와 대략적인 틀을 짜보도록 하겠습니다.

저는 Inflearn 사이트에서 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 라는 강의를 보고 Todo List 프로그램을 만들어 보았지만 뭔가 부족한 느낌이 들었습니다.

그래서 Book Reports[독후감] app 을 만들어 볼려고 합니다.

일단 기능에 대해 생각을 해볼려고 하는데 FE 부분 부터 생각을 해보자면,

기술 스택은 React + Node.js 를 사용할 예정이며 DB는 mysql을 사용하고 ORM 을 적용을 해볼것입니다.

1. 책 이미지를 넣을 공간이 필요합니다.

2. Author (작가) 를 기입할 공간이 필요하다.

3. 독후감 이기에 책에 대해 comment(설명 또는 후기)를 적어야 합니다.

4. 별점 (이 책을 읽고 나의 별점) 을 넣을수 있어야 합니다.

5. 확인 버튼 ( 다 적고 난 뒤 ) 을 클릭 할수 있어야 합니다.

이제 BE 부분을 생각하자면

1. React, Node.js 서로 연동을 할것이며 rest api를 통해 react --> epxress.js로 axios 요청을 하여 받아올것입니다.

디자인은 대충..

일단 github Repository 를 생성합니다.

npx create-react-app my-app

그리고 cmd 를 키고 작업할 폴더에서 이런식으로 명령어를 칩니다.

이럼 이런식으로 Happy hacking 이라고 나옵니다.

폴더를 보면 조금 어지러운데 정리를 조금 해줍니다.

import "./App.css";

function App() {
  return <div className="App"></div>;
}

export default App;

App.css 안에있는 내용을 모두 지우고

App.js 안에 내용을 조금 수정해줍니다.

... 계속 수정중

다음 포스트는 기본적인 컴포넌트 작업, express 서버에서 api 받아오는것을 해보겠습니다.