프로그램 8주차 2022/04/21~ 2022/06/3 실전 프로젝트

과제 요구사항 

프로젝트의 제목과 와이어 프레임들

프로젝트 제목 : 아무튼 출석

와이어 프레임

기획 의도

  • 모바일 웹을 통해 루틴기록 서비스가 가지는 강점이 뚜렷하게 없는 것 같아, pc에 오래 앉아있는 사람들로 타겟을 잡아봤습니다.
  • pc 앞에 오래 앉아있는 사람이 누구인가 생각하다 저희 항해99 6기가 떠올랐고, 현재 존재하는 체크인 시스템에 대한 리뉴얼을 해보자는 생각이 들었습니다.
  • 유저에게 필요한 서비스는 일상속에서 불편했던점을 해소해주는 서비스라고 생각하였습니다.
  • 유저가 아닌 기업에게 어필 할 수 있는 서비스를 기획하고자, 항해 체크인 서비스를 모티브 삼아 해당 프로젝트를 기획하게 되었고, 서비스를 제공하는 기업의 실무자와 서비스를 사용하는 유저가 보다 편리하게 서비스를 이용할 수 있는 방향으로 기획하게되었습니다.

 

팀원분들과 예기한 항해 체크인의 불편한점 

  • 단순 체크인 기능만 있어서 공지사항은 타 채널에서 확인해야하는 번거로움.
  • 팀 바꼈을 때 내 팀원들에 대한 정보가 없음 (카톡 아이디/ 이메일)
  • 사람들의 Check In Check Out 시간 패턴 파악 불가
  • 슬랙에 기술 매니저님 질문 내용/ 정보 시간 지나면 사라짐
  • 주특기별 카톡방 없었음 있으면 정보량 더 많아지는대 다들 눈치게임 하느라 안만듬
  • 매니저들과 소통의 어려움

개선방향

  • 주차별 팀원 정보 제공
  • 조별 게시판
  • 체크인/체크아웃 기능 개선
  • 게시판 생성(공지사항, 로드맵, 히스토리, FAQ 등)
  • 팀 배정시 자동 채팅방 생성

MVP 목표 기능

  • 회원가입/로그인 / 로그아웃 / 관리자로그인 
  • 체크인 / 체크아웃 시스템( ver.2, UI 최신화, 이름을 클릭시 유저정보 조회가능[email, 전화번호 등] )
  • 관리자 페이지(조별 바꾸기, 회원관리 등)
  • 공통 게시판(공지사항, 로드맵, 히스토리, FAQ 등)
  • 주특기별 게시판(매니저님께 질문)
  • 조별 대시보드(다른 조들도 볼 수 있는 진척도, 조별 체크리스트)
  • 주차별 팀별 채팅 생성

 

요번 실전주차에서는  기획 하고 그 기획을 바탕으로 와이어프레임 작업후 같이 주특기의  팀원분과 기능을 나눠 작업하는 한주였습니다

저는 로그인과 관련된 기능들과 소켓통신을 활용한 채팅 기능을 작업을진행하게되었고 같이 작업하는 분은 게시판과 체크인/체크아웃을 기록하는 기능을 담당하여 작업을 진행하였습니다

구현된 페이지와 기능들

로그인 페이지( 일반 로그인, 소셜로그인 ( 카카오 ) )

작업 중인 로그인 페이지

일반로그인

이메일 주소와 비밀번호 입력값이 들어가게되면 로그인 버튼을 누를시 입력값을 보내주게됩니다

로그인 버튼에는 정해진 api 주소로 이메일주소와 비밀번호를 보내 성공할 경우 데이터베이스에 저장하고 실패할경우 에러를 보여줍니다

성공할경우 데이터 베이스에서 넘어오는 jwt토큰을 로컬스토리지나 쿠키에 저장하여 사용자가 토큰을 가지고있을경우 페이지를 이동할수있게 만들어주었습니다

 

 

