Oops, All Code!/📝 Study Notes

$01. 서버와 회원가입

밍동망동 2023. 5. 7. 13:00
서버

 

회원가입과 로그인 기능을 구현하기 위해서 서버가 필요했다.

내가 입력한 정보를 담을 공간이 필요했는데 나는 프론트엔드 직군이라 직접 만들 필요가 없었다.

 

지인에게 부탁했고, 서버를 제작받아 iTerm으로 불러와 사용하기만 하면 됐다.

다만 전과생에게 서버란 개념은 생소해서 내가 뭘 부르는건지도 모를 지경이었다.

그래서 몇 가지 찾아봤다.

 

docker

 

제작 받은 서버는 docker를 통해 구동시킬 수 있었다.

도커는 컨테이너 기반의 오픈소스 가상화 플랫폼이다.

 

컨테이너는 운영체제 수준의 가상화 기술을 통해 리눅스 커널을 공유하며,

프로세스를 격리된 환경에서 실행시켜주는 기술이다.

 

이를 통해 다양한 프로그램, 실행환경을 컨테이너로 추상화해 프로그램 배포 및 관리를 단순하게 해준다.

 

도커가 왜 유용한지까지는 알아볼 필요 없으니 이만 마치도록 하겠다.

궁금하다면 다음 링크를 확인해보자.

 

 

초보를 위한 도커 안내서 - 도커란 무엇인가?

도커를 처음 접하는 시스템 관리자나 서버 개발자를 대상으로 도커 전반에 대해 얕고 넓은 지식을 담고 있습니다. 도커가 등장한 배경과 도커의 역사, 그리고 도커의 핵심 개념인 컨테이너와 이

subicura.com

 

포스트맨

 

Postman은 API를 사용하기 위한 API이다.

Postman을 통해 각 API의 생명 주기와 단계를 간소화해 빠른 API를 생성할 수 있다.

 

✔️ API 저장소
 - 모든 API를 쉽게 저장, 분류 및 협업할 수 있다.

✔️ 도구
 - API 라이프사이클을 증진시키는 데 도움되는 포괄적인 도구 세트 포함

✔️ 통치
 - Postman 접근 방식을 이용해 더 나은 API를 제공하고 협업을 촉진한다.

✔️ 작업 공간
 - 조직 전체 또는 전 세계에서 협업하는 데 도움이 된다.

✔️ 통합
 - Postman API와 오픈 소스 기술을 통해 확장 가능하다.

 

공식 사이트에서는 다음과 같이 소개하고 있다.

쉽게 말하면 http에서 날린 요청에 대한 응답을 보여주는 서비스다.

 

매번 일일이 응답을 찾기 귀찮아 그 부분을 도와주는 API다.

가시적인 도움을 줄 뿐 코드 자체에 영향을 끼치는 API는 아니다. 

 

Postman을 통해 회원가입 input으로 입력된 값이 제대로 날라갔는지 확인할 예정이다.

Docker 사용

 

콘솔을 통해 DB를 확인할 수 있다.

사실 항상 올라가있는 상태기 때문에 확인할 필요는 없지만 그래도 만에하나.

$ docker ps -a

 STATUS가 UP 상태이므로 제대로 올라가있는 상태다.

 

백엔드 어플리케이션을 띄워 포스트맨으로 확인해본다.

$ cd 어플리케이션경로
$ npm run start:dev

참고로 Postman이 호출하는 로컬호스트 30728은 서버를 가리킨다.

회원가입

 

유효성 검사를 해야한다.

유효성 검사를 통해 사용자가 필수 항목을 입력하도록 강제하고

올바른 형식으로 데이터를 입력하도록 유도한다.

 

그 외에 다음 항목을 구현하면 된다.

 

  1. 아이디 중복 확인
  - 데이터 베이스 중복 여부 조회
  - 사용자 아이디 입력 → 서버 요청 → 중복 여부 조회 → 응답 → 결과 출력

  2. 비밀번호 입력
  3. 필수 항목의 누락 여부
  4. 회원가입 저장 처리

 

로그인

 

개인 프로젝트라 보안은 신경쓰지 않을 것이기 때문에

비밀번호 일치 여부만 검사하면 된다.

 

  1. 로그인 버튼 클릭
  2. 사용자 아이디 / 비밀번호 입력
  3. 서버로 전송
  4. 저장소 조회 및 일치여부 확인
  5. 결과 클라이언트 응답 및 로그인 성공 여부
  6. 적절한 동작 수행
회원가입 구조 제작

 

회원가입을 제작하기 위해 html과 css 구조를 먼저 잡아줬다.

문제는 생각보다 오래 걸렸다는 것이다.

 

무엇보다 해당 팝업을 모달로 작동시킬 것이기 때문에

        이 색상으로 background-color를 지정해주고

그 위에 흰색 박스를 하나 입혀놓는 식으로 구현했다.

 

이걸 제작하는데 3시간이 넘게 소요됐다.

남은 4주동안 과연 홈페이지 제작이 가능할까?

 

교과목 최대 목표는 JS와 React 사이의 비교이기 때문에 아마 회원가입과 로그인만 구현할 것 같다.

 

이제 문제는 서버와 어떻게 통신하는가이다.

내가 입력한 것을 어떻게 넘겨줘야할지 모르겠다.

 

다음 주차에는 서버에 넘겨주는 방법과 모달을 구현해보도록 하겠다.

저작자표시 (새창열림)