20조 REWIND Frontend

Team

• Frontend : 오세명,한우석 (REACT)
• Backend : 오준석,최선강 (SPRING)
  
  
  

REWIND란?

• 그 동안 Backend,Frontend가 공부하고 정리했던 내용들을 각 프레임워크별 (Spring,React,Node.js)로 모두 공유할 수 있는 게시판을 구현하려고 합니다. 게시판은 기본적으로 메인페이지에 모든 프레임워크들의 게시글들이 한번에 보여지며 각 카테고리속에는 그에 해당하는 게시글들만 보여집니다. 유저는 로그인을 하여야 기본적인 서비스를 이용할 수 있습니다.

Normalizing State Shape

세명님이 이때까지 강의 내용과는 다른 새로운 구조의 Redux를 보여주시며 이렇게 진행 해볼 생각이 없냐고 하셨는데 처음엔 강의도 아직 자유자재로 다루지 못하는데 새로운걸 시도해보는게 맞나.. 하는 생각이 들었지만 그래도 새로운 무언가를 배운다는 것은 언제나 신나는 일이니... 결국 하기로 했었다.

어떤 방식인지 궁금하여 찾아 보니 Normalized State 라고 하는 방식이였다.

const blogPosts = [
  {
    id: 'post1',
    author: { username: 'user1', name: 'User 1' },
    body: '......',
    comments: [
      {
        id: 'comment1',
        author: { username: 'user2', name: 'User 2' },
        comment: '.....'
      },
      {
        id: 'comment2',
        author: { username: 'user3', name: 'User 3' },
        comment: '.....'
      }
    ]
  },
  {
    id: 'post2',
    author: { username: 'user2', name: 'User 2' },
    body: '......',
    comments: [
      {
        id: 'comment3',
        author: { username: 'user3', name: 'User 3' },
        comment: '.....'
      },
      {
        id: 'comment4',
        author: { username: 'user1', name: 'User 1' },
        comment: '.....'
      },
      {
        id: 'comment5',
        author: { username: 'user3', name: 'User 3' },
        comment: '.....'
      }
    ]
  }
  // and repeat many times
]

기존 강의에서는 이와 같은 방법으로 state를 관리 했었는데 이번에 새로 배운 방법은 아래와 같다.

{
    posts : {
        byId : {
            "post1" : {
                id : "post1",
                author : "user1",
                body : "......",
                comments : ["comment1", "comment2"]
            },
            "post2" : {
                id : "post2",
                author : "user2",
                body : "......",
                comments : ["comment3", "comment4", "comment5"]
            }
        },
        allIds : ["post1", "post2"]
    },
    comments : {
        byId : {
            "comment1" : {
                id : "comment1",
                author : "user2",
                comment : ".....",
            },
            "comment2" : {
                id : "comment2",
                author : "user3",
                comment : ".....",
            },
            "comment3" : {
                id : "comment3",
                author : "user3",
                comment : ".....",
            },
            "comment4" : {
                id : "comment4",
                author : "user1",
                comment : ".....",
            },
            "comment5" : {
                id : "comment5",
                author : "user3",
                comment : ".....",
            },
        },
        allIds : ["comment1", "comment2", "comment3", "comment4", "comment5"]
    },
    users : {
        byId : {
            "user1" : {
                username : "user1",
                name : "User 1",
            },
            "user2" : {
                username : "user2",
                name : "User 2",
            },
            "user3" : {
                username : "user3",
                name : "User 3",
            }
        },
        allIds : ["user1", "user2", "user3"]
    }
}

딱 보기에도 깔끔해 보이고 관리하기가 더 쉬울것 같아 하기로 했었는데 그래도 처음 보는 방식이라 그런지 이거 또한 하루를 꼬박 잡아먹었다.. 자기 전 쯤엔 그래도 조금 익숙해진 것 같아서 내일 부터는 속도가 조금 날 것 같았다.

Toast UI Editor

게시글을 작성 할 때 코드를 올려야 한다는 생각에 문득 MarkDown Editor를 적용해보고 싶다는 생각이 들었다.

세명님께 말을 해봤는데 정말 좋은거 같다고 하셔서 내가 맡아서 진행 하기로 하여 에디터 라이브러리를 찾아 보았다.

에디터를 찾아본 결과 Toast ui라는 라이브러리를 찾았고 그냥 쉽게 적용할 수 있을 것 같은 생각에 바로 적용을 해 보려 했는데 이런 라이브러리를 처음 사용 해봐서 그런지 적용 하는데 생각보다 어려움을 느꼈지만 그래도 설명이 잘 되어 있어 에디터를 띄우는 것 자체는 오래 걸리지 않았다.

세부적인 기능을 만져보다가 일단은 좀 문서를 읽어보는 것이 더 좋다는 생각이 들어 Sorce Code와 DOC를 계속 찾아보고 내일부터 적용 하려고 한다.