소셜 로그인 ( 카카오 ) 

https://data-jj.tistory.com/53 <- 여기 링크의 설명을 보고 참고하여 만들었습니다

카카오톡으로 시작하기를 누를시 인증처리를 거쳐 카카오톡에서 인가 코드를 받습니다

const KakaoOauth = (props) => {
  const dispatch = useDispatch();

  useEffect(() => {
    let code = new URL(window.location.href).searchParams.get("code");
    console.log(code);
    dispatch(userActions.kakaoLoginDB(code));
  }, []);

  return <div>잠시만 기다려주세요</div>;
};

export default KakaoOauth;

 위의 코드로 카카오톡에서 클라인트로 받은 인가코드를  클라이언트에서 데이터베이스에 넘겨줍니다

카카오톡에선 밑의 리다익트 화면에서 callback 뒤부분에 인가코드를 넘겨주게되며 저희는 이 인가코드를 받아 데이터베이스에 넘겨드려야합니다 

위의 코드로 해당 인가코드를 가져와서 데이터 베이스에 넘겨주는  작업을합니다

해당 인가코드를 데이터베이스에 넘겨드리면 백엔드분들이 작업하셔서 카카톡에서 로그인한 해당 유저의 정보를

jwt토큰으로 변환하여 다시 클라이언트에 넘겨줍니다

위의 작업들이 실행되는동안 리다이렉트 화면으로 잠시 이동이되는데 로그인을 성공할시 다음화면으로 넘겨주었습니다

로그인이 성공할경우 데이터 베이스에서 넘어오는 jwt토큰을 로컬스토리지나 쿠키에 저장하여 사용자가 토큰을 가지고있을경우 페이지를 이동할수있게 만들어주었습니다

 

 

 

회원가입 페이지 

 

작업 중인회원가입페이지

회원가입 페이지는 api 명세서로 약속된 이메일 주소 , 닉네임, 비밀번호, 비밀번호체크,핸드폰번호 등을 사용자에게 입력받아 회원가입 버튼을 눌러 성공하면   데이터베이스 저장하도록 작성하였습니다

회원가입 버튼을 누르게되면 api명세서에 작성된 주소로 사용자가 입력한 입력값들을 보내줍니다

모든 입력값들에 정해진 규칙을 넣고싶어서 정규식을 집어넣어 정해진 규칙대로 작성을 해야 회원가입을 진행할수있습니다 

 

관리자 로그인 페이지

작업 중인 관리자 로그인 페이지

관리자 로그인 페이지는 관리자가 입력한 이메일 주소와 비밀번호를 관리자 로그인버튼을 눌러 성공할시 데이터베이스에 저장도록 작성하였습니다 

관리자 로그인버튼은 api 명세서에 작성된 주소로 이메일 주소의 정보와 비밀번호를 보내줍니다

관리자의 권한은 서버에서 관리자 권한을 줄수있으며 이 권한이 없을경우 관리자 로그인으로  일반 사용자가 로그인 할경우 로그인이 불가능합니다

관리자 로그인이 성공할경우 데이터 베이스에서 넘어오는 jwt토큰을 로컬스토리지나 쿠키에 저장하여 사용자가 토큰을 가지고있을경우 페이지를 이동할수있게 만들어주었습니다

 

채팅 페이지

작업 중인 채팅페이지

채팅 페이지는  api 명세서 약속한 주소로 소켓을하여 실시간 통신을 하는 페이지입니다

필요한 함수는

1. 통신을 위해 해당 주소와 연결하는 connect 

2. connet 함수가 실행되면 성공할경우의 함수( onConnected )와 실패할경우의 함수 ( onError )

3. 메세지를 실시간으로 받을 방주소와 메세지수신 함수 

4. 메세지를 수신받는 함수 ( onMessageReceived )

5. 메세지를 작성해서 서버에 보내는 함수 ( sendMeassage )

 

요번주까지 위 5가지의 함수들로 정리하여 사용하고있습니다

 

