컴퓨터/Backend (9) 썸네일형 리스트형 [졸업 프로젝트]_4. 프로젝트 구현 결과와 의의 + 개인적 후기 한 학기 동안 모든 수업 중 가장 시간을 많이 쏟았고, 관련 논문과 구글링을 해가며 열심히 프로젝트에 참여했다. 처음에는 조원들에게 피해는 주지 말자고만 생각했는데, 프로젝트를 진행할 수록 욕심이 커져갔다. 이 부분도 내가 맡아서 진행해보고 싶고, 저 부분도 내가 맡아서 진행해보고 싶고.. 그러나 내가 맡은 부분만 해결하는 데도 꽤나 많은 시간이 걸렸고, 나의 어떤 부분이 부족하고, 앞으로 어떤 공부를 해나가야 할지에 대해 감이 잡히기 시작했다. 그런 의미에서 이번 프로젝트는 나에게 상당히 의미가 크다. 결정적으로, 앞으로 백엔드 개발자가 되고 싶다는 구체적인 진로를 정하게 되었고, 그러기 위해서 어떤 준비를 해 나가야하는지 깊이있게 고민해 볼 수 있던 시간이었다. 프로젝트 완성 후 마지막 수업시간에 각.. [졸업 프로젝트]_3. 알고리즘 설계와 구현(2차 알고리즘)_+Teachable Machine 활용법 유기견을 품종 분류를 위한 모델로 구글의 머신러닝 라이브러리인 Teachable Machine을 활용하기로 하였고, 따라서 사용법과 코드 로직에 대한 이해가 필요했다. (Teacheble Machine을 줄여서 TM이라고 하겠다.) 우선, TM의 활용 방법을 익히기 위해 조코딩님의 영상을 참고했다. https://youtu.be/USQGTW34lO8 우리 프로젝트에서 Teachable Machine을 어떻게 활용했는지 활용법을 간략히 정리하자면 다음과 같다. 이미지를 업로드하거나 웹캠을 사용하여 Teachable Machine에 이미지를 학습시킨다. 학습시킨 모델을 export한다. (tensorflow, tensorflow.js, tensorflow Lite 3가지 방법) 우리가 사용할 모델을 다운로드.. [졸업 프로젝트]_2. 알고리즘 설계와 구현(1차 알고리즘) 알고리즘 설계는 크게 1차와 2차로 나누어 설계, 구현하였는데, 1차 알고리즘은 강아지의 품종별 평균 무게와 체고값을 이용하여 품종을 가려내는 알고리즘으로 우선적으로, 품종별 강아지의 무게와 체고값을 분류하여 정리하는 작업이 필요했다. 따라서, 세계애견연맹(FCI)의 견종 표준을 참고하여 우리가 사용할 64종 강아지의 무게와 체고값을 분류하여 데이터베이스를 생성하였다. 다뤄야하는 데이터의 크기가 크지 않았기 때문에 엑셀파일에 각각 수컷 품종별 데이터와, 암컷 품종별 데이터를 정리한 후 DB Browser for SQLite를 이용하여 바로 데이터베이스를 생성하였다. (학교 수업에서는 SQLite를 다뤘었고 이때는 최대한 배운 것을 많이 활용하고자 하는 생각이었기 때문에 SQLite를 다룰 수 있는 DB .. [졸업 프로젝트]_1. 주제 선정 및 연구 배경 설명 비록 이중전공이긴 하나 그래도 졸업 요건을 충족해야하기 때문에 4학년 1학기 수업을 들으며 졸업 프로젝트를 진행했다. 우리 팀원은 총 4명이었고, 처음부터 끝까지 충돌 없이 프로젝트를 잘 마무리했다. (가장 걱정하던 수업이었는데 함께 해준 팀원들 덕분에 한 학기 내내 큰 어려움 없이 잘 마무리 할 수 있었다.ㅠㅠ) 주제를 잘 선정하는 것이 중요하기 때문에 팀원들 각자 주제를 생각해서 공유하기로 했다. 프로젝트를 따로 진행해본 적이 없었기에 어떤 주제를 다루어야하며, 졸업 프로젝트에서 얼마만큼의 역량을 요구하는지 가늠할 수 없었기 때문에 상당히 난관이었다. 이중전공으로 컴퓨터를 배우긴 했지만.. 이 실력으로 프로젝트를 진행하기에는 무리가 있다고 생각했었기 때문에.. (자세한 후기는 프로젝트 포스팅 마지막에.. [웹 프로젝트]_영화관 홈페이지 제작하기 - 5. 예매 기능을 위한 Javascript 구현 설명 이번에는 예매 기능 구현을 위해 javascript를 어떻게 사용했는지 정리해 보려고 한다. 영화 선택, 좌석 선택, 예매 내역 확인, 상세 내역 확인을 위해 javascript를 이용하여 어떤 함수들을 만들었는지 살펴 보자. 1. 영화 제목과 날짜 선택 함수 - 영화 제목을 선택하면 영화에 해당하는 날짜가 자동으로 선택되게 하였다. 2. 인원 수 선택 함수 - '성인', '청소년'의 각 선택 인원수를 저장, 반환하고 총 인원수를 반환하는 함수이다. 3. 좌석 선택 함수 - 위에서 구한 선택 인원수에 맞게 좌석을 선택하는 함수이다. *좌석 선택 시 check 클래스를 부여하여 선택 된 좌석을 구분할 수 있게 하였다. 4. 결제 금액 계산 함수 - 위에서 구한 인원수에 해당하는 금액을 곱해 계산하는 함수이.. [웹 프로젝트]_영화관 홈페이지 제작하기 - 4. 예매 기능 추가 설명 & 변경된 페이지 설명 앞 페이지들은 모두 html과 css를 사용하여 화면을 보여주는 정도까지 작성하였다. 영화 예매 부분은 javascript를 사용하여 추가적인 구현을 하였는데, 중점을 둔 부분은 js의 작동과 이벤트 핸들러 구현이므로 영화 예매 페이지에서 한 요소를 클릭했을 때 다른 요소를 나타내는 구성 흐름을 중심으로 작성하였다. 예를들면, 영화 제목을 클릭하면 그에 해당하는 시간과 날짜를 선택할 수 있다던지, 예매인 수를 정하던가 좌석을 정하면 그에 맞게 선택할 수 있다던지 하는 아주 간단하고 기초적인 구현이다. (라고 말은 하지만 왕초보 단계인 나는 처음에는 이것도 어려웠다 ㅠㅠ) 우선 js를 사용한 추가 구현을 위해 변경된 페이지가 있다. 예매하기의 상세 기능 구현을 위해 [영화 예매] 페이지 기획 및 화면 설계.. [웹 프로젝트]_영화관 홈페이지 제작하기 - 3. 구현 결과 화면 & 링크 연결 설명 홈페이지 기획과 화면 설계 스케치를 바탕으로 html과 css를 이용하여 화면을 구성하였다. js를 사용하지 않고 홈페이지 모양새만 갖춘 화면이라 섬세하지 못한 면은 감안해야 한다. 영화관 홈페이지의 메인 화면이다. 윗 부분의 이미지는 최대한 내가 기획한 영화관 이미지와 맞는 걸로 찾아와서 넣어봤는데 생각보다 할로윈 느낌이 많이 난다. 영화관 일정부분은 이미지를 가져왔고, 상영 영화의 예고편을 보여주기 위해 외부 url을 삽입하였다. 그리고 이벤트와 공지글을 보여주기 위한 게시판을 배치하였다. (아래부터는 서브 화면들을 차례로 보여줄 예정인데 편의상 공통된 header와 footer 부분은 생략하였다.) 회원가입 폼이 있는 부분으로, 메인화면 우측 상단의 '회원가입'을 누르면 이 페이지로 넘어오게 된다... [웹 프로젝트]_영화관 홈페이지 제작하기 - 2. 화면 설계 스케치 이번 포스팅은 영화관 홈페이지 기획에 따라 필요한 모든 html 파일들을 스케치한 과정을 정리하였다. 처음에는 목업을 이용하다가 빠르게 끝내고 싶어서 아이패드를 이용하여 수작업 스케치로 진행하였다. 정말 기초적인 html과 css,js를 이용하여 view 페이지만 구현하는 프로젝트라 각 화면 간의 유기성은 떨어진다. 이번 프로젝트의 목표는 내가 공부한 html과 css, js를 어떻게 사용하는지 익히기 위한 것이므로, 눈감고 넘어가야할 부분이 상당히 많을 것이다. 화면 설계 스케치 순서는 앞 포스팅에서 엑셀로 정리했던 홈페이지 기획 구성 순서와 동일하다. , 현재 상영작과 상영 예정작 페이지는 동일하게 구성하였다. 각 영화 정보를 보여주는 페이지로 대표적으로 하나의 view만 구성하였다. 이전 1 2 다음
