11일 메이킹 챌린지를 마치며, 팀 프로젝트 당시 교육기관에서 사용하는 몽고 DB를 이용하여 회원가입 및 로그인 기능을 구현하였고 영화 장르별 평점과 리뷰 코멘트, 영화 키워드, 회원 정보를 몽고 DB에 데이터를 저장했다. 학부 생활 당시엔 RDBMS인 MySQL을 사용했었는데, 이번 프로젝트를 통해 처음으로 NoSQL인 몽고 DB를 사용하게 됐다. RDBMS와 비교하면 데이터를 유연하게 처리할 수 있고 설계가 단순하며 수평 확장에 용이하지만 알아보기 어려운 데이터 구조이며, 데이터 중복의 경우 데이터 변경 시 모두 업데이트 해줘야 하는 단점이 있었다. RDBMS는 데이터가 자주 변경될 경우 사용하고 NoSQL은 데이터 변경이 적고, 데이터를 수평으로 확장할 경우 사용해야 한다는 것을 정보처리기사 자격증..

메인 페이지에서 리뷰보기 또는 영화 이미지를 클릭하면 리뷰 페이지로 이동하게 된다. 영화별로 리뷰를 작성할 수 있다. 보러가기 버튼 클릭 시 유튜브 영화 예고편으로 이동하게 되고 리뷰쓰기 버튼 클릭 시 리뷰를 작성할 수 있다. 한줄평으로 최대 10자, 체크 박스로 키워드 선택, 평점 입력이 가능하다. 메시지 창이 나타난 후 1초 뒤 새로고침되며 리뷰가 등록된다. 리뷰 한줄평과 체크한 키워드를 추출하여 보여주고 리뷰 등록한 시간이 표시된다. let review = $('#review').val() let rank = $('#rank').val() var today2 = new Date(); var year = today2.getFullYear(); var month = ('0' + (today2.getMo..

로그인 시 나타나는 메인 페이지이다. 프론트엔드 파트를 맡은 팀원들이 제작한 퀄리티 높은 디자인이다. ifram 소스 코드를 이용하여 유튜브 영화 예고편을 메인 페이지에서 보여주고 배우 이름 클릭 시 네이버 인물 정보로 연결 해놨다. 오른쪽 상단 로그아웃을 클릭하면 로그인 페이지로 되돌아간다. 왼쪽 상단 + 버튼을 누르면 네비게이션 바가 나타나고 장르 클릭 시 해당하는 장르가 위치하는 곳으로 이동하게 된다. 스크롤을 내리면 장르별 로맨스, 액션, 코미디, 애니, 스릴러순으로 최신영화 6개씩 담겨져있고, ◀ ▶ 버튼을 누르면 좌우로 이동하고 영화 이미지에 마우스를 갖다 놓으면 확대되는 기능도 구현했다. 최하단에 있는 다른 영화 카테고리는 백엔드를 맡은 나머지 한 분이 제작하였고 네이버 영화를 크롤링하여 r..

보기와 같이 입력하지 않고 다음 input으로 넘어가면 가입하기 버튼이 비활성화 되면서 경고문이 뜨게 된다. $("#rpw").focusout(function () { let pw = $("#pw").val() if ($(this).val() == '') { $(this).css("border-color", "#FF0000"); $('#submit').attr('disabled', true); $("#error_rpw").text("* 비밀번호를 입력하세요!"); } else if ($(this).val() != pw) { $(this).css("border-color", "#FF0000"); $('#submit').attr('disabled', true); $("#error_rpw").text("* 비..

디자인에 감각이 좋다고 생각하지 않아 부트스트랩을 이용하여 부족한 디자인 감각을 보완하였다. Login 클릭 > member 데이터베이스에 있는 아이디 및 비밀번호 일치할 경우 > 메인 페이지 이동 > 일치하지 않을 경우 > 로그인 실패 Sign Up 클릭 > 회원가입 페이지 이동 소스 코드를 작성하여 웹사이트 아이콘인 파비콘을 적용하였다. 소스 코드는 alert 메시지 박스를 디자인 하기위한 코드이며 function go_url() { location.href = "/main" } swal({ title: "로그인 완료!", text: "", icon: "success", }); setTimeout('go_url()', 1000) 메시지를 나타난 후 1초 후에 자동으로 원하는 URL로 이동하게 설정하였..

우리 조의 웹 사이트 구성은 1. 회원가입 페이지 2. 로그인 페이지 3. 메인 페이지 4. 리뷰 페이지 네 가지로 구성돼있다. 회원가입, 로그인 작업을 해보신 팀원이 없었다. 그리고 백엔드 파트를 맡으신 팀원이 취업하게 되어 지속적인 참여가 힘든 상태였다. 결국 1, 2번 프론트엔드, 백엔드와 리뷰 페이지 백엔드 파트를 혼자서 담당하게 됐다. 의도치 않게 사실상 풀스택 개발을 하게 됐다.