웹개발 종합반 2회독을 끝낸 후 일주일 동안 항해99 사전토이프로젝트를 진행하였다. 각자 페이지를 맡아서 진행하였는데, 어쩌다 보니 내가 맡은 부분이 가장 쉬운 페이지가 되었던 것 같다. 기술적인 측면에서 JWT토큰을 이용한 로그인 페이지, 그리고 회원가입 페이지가 가장 어려웠던 부분이었는데 이 부분은 소영님과 민승님이 맡아주셔서 다른 페이지 작업들은 비교적 수월하게 되었던 것 같다 :) 


토이프로젝트 주제 : 추천하고 싶은 프로그래밍 유튜브 영상을 포스팅하고 공유하는 사이트

 

팀원 : 김현빈(랜딩페이지), 조소영(로그인페이지), 강민승(회원가입페이지), 차이진(메인페이지), 황미경(세부페이지)

 

구현 기능 :

  • JWT를 이용한 로그인/회원가입
  • 카테고리별 영상 업로드
  • 게시물 코멘트/추천도 기록
  • URL을 이용한 크롤링

 

기술 스택 :

  • HTML
  • CSS
  • JavaScript
  • Python
  • Flask
  • JWT
  • mongoDB
  • Bootstrap5.0
  • swiper.js
  • 크롤링

 

깃허브 주소 : https://github.com/1016website/1016website
토이프로젝트 주소 : http://leejincha.shop/

 


 

 

↓↓↓↓↓ 토이프로젝트 스트린샷 ↓↓↓↓↓

랜딩 페이지

 

로그인 페이지
회원가입 페이지
메인 페이지
세부 페이지 (포스팅 박스 닫힌 모습)
세부페이지 (포스팅 박스 열린 모습)

 

 


 

 

※ 후기 :  

 

1. 먼저 좋은 팀원분들을 만나 항해99 시작 전 같이 한 달여간의 시간을 게더에서 공부하고 미숙하지만 프로젝트까지 진행할 수 있어서 너무 감사한 시간이었다. 혼자였으면 막막했을 코딩의 첫걸음을 팀원분들 덕분에 그래도 그나마 수월하게 하나하나 할 수 있었던 것 같고, 궁금한 게 있거나 오류가 발생할 때마다 같이 고민하고 해결해 주셔서 너무 감사한 시간이었다. 나도 훗날 나에게 도움이 필요한 팀원이 있다면, 16조 팀원분들처럼 친절히 그리고 차근차근 알려 줄 수 있는 사람이 되고 싶다는 생각을 했다.

 

2. 우리 팀은 다행히도 너무나 커뮤니케이션이 잘 되어서 소통과 협업에 문제는 전혀 없었고, 기술 구현도 웹개발종합반을 기준으로 했기 때문에 JWT를 제외하고는 크게 어려운 부분이 없었다. 다만 의외로 힘들었던 부분은 Github 사용이었다. 

모두가 처음 깃허브를 이용하는 거라 사용법이 미숙하기도 했고, 생각보다 다양한 오류를 맞이해서 그때마다 구글링으로 명령어를 찾아보고 해결해야 했다. 아직 터미널 명령어도 생소하고 깃허브 명령어도 생소하기 때문에 시행착오가 많았는데, 결론적으로 가장 기억에 남는 부분은! 무조건! Pull 하기 전에 백업을 해놓자! 것이다. ㅎㅎㅎ

 

3. 실력으로 보자면, 난 한참 다른 분들보다 부족한 부분이 많다. 하지만, 지금은 실력에 집중해 좌절할 것이 아니라 오늘과 내일 성장에 더 집중해야 하는 때라고 생각한다. 개발자들이라면 누구나 겪는다는 가면 증후군(Imposter Syndrome)을 나도 겪을 날이 올 것이다. 그 시기에도 지금처럼 당장의 남과 비교되는 실력보다 성장하는 나의 모습에 집중해서 발전하는 개발자가 되어야겠다고 생각했다.

 

그리고 또 한 가지, 협업을 했을 때 working well 할 수 있는 사람이 되도록 노력해야겠다. 원활한 커뮤니케이션뿐만 아니라, 기술적으로도 팀에게 도움이 되는 사람이 되도록 하자! 

 

진짜 진짜 마지막으로!! 16조 팀원분들 너무 감사했습니다. 벌써 아쉬운 마음이 큰데, 앞으로 싫으시더라도 ^_^헿 계속 연락드리면서 귀찮게 굴겠습니다 헿 ㅎㅎ !! 모두 수료 끝까지 화잇팅합시다 !

 

더이상 미룰 수 없다 ! 이해하고 싶다 ! JWT 토큰을 이용한 로그인페이지 ! 나도 제발 이해하고 싶다 !! 

