[항해99] 항해99 0주차

suhjaesuk·2022년 10월 17일
3

항해99

목록 보기
1/5
post-thumbnail

⛵항해99 0주차

⛵항해99 0주차 과정

✅ 9월 23일 : 10기 합류
✅ 10월 16일 : 사전 프로젝트 시작
✅ 10월 28일 : 사전 프로젝트 완료
✅ 11월 7일 : 0주차 끝, pre-onboarding주차 시작

⛵웹 개발 종합반

본 과정 전까지 주어진 웹 개발 종합반을 수강하여 웹 개발의 전반적인 이해를 합니다. 항해에서는 강의를 2회독 권장합니다만, 전반적인 흐름을 읽고, 초보자들에게 자신감을 안겨주는 특성 상 2회독을 하여도 감이 안잡혀 총 3회독을 할 예정입니다. (강의에서는 이런걸 여러개 만들어요)

웹 개발 종합반을 통해 감을 익히고 사전 프로젝트를 진행할 수 있습니다. 웹 개발 종합반의 강의는 총 5주차로 구성되있으며, (총 6시간) 하루에 1~2주차 씩 진도를 나갈 수 있는 분량입니다.

  • 9월 30일 1회독 완료.
  • 10월 8일 2회독 완료.
  • 11월 6일 3회독 완료.

⛵ 사전 프로젝트

항해99는 0주차에 합류한 선원들을 사전 스터디를 만들어 줍니다. 스터디를 통하여 사전 프로젝트를 만드는데, 선수 과정으로 웹 개발 종합반을 (1회 이상) 들은 후 사전 프로젝트를 진행 합니다. (저희 그룹은 사전 프로젝트 전 10월 16일 까지 2회독 완료를 목표로 했습니다.)저희는 5명으로 시작하였으나, 재직중이신 한분이 퇴사가 불가능하게 되어 합류 또한 불가능하게 되었고 사정상 4명이 프로젝트를 진행하였습니다.( 4명 모두 프로젝트가 처음이였습니다)


저희 스터디그룹은 넷플릭스 컨텐츠를 추천하는 웹을 만들기로 하였습니다.

+스터디 과정은 다음과 같았습니다

  • 9월 29일 게더에서 OT (매니저님이 오셔서 어떻게 사전 프로젝트가 진행되는지 알려주심)
  • 10월 16일 사전프로젝트 시작 (시작 전 모여서 주제를 정하고 17일까지 와이어프레임을 작성)
  • 10월 17일 : 각자 와이어 프레임 작성해오기 (와이어 프레임 작성법을 익히기 위해 각자 작성)
  • 10월 20일 : 각자 html, css 작성해오기. (html, css 감을 익히기 위해 작성)
  • 10월 21일 : Git 공부해오기, 공부한걸 토대로 코드 공유해보기.
  • 10월 23일 : 추천하면 메인페이지에 등록되는 코드 작성해오기
  • 10월 26일 : 로그인 구현 해보기
  • 10월 28일 : 프로젝트 완료 (프로젝트 배포하기)

📌와이어 프레임 작성 (~10월 17일)

메인페이지를 주축으로 페이지를 만듭니다. 아직 어떤 식으로 분담하고 개발할지 계획이 없습니다. ( 각자 한페이지 씩 구현/ 기능별로 구현 등등) 아래는 저희 스터디에서 선택한 와이어 프레임 이미지입니다.

+와이어 프레임 이미지

📌HTML, CSS 작성 (~10월 20일)

아무 기능이 없는 HTML, CSS를 작성하였습니다. 클론코딩이 아닌 제가 생각해 놓은것을 작성해보니 헤더부 작성만 3시간이 걸렸습니다. <div> 특성을 파악하여, 덕분에 다음 프로젝트 HTML, CSS 작성 시 시간을 단축 할 수 있을 것 같습니다. 아래는 제가 만들어본 HTML, CSS 페이지입니다.

  • 😄원래 10월 20일까지 한개의 페이지만 작성해오기로 했었는데 팀 전원이 전체 페이지를 작성해왔습니다!

+HTML,CSS 작성 이미지

  • 로그인 페이지

  • 회원가입 페이지

  • 메인 페이지
  • 컨텐츠 추천페이지

📌git 공부하고, github로 코드 공유하기 (~10월 21일)

