[부스트코스] 프로젝트6-1.한줄평:기능:BE 리뷰 후기

기능

사진 등록 (업로드)

• 사진 한장 업로드가 가능해야 한다.
• 별점, 한줄평내용, 사진파일을 서버로 올릴 수 있다.
• 사진파일의 확장자는 jpg, png만 허용한다.

소스코드

JAVA - 이름규칙

• JAVA Naming Conventions 을 지킨다.(참고 1) (참고 2)
• 클래스의 이름과 메소드의 이름은 직관적으로 작성하도록 한다. 클래스의 이름과 메소드의 이름만 보아도,어떤 기능을 가지고 있을지 어떤 내용이 구현되어 있을지 짐작할 수 있어야 한다.
• 코드를 읽는 사람이 개념을 쉽게 파악할 수 있도록 읽기 쉬운 코드를 작성하도록 한다. 예를 들어 변수 이름을 구체적으로 작성하도록 한다.

JAVA - 중복된 코드 제거 및 코드 구조화

• 중복된 코드가 있다면, 별도의 메소드나 클래스로 분리하도록 한다.
• 하나의 메소드가 너무 많은 코드를 담지 않는다. 코드의 양이 많을 경우 private한 메소드를 이용해서 메소드를 분리하거나 별도의 객체를 만들어 사용하도록 한다.
• 클래스의 코드 길이가 너무 길어진다면, 해당 클래스가 몇개의 클래스로 분리될 수 있는지 고민한다.
• 변수는 최대한 덜 사용하고, 최대한 가볍게 만들어 가독성을 높이도록 한다.

JAVA - 가독성

• 조건문의 경우 긍정적이고 흥미로운 (주 흐름에 해당하는) 경우가 앞쪽에 위치하도록 한다.
• 삼항연산자, do-while문장은 코드 가독성을 떨어트리니 되도록 사용하지 않는다.
• 블럭이 너무 많이 중첩되면 코드를 읽기 어려워진다. 블록을 private메소드로 추출할 수 있는지 고민한다.
• 코드는 빈줄을 이용해 커다란 블록을 논리적인 문단으로 구분한다.
• 코드는 들여쓰기를 잘 지키도록 한다.
• 필요하지 않은 코드는 제거한다.

JAVA - 프로젝트 구조

• Controller, Service, Repository를 사용하여 구현되어 있어야 한다.
• Controller에서 Service를 Service에서 Repository의 기능을 호출할 수 있지만, 그 반대는 허용되지 않는다.

Java - Web API

• 별점, 리뷰, 이미지(image)파일을 전달받아 저장하는 web api를 작성한다.
• 업로드의 경우는 MultipartFile을 이용해 파일 정보를 읽어들여야 한다.
• 이미지 업로드 되는 경로는 /webapp 이하의 폴더가 아니어야 한다.
• 동일한 이름의 파일이 업로드 하더라도 덮어쓰기가 되지 않도록 한다.
• api가 호출될 때, 컨트롤러 메소드의 이름과 요청 시간등을 log로 기록 하도록 한다.
  Java - 다운로드
• 이미지 id를 전달받아, 해당 이미지를 다운로드 하는 컨트롤러를 작성한다.
  Java - jsp
• 기존 jsp의 이미지 경로를 이미지 다운로드 컨트롤러를 이용되도록 수정한다.

별점입력

• 별점을 1~5점까지 선택할 수 있다. (마우스 클릭에 반응)
• 별점을 선택하면 좌측별점도 하이라이트 된다. 예를들어 3번째 별점을 선택하면 1,2,3번째 별에 하이라이트가 된다.
• 우측에 선택한 별 갯수 만큼 숫자로 점수가 노출된다.
  텍스트 입력
• 글자수가 최소 5자에서 400자까지 등록할 수 있다.
• 400자 이상 입력이 되지 않도록 처리한다.
• 텍스트 입력박스에 선택을 하면(포커스를 주면) 숨겨져있던 입력창(textarea)이 화면에 노출되고 글쓰기가 가능해야 한다.
• 입력을 하지 않고 입력창에서 포커스를 나가면 다시 원래의 콘텐츠가 노출된다.
  사진 등록 (업로드)
