[Booklog] 북 로그 - 독서로 포트폴리오를 채우다 !

 

---

Dormammu (github.com)

 

Dormammu

 

📘 BookLog - 독서로 포트폴리오를 채우다 !

 

1. 기획 의도

- 독서에 진심인 사람들을 위한 독서 관련 모든 서비스를 제공 

- 독서 리뷰, 독서 포트폴리오, 독서 커뮤니티, 독서 모임 기능 제공

 

2. 기술 스택

 

3. 역할 분배

• 기획(1) : UX/UI 디자인
• 백엔드(2) : API 설계 및 작성
• 프론트엔드(2) : 웹 페이지 구현

 

4. 기능 소개

프론트분이랑 같이 만든 영상 !  ! !

 

5. 개발 과정

---

BookLog 개발 일지

 

 

E2I4-IT-sTIME/Book-log-Frontend: 💻Book-log-Frontend Development💻 (github.com)

GitHub - E2I4-IT-sTIME/Book-log-Frontend: 💻Book-log-Frontend Development💻

 

 

2022.03.28 _ NextJs 프로젝트를 생성 

yarn create next-app --typescript

위 명령어로 nextjs + typescript 가 합쳐진 프로젝트를 생성할 수 있다.

명령어를 입력하면, 프로젝트 명을 묻는다.

페이지별로 파일을 생성해주었다.

 

 

2022.04.02 _  Add : 로그인, 회원가입 컴포넌트

sign 페이지 안에들어갈 로그인 컴포넌트와 회원가입 컴포넌트의 레이아웃을 만들었다.

후에 state를 설정하여 isLogin = true일 땐 로그인컴포넌트를 보여주고 false일 땐 회원가입 컴포넌트를 보이도록 할것

 

2022.04.10 _ Fix : login css, footer

로그인 컴포넌트의 css를 디자인에 맞게 수정했다.

footer를 만들었는데 화면의 제일 하단에 와야되는데 body 바로 밑에 생기는 문제가 있다.

 

2022.04.06 _ Fix : sign 페이지 통신 함수 

백엔드와 통신하기 위해 axios 라이브러리를 이용하여 통신함수를 작성했다.

 

 

2022.05.09 _ Fix : 병합 오류

sign페이지에서 로그인 회원가입을 내가, 추가 정보 작성을 다른 프론트분이 만들고있었는데

합치는 부분에서 충돌이 일어나서 일일히 충돌부분 확인하면서 코드를 수정했다.

 

 

2022.05.17 _ Fix : 푸터 위치, html height

nextjs에서는 body크기가 body안에있는 컴포넌트의 크기에 따라서 달라졌다.

구글링해서 모든 body를 height 100% 하는 방법을 알아냈다.

How to make a page full height in Next.js (github.com)

 

_app.tsx에서

<style global jsx>{`
      html,
      body,
      body > div:first-child,
      div#__next,
      div#__next > div {
        height: 100%;
      }
    `}</style>

를 적어주면 100% 가된다 ! !

근데 이렇게 했더니 footer가 크기가 이상해졌다... 왜그런지 모르겠다.

분명히 height을 50px로 지정해놨는데 비정상적으로 height 의 크기가 body크기만큼 차지한다...

 

 

2022.05.18 _ Fix : 통신 , 버튼 수정

fix : 통신 , 버튼 수정 · E2I4-IT-sTIME/Book-log-Frontend@f53ed70 (github.com)

fix : 통신 , 버튼 수정 · E2I4-IT-sTIME/Book-log-Frontend@f53ed70

UI폴더에 Button 컴포넌트 생성해서 css 겹치는 부분을 재사용하려했는데

백엔드랑 통신하니까 button으로 하면 type="submit"이 되는데 Button 컴포넌트를 생성해서 하니까 안된다.

찾아보니까 Button에 props를 뭐.. 해줘야한다는데 typescript로 하니까 계속 에러나서 걍 기본 button으로 바꿨다.

나중에...해결하는걸로 ㅎ

 

 

2022.06.30 _ Fix: 푸터css, 전체 레이아웃

fix: 푸터css, 전체 레이아웃 · E2I4-IT-sTIME/Book-log-Frontend@b3f1d7b (github.com)

fix: 푸터css, 전체 레이아웃 · E2I4-IT-sTIME/Book-log-Frontend@b3f1d7b

푸터 css를 디자인에 맞게 수정했다.

그리고 푸터 크기가 body크기 만큼 되는 이유를 알았다.

 

왜냐면 

<style global jsx>{`
      html,
      body,
      body > div:first-child,
      div#__next,
      div#__next > div {
        height: 100%;
      }
    `}</style>

nextjs 프로젝트를 실행하면 html 구조가

html , body , div#__next, ... 로 이루어지는데