HTML, CSS도 작성했겠다. 기능을 추가하려했는데 '어떻게 코드를 공유할까?'라는 난관에 부딪혔습니다. 정답은 정해져 있었습니다. 바로 Git과 Github 공부하기 였습니다. 팀원들과 다음날까지 Git을 공부해오고 코드를 공유하기로 했습니다. 저는 30분 요약 강좌 시즌4 : 알잘딱깔센 GitHub으로 공부했습니다.
깃 정리
+스터디 당일 깃허브로 협업을 하려했는데, 얘기 해보니 구현할 기능이 적어 협업이 불필요하다 판단되어 각자 기능을 구현해오기로 하였습니다. 주제와 공부 기간이 정해져있는 개인 프로젝트가 되어버렸네요 😅 비록 협업에 이용하지 않았지만 스터디원 모두 깃과 깃허브를 공부 해서 얻은게 있었습니다.

📌동적 웹페이지 구성, 파싱, db연동 하기 (~10월 25일)

컨텐츠 추천페이지에서 넷플릭스 홈페이지의 url, 별점, 코멘트를 입력하고 등록하면 메인 페이지에 업로드되는 기능을 각자 구현해옵니다. (로그인 회원가입 기능은 이후에 구현하기로 함)

처음해본것을 나열해 보자면,

✅ url 여러개로 나누기
html을 url로 여러개로 나누는 작업을 처음 해보았습니다. 조금만 생각해도 간단하게 할 수 있었습니다.

이미지, 링크 코드 수정
기존 html 문법을 사용하면 이미지와 링크가 작동을 안하여, jinja2 템플릿 엔진을 이용하여 이미지 파일과 링크 코드를 수정하였습니다.

+Jinja2 템플릿 엔진을 사용하여 이미지 파일 추가 : url_for (함수이름, 파라미터명='보낼데이터')

<img src={{ url_for('static', filename='이미지파일') }}>

+링크는 flask에서 설정한 로컬 url로 반환하기

<button type="button" onclick = "location.href = '/로컬url'">이동하기</button>

📌오류
script에서 $ 값을 못 읽어오는 Uncaught ReferenceError: $ is not defined 오류가 났습니다. 확인해보니 jquery 스크립트를 주지 않았습니다. jquery 스크립트를 주고나니 해결되었습니다.

📌회원가입, 로그인 구현하기 (~10월 27일)

추천하면 등록이 되는 기능을 구현하고 마지막으로 회원가입, 로그인 기능을 구현을 계획했습니다. 기한은 단 하루. 저의 경우는 세션, 쿠키로 로그인 기능을 구현하고 싶었지만 코드를 이해할 수 없어 ajax로 구현했습니다. 나중에 spring을 공부해서 쿠키, 세션으로 로그인 기능을 꼭 구현해보고 싶습니다.

📌 회원가입 예시
아이디 :test / 비밀번호: 1234로 회원가입을 해봅시다.

+유효성 검사(비밀번호와 비밀번호 확인이 다를 경우)

+회원가입

+회원가입 후 /members에서 데이터 확인

생각해보니 password2(비밀번호 확인하는 변수)는 유효성 검사에만 쓰고, 데이터로 넘길 필요는 없어보입니다.

📌 로그인 예시 이미지
위에서 회원가입한 test 1234로 회원가입을 해봅시다. (실패 시 아무 반응 없음, 유효성 검사 회원가입과 동일 작동)

+로그인 성공
로그인 성공 후 홈화면으로 이동합니다.

📌 아쉬운 점
회원가입 아이디 중복, 로그인 실패 시 alert를 주지 못한점이 아쉽습니다. 아이디 중복을 잡으면 회원가입이 안되서 실패했고, 동일한 이유로 로그인 실패 시 alert를 주면 로그인 성공 시 로그인이 안되서 실패하였습니다.

📌배포하기 (~10월 28일)

✅ 링크 : http://suhjaesuk1.shop/ (현재 유효하지 않음)

📌 토이프로젝트 완료

약 2주간의 사전 토이 프로젝트를 완료하였습니다. 아주 간단한 기능을 구현하는거라 협업 없이 개인적으로 작성하였지만 팀원들 덕분에 재밌게 코드를 작성했습니다. 느낀점이 있다면 이번 프로젝트로 아직 배워야할 것들이 많다는걸 깨달았습니다 😅 프로젝트 완료 후 팀원들과 상의 후 11/7 pre-onboarding 전까지 개인공부를 하기로 하였습니다.

profile
wanna be BE-Developer

0개의 댓글