• 사진 한장 업로드가 가능해야 한다.
• 별점, 한줄평내용, 사진파일을 서버로 올릴 수 있다.
• 사진파일의 확장자는 jpg, png만 허용한다.

소스코드

JavaScript

• 별점과 Form조작
• 리뷰쓰기의 별점 기능은 별도의 별점 컴포넌트로 개발한다(prototype방식의 클래스로 작성)
• form입력값은 유효성검증을 정규표현식을 사용해서 체크해야 한다.
  JavaScript - 파일업로드
• file upload시 이미지파일의 확장자체크는 자바스크립트로 체크한다.
• 썸네일 이미지 미리보기도 자바스크립트를 사용해서 구현해야 한다.
  JavaScript - 클린코드
• 함수 하나에 여러개의 기능을 넣지 않고,함수를 여러개로 분리한다.
• 함수이름은 동사+명사이며 함수의 의도를 충분히 반영하고 있는가?
• 함수안의 내용은 이름에 어울리게 하나의 로직을 담고 있는가?
• 중복코드를 제거하고 공통부분을 공통함수로 만든다.
• 의도가 드러난 구현패턴. 의도가 표현되지 않은 코드를 최소한으로 줄이도록 한다.
• 전역변수를 없애려고 노력하자. (지역변수로 넣으면 될 걸 전역공간에 두지 말기 등)

 

 

파일을 업로드 할 때 형식 때문에 애를 많이 먹었던 기억이 난다. 파일과 댓글 작성 내용을 한번에 보내려고 시도했으나 생각했던 것과는 달리 잘 되지 않아서 파일을 보내는 post와 내용을 보내는 post를 나눠서 구현했었다.

 

동작은 잘 되었으나 좋지 않은 방법이라고 생각해서 한번에 어떻게 보낼수 있을까 찾아보다가 FormData 를 알게 되었고 한번에 파라미터들로 보내는데에 성공했다.

 

기존에 프로젝트 경로에 있는 img 폴더를 통해서 이미지를 가져오는 방식에서 이미지들을 다른 사용자들의 접근을 제한할 수 있도록 c드라이브로 옮기고 사용자들은 요청시 다운로드해서 화면에 보여주는 방식으로 바꿔야 했다.

 

기존의 product, displayInfo, comment 의 이미지를 가져올 때의 방식을 모두 바꿔줘야했기에 다운로드 받는 부분을 utils 폴더에 따로 DownloadImage 클래스로 만들어서 사용했다.

 

 

이번 프로젝트는 내용이 많이 않아서 금방 끝낼 수 있었다

 

 

 

내 생각이 너무 짧았던거 같다. file_info id 로 불러오면 되는데 왜 다 다르게했을까....ㅠㅡㅜ

 

 

 

부족한 부분을 정확히 짚어주셨다. 파일을 추가하기 전에 다른 컨트롤러에 넣어도 되지 않은지, 연관성을 생각해서 파일을 추가해야겠다.

 

 

 

사실 이 부분은 내 생각대로 한 번 짜본거라서 리뷰어님의 의견이 궁금했었는데 역시 리뷰를 해주셨다. 리뷰어님 좋은 팁 감사합니다 ..!

 

 

 

이 부분은 나중에 dto 로 바꿔야지 ~ 해놓고서는 바꾸지 않았던 부분이다. 앞으로는 그때 그때 바로 실천에 옮기고 나중으로 미루는 일은 없도록 할 것이다.

 

 

 

 

파일 업로드, 다운로드 부분은 좀 더 다양한 예로 공부를 더 해봐야겠다. 보안 측면에 있어서도 지금 코드는 너무 부실하기에 보안에 어떻게 신경을 써야하는지를 중점으로 공부할 것이다.

 

 

 

 

# 부스트 코스