김창민 TodoList PR

[Jakads]

추가사항

사용자 ID/PW 정보 DB 암호화

• 암호화는 crypto 모듈의 scrypt를 이용하여, 이를 base64로 인코딩하여 DB에 저장
• salt로는 crypto.randombytes 사용

사용자 ID/PW 길이 제한

• ID와 PW 모두 8~20글자로 제한
• 입력값의 길이가 범위를 넘으면 서버로 값을 전달하기 전 클라이언트 쪽에서 차단

회원가입 시 PW 재확인

• 회원가입 버튼을 누를 시 PW 확인 입력이 표시되고, 여기에 같은 PW를 반복하여 입력한 후 회원가입 버튼을 다시 눌러야 회원가입 완료
• PW 확인 입력창 표시 여부를 저장할 passwordCheckDisplay를 useState를 이용해 선언
  • useRef 사용하면 자동으로 리렌더링이 되지 않아 입력 창이 뜨지 않음
• PW와 PW 확인이 일치하는지는 서버로 값을 전달하기 전 클라이언트 쪽에서 확인

사용자별 투두리스트 저장

• 투두리스트 DB에 username이라는 column을 추가하여, username과 id를 둘 다 Primary Key로 지정
  • DB에서 Primary Key는 탐색을 효율적으로 해주는 기능을 하며, 중복될 일이 없는 값으로 꼭 지정해주는 것이 좋음
• 투두리스트를 처음 가져올 때 해당 username을 가진 row만 가져오도록 수정
  • 서버에서 처음 값을 가져오도록 요청을 보낼 때 body에 username을 같이 전달함
    • 기존의 GET 요청으로는 body를 붙여서 보낼 수 없으므로 POST 요청으로 수정
  • 투두리스트를 불러오기 전 로그인이 되었는지 확인하고, 로그인이 되지 않았다면 로그인 창으로 즉시 redirect
    • 아직 정보를 불러오지 못한 상태와 아직 로그인하지 않은 상태를 구분하기 위해, 전자를 undefined, 후자를 null로 지정
• 투두리스트를 수정할 때 해당 username과 해당 id를 가진 row를 수정하도록 구현
  • 서버에 값을 수정하도록 요청을 보낼 때 body에 username을 같이 붙임
• 여러 군데에서 username을 사용하므로 Context API를 사용
  • contexts 폴더에 UserContext.js를 만들어, useState Hook을 통해 선언한 현재 username과 현재 username을 수정하는 함수를 함께 Provider의 value로 전달
  • App.js에서 현재 username을 사용하므로, <App />을 Context Provider로 감쌈 (index.js)
  • 이후, 현재 username을 사용하는 컴포넌트들에서 useContext Hook을 이용해 불러옴 (App.js, LoginForm.js)
  • 참고 사이트 1 / 참고 사이트 2

수정사항

저장된 투두리스트가 없을 시 오류

• 다음으로 사용할 id, 즉 nextId를 계산하지 못해 생기는 오류
• 투두리스트의 길이가 0을 넘는지 먼저 체크하여, 넘는다면 기존의 방식대로, 0이라면 다음 id를 1로 지정

SQL Injection 방지

• 기존의 방식으로는 SQL Injection의 가능성이 있음

TODO

라이트모드/다크모드 토글

• useContext 이용

[Jakads]

추가사항

AWS 이용해 웹호스팅

• http://changmin-todolist.kro.kr 로 접속 가능
• 자세한 내용은 아래 기술

회원탈퇴 시 해당 유저의 투두리스트 삭제

• 유저 정보를 삭제할 때 투두리스트 같이 삭제

수정사항

로그인으로 Redirect 문제

• 사이트에 처음 들어갔을 때, 로그인이 되지 않았으므로 로그인 창으로 넘어가야 하는데 작동하지 않았음
• 유저 정보 쿠키가 유효한 지 체크할 때, 아예 존재하지 않는 경우도 고려하여 수정

로그아웃/회원탈퇴 시 이전 유저의 투두리스트 열람 가능

• 서버 속도가 느릴 때 투두리스트의 업데이트가 늦어 생긴 문제
• 로그아웃/회원탈퇴 시 공백인 todo로 INIT dispatch를 보내 투두리스트를 초기화

TODO

라이트모드/다크모드 토글

• useContext 이용

.

.

.

.

AWS 이용해 웹호스팅

1. AWS 계정 생성 & EC2 인스턴스 생성

이 단계를 끝내면 아래 사진과 같이 퍼블릭 IPv4 DNS를 주소창에 입력해 들어갔을 때 ERR_CONNECTION_REFUSED가 떠야함

• 영상대로 따라간 후, 키 페어를 설정하는 부분(39:17)에서 새로운 키 페어 생성 선택
• 이름을 적당히 지은 후, 프라이빗 키(.rem)를 받으면 설정 끝
• 나중에 Ubuntu 서버에 접속할 때 받았던 프라이빗 키를 사용하면 로그인됨

2. 생성한 인스턴스를 VScode로 접속

이 단계를 끝내면 아래 사진과 같이 VScode로 Ubuntu 서버에 접속하여 파일을 관리할 수 있어야 함

