수학과의 개발자 도전기

앞선 게시글에서 대략적인 UI를 만들어봤지만, 프로젝트 진행과정에서 지금으로썬 구현하기 어려운 것들이 있어서 변동사항이 있어서 그것을 기록하려한다. 

1. 메인 

이전에는 회원가입과 로그인 기능을 자체적으로 개발하려했으나, 배보다 배꼽이 더 커질 수 있는 상황이 있어 이번 프로젝트에서는 google과 naver에서 로그인 정보 불러오는 방식으로 변경했다. 

2.Bookshelf

변동 부분 

-왼쪽 상단에는 (사용자이름)’s bookshelf를 구현하려고 했으나, 아직 사용자의 이름을 가져와서 화면에 출력을 하지 못해서 이 기능은 구현하지 않았다. 

-글 삭제 눌러서 책 삭제하기. ‘-‘버튼을 누르면 삭제항목을 선택하는 체크박스를 책 이름 왼쪽에 구현하고 싶었는데 이 또한 아직 기술 부족으로 구현하지 못했다. 

-또한 책의 완독 여부를 확인할 수 있는 ‘read’, ‘unread’도 아직 기술이 부족해 구현하지 못했다. 

3. Register 

변동 부분 

-‘+’버튼을 누르면 책을 등록하는 페이지로 이동하는데, 여기서는 책 이름,저자,출판사,카테고리, 후기를 입력할 수 있도록 했다.

-책 정보를 입력하고 ‘register’버튼을 누르면 책이 등록된다.

-후기는 다른 페이지에서 등록하려고 했으나, 개발이 복잡해져서 처음 책을 등록할 때 후기까지 등록하는 것으로 만들었다.

4. Book Review

책을 등록한 후 책 이름을 선택하면 책의 후기를 볼 수 있는 페이지를 볼 수 있다. 

초기 UI에 수정하는 버튼은 없지만, 책 정보를 잘못 입력했거나 변경되었을 경우에 대비해 수정 버튼도 만들었다.

update 버튼을 누르면 책을 수정할 수 있는 페이지로 이동할 수 있다.

5. Update

- bookshelf페이지에서 책 삭제를 못한 대신 책의 정보를 수정할 때 삭제할 수 있게 만들었다.

1. 기획

notion으로 책 읽은 것을 기록하고 있는데, 이를 참고하여 읽은 책의 정보를 기록하는 페이지를 만들기로 하였다.

-기능

1. 로그인/회원가입
2. 책 등록하기(Create)
3. 책 조회(Read)
4. 책 수정하기(Update)
5. 책 삭제하기(Delete)

-API 설정

이거는 추후에 정리할 예정이다 

-ERD,테이블 설정 

• User(원래는 직접 로그인 시스템 구현하려고 했으나, 구글 api 를 이용해서 로그인을 구현할 예정이다)
• Id: 유저 아이디
• nickName : 페이지에서 사용될 이름
• pw: 비밀번호
• bookShelf: 사용자의 책정보 

• Book(나중에 Post로 이름 바꿈)
• Id: 책 구별하는 id
• author/publisher/bookTitle: 책의 기본정보
• category: 책의 카테고리 분류하기 위해서 
• check: 책 완독 여부 확인
• review: 사용자가 작성하는 책 후기 
• startDate/endDate:  책 읽기 시작한 날짜와 끝낸 날짜 

• 한 명의 사용자는 여러권의 책을 등록 할 수 있으므로 user와 book의 관계는 1:N 관계이다 
• 변수명은 camelCase로 작성할 예정

2. UI 구현

-사용툴 : adobe xd 

    1.  메인페이지  

도메인을 입력해 들어가면 메인페이지가 보이는데, 여기서 기능으로는 책 정보를 가지고 있는 bookshelf 페이지로 이동하는 버튼과, 회원가입하고 로그인이 있다. 

2. 회원가입 페이지 

사용자 아이디와 비밀번호, 닉네임을 입력하는 것을 생각하고 만들었다.

3. 로그인 페이지 

아이디와 비밀번호를 입력한다

4.  user's Bookshelf

로그인 후 메인에서 bookshelf를 클릭하면 나오는 페이지이다. 

5. Register

bookshelf에서 오른쪽 '+' 버튼 눌렀을 때 나오는 페이지이다. 책의 정보인 책 이름,저자,출판사,카테고리를 입력할 수 있고, 완독여부에 따라 'Read','Unread'를 선택할 수 있다.

6. 특정 책 눌렀을 때 Book Review 페이지로 이동하기 

책 등록 후 책의 이름을 누르면 책의 후기를 볼 수 있는 페이지로 이동할 수 있고, 여기서 후기를 등록할 수 있다.

7. 책 후기 등록 완료 

책 후기를 작성하고 오른쪽 하단에 등록 버튼을 누르면 후기 등록이 완료되고, 작성한 후기를 볼 수 있다. 

프로젝트 기간: 2022.01.09 - 2022.01.20

개발자 취업준비를 시작하면서 포트폴리오에 대해 고민을 많이 했다. 포트폴리오를 채우려면 일단 무언가라도 만들어봐야한다는 생각에 개인프로젝트를 시작하게 되었다.

이 프로젝트를 진행하면서 포트폴리오에 채우고 싶은 내용은 다음과 같다

• 프로젝트로 무엇을 만들었는지
• 무엇을 공부했는지
• 어떤 문제점을 겪었고
• 어떻게 해결했는지 

를 구체적으로 설명하는 것이 중요하다고 생각해 프로젝트 전반적인 과정을 블로그에 기록하려한다. 

기본적인 틀은 도서 ‘스프링부트와 aws로 혼자 구현하는 웹서비스’를 따라하면서 공부한 내용을 바탕으로 프로젝트를 진행했다. 

프로젝트 전반적인 과정은 다음과 같다 

1. 프로젝트 기획

2. UI

3. 게시글 등록,수정,삭제 구현

4. view 만들기 

5. google,naver 로그인 구현

6. ec2에 배포 

개발 환경

• Database: h2
• language: Java 11
• Framework: Spring
• IDE: Intellij community ver.
• OS: Mac Os 64bit

1월 9일부터 시작했던 개인프로젝트를 오늘 마무리 했다. 오늘 대략적인 부분을 기록하고, 전반적인 기록은 차차 정리해서 업로드할 예정이다. 책을 참고해서 전반적인 틀을 짜고, 화면은 이전에 기획한 내용을 기반으로 만들었다. 

작업시간은 총 8일이고, 하루에 4-5시간정도 한 것 같다. 

아직 미흡한 부분이 많아서 계속 보완해야할 것 같기는 한데, 그래도 오류없이 페이지를 만들었다는 것에 의의가 있는 것 같다. 

아쉬웠던 점들

• 로그인 구현 전에 주요 화면 작업 끝내기(로그인 구현하고 하니까 로그인하고,user권한 부여하는 것 등 반복 작업 많았음)
• 화면 구현 중에 Delete 버튼 위치 자유롭게 할 수 있는 방법 좀 더 공부해야할 것 같다
• 후기 작성 textarea로 바꾸면서 review 값 받아오는 방법 찾아보기 
• 화면이나,api 다루는 방법이 아직 미흡해서 그런 것 같다

-서버는 깃허브에 코드를 올려두었다 

github 주소: https://github.com/heyazoo1007/bookproject.git

-화면: