회원가입할 때는 입력 받은 값들이 형식에 맞는지 우선 확인해야한다'ㅅ'// - 아이디: 영문과 숫자, 일부 특수문자(._-)만 사용 가능, 2-10자 길이. 영문 무조건 포함 = is-nickname - 비밀번호: 영문, 숫자는 1개 씩 무조건 포함, 일부 특수문자 사용 가능, 8-20자 길이 = is-password - 비밀번호 확인 : 비밀번호와 일치
이렇게 복잡한 조건을 확인할 때는 '정규표현식(Regular Expressions)'을 이용하여 비교하는 것이 좋다. 형식을 확인하여 결과를 참/거짓으로 반환하는 함수를 정의하면 편리하다고..!!
빨간 밑줄이 정규표현식이에요!!
그리고 아이디는 다른 사람과 겹치면 안되기 때문에 중복확인을 해주어야겠죠? 서버로 POST 요청을 보내 아이디가 존재하는지 확인해보자!! - 아이디 중복확인 클라이언트 - 아이디 중복확인 서버 - 회원가입 클라이언트
- 회원가입 서버
이제 이 조건들을 만족할 때만 회원가입POST 요청을 보내도록 함수를 짜면 끝!
08. 로그인 페이지 기능만들기
로그인 기능 만들기
로그인 입력값 확인은 훨씬 간단~!! 값을 입력했는지만 확인하고 바로 로그인 POST 요청을 보내보자. 뒤 기능들을 테스트하며 개발하려면, 한 아이디로 로그인하여 다른 사용자 프로필 페이지를 봐야하니 테스트용 아이디 2개를 만들어둔다 ㅎ_ㅎ - 클라이언트 - 서버 이제 아이디와 비밀번호를 제대로 입력했다면, 서버가 JWT토큰을 발행해준다. **JWT토큰은 자유이용권 입장권 같은 것!! = 언제까지 이 입장권이 유효하다 라고 적시해줌
로그인 시도한 후 크롬-개발자도구 검사- application가셔 쿠키 확인 할때 아래 처럼 보여야 JWT토큰이 발행된거에요!!
09. 메인 페이지 모습 만들기
CSS 파일 분리하기 - CSS 내용 중 다른 페이지에서도 쓸만한 것들은 static 폴더 안에 mystyle.css 파일을 만들어 옮겨주시고, head에는 링크를 달아주세요. 전체적으로 통일감 있는 웹사이트를 만들 수 있겠죠? myctyle.css (static파일 아래 만들기) Bulma의 클래스들을 커스터마이징해서 쓰기 때문에 Bulma의 링크보다 아래에 넣어주어야 함 !
내비게이션 바 만들기 - 로고를 클릭하면 메인 페이지로 갈 수 있는 내비게이션 바(=목록)를 만들어봅시다. index.html body태그 안에 넣어주기! 누르면 홈으로 돌아갈 수 있다.
포스팅 칸 만들기 - 클릭하면 글을 적을 수 있는 팝업이 뜨는 포스팅 칸 - 앞의 이미지를 사용자의 프로필 사진으로 넣어주기 위해서는 서버에서 사용자 정보를 같이 보내주어야 함! - 이 정보를 이용해 이미지를 바꿔줄 수 있습니다. 이미지를 클릭하면 사용자 프로필로 가도록 링크도 바꾸어 준다. 그림을 클릭하면 아래 내 프로필 페이지로 간다
포스팅 모달 만들기 - 실제로 글을 적을 수 있는 포스팅 모달은 우선 모습을 만들고 숨겨놓았다가 포스팅 칸을 클릭하면 나타고, 바깥 배경 영역이나 X표, 취소 버튼을 클릭하면 사라집니다. *나타나고 사라지는 것은 is-active 클래스를 이용해 제어가 가능*. index.html에 추가 페이지 위로 새로운 입력창(=모달)이 뜨는 것을 볼수있다
포스팅 카드 만들기 - Bulma의 box와 media 클래스를 이용하면 예쁜 카드를 쉽게 만들 수 있습니다.
10. 메인 페이지 기능 만들기 - 포스팅
포스팅 기능 만들기 - 글과 현재 시각을 문자열로 받아 POST 요청을 보내고, 저장에 성공하면 모달을 닫고 새로고침해줍니다. - 서버에서는 글과 현재 시각을 받아 로그인한 사용자의 정보로부터 아이디, 이름, 프로필 사진을 같이 저장합니다 robo3T에서 DB 저장되었는지 확인하기
포스팅 카드 띄우는 기능 만들기 - 포스트를 저장했으니 이번에는 받아와봅시다. - 서버에서는 DB에서 최근 20개의 포스트를 받아와 리스트로 넘겨줍니다. 나중에 좋아요 기능을 쓸 때 각 포스트를 구분하기 위해서 MongoDB가 자동으로 만들어주는 _id 값을 이용할 것인데요, ObjectID라는 자료형이라 문자열로 변환해주어야합니다. - 클라이언트에서는 각 포스트를 카드로 만들어줍니다. 기존에 있던 카드는 다 지우고 새로 만들어서 담벼락에 붙여줍니다.
- 이 get_posts() 함수가 페이지가 로딩되었을 때, 실행되게 하면 되겠죠? 위 화면 처럼 나오게된다. 좋아요 숫자와 위치가 적나라하게 나오는 점 주의,,
포스팅 시간 나타내기 - 이번에는 포스팅한 지 얼마나 되었는지 보여주는 기능을 만들어봅시다. - 자바스크립트의 Date 오브젝트 간의 빼기의 결과는 밀리초로 주어집니다.
- 60분이 넘어가는 경우에는 시간으로 나타내봅시다.
- 24시간이 넘어가는 경우에는 일수로 나타내볼까요?
- 7일 이상일 때에는 날짜로 보여주도록 하겠습니다.
- 이것을 get_posts() 함수 안에 각 포스팅 카드에 포스팅 시각 대신 넣어주면 되겠죠?
위 코드, 적용 후 결과
11.메인 페이지 기능 만들기 - 좋아요
좋아요/좋아요 취소 기능 만들기
서버 - 우선 서버 쪽 기능을 먼저 생각해봅시다. 하트를 누르면 1) 어떤 포스트를 2) 누가 눌렀고 3) 좋아요인지 좋아요 취소인지를 알아야겠죠? 숙제로 만들 다른 반응들(⭐, 👍)을 생각하면 어느 아이콘을 눌렀는지도 알아야겠네요. - DB에 저장할 때는 1) 누가 2) 어떤 포스트에 3) 어떤 반응을 남겼는지 세 정보만 넣으면 되고, 좋아요인지, 취소인지에 따라 해당 도큐먼트를 insert_one()을 할지 delete_one()을 할지 결정해주어야합니다. - 좋아요 컬렉션을 업데이트한 이후에는 해당 포스트에 해당 타입의 반응이 몇 개인지를 세서 보내주어야합니다. count = db.likes.count_documents({"post_id": post_id_receive, "type": type_receive}) - 좋아요 업데이트 API
클라이언트 - API에서 요구하는 데이터가 사용자 정보, 포스트 아이디, 좋아요/좋아요 취소, 아이콘 종류입니다.
- 여기에서 하트를 누른 사람의 정보는 로그인 정보에서 받아왔으므로 나머지 3개만 데이터로 보내주면 됩니다.
- 좋아요인지, 좋아요 취소인지는 아이콘의 클래스가 fa-heart인지 fa-heart-o인지로 알 수 있습니다. - 업데이트에 성공하면 아이콘의 클래스를 바꾸고 좋아요 숫자도 업데이트해줍니다. - 좋아요 업데이트 함수 클라이언트 script태크 안에 최 상단에 넣어주세요눌러보면 숫자가 정상적으로 바뀜..
좋아요 숫자 표시하기 - 이제 좋아요 기능이 생겼으니 포스팅 카드를 만들 때도 좋아요 개수를 제대로 입력해주도록 합시다. > 우선 서버에서 포스트 목록을 보내줄 때 그 포스트에 달린 하트가 몇 개인지, 내가 단 하트도 있는지 같이 세어 보내줍니다.
> 클라이언트에서는 이 정보를 받아 찬 하트("fa-heart")를 보여줄 것인지, 빈 하트("fa-heart-o")를 보여줄 것인지 결정합니다. 좋아요 눌렀던 친구만 하트가 꽉 차있다
> 이것을 '조건부 삼항 연산자(ternary operator)'를 쓰면 한 줄로 나타낼 수 있어요! 위 else밑에 넣어주세요
> 조건부 삼항 연산자는 다음과 같은 구조로 써주면 됩니다. [ 변수 = 조건 ? 참일 때 값 : 거짓일 때 값 ] > 이 정보를 html_temp를 만들 때 하트 개수와 함께 넣어주면 끝!
서버가 카운트 개수를 넘겨주어서 변수를 하나 설정해줌
- 좋아요 숫자도 형식을 조금 바꿔볼까요
우선 10,000개가 넘으면 '12k'처럼 정수+k 형식으로 만들어줍니다.
500개가 넘으면 '0.5k'처럼 소숫점 아래 한 자리 수에서 반올림해줍니다.
좋아요 수가 0개일 때는 숫자를 적지 않습니다.
작은 숫자는 그대로 적습니다. 좋아요 숫자 형식
> num2str함수를 get posts 함수 위에 만들어준 후 get_posts()와 toggle_like() 안에 넣어줍니다.추가추가
함수를 만들어주고
JS 파일 분리하기
여러 페이지에 걸쳐 쓰이는 CSS 내용을 mystyle.css 파일에 적어 공유할 수 있듯, 자바스크립트 코드도 파일을 분리하여 다른 html에서 임포트해올 수 있습니다.
포스팅 관련 함수들은 프로필 페이지에서도 쓰이므로 JS 파일로 분리하여봅시다.
static 폴더 안에 myjs.js 파일을 만들고 함수들을 복사해 넣습니다.
HTML 안에는 아래와 같이 임포트해옵니다. 기존 script코드 삭제하고 위 공간에 링크 추가! jQuery의 함수들을 사용하기 때문에 jQuery 임포트하는 코드보다 아래에 넣어주어야합니다
