백엔드와 통신이 잘 되는지 테스트 해보고, 로그인/ 로그아웃 유효성검사를 구현하였다. 통신테스트는 백엔드에서 Ngrok으로 했는데, Ngrok은 외부(Public)에서 로컬에 접속할 수 있게 도와주는 터널링 프로그램이라고 한다. 간단한 테스트용으로 사용하는 것 같다.
예상외로 큰 오류없이 빠르게 테스트 할 수 있었다. 프리 때는 백엔드와 통신하는 것도 이해가 잘 되지 않았는데 한번 해봤다고🤣 대화할 때 서로 이해할 수 있는 부분이 많아져서 더 수월하게 진행됐던 것 같다.
✅ 1. 프록시 경로 설정하는 방법
CORS 에러가 날 것이 분명하므로, 사전에 프록시 설정을 해주었다.
$ npm install http-proxy-middleware --save 로 미들웨어 설치를 해주고, src폴더 안에 src/setupProxy.js 파일을 생성해주었다.
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:5000',
changeOrigin: true,
})
);
};파일 안에 위 코드를 작성해주었고, 문제없이 통신이 되었다.
🤔 멘토님께서 react의 경우에는 proxy 설정을 package.json에 해주면 해결이 되는데 저렇게 한 이유가 있는지 질문하셨다. 위와 같은 방법도 알고 있으면 물론 좋지만, package.json에 "proxy" : "우회할 API 주소" 작성해주면 된다고 하셨다.
멘토링 후 이와 관련하여 찾아보았는데, webpack dev server 에서 제공하는 proxy는 전역적인 설정이기 때문에, 종종 해당 방법이 충분히 적용되지 않는 경우가 생기기도 한다. 그래서 수동으로 proxy를 적용해줘야 하는 경우가 있는데, 이때는 http-proxy-middleware 라이브러리를 사용해야 한다고 한다. 두 가지 방법 다 충분히 숙지하고 있어야겠다.
😵💫 백엔드와 통신 테스트를 끝낸 후 작업을 할 때 갑자기 웹사이트와 연결이 되지 않는 문제가 발생하였다. 원인을 찾아보니 인터넷 연결상태를 확인해보거나, 크롬창을 아예 종료하고 다시 해보라고 하는데 둘 다 문제가 없었기 때문에 한참 고민하였다.
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api', // 여기가 원인이었다!!
createProxyMiddleware({
target: 'http://localhost:5000',
changeOrigin: true,
})
);
};위와 같이 '/api'로 하지 않고 변수 설정을 해서 배열 형태로 넣어주었는데, 변수가 아닌 원래 path prameter를 입력하니 해결이 되었다. 정확한 이유를 모르겠어서... 더 찾아봐야겠다.
✅ 2. 쿠키, 로컬스토리지, 세션스토리지
로컬스토리지와 세션스토리지는 저장소로서의 기능은 대부분 동일하며 단지 sessionStorage의 경우 세션이 종료되면 저장된 데이터도 함께 사라진 다는 점이 다른 점이다. 로컬스토리지는 저장된 데이터를 삭제하려면 직접 삭제해줘야하지만, 세션스토리지는 탭이 종료되면 자동으로 데이터가 삭제된다.
쿠키는 서버에서 클라이언트에 영속성있는 데이터를 저장하는 방법이다. 그러므로 서버가 원한다면 서버는 클라이언트의 쿠키를 이용하여 데이터를 가져올 수 있다. 기본적으로 쿠키는 오랜 시간 동안 유지될 수 있고, HttpOnly 옵션을 사용하지 않았다면 자바스크립트를 이용해서 쿠키에 접근할 수 있기 때문에 쿠키에 민감한 정보를 담는 것은 위험하다.
프로젝트의 크기에 따라 뭐가 더 좋고 나쁜건 없고 적절하게 잘 사용하면 된다고 한다.
이번 프로젝트에서는 세션스토리지를 사용하기로 했다.
이 부분은 따로 블로깅을 해서 추가로 정리를 해야겠다.
참고 : https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-localStorage-sessionStorage
✅ 3. 삼항연산자로 조건부 스타일 렌더링
로그인/회원가입 페이지에서 인풋창에 정보 입력 시 유효성 검사를 통과하면 원래 보더색으로, 통과하지 못하면 빨간색으로 효과를 주기 위해 스타일 속성에 삼항연산자를 활용하였다.
style={isNickname ? {} : { border: '1px solid red' }}
빈 {}를 해주었더니 인풋창에 준 스타일 값이 적용되어 원래 보더색으로 표시되었다.
✅ 4. 정규표현식
유효성 검사를 구현하며, 닉네임/ 메일주소/ 비밀번호에 최소한의 설정을 해주었다.
닉네임의 경우 두글자 이상, 메일주소는 test@gmail.com 또는 test@test.go.kr 두 가지의 경우 다 만족할 수 있도록 , 비밀번호는 숫자/소문자/특수문자를 포함하여 8글자 이상으로 조건을 주었다. 이 조건을 만족하기 위해 정규표현식을 공부하였는데 생각보다 어려워서 많이 찾아보았다. 이미 작성된 정규표현식을 보고는 대략 어떤 뜻인지 이해할 수 있는데 직접 조건을 작성해보라고 하면 못 할 것 같다.... :(
좀 더 공부가 필요한 것 같다. 일단 우리 프로젝트에서 준 조건은 아래와 같다.
-
이메일 :
js /^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/; -
비밀번호 :
/(?=.*[0-9])(?=.*[a-z])(?=.*\W)(?=\S+$).{8,16}/;
코딩하다가 해 뜨는 걸 보고 잤다...☀️
팀원분이랑 둘이서 고민하고 찾고 시도하고 하다보니 시간이 그렇게 흘렀는지도 몰랐다.
즐겁게 작업하고 있어서 이래서 코딩하다가 밤 새는구나 싶다 :)ㅋㅋ
현재 네이버에서 진행하고 있는 SEF2022에서 이동욱님의 강의를 듣고 기억에 남기고 싶은 내용이 있어 정리해보았다.
"어떻게든 내가 계속 하고 있는 것들이 눈에 보이는 지표로 만들 수 있을까?"
➡️ 블로그, 깃허브 기록 등
개발 역량만큼 커뮤니케이션 역량도 중요하다.
누가봐도 말도 안되는 기능을 기획자분이 요청하셨다고 가정하자.
"이거 안 돼요!"하고 끝낼 게 아니라, "왜 이런 걸 요구하셨을까?"
"근본적인 문제가 뭐였기 때문에 어떤 문제를 풀고 싶어서 이런 기능을 요구하셨을까?"
라고 역으로 질문해보자.
➡️ 요구사항이 아닌, 원래 해결하려고 했던 문제가 뭐냐에 집중해라