그래서 토이프로젝트 팀원 분의 코드를 뜯어보며 조금이라도 이해해 보려 한다. (직접 코드작성은 못함 ^_ㅠ)

 


1. 필요한 라이브러리 import 하기.

 

 

 

2. 로그인 

 

프론트엔드
백엔드

 

  • 로그인을 위해 인풋박스에 이메일과 패스워드 id를 지정하고 let data로 변수를 지정한다.
  • 그리고 ajax를 통해 제이슨 형식으로 로그인정보를 저장해 서버로 보내준다.
  • 서버에서 이메일정보와 패스워드 정보를 받아 확인하고 if 함수를 통해 이메일이 존재하지 않으면 오류 메시지를 리턴한다.
  • 이메일 정보가 맞다면 비밀번호가 일치하는지 확인하고, 비밀번호가 맞지 않으면 오류 메시지를 클라이언트쪽으로 리턴해 준다.
  • 그리고 모두 오류가 없다면 토큰을 생성한다.
  • 그 후 로그인 성공 메시지를 토큰을 담은 쿠키와 함께 리턴한다.
  • 마지막으로 서버가 요청을 제대로 처리했다는 의미로 200을 리턴해 준다.

 

 

3. 로그아웃 

 

프론트엔드
백엔드

 

  • 로그아웃 버튼이 click이 되면 이 정보를 get함수로 서버단에 전달한다.
  • 서버단에서 로그아웃 성공 메시지를 화면에 띄워주도록 하고 동시에 쿠키를 없애준다.
  • 화면단에서 화면을 새로고침하여 다시 보여준다.

 

 

4. 유효성 검사

 

프론트엔드
백엔드

 

  • 유효성 검사 사용할때는 서버단에 @jwt_required()가 있으면 된다.
  • 이메일정보와 패스워드 정보가 일치한다면, 로그인 박스를 숨겨준다.
  • 일치하지 않는다면 로그인박스를 보여준다.
  • 서버단에서는 로그인정보를 확인하여 토큰에 저장된 데이터가 일치하지 않으면 result값이 fail임을 리턴해 준다.
  • 만약에 로그인 정보가 일치한다면 토큰에 저장된 데이터를 불러온다.

 

  

5. 갱신

 

백엔드

  •  jwt 토큰은 만료를 정해주지 않으면 그대로 남기 때문에 만료와 갱신에 신경써야한다. 
  • Access_token 의 기간이 만료되면 Refresh_token을 가지고 Access_token을 재발급 받아야 한다.
  • 그래서 토큰 시간이 만료되기 전에 프런트에서 refresh 요청을 보낸다.

 

더보기

flask-bcrypt 를 임포트 하는 과정에서 파이썬 버젼이 맞지 않아 계속해서 오류가 떴다.

터미널창을 이용하여 python3 버전을 업그레이드 해주었더니 오류를 해결 할 수 있었다.

 

파이썬3 업그레이드 명령어 : pip3 install --upgrade pip

 

 

 


[출처] : https://littlezero48.tistory.com/69  (우리팀에 소영님 없으면 어쩔뻔 했나요 ..♥ 감사합니다)

 

이렇게 정리를 했는데도 이해 못하는 나. ^^ 언젠가 이해하는 날이 오겠지 ... 후

내일은 민승님이 구현하신 회원가입 코드를 뜯어봐야 겠다. 괜찮아 ... 언젠가 이해할거야 ... 괜찮아 .... ㅜ

플라스크 라우팅

- route() 함수 : 플라스크의 함수. 복잡한 URL를 쉽게 함수로 연결하는 방법을 제공

- 플라스크에서는 @app.route() 데코레이터(decorator) 함수를 통해서 라우팅을 실행한다.

- 라우팅 방법으로는 정적 라우팅 방법과 동적 라우팅 방법이 있다.

 

 

1. 정적 라우팅

- 정적 라우팅은 @app.route()함수에 직접적으로 라우팅할 주소를 지정한다. 

 

- 처음 메인페이지를 만들 때, 위의 그림과 같이 정적 라우팅으로 메인 페이지와 세부 페이지를 직접 연결하였다.

- 그러나 세부 페이지가 많아 진다고 하면, 모든 페이지를 코드로 만들어 정적 라우팅으로 지정하기에는 너무 불편하고, 같은 코드가 반복되어 보기 좋지 않다는 문제점이 있다. 

- 이 부분은 동적 라우팅 함수로 개선이 가능하다.

 

2. 동적 라우팅

- 정적 라우팅처럼 직접 URL을 지정하는 것이 아닌 상황에 따라 다른 URL 변화하는 동적 적용을 하는 방식.

- 동적 라우팅은 여러 URL을 한 함수에 적용할 수 있어서 변하는 주소에 따라서 그에 맞는 페이지를 로드해 준다.

