프로젝트 난바 투

JMT 놀러옵서!

먼저 Project-α (리펙토링 및 기능추가)가 끝났다(라고 나는 생각한다 고로 존재한다 췍).

프론트엔드를 맡았던 한 분은 빠지고 나와 백엔드 두분 총 셋이서 프로젝트를 진행하였는데,
이 기간동안 추가한 기능은 적지만 이전 프로젝트 기간보다는 더 많은 지식을 습득한 것 같다.

글 시작전에 앞서 함께 Project-α를 같이 해준 백엔드(라 쓰고 풀스택이라 읽는다) 두분께 감사를 !

🦭 먼저 이번 프로젝트에서 나는 타 유저들과 소통할 수 있는 게시판을 만들고 싶었다.
왜냐하면 개인적인 용도로 사용되는 웹(앱)도 타 유저들과 소통할 수 있는 공간 하나쯤은 있기 마련
🤷‍♂️ 이미 채팅방으로 소통할 수 있지 않나요 ?
🤔 맞는 말이지만 채팅방은 웹페이지를 나가면 채팅기록이 사라지고 누가 어떤 채팅을 주고 받았는지 알 수 없다. 그래서 데이터로 저장할 수 있는 페이지가 필요하다고 생각하였다.

🦭 처음 나의 계획은 게시판에서 유저가 작성한 trip이나 account를 공유할 수 있게 만들려고 하였다.
그러나 게시판을 만들다보니 이러한 것들의 존재가 과연 필요한가 싶었다.
diary와 account의 상세내용은 사적인 부분이 많이 들어가있기 때문에 공유하기가 매우 불편할 것 이고
trip은 .. 그냥 인증뱃지정도로 사용될 뿐 나라별로 게시판을 나눈 것이 아닌 그냥 자유게시판 그 자체기 때문에 그냥 딱 깔끔하게 자유게시판정도만 먼저 구현하자고 팀원들과 합의를 했다.

Project-β를 진행하게 된다면 또 국가별로 나눠볼지도....?

🦭 뒤돌아보니 이렇게 수정을 많이 했구나... 대단하구나...
여기에 대한 내용은 앞전에 글로 작성했기 때문에 팻-스

🤷‍♂️ 이번 프로젝트도 이전의 프로젝트와 목표가 같았나요 ?

🙅‍♂️ 정답은 NO
이번 프로젝트를 진행하면서 나는 적어도 두가지는 꼭 지키면서 코드설계를 하기로 다짐(작정)했다.
1. 깨끗한 코드 작성하기
2. 스타일드 컴포넌트를 styles.js와 같은 파일에 몰아서 만들기
3. 스타일드 컴포넌트 재활용 잘해보기
4. 컴포넌트 잘 나누기

🦭 이전의 프로젝트 파일들 중 내 흔적을 보면 이렇게 조건문과 T/F(boolean)활용을 잘하지 못하여 같은 코드를 반복해서 작성하거나

🦭 스타일드 컴포넌트 총공격 + 하나의파일에 모든것을 다 쏟아부리기 세트콤보로 인해
기능은 별로 없지만 코드가 500줄이 넘어가는 대참사가..!

++ 원래 나의 계획은

이렇게 폴더명과 함수명을 일치시키고 index.js와 그 컴포넌트에 필요한 스타일드 컴포넌트 파일을 각기 만들게 설계하려고 하였으나

우리의 프로젝트는 큰파일 > 함수명(컴포넌트)파일 > 하위 컴포넌트 > 하위 컴포넌트....
이런형식이므로 각 파일마다 컴포넌트파일도 함께 만들까 생각했지만 (예들들어 PostList.js면 PostListStyles.js 이렇게)
그럼 너무 파일이 걷잡을수없이 많아질 것 같아서(사실 보기도 흉하고 파일수도 몇 없기 때문에) 그냥 여러 스타일드 컴포넌트를 한 파일에 묶어 사용하기로 정했다.

그래서 이번에는 최대한! 내가 활용할 수 있는 모든것을 쏟아 부어서
누가봐도 읽기 쉽게 코드를 작성하려고 했다.

🦭 이번에 내가 계획한 게시판(BOARD)의 파일구조는 이렇다.
다른 페이지의 폴더구조와 거의 일치하도록 노력하려 했으나 PostWriteOn.js와 PostView.js가 새 페이지에서 구성되는 탓에 useReduce훅을 굳이 사용할 필요가 없어졌다고 판단되어 PostStore.js는 만들지 않았다.

🤷‍♂️ 즈기요 저기 왜 영어로 적혀있....?
🙄 영어공부ing.... 질문이라도 영어로...ㅋㅋㅋㅋㅋㅋㅋ

🦭 그 결과 이렇게 폴더 및 파일들이 만들어졌다.
Comment 부분은 (구)팀장님이 만드신 영역.. 내가 해야했었는데 같이해주셨다 흑

🤷‍♂️ PostItem.js가 굳이 필요한가요 ? PostList.js에서 data들을 map으로 출력해주어도 될 것 같은데
🤔 사실 그 부분에 대해서 나도 생각을 많이 했었다.
과연 저 컴포넌트는 필요한것인가 !

PostList.js에서 data들을 map함수로 출력해주는 부분이고
(여기서 삼항연산자로 filterTitle과 currentPosts로 나뉘어져 있는데, filterTitle는 검색창을 이용했을때 data를 보여주기 위함이고currentPosts는 검색창을 이용하지 않았을 때 전체데이터를 보여주기 위함이다)

PostItem.js의 함수이다.

