[수풀] 회원가입, jwt 로그인, 로딩, Context API

💻  들어가며

로그인상태에 따라 게시글 작성, 마이페이지, 조회페이지가 다르게 보이도록 기능을 구현했다.

메인프로젝트 초반부에 로그인이 구현되는 것만 확인하고

이번에 API요청시에 JWT를 담아 보내면 서버에서 로그인이 안 됐으면 오류를 보내거나

로그인 된 사용자면 그에 맞는 response를 보내주도록 구현되었다

 

일단 로컬스토리지에 토큰을 저장하기때문에 Context API을 이용한

로그인 구현은 필요없게 된 것 같은데

기능 구현이 끝나고 시간이 남으면 상태관리 라이브러리를 이용해

로그인 상태를 유지하는 코드로 리팩토링도 해봐야겠지싶다.

---

📚구현기능 

로그인 폼

1. 로그인 페이지의 로그인 컴포넌트 2. 로그인 성공시 local storage jwt 저장

로그인에 성공시 로컬스토리지에 jwt 저장

oauth는 미구현상태지만 어떤 로직으로 돌아가는지 공부를 해서 구현에는 어려움 없을 듯 해보임

---

React map 컴포넌트 key

 <StackContainer>
        {/* 현재탭이 전체가 아닐 경우 */}
        {currentJob !== "전체"
          ? stacks[currentJob].map((el) => (
              <StackImg
                key={el}
                src={`/assets/stack/${el}.svg`}
                alt={el}
                onClick={() => handleStackClick(el)}
                className={
                  !selectedList.includes(el)
                    ? "not-selectedList"
                    : "selectedList"
                }
              />
            ))
          : // 현재탭이 전체일 경우
            [...stacks.전체].map((el) => (
              <StackImg
                src={`/assets/stack/${el}.svg`}
                alt={`${el}`}
                key={el}
                onClick={() => handleStackClick(el)}
                className={
                  !selectedList.includes(el) && selectedList.length >= 0
                    ? "not-selectedList"
                    : "selectedList"
                }
              />
            ))}
      </StackContainer>

 

고유한 key값을 적용 Virtual DOM에 대한 개념이 더 필요하다고 생각함

map index를 이용한 key값은 안티패턴이라는 것은 외워서 알고 있는데 정확한 원리를 제대로 이해하지 못한 것 같다.

우선 공식처럼 unique key값을 달아줘서 만들어서 문제는 없지만 원리를 정확히 모르니까 key값을 줬을때 득이 되는 부분이 뭐가있는지

잘 모르고 중요성을 잘 인식을 못 하게되는 것 같다 메인 프로젝트 끝나자마자 바로 공부해서 포스팅해야겠다 생각들었음

---

🤔 느낀점

처음에는 로그인을 처음 배웠을 때는 어떻게 구현해야하는 건지 개념도이해하기 어려웠는데 백엔드분들과 직접 소통하면서

자료도 찾아보고 공부하면서 어떻게 되는 건지 조금은 이해할 수 있게 된 것 같다

아직 보안에 대한 부분은 많이 모자란데 깊게 공부해봐야겠다 생각이 들었다  그리고 지금 할 수 있고 알고 있는 로컬스토리지만을 이용한 로그인 구현뿐만 아니라 쿠키, 세션을 통한 로그인도 꼭 구현해봐야겠다 생각이 들었다. 물론 로그인 파트는 약간 공식같이 정답이 정해져있는 파트인 것 같긴 하지만 정확하게 원리를 이해하고 있어야 보안 이라던가 UX와 같은 사용자에게 득이될 수 있는 부분을 개선하는데 큰 도움이 될 거라 생각이 들어서 앞서 말했던 Virtual DOM과 함께 메인 프로젝트가 끝나자마자 1순위로 공부 후 포스팅해야겠다 생각했다.

---

 🙇‍♂️ 마무리하며

이제 오늘 내일 기능 구현을 끝마치고 배포에 들어갈 것 같은데

얼마 안 남았다고 해이해지지말고 정신 바짝 차려서

완성도 높은 웹 서비스를 구현할 수 잇도록 노력해봐야겠다. 화이팅!