[Wiki Page] 4일만에 프로젝트 하나 뚝딱 해치우기

구현 과제를 받았다.

구현해야 하는 기능은 다음과 같다

• 위키페이지는 제목과 본문으로 구성되며 각각 텍스트 입니다.
• 처음페이지에서는 여러개의 위키페이지제목이 목록으로 나옵니다.
• 처음페이지에 목록으로 보여지는 제목의 갯수는 5개이며, 5개가 넘어가면 페이지를 구분해서 표시합니다.
• 위키페이지 제목을 클릭하면 제목과 본문을 볼 수 있습니다.
• 위키페이지 본문에 다른 위키페이지의 제목이 있으면 자동으로 링크가 걸리고,클릭하면 해당 위키페이지로 이동합니다.
• 메인페이지에서 추가 버튼을 누르면 새로이 입력할 수 있는 창이 나오고, 제목과 내용을 입력할 수 있습니다.
• 위키내용페이지에는 수정 버튼이 있고, 수정을 누르면 내용을 수정해서 저장할 수 있습니다.

여기에서 고민했던 부분은 페이지네이션을 어떻게 구현할지와 본문에 제목 자동 링크걸기였다.

나머지 기능은 게시판의 CRUD에서 삭제만 빠진 거였는데 이 부분은 다른 프로젝트들에서 구현해본 경험이 있었기 때문에 크게 걱정은 하지 않았다.

 

평가 기준

1. 완성도 - 과제 전반적인 완성도

2. 클린코드 - 얼마나 개발자스럽게 효율적으로 코드를 작성하였는지?

3. 로직구현 - 얼마나 과업을 이해하고 이에 대한 로직을 구현하려 했는지?

 

그래서 일단 완성도를 고려하려면 디자인이 빠지면 안되겠다는 생각에 일정에 디자인 작업을 추가했다. 그리고 나서 또 어떤 작업을 해야 하는지 고민 하다가 DB도 만들기로 했다. 그런데 나는 프론트 개발자니까 서버 개발은 할 수 없으니 서버리스로 파이어베이스를 사용해 DB를 연결하기로 마음 먹었다.

 

사실 파이어베이스는 사용해본적이 없는데 과제가 DB를 사용하지 않고 구현하려면 목업 데이터를 생성하고 로컬 스토리지를 사용해야 하는데 실제 구현해야 하는 기능에 맞는 방식이라는 생각이 안들기도 했고 이번 기회에 파이어베이스 다뤄보고 싶다는 생각이 들었다.

 

그래서 전체 작업 계획을 기능 구현(react + typescript) / 디자인(figma + style component) / DB + firebase 로 나눠서 잡았다. 마지막은 디버깅하고 문서 작업하기로 했다. 사실 나중에 가서 반응형도 할걸 싶어서 급하게 디자인 작업을 했으나 결국 작업 시간이 모자라 못했는데 지금 생각해보니 처음 계획할 때 일정에 넣어서 했어야지 싶었다.

 

일단 디자인과 서버를 신경쓰지 않고 프론트 기능 구현을 시작하니 필요한게 목업 데이터였고 데이터를 새로 생성하고 수정하고 조회하고 삭제하는 코드들이 전부 수정되어야 하는구나 하는 생각에 잠시 슬펐지만 내가 사용할 수 있는 자원을 고려하면 이 계획이 합리적이라는 생각에 일단 작업했다.

 

작업할 때 typescript를 일부러 사용하지 않았다. 지금까지의 경험으로 다 만들고 나서 마이그레이션 하는것이 더 개발하기 쉬웠기 때문이기도 하고 지금 이 프로젝트는 규모가 매우 작은 편이었으니 한번에 오류 처리하는게 더 효율적일것 같다는 생각을 했기 때문이다. 개인적으로 타입스크립트 상태에서 기능을 추가하거나 기능을 수정한다면 타입 오류를 무수히 많이 만나는데 그러면 실질적으로 기능이 돌아가는지 확인하기 위해 너무 많은 다른 작업을 해야 한다고 생각했다..

 

