[프론트엔드 데브코스 TIL] 2024.1.1 월요일 프로젝트 11일차

SoJuSo·2024년 1월 2일
0

2023.09 ~ 2024.01 TIL

목록 보기
90/105

📚금일 학습 내용

팀원이 찍어준 새해 일출 사진, 해피 뉴 이어!

🔐AES 사용처?

사실 우리 서비스의 보안적인 측면은 굉장히 아쉬운 부분이 많다. 아무래도 과제 느낌이기도 하고, 최종프로젝트 직전에 마지막으로 협업을 연습하는 느낌이기에 어쩔 수 없다고 생각한다. 하지만 그래도 최선을 다해보고자 한다. 그 중 생각난 것이 AES 양방향 암호화이다.

처음에 비밀번호에 적용하려고 했었는데 백엔드에서 지원하지 않으므로 SHA256으로 방향을 바꿨다. 근데 뭔가 우리만의 복호화 키를 가진 AES가 사용될 곳이 없을까 곰곰히 생각해보았고, 고민 끝에 사용해 낸 사용처는 바로 토큰값을 저장하는 과정이다. 리덕스에도 토큰값을 저장하기는 하지만, 새로고침을 하는 경우 데이터가 날아간다. 따라서 토큰 값을 세션 혹은 로컬스토리지에 저장하는 로직을 거쳐야하는데, 이때 원본 토큰을 저장하게 된다면 탈취의 가능성이 존재한다.

따라서 이때 이러한 로직을 적용하고자 한다.

  • 로그인 혹은 회원가입 이후 가져온 토큰을 AES암호화 하여 로컬 스토리지에 저장한다.
  • 이후 토큰 사용이 필요한 경우 로컬스토리지에서 가져온 후 복호화하여 API 헤더에 탑재하는 방식으로 통신한다.

이렇게 될 경우 브라우저에 저장되는 토큰값이 실제 토큰값이 아닌, 암호화된 토큰값이기에 설령 탈취당하더라도 큰 문제는 발생하지 않을 것이라 판단했다. 이후 유틸함수로 구현해두었으나, 페이지 구현이 먼저라는 판단이 들었고 그래서 페이지 구현을 먼저 진행중이다. 페이지 구현을 진행 후 해당 방식으로 암호화한 저장값을 사용하도록 구현해야겠다.

❓redux 데이터 사라짐 현상

null, null, null, null ...

로그인, 회원가입을 구현하고, 사용자가 로그인 할 경우 응답받는 정보들을 redux 저장소에 저장하도록 구현해두었다. 근데 막상 해당 정보를 확인하기 위해서 로직을 구현했는데... 사라졌다. 말 그대로 증발했다. test페이지를 통해서 확인하려고 했는데 데이터가 사라졌고, 관련해서 팀원과 알아보니 새로고침 시에는 사라진다는 것이였다!

근데 사실 새로고침은 인지했는데, URL 변경을 통해서 가니까 새로고침이랑 동일한 방식으로 데이터가 바뀐다는 사실을 그제서야 인지해버렸다. 그래도 미리 알아내서 다행이였고 해당 부분을 보완해주는 패키지도 찾을 수 있었다. https://phsun102.tistory.com/105

그렇게 해결했다!

📖소회

1월 1일부터 개발이라니 느낌이 좋은 해구먼

약간 피곤하기는 했던 1월1일의 시작이였다. 유독 피곤함을 많이 느꼈는데, 아마 운동의 영향이 약간은 있는 것 같다. 아닌가..? 많이 먹어서 그런가?
어쨌든 오늘은 다시 집중력을 찾기 시작해서 좋았다. 짧은 시간이지만 집중력이 늘어나고 있고 내일도, 모레도 조금씩 더 강해진 집중력을 발휘할 수 있길 바라며...
내일도 화이팅!
TIL 작성 소요시간 약 20분

profile
Junior Frontend Engineer

0개의 댓글