웹 코딩/팀 프로젝트(7)
-
스파르타 코딩클럽 11일 메이킹 챌린지 - Final
11일 메이킹 챌린지를 마치며, 팀 프로젝트 당시 교육기관에서 사용하는 몽고 DB를 이용하여 회원가입 및 로그인 기능을 구현하였고 영화 장르별 평점과 리뷰 코멘트, 영화 키워드, 회원 정보를 몽고 DB에 데이터를 저장했다. 학부 생활 당시엔 RDBMS인 MySQL을 사용했었는데, 이번 프로젝트를 통해 처음으로 NoSQL인 몽고 DB를 사용하게 됐다. RDBMS와 비교하면 데이터를 유연하게 처리할 수 있고 설계가 단순하며 수평 확장에 용이하지만 알아보기 어려운 데이터 구조이며, 데이터 중복의 경우 데이터 변경 시 모두 업데이트 해줘야 하는 단점이 있었다. RDBMS는 데이터가 자주 변경될 경우 사용하고 NoSQL은 데이터 변경이 적고, 데이터를 수평으로 확장할 경우 사용해야 한다는 것을 정보처리기사 자격증..
2021.07.30 -
스파르타 코딩클럽 11일 메이킹 챌린지 - 6
로그인 시 나타나는 메인 페이지이다. 프론트엔드 파트를 맡은 팀원들이 제작한 퀄리티 높은 디자인이다. ifram 소스 코드를 이용하여 유튜브 영화 예고편을 메인 페이지에서 보여주고 배우 이름 클릭 시 네이버 인물 정보로 연결 해놨다. 오른쪽 상단 로그아웃을 클릭하면 로그인 페이지로 되돌아간다. 왼쪽 상단 + 버튼을 누르면 네비게이션 바가 나타나고 장르 클릭 시 해당하는 장르가 위치하는 곳으로 이동하게 된다. 스크롤을 내리면 장르별 로맨스, 액션, 코미디, 애니, 스릴러순으로 최신영화 6개씩 담겨져있고, ◀ ▶ 버튼을 누르면 좌우로 이동하고 영화 이미지에 마우스를 갖다 놓으면 확대되는 기능도 구현했다. 최하단에 있는 다른 영화 카테고리는 백엔드를 맡은 나머지 한 분이 제작하였고 네이버 영화를 크롤링하여 r..
2021.07.30 -
스파르타 코딩클럽 11일 메이킹 챌린지 - 5
보기와 같이 입력하지 않고 다음 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("* 비..
2021.07.30 -
스파르타 코딩클럽 11일 메이킹 챌린지 - 4
디자인에 감각이 좋다고 생각하지 않아 부트스트랩을 이용하여 부족한 디자인 감각을 보완하였다. Login 클릭 > member 데이터베이스에 있는 아이디 및 비밀번호 일치할 경우 > 메인 페이지 이동 > 일치하지 않을 경우 > 로그인 실패 Sign Up 클릭 > 회원가입 페이지 이동 소스 코드를 작성하여 웹사이트 아이콘인 파비콘을 적용하였다. 소스 코드는 alert 메시지 박스를 디자인 하기위한 코드이며 function go_url() { location.href = "/main" } swal({ title: "로그인 완료!", text: "", icon: "success", }); setTimeout('go_url()', 1000) 메시지를 나타난 후 1초 후에 자동으로 원하는 URL로 이동하게 설정하였..
2021.07.30 -
스파르타 코딩클럽 11일 메이킹 챌린지 - 3
우리 조의 웹 사이트 구성은 1. 회원가입 페이지 2. 로그인 페이지 3. 메인 페이지 4. 리뷰 페이지 네 가지로 구성돼있다. 회원가입, 로그인 작업을 해보신 팀원이 없었다. 그리고 백엔드 파트를 맡으신 팀원이 취업하게 되어 지속적인 참여가 힘든 상태였다. 결국 1, 2번 프론트엔드, 백엔드와 리뷰 페이지 백엔드 파트를 혼자서 담당하게 됐다. 의도치 않게 사실상 풀스택 개발을 하게 됐다.
2021.07.30 -
스파르타 코딩클럽 11일 메이킹 챌린지 - 2
조 편성과 주제가 정해진 후 개발 파트를 정했다. 상대적으로 프론트엔드가 인기가 많았다. 팀장으로서 으쌰으쌰 하거나 이끌어가는 능력이 부족하다고 생각하기 때문에 팀원들이 원하는 파트라도 먼저 선택하게 해주고 싶었다. 따라서 팀원들이 꺼려하는 백엔드 개발을 맡게 되었다. 프론트엔드에서 작성한 디자인 뼈대인데, 앱이 아닌 웹사이트에 초점을 맞추기 위해 SNS형 대신 목록형으로 결정하게 됐다. 디자인을 설계하였는데 생각보다 퀄리티가 좋은거 같아서 놀랐다. 남은 9일안에 만들 수 있을까 걱정도 많이 되는데 좋은 결과물을 만들어 내면 성취감이 높을거 같다.
2021.07.30