근데 이 작업을 커밋으로 남겨야 된다는 생각을 못해서 하루종일 그냥 작업했다. 결국 다끝나고 한번에 push 하게 되었다. 그때는 터미널로 push 해서 몰랐다. 아무생각 없이 상위 폴더가 한글 이름인 파일에서 작업을 시작했었다. 비주얼 스튜디오가 터미널이랑 다른 해싱을 거치기 때문에 경로에 한글파일이 있으면 안되는 거였는데..

 

비주얼 스튜디오에서 파일단위로 커밋을 하려고 나중에 시도하니 안되는 바람에 마지막 날 전까지 커밋이 자세하게 되어있지 않다. 나중에 그게 상위 어딘가 폴더가 한글이어서였다는 걸 알고 다음부터는 이런 실수를 하지 않겠다는 다짐을...

 

1일차

일단 첫날은 다음과 같이 작업했다.

https://github.com/yejify/KYJ_WikiPage/commit/0f07a22ea60a8bc0182f3d6929ea23c406a61041

 

첫날 작업의 제일 고민했던 부분은 자동 링크에 관한 부분이었다.

위키페이지 본문에 다른 위키페이지의 제목이 있으면 자동으로 링크가 걸리고,클릭하면 해당 위키페이지로 이동합니다.

  // 포스트 제목을 길이에 따라 내림차순으로 정렬
  const sortedPosts = [...posts].sort(
    (a, b) => b.title.length - a.title.length
  );

  // 포스트 내용을 React 컴포넌트 배열로 변환
  const contentComponents = [];
  let remainingContent = post.content;

  sortedPosts.forEach(({ id, title }) => {
    // 현재 남아 있는 내용에서 제목을 찾음
    const index = remainingContent.indexOf(title);
    if (index !== -1) {
      // 제목 이전의 내용 추가
      if (index > 0) {
        contentComponents.push(remainingContent.substring(0, index));
      }
      // 제목에 해당하는 부분을 Link 컴포넌트로 추가
      contentComponents.push(
        <Link key={id} to={`/postDetail/${id}`}>
          {title}
        </Link>
      );
      // 남은 내용 업데이트
      remainingContent = remainingContent.substring(index + title.length);
    }
  });

  // 남은 내용 추가
  if (remainingContent) {
    contentComponents.push(remainingContent);
  }

 

이 코드도 문제가 있었는데 그건 디버깅 기록을 따로 했다.

https://smileyj.tistory.com/44

[Wiki Page] 내용에 있는 제목 자동 링크걸기 디버깅

 

2일차

typescript로 마이그레이션 먼저 진행했다. 이때 설정한 타입이 DB에 똑같이 들어가야 하니까 생각을 잘 해야 했다. 하지만 인간은 실수를 통해 성장..한..다. id를 설정하는 부분에서 현재 시간을 사용하면서 숫자였다가 라우터 설정으로 문자였다가 했는데 이걸 이때 바로 잡았어야 했다. 이 부분은 마지막날까지 나를 스트레스 받게 했는데 이 부분도 디버깅 기록을 따로 했다.

https://smileyj.tistory.com/49

[Wiki Page] typescript에서 만난 오류 디버깅

 

그렇게 마이그레이션을 마치고 산뜻하게 디자인 작업을 시작했다.

디자인 작업 결과물

디자인은 욕심을 버리기로 했다. simple is the best^^

그렇지만 저 작업을 하는 것도 시간이 순삭이었다. 심지어 반응형 작업도 안했는데 그랬다. 생각보다 컬러는 골라야 할 것들이 많다. 디자이너는 아무나 할 수 있는 직업이 아니라는 걸 또 다시 깨달았다.

 

3일차

