2차 프로젝트는 식물을 사고파는 커머스 사이트 겸 커뮤니티 사이트인 싱그러운집을 클론코딩하게 되었다.링크텍스트
파트: 네브,메인,푸터,로그인
제한된 시간에 1차 프로젝트보다 더 시간이 없었기에 원본 사이트에서 많은 부분이 삭제되었고 결국엔 커뮤니티사이트를 구현하게 되었다. 기능들이 없어지다 보니까 페이지 레이아웃 자체도 바뀌게 되어서 대략적인 레이아웃을 팀원들끼리 맞춰서 노션 페이지에 공유하였다.
2차프로젝트에서는 조건부렌더링을 많이 써보고 싶어서 로그인페이지를 자원해서 맡게되었다. 외부 Api를 사용해서 구현한다고 공지해주셔서 그러려니 하고 있었는데 실제로 하다보니까 공식문서를 참고해서 잘 적용하는게 중요한 파트였다!
로그인
카카오 로그인 Rest Api를 이용하기 위해서 kakao developers 사이트를 참고하여서 대략적인 흐름을 잡을 수 있었다!!
사용자 입장에서 편하게 이용하던 카카오로그인 기능을 직접 활용해본덕에 조금 더 흥미를 가지고 공부 할 수 있었다.
그리고 인가코드를 받아올때 내가 지정한 uri로 오는데 크때 바뀌는 url 값을 활용하여서 화면의 구성에 변화를 주었다. 1차 프로젝트에서 useParams hook을 이용하였는데 url안에 정말 많은 객체가 있고 활용할 수 있는 메서드가 있다는 것을 알 수 있었고 get메서드로 인가코드를 유연하게 관리할 수 있었다.
또 인가코드로 카카오가 가지고 있는 사용자의 정보에 접근할 수 있기때문에 환경변수에 따로 관리를 해주어야 했다.
글쓰기 막기
코드 자체는 간단하지만 로그인 여부에따라서 사용자가 이용할 수 있는 서비스가 달라야 하는점을 여러방면으로 생각을 하면서 코드를 써야하는구나를 생각하게 된 코드이다!
slick slider
슬라이더의 아래쪽에 페이지가 변할때마다 해당 페이지 숫자가 나타나게 하는 부분의 코드이다!
라이브러리를 처음 이용해봐서 내장되어있는 기능을 쓸 생각을 못하고 직접 기능을 넣으려고 시도했는데 공식문서에 원하는 부분이 있어서 멘토님의 도움을 받아서 적용법을 배웠다!
이번에 slick slider를 써보면서 공식문서를 어떻게 보고 코드에 직접 적용하는지 알게 되었다!
라이브러리를 처음 써봐서 어떻게 내가 원하는 레이아웃과 기능을 사용하는데 시간이 많이 걸려서 과연 라이브러리가 편리한게 맞을까 의문이 들었는데 사용에 적응하니까 왜 쓰는지 알 수 있었다!
