[포스코x코딩온] 웹 풀스택 과정 7기 10주차 금요일 회고
포스코 코딩온 웹 풀스택 과정 7기 10주차 금요일 회고
BE
보안
이전 프로젝트에서는 비밀번호를 평문으로 저장했었다.
하라면 할 수는 있었는데 아무래도 프로젝트를 먼저 완성하는게 우선이었기에 이런 세세한 부분을 조금씩 놓치고 있었다.
그래서 이번에는 salt를 사용해 비밀번호를 암호화해서 저장했다.
salt는 비밀번호를 암호화할 때 사용하는 임의의 문자열이다.
모두가 암호를 정말 임의의 문자열을 매번 새로 생성하여 사용하면 좋겠지만, 대부분의 사람들은 똑같은 암호를 돌려 쓰는 일이 다반사이다.
그러나 SHA 암호화는 같은 문자열을 암호화하면 같은 결과를 반환하기 때문에, 이런 경우에는 같은 암호를 사용하는 사람들의 암호가 모두 같은 값으로 저장되어 하나만 유출되어도 모든 사람의 암호가 유출되는 문제가 발생한다.
따라서 추가로 임의의 문자열을 추가하여 암호화 하는데, 이를 salt라고 한다.
유저가 가입할 때, 임의의 문자열을 생성하여 DB에 저장하고, 유저가 로그인할 때 해당 salt와 함께 암호화한 뒤 DB에 저장된 암호화된 비밀번호와 비교하는 방식으로 구현했다.
로그인
이전 프로젝트에 Access, Refresh 토큰을 이용한 로그인 기능을 구현했었다.
하지만 해당 기능은 손 봐야 하는 부분이 꽤 많았다. 내가 짤 걸
모든 부분을 손보진 못했지만 이번에는 크게 세 부분으로 나누어서 로그인을 구현했다.
- Access 토큰이 존재하고 유효한 경우 → 로그인 상태로 간주
- Refresh 토큰이 존재하고 유효한 경우 → Access 토큰 재발급
- 둘 다 존재하지 않거나 유효하지 않고 대신 username, password가 존재하는 경우 → username, password로 로그인
FE
SSR과 CSR
대충 개념은 들어서 알고 있었지만, 실제로 사용해보니 생각보다 많이 헷갈렸다.
특히 Next는 SSR을 지원하는 프레임워크인데, 대부분 CSR을 사용하게 됐다.
개인적으로 초기 상태는 SSR로 생성하여 응답해서 속도를 줄이고 클라 쪽에서 데이터를 업데이트 하는 부분을 CSR로 처리하고 싶었다.
하지만 아쉽게도 구현하지 못했다.
다음 프로젝트에는 꼭 적용해봐야지!
URL Fragment
URL Fragment는 URL의 # 뒤에 붙는 문자열을 의미한다.
해당 문자열은 서버에 전달되지 않고, 클라이언트에서만 사용된다.
URL Fragment이 있는 링크로 연결되면, 해당 페이지에서 해당 아이디를 가지는 요소를 찾아 스크롤을 이동시킨다.
뿐만 아니라 CSS에서 :target 이라는 의사 클래스로도 활용할 수 있다.
그런데, Next의 Link 요소를 사용하면 URL Fragment가 있어도 해당 요소에 :target 의사 클래스가 적용되지 않는다고 한다.
내 코드 문제인 줄 알고 한참을 헤맸는데…😭
해당 이슈를 생성한 사람의 말로는 window.location.hash를 재지정하면 문제가 해결된다고 했다.
다행히 내 문제도 해당 방법으로 해결되었다.
새로운 프로젝트
금요일 오후부터 새로운 팀원으로 마지막 프로젝트를 진행하게 되었다.
소켓을 배웠기에 소켓을 적용할 만한 프로젝트가 뭐가 있을까 고민했는데, 역시 채팅이 가장 무난한 것 같았다.
그래서 좋아하는 키워드로 채팅방을 찾아 들어가 채팅을 할 수 있는 서비스를 만들기로 했다.
팀원들을 잘 설득해서 TS, Next, SCSS 를 사용하게 되었다.
사실 프로젝트 팀원을 발표하기 전에 마지막 프로젝트인 만큼 정말 열심히 빡세게 포폴 하나 만들 분들 구한다고 전체적으로 말씀을 드리며 팀원을 구했는데, 팀원 분들도 내 마음을 이해해 주신 것 같아서 너무 감사드린다.
그래서 이렇게 된 김에 어차피 백도 나 혼자 뿐인데 Nest.js도 적용해 볼까 고민중이다…
솔직히 Django 쓰다 온 입장에서 Express 는 너무 일일히 다 구현해줘야 해서 귀찮힘들었다.
Nest.js는 Django와 비슷하게 구조가 잡혀있는 프레임워크라 들었기에 만약 공부하는데 시간이 얼마 걸리지 않는다면 한 번 적용해봐야겠다.
주말에 빡세게 공부해봐야지!