어느새 3일차가 되었다. 원래는 디자인 작업이 구현까지 끝났어야 했지만 그럴 수 없었다. 스타일 컴포넌트로 작업을 시작했다. 스타일 코드를 분리할지 말지 고민을 많이 했지만 파일을 많이 분리하는 것보다 한번에 하는게 나을 것 같다고 생각했다. 코드들이 많지 않은데 import를 많이 사용하는것 보다 한 파일에서 관리하는게 편할 것 같아서였다.

 

작업하면서 처음에 eslint와 prettier 설정을 안했었는데 그게 적용이 안되서 스타일 작업한 코드들 줄이 자유롭게 있길래 후다닥 전에 사용하던 설정을 가져와서 적용했다.

//eslint 설정
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'react-app',
    'prettier',
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:prettier/recommended',
    'plugin:react-hooks/recommended',
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
  ],
  overrides: [
    {
      env: {
        node: true,
      },
      files: ['.eslintrc.{js,cjs}'],
      parserOptions: {
        sourceType: 'script',
      },
    },
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react', 'prettier'],
  rules: {
    'react/prop-types': 0,
    'react/react-in-jsx-scope': 0,
    'no-unused-vars': 'off',
    'prettier/prettier': ['error', { endOfLine: 'auto' }],
  },
};

//prettier설정
{
  "printWidth": 80,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "tabWidth": 2,
  "semi": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "arrowParens": "always"
}

 

그러고 나서 페이지네이션 라이브러리 공식 문서를 찾아가며 스타일 컴포넌트 작업을 마무리했다.

 

4일차

일정상 오늘은 디버깅 데이였어야 했다. 그렇지만 계획은 변경되라고 있는것이다. 그래서 파이어베이스 공부를 시작했다. 사실 공부까지는 아니고 그냥 블로그 글을 찾아보며 무작정 따라했다. 블로그 정리를 잘 해두신 분들에게 많은 도움을 받았다. 그렇지만 파이어베이스로 배포는 실패했다. 그래서 전에 사용하던 버셀로 배포했다. 파이어베이스 사용기도 따로 글로 작성했다.

(는 예정..)

 

자정에 끝내야 하는데 전날 디자인 하면서 반응형이 아쉬워진 나는 그래도 어떻게 하루종일 하면 할 수 있지 않을까? 하는 무모한 생각을 하기 시작했고 결국 디자인만 피그마에 완성했다.

 

디버깅했던 주요 내용들을 정리해보았다.

• 내용 안에 제목이 여러개일 때 링크가 하나만 생성(커밋)
• 배포 했을 때 데이터가 안들어옴
• 리스트 순서가 계속 바뀜(커밋)

막상 다 끝난 결과물을 확인해보니 중간에 고민한 내용이 보이지 않는것 같았다. 그래서 블로그에 글을 쓰라고 하는 거구나 하는 깨달음을 얻었다. 그리고 나서 태블릿 사이즈까지는 반응형 작업 없이도 문제가 없었는데 모바일에서만 깨지는 걸 보고 일단 디자인을 해보자는 생각을 했다.

 

모바일 반응형 디자인

급하게 만든거라 그런지 몰라도 약간 퀄리티가 아쉬운데 제출이 자정까지라 그마저도 적용을 못했다. 수정해서 적용하고 싶은데 제출은 메인브런치로 하고 새로 브런치 파서 작업하면 문제가 되려나..? 잘 모르겠지만 일단 브랜치는 만들었다.

 

후기

4일동안 한거 치고는 결과물이 나쁘지 않아서 기분이 좋았다. 기준이랑 상관없는 기능이나 작업을 많이해서 과제 평가가 어떻게 나올지는 모르겠다. 평가가 끝나고 다시 작업할 수 있게 되면 일단 회원가입과 로그인 기능을 구현할 예정이다. 파이어베이스는 원래 보안에 민감한데 지금은 개발자 모드라 모두가 접근해도 CRUD가 가능하지만 계속 경고문구가 뜨는게 신경쓰여서 admin계정을 만들 예정이다.