웹 개발플러스 4주차(회원가입,로그인, 좋아요 기능 등)

드디어 마지막 웹 개발 플러스 4주차!!!

이정도까지 수업을 듣고 난 이후 누군가에게 웹 서비스가 어떻게 돌아가는지 설명할 수 있을 정도는 되지만 아직까지 코드들은 익숙하지않아서 그런지 어려운감이 있는 것 같다

 

이번 강의에서 웹사이트를 Bulma 를 통해 구성하기로 했다.

(부트스트랩보다 뭔가 더 예쁜느낌?)

 

Bulma 문법이 더 직관적이고 자유롭게 커스터마이징이 가능하기때문에 더 좋은 것 같다. 

( 공식문서 : https://bulma.io/documentation )

 

이번 프로젝트의 가장 중요한 기능인 회원가입 과 로그인!!!

(평소에 홈페이지 이용할때는 몰랐지만, 상당히 복잡한 코드들 ㅠㅠㅠ 하지만 익숙해지기위해 다시 복습!!)

 

※ 회원가입

여기서 가장 중요한 부분은 해시함수를 알아야한다! SHA256 의 해시함수를 사용한다고한다 

이건 그래도 회사에서 자주 접해본 용어라서 익숙하다! 입력받은 비밀번호를 고정된 길이(256바이트)로 변환하는 

한마디로 암호화한다고 생각하면 될 것같다

 

이제본격적으로, Sweeter 서비스를 만들어보자!! 

 

완성 모습 : <http://spartacodingclub.shop/wp/sweeter>

 

지금까지 강의를 들으면서 만들었던 미니프로젝트 중 가장 많은 기능들이 구현되어 있는 것 같다.

 

* 기획단계(API설계하기)

㉮ 로그인 & 회원가입 페이지 

 1. 기본 화면은 로그인 페이지 

 2. 회원가입하기 버튼 클릭 시 , 회원가입 화면으로 전환 

 3. 취소 버튼 클릭 시, 로그인 화면으로 전환 

 4. 회원가입 

    - 아이디 & 비밀번호 형식 확인 

    - 아이디 중복확인 

    - DB에 아이디,비밀번호를 저장하여 로그인 화면으로 전환 

5. 로그인

    - 아이디 & 비밀번호 입력 확인 

    - 가입여부 확인(서버로 POST 요청을 보내 확인)

    - 회원일 경우 토큰부여 

 

㉯ 메인 페이지 

1. 모든 사람의 포스트를 시간 역순으로 보여주기

2. 각각의 포스트에 좋아요/좋아요 취소 기능 (좋아요를 누른 포스트는 찬 하트로 보여주기)

3. 포스팅 칸에 내 프로필 보여주기 (프로필 사진 누르면 프로필 페이지로 이동)

4. 포스팅 칸 클릭하면 포스팅 모달 띄우기

   - 포스팅하기 버튼 클릭 시, 포스트DB에 저장

   - 새로고침하여 포스트 목록을 다시 띄우기 

 

㉰ 프로필 페이지

1. 해당 사용자의 포스트만 시간 역순으로 보여주기

2. 내 프로필이라면 프로필 수정 & 로그아웃 버튼 보여주기

3. 내 프로필일때만 포스팅칸 보여주기

4. 프로필 수정버튼 클릭하면 프로필 수정 모달 띄우기

   - 기존의 저장되어 있는 값 보여주기

   - 수정 시 DB에 업데이트하고 새로고침해서 변경사항 적용

5. 로그아웃 버튼을 클릭하면 토큰 삭제하고 로그인페이지로 이동 

 

 

이부분에 대한 소스는 물론 외울수는 없겠지만 어떤식으로 흘러가고 이해를 하면은 

내가 작성한 소스를 나중에 활용하기 위해 다시보더라도 충분히 알고 응용할 수 있을걸로 생각된다!