PROJECT (13) 썸네일형 리스트형 Project(4)-4. 전체 마무리 프로젝트 최종 모습 팀원들과 함께 만든 프로젝트를 합친 모습이다. 회원 탈퇴의 경우 추가적으로 만든 기능이나 오류 해결이 되지 않아 영상에 포함시키지는 못했다. 프로젝트 후기 서로 다른 파트를 맡더라도 하나의 결과물을 만들어내는 것이 프로젝트인데 전반적으로 통일감 없는 디자인에 아쉬움을 느꼈다. 초반에 소통하며 정확한 화면 설계를 진행했어야 했지만 팀장도 아니고 제일 어린 내가 그 부분을 주도하기에는 어려움이 있었다. 그럼에도 컬러감은 동일하게 가져가자는 이야기에 다들 수긍해주어 다행이었다. 화면 구성에 부족함을 느꼈던 팀원이 적극적으로 다른 사람의 의견을 수용해주어 이만큼의 결과물이 나왔다고 생각한다. 또한 개발 과정에서 한 팀원의 욕심으로 되려 진행이 늦어졌었으나 팀장에게 나의 의견을 적극적으로 피력.. Project(4)-3. 등록 페이지 페이지 구성 등록 페이지는 메인페이지와는 다르게 구성하는 방법으로 부트스트랩을 사용했다. 그러나 예전처럼 직접 부트스트랩 사이트에 들어가 무료 버전을 직접 다운받고 코드를 뜯어고치는 방식이 아닌 CDN 방식을 차용했다. 여기서 CDN 방식이란 사용하고 싶은 테마의 사이트를 코드화하여 가져오는 것이다. CDN 방식을 사용할 때는 가지고 오고 싶은 테마의 코드와 함께 버전과 맞는 부트스트랩 Js 코드도 가져와야 한다. 내가 사용한 것은 다음과 같다. 이렇게 하여 부트스트랩에서 제공한 테마를 기본으로, 태그의 위치 및 의 스타일을 변경하여 꾸며주었다. 기능 기능은 꽤 간단히 구현했다. 모든 요소를 잘 작성해주었다면 DB에 해당 내용이 저장되고 alert를 이용해 성공했다는 메시지를 띄웠다. - service... Project(4)-2. 메인페이지 페이지 구성 이번에는 부트스트랩을 사용하지 않고 여태 배웠던 내용들을 토대로 구성하였다. 1. 슬라이더슬라이더는 총 3개의 사진으로 구성했다. 좌우 버튼 없이 하단의 라디오버튼으로 구성하였으며, 'vh'와 'vw' 단위값을 이용해 모니터 너비와 관계없이 모니터 대비 슬라이더의 크기를 일정하게 유지할 수 있도록 해주었다. 초반에는 직접 픽셀값을 주어 다른 모니터에서 봤을 때 슬라이더 속 이미지가 깨지는 등의 어려움이 존재했으나 팀원의 도움으로 해결할 수 있었다. 각 슬라이더 이미지는 미리캔버스에서 직접 만들어보았다. 2. 목록 테이블 목록 테이블을 구성할 때 제일 위에 있을 목록의 제목들은 드래그를 했을 때 계속해서 고정돼 나타나게끔 해주었다. 구글링을 통해 고정시키는 방법을 구성해보았지만 잘 되지 않았고.. Project(4)-1. 주제 프로젝트 주제 선정 1. 주제 선정 조건 이번에 새로 맞이한 팀원들의 실력은 조금 뒤떨어지거나 혹은 나처럼 평이한 수준이었다. 그래서 다음과 같은 기준을 세워 주제를 정하기로 하였다. 수업에서 진행된 예제를 비슷하게 따라갈 수 있는 주제 쉬운 화면 구성 어렵지 않게 추가 요소를 고민해볼 수 있는 주제 2. 내가 고민한 주제 아무도 주제를 생각해올 것 같지 않아 전날부터 생각해본 팀 주제는 총 2개였다. 이때 로그인과 회원가입 절차는 기본적으로 포함되어 있다. 독후감 사이트 메인페이지 카테고리 개념의 다양한 독서 목록 => 이때 제공되는 정보는 책 제목, 작가, 출판일 책 상세 페이지 책 목록 중에서 택하면 보이는 화면 => 추가로 줄거리 및 사용자들이 작성한 독후감 목록이 나타남 독후감 작성 페이지 독후.. Project(3)-3. 수정 Controller private void UpdateData() { String mid = userData.getM_id(); MemberDto data = dDao.selectId(mid); dView.outMember(data); if(data != null) { dView.updateMember(data); String msg = dServ.updateResult(data); dView.printMsg(msg); } } 현재 로그인 된 id를 가져와 해당 id가 가진 정보들을 모두 data에 담을 수 있도록 해준다. 만약 id가 없으면 View의 outMember()를 실행, 있으면 updateResult()를 실행한다. View - id가 있을 경우 public void updateMember(.. Project(3)-2. 회원가입 Controller private void JoinData() { MemberDto data = new MemberDto(); dView.JoinView(data); } View public void JoinView(MemberDto data) { subTitle("회원가입"); data.setM_id(ioc.inStr("ID : ")); String mid = data.getM_id(); boolean checkId = dDao.idCheck(mid); if (!checkId) { data.setM_pwd(ioc.inStr("PWD : ")); data.setM_name(ioc.inStr("NAME : ")); data.setM_phone(ioc.inStr("PHONE : ")); data.setM_b.. Project(3)-1. 주제 및 테이블 설정 주제 MVC 패턴 예제와 JDBC를 이용해 간단한 프로젝트를 진행했다. 본래 나왔던 주제는 금방 생각해낼 수 있는 식당이었다. 그러나 주문을 하고 결제를 하는 데 있어 팀원들의 능력 부족과 시간 부족으로 버거움을 느꼈다. 이때 다른 팀원이 제시한 동호회 주제가 MVC 패턴을 적극적으로 활용할 수 있다고 판단했고, 주제는 '동호회 가입 커뮤니티'가 되었다. 그렇게 총 정리된 카테고리는 다음과 같다. Main Menu) 로그인 회원가입 종료 Sub Menu) 동호회 가입 동호회 개설 동호회 종류 보기 동호회 가입 멤버 보기 내 정보 관리 동호회 탈퇴 종료 DB 테이블 설정 프로젝트를 진행할 때 조건이 있었는데, 그것이 바로 '테이블이 적어도 2개 이상일 것'이었다. 이 점을 고려해 초반에는 동아리를 개설할 .. Project(2)-3. 기능 알람 페이지 html 요소를 가져와 시간을 입력하지 않으면 alert창이 뜨도록 했다. 반대로 잘 입력됐을 경우 result.innerHTML을 통해 시간이 나타나는 것을 볼 수 있다. 스톱워치 페이지 시작 버튼을 누르면 초 단위인 t2_s 변수를 시작으로 시간을 차례대로 증가시켰다. t2-s가 60이 되면 t2-s는 다시 0이 되고 분 단위인 t1_s가 증가한다. 시 단위도 마찬가지로 진행된다. 이렇게 if문을 3중으로 해 코드를 짜봤으나 상당히 지저분해 보인다. 더 간단하고 유용한 방법이 있을 것이라 생각한다. 그럼에도 스스로 짜봤다는 것에 만족하고 게시해본다. 다음으로 정지 버튼을 누르면 clearInterval을 통해 진행되던 시간이 정지되도록 하였다. 또한 초기화 버튼은 clearInterval.. 이전 1 2 다음