What I Learned

요번 한주 WIL 키워드는 소셜 로그인(카카오톡 )과 인가코드 전달 및 데이터베이스에서 받아오는 jwt토큰 관리입니다

 

소셜로그인(카카오톡)

1. 카카오톡 소셜로그인을 할경우 kakao developers 를 참고하여 작성해야한다

2. 소셜로그인을 시작하는 프론트엔드와 벡엔드의 애플리케이션 ( Rest api 키와 Redirect URI ) 을 공유해야한다

3.  인가 코드를  요청하는 코드를 작성하고 Redirect URI 페이지에 가져오는지 확인한다

4. Redirect URI 페이지에 인가코드를 window.location.href 를 활용하여 백엔드 서버로 전송해줘야한다

5. 인가코드를 넘겨주면 백엔드분들이 토큰을 내려주는데 이 토큰을 쿠키 및 로컬스토리지에 저장한다

 

JWT 토큰 관리

jwt 토큰을 저장하는방법은 2가지가 있다고합니다

로컬스토리지에 저장하는방법과 쿠키에 저장하는방법입니다

이 2가지의 장단점에대해 찾은것들을 적어놓고 조금더 찾아보고 업데이트할 예정입니다

 

로컬스토리지

 

장점 : CSRF 공격에는 안전하다.

 

그 이유는 자동으로 request에 담기는 쿠키와는 다르게
js 코드에 의해 헤더에 담기므로 XSS를 뚫지 않는 이상
공격자가 정상적인 사용자인 척 request를 보내기가 어렵다.

 

단점 : XSS에 취약하다.

 

XSS 공격은 당신의 웹사이트에서 공격자가 JavaScript를 실행할 수 있을때 발생한다

로컬스토리지에 저장되어있는 jwt토큰을 공격자가 탈취 가능하다

 

쿠키

 

장점:쿠키는 JavaScript로 접근이 불가능하다.

 

그래서 localStorage만큼 XSS 공격에 취약하지 않다.

하지만 XSS공격으로부터 완전히 안전한것은 아니다

 

단점:CSRF 공격에 취약하다.

 

자동으로 http request에 담아서 보내기 때문에
공격자가 request url만 안다면
사용자가 관련 link를 클릭하도록 유도하여 request를 위조하기 쉽다.

 

 

XSS 란 ?

공격자가 의도하는 악의적인 js코드를 피해자 웹브라우저에서 실행시키는것

웹 해킹 공격 중 XSS 라는 공격 기법이 있습니다

CrossSite Scripting 의 약자로 CSS 라고 하는것이 맞지만 이미 CSS가 Cascading Style Sheets 의 약어로 사용되고 있어 XSS라고 합니다

XSS는 게시판이나 웹 메일 등에 자바 스크립트와 같은 스크립트 코드를 삽입 해 개발자가 고려하지 않는 기능이 작동하게 하는 치명적인 공격이라고 합니다

또한 대부분의 웹해킹 공격 기법과는 다르게 사용자를 대상으로 하는 공격이라고합니다

 

CSRF

정상적인 request를 가로채 피해자인 척 하고 백엔드 서버에 변조된 request를 보내 악의적인 동작을 수행하는 공격을 의미합니다

웹 어플리케이션 취약점 중 하나로 인터넷 사용자(희생자) 가 자신의 의지와는 무관하게 공격자가 의도한 행위 ( 수정 , 삭제, 등록등) 을 특정 웹사이트에 요청하게 만드는 공격이라고 합니다

저작자표시 (새창열림)

'프로그램 시작후 각 주차 정리' 카테고리의 다른 글

공부 10주차  (0) 2022.05.15
공부 9주차  (0) 2022.05.07
프로그램 7주차  (0) 2022.04.24
프로그램 6주차  (0) 2022.04.17
프로그램 5주차  (0) 2022.04.10

+ Recent posts

티스토리툴바