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

화면 레이아웃

한줄평쓰기

• HTML/CSS가 제공되는 것을 기본으로 작성해야 하며, 화면구성은 아래 기획서대로 보여야 한다.

기능

별점입력

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

소스코드

JavaScript

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

 

 

 

 

 

 

# 부스트 코스