• Bash를 사용하는 것이 익숙치 않아 VScode로 접속
• 이 사이트의 순서를 따름
  • 3)에서 SSH 명령어를 칠 때 영상(44:44)에서 사용한 아래 명령어를 사용
    ssh -i "[1번에서 받은 프라이빗 키 경로]" [퍼블릭 IPv4 DNS]
    예시: ssh -i "C:/Users/jakad/.ssh/Jakads.rem" ec2-100-25-217-234.compute-1.amazonaws.com
• Error: EACCES: permission denied 오류가 뜰 경우
  • 권한이 없어서 생기는 오류
  • sudo chown -R ubuntu [수정하려는 경로]를 치면 해결됨
  • 절대 root directory에서 sudo chown -R ubuntu .와 같이 전체 경로를 한번에 바꾸려 하지 말자
    sudo 명령의 권한이 바뀐 후 되돌릴 수 없어 처음부터 서버를 다시 생성해야 함

3. Nginx를 설치하여 리버스 프록시 설정

이 단계를 끝내면 아래 사진과 같이 만들었던 투두리스트 화면이 뜨되, 서버 관련 기능은 작동하지 않아야 함

• 영상대로 따라감
• 영상과 같이 root를 /home/ubuntu/changmin-todolist/build로 설정한다면, react 개발환경에서 yarn build를 쳐 생성된 build 폴더를 /home/ubuntu/changmin-todolist/build로 옮기면 됨
  • VScode에서는 한 창에서 다른 창으로 파일을 드래그하여 편하게 복사할 수 있음

4. 내도메인.한국 에서 도메인 등록

이 단계를 끝내면 아래 사진과 같이 IP가 아닌 자신이 설정한 도메인으로 투두리스트에 접속할 수 있어야 함

• 내도메인.한국 접속
• 원하는 이름으로 도메인 등록 후 아래와 같이 IP연결(A) 체크 후 퍼블릭 IPv4 주소 입력
  
• 3번에서 생성한 .conf 설정 파일에서 server_name을 도메인 이름으로 설정
  예시: server_name changmin-todolist.kro.kr;

5. 선택: Express 서버 키기

이 단계를 끝내면 아래 사진과 같이 서버 관련 기능이 동작해야 함

아마 실제로는 이 방식으로 서버를 켜지 않으므로 임시로 기능을 확인하는 용도

• AWS 사이트 > 네트워크 및 보안 > 보안 그룹 > 인스턴스에 적용했던 보안 그룹 선택 > 인바운드 규칙 편집 > 아래 사진과 같이 3001번 포트 추가 후 저장
  
• server 관련 파일만 Ubuntu 서버로 복사해옴
• sudo apt install nodejs로 Node.js 설치
• 이후 node [서버.js 경로]로 서버 실행
  

[Jakads]

추가사항

라우터 경로 따라 페이지 이름 변경

• 이 사이트 참고

회원탈퇴 시 확인하는 창 띄우기

• window.confirm() 사용

수정사항

Username 길이 제한 확장

• 8~20글자에서 4~20글자로 변경

TODO

사이트 아이콘 만들기

• public 폴더의 favicon.ico, logo192.png, logo512.png 수정

라이트모드/다크모드 토글

• useContext 이용

.

.

.

.

Troubleshooting

VScode를 통해 서버에 들어가지지 않음

프리티어라서 그런지 서버가 조금이라도 과부화되면 모든 연결을 차단하는 것 같습니다.

• 유튜브 영상 하나 보고오면 다시 들어가짐

서버를 클라이언트와 프로젝트를 구분짓지 않고 만들어서 Ubuntu 서버로 복사하는 것이 어려움

제 경우 투두리스트 react 프로젝트 폴더 내부에 server라는 폴더를 만들어, 이 둘을 npm-run-all을 통해 동시에 실행하도록 구성하였습니다.
따라서 서버를 Ubuntu 서버로 복사해와서 바로 실행하려면, 300MB가량의 프로젝트 파일을 통째로 복사해오는 수밖에 없었고, 이를 시도하려다 자주 팅겼습니다.
따라서 아래 방법과 같이 .js 파일만 가져와서 새로 프로젝트를 Ubuntu 서버 내에서 생성하였습니다.

• server 폴더 내부의 파일들(.js)만 일단 가져오기
• sudo apt install npm을 통해 npm 설치
• 복사해온 폴더 경로로 cd한 뒤, 서버 내부에 쓰였던 모든 모듈들을 npm을 통해 설치 (express, cors, mysql2, dotenv 등등)
  • 여기서 Error: Missing required argument #1 오류가 뜬다면 이 사이트를 참고
• 이후 node server.js로 서버 실행
  

서버는 잘 켜지나, DB와의 통신에서 ECONNREFUSED 오류 발생

node [서버 js 경로]를 친 폴더 내부에서 .env 파일을 찾지 못해, 지정해놓은 DB서버 대신에 기본값인 localhost:3306으로 요청을 보내 생기는 오류입니다.

• 서버 폴더로 cd한 뒤 node server.js하면 정상적으로 .env 파일을 불러옴