- URL에 동적인 변수를 사용하려면 원하는 위치에 "<변수>" 형태로 추가한다.

- 해당 변수는 URL과 일치하는 뷰 함수의 인자로 사용할 수 있다.

 

윗 6개의 함수가 동적 라우팅 함수를 통해 1개의 함수로 커버가 되었다.

 

 


[출처]

https://littlezero48.tistory.com/72 (소영님 감사합니다 ♥)

https://m.blog.naver.com/dsz08082/221798793729

https://hiio.tistory.com/41

지난번 회의 이후로 JWT토큰을 이요한 로그인과 회원가입 서버를 구현하는 것을 각자 공부하고 시도해보기로 했다.

그 후에 각자 어떤 페이지를 맡으면 좋을지 얘기를 나눠보기로 했다.

3일 정도의 시간을 가진 결과 소영님과 민승님이 로그인과 회원가입 서버 구현에 성공하셨다.

 

난 소영님과 민승님이 공유해주신 자료를 봐도 암호화 토큰을 이용한 코드가 잘 이해되지 않았다.

마지막 날 소영님이 팀원들을 위해 게더에서 코드 설명을 하나씩 차근차근해주셨다. (감사합니다 !!ㅜㅜ)

소영님의 노력에도 불구하고 나의 뇌는 그것이 무슨 말인지 이해하지 못했다. (좌절 ㅠㅠ)


일단 더 이상 지체할 수는 없기 때문에 각자 페이지를 맡아서 뼈대를 만들어 오기로 했다.

 

우리는 회의를 통해

  • 랜딩페이지 (현빈님)
  • 로그인 페이지 (소영님)
  • 회원가입 페이지 (민승님)
  • 메인 페이지 (나)
  • 세부 페이지 (미경님)

이렇게 맡아서 뼈대를 만들어 다음날 만나기로 했다.

 

이미 소영님과 민승님은 페이지를 구현하신 거나 다름없기 때문에 추후에 민승님께서 CSS를 좀 더 손봐주시기로 했다.

 

뼈대만 만들어 오긴 할 거지만 통일성을 위해 다음과 같은 기본 규칙을 정했다.

1. 디자인 논의 페이지 전체 색상 : 전체 - 흰색 바탕 느낌 / 버튼 검정색으로

2. 폰트 : Noto Sans Korean 로 통일 굵기로 차이성 두기 

3. 마진 & 패딩 : 천천히 정해 보는 걸로! (나중에 정하는 걸로)

4. 로고 -> 16조 (글씨 조금 특이한 거로 해서 로고처럼)

5. 사이트 이름 : 코딩 라이프 (코라 -> 콜라 -> 흰&빨&검)


내가 맡은 부분 :

 

1. html 

 

일단 기획서에 나와있는 양식과 비슷하게 메인 페이지 화면을 만들어 보았다.

웹 개발 종합반을 들었을 땐 이미 작성된 코드를 사용했기 때문에 모든 게 쉬웠는데, 막상 혼자 페이지를 만드려니

이 간단한 작업조차도 오랜 시간이 걸렸다. 

특히 아이콘 이미지마다 사이즈가 달라서 각각 다른 사이즈를 적용해 주어야 하는 부분이 조금 오래 걸렸다.

아직 투박하긴 하지만, 일단 뼈대는 아래와 같이 완성해 보았다.

 

 

1차 화면단 모습

 

 

 

2. 세부 페이지 이동

다음으로 내가 구현해야 할 부분은 아이콘을 클릭했을 때 그 기술과 관련된 세부 페이지로 이동하는 서버 작업을 해주는 것이었다.

생활코딩 유튜브를 통해 보았던 건데도 막상 하려니 코드가 기억이 나질 않았다. 팀원분들한테 도움을 요청했고, 이미 회원가입 페이지 구현을 마치신 민승님이 힌트를 주셨다. 사실 힌트라기보다 정답을 알려주셨다.

 

페이지 이동을 위해 사용해야 할 코드는 다음과 같다.

자세한 내용은 아래 링크 참조하기! 

 

1. onclick="location.href= 'link'

2. @app.route('/name')

def move_page(): return render_template('name.html')

 

 

 

백엔드 코드
프론트 코드

 

 

https://itun.tistory.com/491

 

[Javascript] 페이지 이동하기, 새창 띄우기 ( location.href, replace ... )

location.replace()와 location.href를 이용해서 페이지를 이동시킬 수 있다. 새 창으로 띄우고 싶을때는 window.open() 함수를 사용해야 한다. replace와 href의 차이는 href는 그대로 페이지 이동을 의미하지만,.

itun.tistory.com

 

 

3. 부트스트랩 그리드로 반응형 웹사이트 만들기

 