🦭 사실 코드들이 적기 때문에 이 컴포넌트를 없애고 PostList.js에 합쳐줄까 했지만,
위쪽에 삼항연산자를 보면 <PostList>가 중복되어 작성되어 있는것을 볼 수 있다.
두번 적게 되면 코드도 길어지고 가독성도 떨어질 뿐 더러

이러한 소중한 의견도 있었기에 그냥 나누기로 결정! (사실 이 의견 듣기전에 벌써 나눠놓음 도륵)

게시판 구현한 모습

비회원인 경우 게시판(BOARD)을 접속한 화면

회원(로그인 후)인 경우 게시판을 접속한 화면
게시글 및 댓글을 작성할 수 있다.

게시글 작성

게시글 수정
우리는 작성한 date를 고정하기로 정해서 게시글 수정 시 주작?을 막기위해
수정된 글은 움짤과 같이 수정된 글임을 알 수 있게 코드를 작성하였다

댓글 수정

게시글 삭제

댓글 삭제

글 제목을 검색할 수 있다

게시글이 11개 이상이되면 페이지를 나누어서 보이게끔 만들었다 !

배움++

연산자, 조건문과 Boolean값을 이용하면 코드도 줄일 수 있고 웬만한 것들은 구현할 수 있다!
Axios? 진짜 별거 아니다 작성하다보면 익혀진다는데 그것은 실화
대체 자기 자신의 글인지 아닌지 구분을 어떻게 하나 생각을 많이 해봤는데, 세션에 저장된 유저닉네임(중복된 닉네임을 만들 수 없음)과 글을 작성한사람의 닉네임을 대조하면 자기가 작성한 글과 댓글만 수정 및 삭제가 가능하다!
map()은 위대하다 우어어어 !

페이지 분할에 관하여

데이터가 많아지면 페이지 길이가 늘어나게끔 Diary와 Account를 만들었지만
게시판은 카드형식이 아니기 때문에 데이터수가 늘어남에 따라 분할하여 보여주는것이 나은 것 같아 기능구현을 시도하였다.

// PostList.js

//...중략
  const [currentPage, setCurrentPage] = useState(1);
  const [postsPerPage, setPostPerPage] = useState(10);

//...중략

  const indexOfLast = currentPage * postsPerPage;
  const indexOfFirst = indexOfLast - postsPerPage;
  const currentPosts = posts => {
    let currentPosts = 0;
    currentPosts = posts.slice(indexOfFirst, indexOfLast);
    return currentPosts;
  };

//...중략

        <DataTablesBox>
          {searchDatas
            ? filterTitle.map(el => <PostItem key={el.id} data={el} />)
            : currentPosts(datas).map(el => <PostItem key={el.id} data={el} />)}
        </DataTablesBox>
        <PaginationBox>
          <Pagination
            paginate={setCurrentPage}
            totalDatas={datas.length}
            postsPerPage={postsPerPage}
          />
        </PaginationBox>

currentPage에 첫 페이지의 수와 postPerPage에 포스팅을 할 data의 갯수를 기입한다.
이 두 수를 곱한 값에 포스팅할 data 갯수를 뺀 수를 indexOfFirst에 기입한다.

그리고 포스팅할 갯수들의 data들만 보여주기위해 slice메소드를 이용하여 함수를 만들어준다.

그리고 첫 화면에 포스팅할 갯수이상의 data(여기선 11번째 data)를 보여주기 위해선 다음 페이지로 넘어가야하니 페이지마다 data를 보여주기위해 Pagination.js를 만들어준다

//Pagination.js
function Pagination({ paginate, totalDatas, postsPerPage }) {
  const pageNumbers = [];
  for (let i = 1; i <= Math.ceil(totalDatas / postsPerPage); i++) {
    pageNumbers.push(i);
  }

  return (
    <div>
      <nav>
        <PageUl className="pagination">
          {pageNumbers.map(num => (
            <PageLi key={num} className="page-data">
              <PageSpan
                onClick={() => {
                  paginate(num);
                }}
                className="page-link"
              >
                {num}
              </PageSpan>
            </PageLi>
          ))}
        </PageUl>
      </nav>
    </div>
  );
}
export default Pagination;

pageNumbers라는 변수에 빈배열을 선언해주고 반복문을 이용하여 totalDatas / postsPerPage의 결과값씩 배열에 묶어넣어준다. 그리고 그 배열을 map메소드를 이용하여 출력해주면 된다 !

이정도 로직은 눈감고 짤 수 있어야한다고.... 구글링이 대답함

반성++

지금보니 너무나 간단..한거였는데 왜 여지껏 어렵다고 도전하지 않은것인가...!
그리고 multer... 언제구현할래 ? 흑흑흑
끝났지만 끝난것이 아니다

오늘의 한줄요약

우리의 멋진 프로젝트는 끝이났지만.. 나는 아직도 할 게 많다
일단 내가 구현하고 싶은것을 도움 와장창받아 구현했다는 점은 너무나 만족스럽지만
한편으론 더 많은걸 구현하지 못해서 아쉽기도 하다
그리고 서버코드를 잘 읽지 못하니 서버에서 오류가 났음에도 불구하고
클라에서 문제를 찾는 나는 도덕책...
??? : 난 프론트엔드만 할거니까 서버따위 몰라주겠어!

이랬던 나를 반성하고 또 반성한다.

앞으로 나의 계획
1. 영어공부하기
2. 서버코드 최소한 알아야할건 알기
3. 이력서 다듬기
4. 쇼핑몰 만들기 프로젝트 진행
5. 타입스크립트 공부
6. 저 좀 뽑아줍서! 하고 뛰어다니기

엉엉어엉 화이팅 !

🦭

---

Gaen Naia Kyri Vi