백엔드 취업 로드맵 #3 Week

ttraek·2024년 8월 21일

개발자 키우기

목록 보기
4/7

강의 들은걸 토대로 간단한 게시판을 만들겁니다. (2주간)
생각보다 뭐가 많아서 많이 줄엿으니 빨리 끝나면 쉬거나 근질근질하면 말씀하시고,
기간 내에 끝내기 힘들수도 있으니 빡세게 하세용~ 오류 천국일겁니다.

그래서 뭘 만들거냐? 로그인 할 수 있고, 게시글 CRUD 되는 간단한 게시판

환경설정

Backend : SpringBoot , JPA
DataBase : Postgresql
Frontend : Jquery


DB 설계

추가로 필요할거 같은 컬럼은 알아서 넣으시고 타입 [] 있으면 있는거로 없으면 편한대로

User (유저정보 테이블)

필수항목 : id pw name createTime[TimeStamp] editTime[TimeStamp]

Board (게시판 테이블)

필수항목 : title contents userId createTime[TimeStamp] editTime[TimeStamp]
제약조건 : User 테이블과 1:N 외래키 조건


User Flow

페이지 설명 들어갑니다.

1. 시작(로그인) 페이지 (로그인버튼, 회원가입 버튼)

사이트 접속 / 시 로그인 페이지로 이동하게 해주세요.
(로그인이 되어 있다면 게시판페이지로 이동해야함)
로그인 시 게시판 페이지로 이동하게 해주세요.

2. 회원가입페이지 (가입버튼)

회원 가입 시 중복된 아이디가 있는지 확인해주시고, 있다면 alert 로 안된다고 해주세요
가입성공했다면 축하한다고 해주고 로그인 페이지로 이동해주세요

여기부터는 모든 페이지에 사용자 이름과 로그아웃 버튼 표시

3. 게시판 페이지 (게시글 작성 버튼, 게시글 목록 표시)

  • 목록에는 작성자이름, 제목, 작성일자만 표시해주세요

4. 게시글 상세 조회 페이지

  • 상세에는 작성자이름, 제목, 작성일자, 수정일자 표시해주세요
  • 작성자가 세션(본인)이라면 수정, 삭제 버튼을 표시해주세요

5. 게시글 작성과 수정 페이지 (하나로 사용)

  • 게시글 작성에는 입력창을 비워야 합니다. 그리고 등록 취소 버튼이 있어야 해요.
  • 수정 창에는 게시글의 현재 내용을 입력창에 채워주세요.
    그리고 수정 취소 삭제 버튼이 있어야 해요.
  • 하나의 html 이니까 작성이냐 수정이냐에 따라서 버튼을 보여줫다 숨겻다 해야겠죠?

JavaScript

  1. Jquery 사용()document.getElementById("id")이런거말고) `document.getElementById("id")` 이런거 말고 `("#id")` 쓰시란 소리입니다.
  2. 각 페이지의 Javasciprt 는 html 안에 말고 따로 javascript 파일 만들고 불러와서 사용
    <script src=" ..
  3. 스프링으로 보내는 모든 요청은 $.ajax 사용해 주세요
    -hint : button onclickajax 함수 걸면 댐
  4. 조회, 수정은 하나의 html 을 사용 ajax 응답받은걸로 js 을 이용해 내용 바꿔서 보여주세요

Spring Controller

Controller.java 구분

  1. PageController
    페이지를 뿌려주는 컨트롤러 따로 하나 생성 (@Responsebody 없는거)

  2. BoardController, UserController
    페이지에서 사용할 데이터를 뿌려줄 컨트롤러 나눌것 (@Responsebody 있는거)

뭔소리냐?
페이지 요청이 들어오면 PageController 를 통해 빈 페이지를 뿌리고
해당 페이지가 로드되면, $( document ).ready() 나 다른 방법을 사용해
ajax 요청으로 컨트롤러에서 데이터 가져와서 빈 페이지에 데이터 채우기
이번에는 Model.attribute 쓰지 마시라는 소리입니당

데이터 In/Out

기능 데이터 입력 방식 입력 예시 데이터 출력 형식
로그인 @RequestParam @RequestParam String id 세션만 부여하면 댐
게시글 상세 조회 @PathVariable /{id}...@PathVariable int id Map 또는 DTOjson 리턴
게시글 작성, 수정 @RequestBody @RequestBody BoardDTO int id 완료 후 이 값으로 상세페이지 이동
게시글 삭제 @RequestParam, @PathVariable 중 편한거 boolean 성공, 실패

추가 숙제

아래 세 항목에 대해 기초 사용법 숙제하고 사용법 익힌 후 블로그 포스팅

1. Postman

  • PageController 를 제외한 모든 Controller 의 API 요청을 Postman 으로 요청보내고 응답 받기.
  • 해당 내용 Postman Collection 에 저장해두기
  • 요청형식, 응답 형식에 따라 Postman 에서 어떻게 보내고 받는지 익히세요

2. Chrome devtools

  • Javascript 에서 console 로 데이터 받은거 출력하고 그거 개발자모드 console 탭에서 확인
  • network 탭에서 컨트롤러로 api 요청보낸거 헤더, 페이로드, 응답 등 내용 확인해보기

이건 어려워서 다음주로 Javascript 에서 debugger 찍고 개발자모드에서 디버깅 해보기

3. Intellij Debugging

분명 오류 나는경우 있을거임, 없더라도 아래 내용 해보기

  1. 컨트롤러 진입하고 각 클래스 이동하면서 넘어가는 값들 sout 으로 찍어보기
    이건 디버깅 없으면 얼마나 불편한지 확인하기 위함
  2. 디버깅으로 브레이킹 포인트 잡고 각 값들 확인해보기

4. git

  1. 하루 한번 커밋 말고, 기능 하나 구현하면 커밋하기
  2. 커밋할때 메시지 맘대로 적지말고 커밋 규칙 찾아서 해당 규칙에 맞춰서 커밋해보기

참고블로그 링크

실제로 대기업에서는 이렇게 커밋한다 예시 링크


다음주 예고

  • 검색
  • 사진 등 파일 첨부
  • 비밀 게시글
  • 조회수
  • 페이징
  • 댓글, 대댓글, 비밀댓글

기타 등등등...

profile
https://keartt.tistory.com/ 블로그 이전

0개의 댓글