div#__next > div는 div#__next 에서 자식요소 중 첫번째 div가 height 이 100%가 되는데

우리 프젝에서 div#__next 하위 요소중 첫번째 div가 footer 컴포넌트였다.

(다른 프론트분은 전체 감싸는 태그를 <nav> 라고 했는데 나는 <div className="footer"> 라고 해놨음 ㅎ)

 

그래서 아래와 같이 수정했는데

<style global jsx>{`
      html,
      body,
      body > div:first-child,
      div#__next{
        width: 100%;
        height: 100%;
        margin: 0;
      }
      div#__next > div {
        height: auto;
        min-height: calc(100%- 130px);
      }
    `}</style>

div#__next안에 있는 하위 div의 height을 auto라고 하고,

최소 크기를 전체 화면 크기로 설정했다. 130px은 네비바랑 푸터 height 길이 합친거

이렇게 하면 footer크기는 내가 설정한 80px로 바뀌고 !! height크기도 화면 크기만큼 된다. 호호

 

근데 화면 크기가 100%인데 스크롤이 생겨서 보니까 footer길이내가 80px로 해놨는데 81px로 잡힌다. 왜지?

일단은 79px로 수정했음..

 

 

2022.06.30 _ Fix : login css 수정

login컴포넌트의 css를 수정했다.

네이버/구글/카카오로 로그인 이미지 넣어서 버튼 만듬

근데.. 로그인 페이지에 이상한 하단여백이 생긴다.. 뭔지 모르겠음 뭐지?

 

2022.07.01 _ Fix : 회원가입 페이지 css, 로그인 페이지 css

로그인페이지 디자인이 바뀌면서 다시 수정했다.

 

 

2022.07.06 _ Add : 서평 만들기 컴포넌트

 내가 포트폴리오 페이지 만들기로해서 포트폴리오페이지에서 쓰이는 컴포넌트들을 만들기 시작했다.

그 중 서평 컴포넌트 만들었음 근데 디자인이 아직 안만들어져서 레이아웃만 대충 만들었다.

그리고 login css도 수정했음

 

2022.07.07 _ Add : 포트폴리오 페이지, Fix : background 선, Add : edit state시 생성 컴포넌트, MakePortfolio 컴포넌트

디자인이 완성돼서 디자인에 맞게 포트폴리오 페이지 레이아웃을 만들었다.

그리고  포트폴리오 리스트 컴포넌트랑 포트폴리오 카드 컴포넌트 만들어서 

map()메서드를 이용해 포폴카드를 만들도록했다.

아직 근데 통신이 안돼서 더미데이터를 이용하여 만들었다.

 

그리고 편집하기 버튼 누르면 카드에 수정/삭제 버튼이 생겨야 돼서 

isEdit state를 만들었다. isEdit이 true 면  수정/삭제  버튼 보이도록 ! 

 

 

 

2022.07.08 _ Fix : min-height 지정 ,  sign페이지 하단 빈 공간 제거

포트폴리오 페이지가 안의 요소 크기에 따라 height크기가 달라져서 min-height를 지정해줬다.

그리고 sign페이지 하단 공백 이유를 알아냈다 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

 

이유는...

 

이미지 width지정하면 알아서 hight도 축소되길래 같이 축소되는지 알았는데

이 내부에서는 그렇지 않나보다 ..

보이는건 줄어들어보이는데 안에서 조낸 차지하고 있엇음..

안잡히는거 이미지 삽입하고 height지정안한거 있으면 꼭!!!!!!!!!!! 설정해주자.. ㅎㅎ

버그 수정완료

 

 

 

2022.07.10 _ Add : new portfolio component

포트폴리오 생성 페이지 컴포넌트 만들었다.

 

 

2022.07.11 _ Add : 전역 state 추가

isEdit state가 포트폴리오 페이지 전역으로 쓰여서 프롭체인을 만들어야 고민하고 있었는데

프론트 분이 recoil 라이브러리 사용하자고 해서 그렇게 하자 했다.

recoil 사용 방법 !!!

1) 폴더 따로 생성해서 거기다가 state 저장할 파일 만든다.

import { atom } from "recoil";

export const isEditState = atom<boolean>({
    key: "isEdit",
    default: false,
})

export const isMakeState = atom<boolean>({
    key: "isMake",
    default: false,
})

위와 같은 방식으로 만들면됨 key에는 state이름 적어주면됨

 

그리고 _app.tsx에서

import type { AppProps } from "next/app";
import { RecoilRoot } from "recoil";
import Layout from "../components/Layout";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
    <RecoilRoot>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </>
    </RecoilRoot>
  );
}

<RecoilRoot>로 전체를 감싸준다.

 

 

2) 컴포넌트에서 사용할 때

import { isEditState } from "../../states/recoilBookPortfolio";

...
const [isEdit, setIsEdit] = useRecoilState<boolean>(isEditState);

import 해주고 컴포넌트 함수 내부에서 useState처럼 선언하여 사용해주면된다.

아주 간단 !

 

 

 

2022.07.12 _ Add : 포폴 조회/생성 통신

백엔드와 통신하기위해 포트폴리오 통신함수를 만들었다.

로그인 하면 응답으로 토큰을 반환해주는데 그 토큰을 localStorage에 저장해서

로그인 했을 때 할 수 있는 통신을 로컬스토리지에 저장된 토큰을 가져와서 하도록 했다.

근데 문제점은 로컬스토리지에 저장되는 시간이 2~3분밖에 안된다.  그리고 보안 문제도.. 쫌 많은듯

 

 

2022.07.17 _ Add : 서평 조회 페이지, 서평 편집, 추가

포트폴리오 카드를 누르면 포트폴리오와 관련된 서평을 보여줘야 되기 때문에

서평 페이지를 따로 분리해서 만들었다.

포폴페이지랑 구성자체는 비슷하기때문에 css만 수정하면 될듯하다

 

 

 

2022.07.20 _ Fix : 포트폴리오 통신

input 컴포넌트를 분리하여 생성과 수정은 따로 컴포넌트를 만들어서 처리하도록 바꿔주었다.

그리고 통신부분 예전 기억을 더듬어 async await 방식으로 처리하게 했다... 

이 방식이 에러처리하기 편해서... then문 중첩으로 있으면 정신없어.

만들기와 수정을 state값에 따라 페이지 이동없이하려다가 

카드의 id값을 가져오는 부분에서 파라미터로 가져오는 방법 제외하고는 받아올수가 없어서

...params의 기능으로 id값을 받아왔다

그리고 생성/수정에서는 페이지를 이동하여 portfoilo/id 값으로 이동하게 함

기존 페이지에서 컴포넌트랑.. css 다 중복되긴하는데 어쩔수 없지..

따로 모듈로 빼서 받아오는 방식이 좋을 거 같긴한데 style jsx를 사용하고 있어서 어떻게 해야할지 모르겠음 

 

 

2022.07.21 _ Fix : 포트폴리오 수정 메서드

포트폴리오 수정할 때 기존 데이터가 불러져야 되기 때문에

개별 포트폴리오 조회 api를 이용해서 기존데이터를 받아오도록 함수를 수정했다.

value 속성을 만들어서 props로 받아오게했고, value 속성지정하면 안에 내용이 수정이 안돼서

state를 만들어서 onChange함수를 이용해 수정할수 있도록 했다.

 

 

2022.07.24 _ Add : 서평 통신

서평페이지의 통신 함수를 작성했다.

 

 

2022.07.26 _ Fix : 서평 개별 조회 통신

서평 조회 페이지에서 포트폴리오를 누르면 포트폴리오에 추가된 서평이 나오도록 해야되는데

전체 서평이 조회되는 api를 사용하고 있어서 수정해줬다.

그리고 서평에도 전역 state만들어줘서 isEdit, isMake 사용할 수있게했다.

근데 포폴이랑 state 이름이 겹치면 안되는 거 같아서 isReviewEdit 이런식으로 바꿔줬음

 

 

2022.07.28 _ Add : 서평 검색기능

서평페이지에는 서평 제목을 검색하는 기능이 있기 때문에 검색기능을 만들었다.

filter 메서드와 includes를 이용하면 간단하게 만들 수있음 !

review_arr.map((ele:any) => {
    review_arr
    .filter((val:any)=>{
        if(val.title.includes(search_input)) return val;
    })
    .map((ele:any) => {
        let title = ele.title;
        let book_name = ele.book_name;
        let id = ele.review_id;
     }

 

 

2022.07.29 _ Add : index 페이지, 커뮤니티 검색용 서평

홈페이지(index) 를 디자인에 맞게 만들어 줬다.

구성이 간단해서 금방 만들었다.

 

그리고 community페이지에서 책 누르면 작성된 서평 보는 페이지가 있어서

community페이지에서 전체서평api를 이용해 관련 서평을 볼 수 있도록 제작했다.

검색기능에서 filter와 includes 이용한 것처럼 똑같이 구현해주면 됨

 

 

 

 

 

 

 

 

+ 이 프로젝트는 리팩토링하여  SWYG partenrship 통해 배포되었습니다. 

https://github.com/E2I4-IT-sTIME/Book-log-Frontend-2

GitHub - E2I4-IT-sTIME/Book-log-Frontend-2: 📕 [SWYG partenrship] BookLog 프론트엔드 리팩토링 레포지토리입니