화면을 만든 후, Frontend & Backend박스가 화면 페이지가 줄어들면 박스 하나가 아래로 들어가게끔 반응형 웹사이트를 구현하고 싶었다. 아래 유튜브 동영상을 참고하여 부트스트랩 코드를 가져와 구현해 보았다.

 

class="row", class="col" 사용하기

 

https://www.youtube.com/watch?v=3Az_hKsL9L8 

 

 

그리하여 일단 2차적으로 끝내본 메인 페이지 화면!

 

화면 기록 2022-10-30 오전 12.37.38-1.mov
3.95MB

개발 우선순위 목록

페이지 개발 내용 우선 순위 (major, minor)

 

 

 

플로우차트

 

와이어프레임

1. 랜딩페이지

  • 해당 페이지를 제작하시는 분의 자유도에 따라 이미지나 일러스트 혹은 문구를 추가하시면 됩니다!
  • 랜딩 페이지의 문구 및 디자인은 임시입니다.
  1. 페이지 메인 타이틀
  2. 페이지 일러스트
  3. 로그인 페이지 > 클릭 시 로그인 페이지로 이동합니다.

 

2. 로그인 페이지

 

  • 랜딩페이지에서 [Login] 버튼 클릭 시 이동
  1. 로그인 페이지 메인 타이틀
  2. 이메일 입력 인풋필드
    1. “@”, “.” 가 포함되어 있지 않은 경우 오류 메세지가 생성됩니다.
    2. ex. “유효하지 않은 이메일 형식입니다.”
  3. 비밀번호 입력 인풋필드
    1. 인풋필드 타입은 password 입니다. <input type=”password”>
  4. 로그인 버튼
    1. 이메일이나 비밀번호가 틀릴 경우 오류 메세지가 생성됩니다.
    2. ex. “이메일 혹은 비밀번호가 맞지 않습니다.”
    3. 문제가 없다면 메인페이지로 이동합니다.
  5. 회원가입 페이지 이동 버튼
    1. 회원가입 페이지로 이동할 수 있는 버튼입니다.
    2. 텍스트버튼 형식입니다.
    3. 클릭 시 회원 가입 페이지로 이동합니다.

 

3. 회원가입 페이지

  1. 회원 가입 페이지 메인 타이틀
  2. 이메일 입력 인풋필드
    1. “@”, “.” 가 포함되어 있지 않은 경우 오류 메세지가 생성됩니다.
    2. ex. “유효하지 않은 이메일 형식입니다.”
  3. 비밀번호 입력 인풋필드
    1. 인풋필드 타입은 password 입니다. <input type=”password”>
  4. 회원가입 버튼
    1. 클릭 시 “회원가입 완료”라는 메세지가 생성됩니다.
    2. 자동으로 로그인 후 메인 페이지로 이동합니다.
  5. 로그인 페이지 이동 버튼
    1. 로그인 페이지로 이동할 수 있는 버튼입니다.
    2. 텍스트버튼 형식입니다.
    3. 클릭 시 로그인 페이지로 이동합니다.

 

4. 메인 페이지

 

  1. 메인 페이지 메인 타이틀
  2. 프론트엔드 토픽을 확인할 수 있는 구역입니다.
  3. 프론트엔드 관련 토픽을 선택할 수 있는 아이콘입니다.
    1. 각 아이콘 클릭 시 해당 주제의 세부 페이지로 이동합니다.
  4. 백엔트 토픽을 확인할 수 있는 구역입니다.
    1. 각 아이콘 클릭 시 해당 주제의 세부 페이지로 이동합니다.

 

5. 세부 페이지 → 크롤링 가능여부 파악하기, CSS 디테일 

 

 

  1. 세부 페이지 메인 타이틀
    1. 메인 타이틀은 구분 > 세부 순서로 나눠집니다.
      1. ex. FrontEnd > Html
      2. ex. BackEnd > Java
  2. 클릭 시 외부로 이동할 수 있는 썸네일(링크)입니다.
  3. 해당 영상에 관한 제목입니다.
  4. 해당 영상에 관한 description 입니다.
    1. 크롤링이 가능할 경우 영상 제목과 description도 같이 크롤링 되어야합니다.
    2. description이 50자가 넘어갈 경우 “…”으로 표시됩니다.
      1. 이때 [더보기] 버튼을 추가해서 외부로 이동할 수 있는 링크로 할지 아직 생각 중
      2. [더보기] 했을 때 카드 자체가 길어지며 내용이 전부 보이는 형식은 구현 어려울지도 모름
      3. 그때 상황에 맞춰서 해보는 것으로!

 

 

출처 : https://www.notion.so/d474b46390ff43d0a80e2124328f6bf7

+ Recent posts