SWETTER 홈페이지 만들 때 목차& 중요한 부분만 가져옴
1. 배너 만들기
→ Bulma의 hero 클래스 이용 : 배너만들 때 사용
2. 로그인/ 회원가입 토글 기능 만들기
→ is-hidden 클래스 이용해서 요소 숨김.
→ toggleClass() : 한번에 토글할 수 있는 함수, 회원가입버튼과 취소 버튼에 연결
3. 회원가입 기능 만들기
: 입력받은 값들이 형식에 맞는지 부터 확인.
< 형식 >
-
아이디: 영문과 숫자, 일부 특수문자(._-)만 사용 가능, 2-10자 길이. 영문 무조건 포함
-
비밀번호: 영문, 숫자는 1개 씩 무조건 포함, 일부 특수문자 사용 가능, 8-20자 길이
-
비밀번호 확인: 비밀번호와 일치
→ 복잡한 조건일 때, 정규표현식 이용하는 게 좋음. 형식을 확인하여 결과를 참/거짓으로 반환하는 함수 정의
→ 기능(정규표현식, 아이디 중복확인)들을 만족할 때만 회원가입 POST요청을 보내도록 함수를 짜면 됨!!
4. 로그인 기능 만들기
: 값을 입력했는지 확인 & 바로 로그인 POST 요청
5. 메인 페이지 모습 만들기
1) CSS 파일 분리
2) 네비게이션 바 ( 로고를 클릭하면 메인페이지로 이동)
3) 포스팅 칸 : 클릭하면 글을 적을 수 있는 팝업이 뜸
4) 사용자 정보 보내주기 : 사용자의 프로필 사진을 넣어주기 위해서 서버에서 사용자 정보를 보내줌
5) 이미지를 클릭하면 사용자 프로필로 이동
6) 포스팅 모달
: 포스팅 칸을 클릭하면 나타나고, 배경, x표시, 취소버튼을 누르면 사라짐
→ 사라지고 나타나는 것은 is-active 클래스 이용.
7) 포스팅 카드 만들기
: Bulma의 box와 media 클래스 이용
6. 메인페이지 기능 만들기 - 포스팅
1) 포스팅 기능
: 글, 현재 시각을 문자열(string)으로 받아 POST 요청을 보내고, 저장에 성공하면 모달을 닫고 새로고침.
2) 포스팅 카드 띄우는 기능
: 저장한 포스트를 받아오기.
: 서버에서는 DB에서 최근 20개의 포스트를 받아와 리스트로 넘겨줌.
: 좋아요 기능을 쓸 때 각 포스트를 구분하기 위해서 MongoDB가 자동으로 만들어주는 _id값을 이용할 것, ObjectId는 자료형이라 문자열로 변환해줘야 함.
→ 클라이언트에서 각 포스트를 카드로 만들어 주는 get_posts 함수를 페이지가 로딩됐을 때, 실행되게 함.
$(document).ready(function () {
get_posts()
}) 3) 포스팅 시간 나타내기
: 자바스크립트의 Date 오브젝트 간의 빼기 결과는 밀리초로 주어짐.
7. 메인 페이지 기능 - 좋아요 & 취소 기능
1) 서버
: 1) 어떤 포스트를 2) 누가 눌렀고 3) 좋아요 or 좋아요 취소
: DB에 저장할 때는 1) 누가 2) 어떤 포스트에 3) 어떤 반응
: 좋아요 or 취소인지에 따라 해당 도큐먼트를 insert_one()을 할지 delete_one()을 할지 결정
: 해당 포스트에 해당 타입의 반응이 몇개 인지를 세서 보내주기
2) 클라이언트
: API에서 요구하는 데이터 - 사용자 정보, 포스트 아이디, 좋아요/좋아요 취소, 아이콘 종류
: 하트를 누른 사람의 정보는 로그인 정보에서 받아왔으므로 나머지 3개만 데이터로 보내주기
: 좋아요 or 좋아요 취소인지는 아이콘의 클래스가 fa-heart인지 fa-heart-o인지로 알 수 있음
: 업데이트에 성공하면 아이콘의 클래스를 바꾸고 좋아요 숫자도 업데이트해줌
8. 메인 페이지 - 좋아요 숫자 표시하기
1) 서버에서 포스트목록을 보내줄 때, 각 포스트의 하트 갯수. 내가 눌렀는지 까지.
2) 클라이언트에서는 이 정보를 받아 찬 하트fa-heart를 보여줄 것인지, 빈 하트fa-heart-o를 보여줄 것인지 결정
→ 이것을 '조건부 삼항 연산자(ternary operator)'를 쓰면 한 줄로 나타낼 수 있음!
3) 위의 1,2 의 정보를 html_temp를 만들 때 넣어줌.
4) 좋아요 숫자 형식 변환
5) 자바스크립트(JS)파일 분리하기
: 포스팅 관련 함수들은 프로필 페이지에서도 쓰이므로 JS 파일로 분리
: static 폴더 안에 myjs.js 파일을 만들고 함수들을 복사해 넣기
: HTML 안에는 아래와 같이 임포트
: jQuery의 함수들을 사용하기 때문에 jQuery 임포트하는 코드보다 아래에 넣어주어야함
9. 프로필 페이지 모습 만들기 - 전체
1) 틀 만들기
- 메인 페이지와 모습이 비슷하기 때문에, 복사.
- mystyle.css와 myjs.js 파일 임포트 필수
- 페이지가 로딩되면 포스팅 카드들을 띄워줌
2) 프로필 영역 만들기
- 각 사용자의 프로필 : hero , media 클래스 이용
10. 프로필 페이지 모습 만들기 - 프로필 수정
1) 프로필 수정 & 로그아웃 버튼
2) 프로필 수정 모달
11. 프로필 페이지 기능
1) 내 프로필에서만 프로필 수정기능 보이게 하기
: 서버에서 보내 준 status 파라미터를 이용해 내 프로필일 때만 하도록 jinja2 문법을 이용
글을 적는 포스팅 칸, 모달도 내 프로필에서만 보이도록
2) 프로필 수정 기능
: 프로필 수정 모달에서 이름변경/ 새 프로필사진 업로드 하는 경우, 파일받아 저장 & 프로필 업데이트 후 새로고침해서 다시 정보를 받아옴.
서버 쪽에서 username을 받아 해당 사용자의 글만 가져오도록
3) jquery get_posts() 함수에 username 을 변수로 받고, 서버 쪽에서 username을 받아 해당 사용자의 글만 가져옴
4) og태그, favicon넣기
완전한 코드는
