"내 자신에 대한 자신감을 잃으면, 온 세상이 나의 적이 된다." -랄프 왈도 에머슨-
이번 프로젝트 회고도 좋은 명언으로 시작하겠습니다.
2차 프로젝트를 진행하면서 작업적으로도 힘들지만 정신적으로 힘들때가 있었습니다. 그때마다 이 명언을 보면서 견뎠던 기억이 납니다.
좀 더 내 자신을 지키고, 자신감을 가지는 사람이 되려 합니다.
💻 기술 스택
- JavaScript, React.js, HTML5/CSS3(Styled-Components), react-router(v6)
🏠 에어비앤비? 👥 에어피앤피!
저희팀은 숙소를 대여해주는 에어비앤비라는 사이트를 모티브로 삼아 재능을 빌려주는, [에어피앤피] 를 기획하였습니다.
여기서 피앤피는 사람을 뜻하는 People, 바라보다를 뜻하는 Peer의 약자로 사람간의 소통과 교류를 중점으로 기획을 구성해보았습니다.
제가 한 작업은 [카카오 소셜로그인] / [리스트 페이지] 입니다.
[에어피앤피] 시연 영상
카카오 소셜로그인
모달창을 이용한 카카오 소셜로그인을 구현하였습니다.
이번에 카카오 소셜로그인을 구현하면서 또 많은 걸 알게 되었습니다. 소셜로그인을 처음엔 REST API로 구현을 했었습니다. 그런데 REST API가 백엔드 쪽에서 변환해서 작업하기가 좀 더 까다롭다는 얘기가 나왔어서 자바스크립트를 사용하여 팝업로그인 방식으로 바꾸게 되었습니다.
REST API는 인증/인가를 받아서 다른 창으로 가서 소셜로그인을 할 수 있게 합니다.
◾ 내 애플리케이션 REST KEY
◾ redirect URI : 로그인 버튼 클릭 시, 이동할 URI
- URI 구조는 대략 이렇게 됩니다.
소셜로그인을 구현하기 위해서 kakao developers 공식문서를 많이 보게 되었는데 공식 문서를 이해하는 것이 정말 어렵기는 해도 차근차근 따라하다보니 공식문서만큼 친절한 것은 없다는 것을 알게 되었습니다. 공식문서의 중요성을 다시금 깨닫는 계기가 되었습니다.
- Javascript SDK 의 문제
팝업로그인의 방식에 문제점은 공식문서를 그대로 따라하면 한번 로그인을 하고나면 자동로그인으로 고정이 되어버려서 폼이 생성되지 않는다는 것입니다.
const { Kakao } = window;
...
const kakaoLoginClickHandler = () => {
if (!Kakao.isInitialized()) {
Kakao.init(process.env.REACT_APP_API_KEY);
}
Kakao.Auth.loginForm({
success: function (authObj) {
fetch(`${API_CONFIG.SIGNIN}`, {
method: 'POST',
headers: {
Authorization: authObj.access_token,
},
})
.then(res => res.json())
.then(res => {
if (!localStorage.token) {
localStorage.setItem('token', res.token);
if (res.token) {
alert('airpnp 에 오신걸 환영합니다.');
modalClose();
}
} else {
alert('이미 로그인 되어 있습니다.');
modalClose();
}
});
},
fail: function (err) {
alert(JSON.stringify(err));
},
});
};그래서 코드를 보면 아시겠지만 Kakao.Auth.loginForm으로 작성을 하면 로그인을 한 상태에서도 로그인을 누르면 폼이 계속 뜨게 됩니다. 그런데 이 방법을 사용하긴 했는데 어떤 방법이 더 좋은 방법인지는 지금도 잘 모르겠습니다.
자동로그인이 되려고 하는 방식이 팝업로그인인데 이걸 계속 팝업창을 뜨게 해서 다른 사람도 로그인을 할 수 있게끔 loginForm으로 바꾼거긴 한데... 이 부분에 대해선 아직도 고민이 되는 부분이긴 합니다.
그리고 이런 API KEY들은 .env 환경변수안에 넣어서 관리하는 것이 좋습니다. 중요한 KEY를 노출하게 되면 보안의 위험이 높기때문입니다.
그리고 .gitignore 에 .env 파일을 적어주어야 합니다. 이것을 설정해주지 않았을 경우는 .env 파일을 만든 것이 말짱도루묵이 되어버립니다.
리스트 페이지
구현한 기능
- 페이지네이션
- 체크박스 필터링
- slick 슬라이더
- 글목록 클릭 시 상세페이지로 이동
저번 프로젝트때에도 리스트페이지를 구현하게 되었는데 우연히 또 리스트 페이지를 구현을 하게 되었습니다. 그래서 이번엔 저번 프로젝트에서 진행하였던 무한스크롤 말고, 페이지네이션을 구현을 해보자. 라고 해서 이번에 구현을 해보았습니다.
하지만 이것이 후회가 되는 코드가 될 줄은 몰랐습니다.
원래는 페이지네이션 라이브러리를 통해서 구현을 하려고 했습니다. 커스텀까지도 성공을 하였는데. 백엔드와 API통신을 어떻게 해야할지 모르는 부분이어서 결국 라이브러리를 빼고, 검색을 통해서 페이지네이션을 구현을 하였습니다. 하지만 여기서 제가 놓친 부분...
일단 코드를 보시죠.
function Pagination({ total, limit, page, setPage }) {
const numPages = Math.ceil(total / limit);
return (
<Nav>
<Button onClick={() => setPage(page - 1)} disabled={page === 1}>
<
</Button>
{Array(numPages)
.fill()
.map((_, i) => (
<Button
key={i}
onClick={() => setPage(i + 1)}
aria-current={page === i + 1 ? 'page' : null}
>
{i + 1}
</Button>
))}
<Button onClick={() => setPage(page + 1)} disabled={page === numPages}>
>
</Button>
</Nav>
);
}이 글을 보는 페이지네이션을 구현하시는 프론트엔드 분들께 드리고 싶은 말씀..
limit 과 offset은 백엔드쪽에서 걸러서 주어야하는 것입니다. 이번 프로젝트에서는 데이터 양이 많지가 않았지만 원래 사이트라면 데이터는 기하급수적으로 늘어나고 양이 많을 것입니다. 그런데 저처럼 코드를 적으면 프론트엔드쪽에서 리밋 오프셋을 정하는것이기때문에 사실상 말이 안되서 저러면 안되었었던... 반성합니다. 이 기회에 알게 되어서 다행이라고 생각합니다. 혼자서 생각하지말고 다른 프론트엔드분들과 얘기를 나누거나 백엔드 분들과 얘기를 나누었으면 더 좋았을걸이라고 생각되는 부분이네요.
해당 프로젝트를 통해 느낀 것
1. 소통
1차 프로젝트때에도 느꼈던 것이었지만 2차 프로젝트에서 오히려 더 부족하게 느껴졌던 소통입니다. 시간이 없었다라는 핑계를 대보지만 소통의 관해서는 해도해도 부족함이 없을 것 같습니다. 처음에는 노션과 트렐로를 이용하여 소통을 진행하다가 나중에 가서는 바빠서 미팅도 못하고 그때그때 소통하는 방식으로 진행을 하였었는데 소통을 아예 안한건 아니지만 다시 한번 더 소통의 중요성을 깨닫게 되었습니다. 그리고 프론트엔드 쪽에서 생각하는 그림이 있는데 이걸 백엔드쪽에서는 어떻게 진행되는건지 모르는 경우가 있기때문에 간단한 이미지라도 만들어서 보여드리면서 진행을 하면 소통이 훨씬 수월할 것입니다.
2. 큰 것 먼저 신경을 쓰자.
2차 프로젝트에서도 느낀 것은 역시 저의 실력이 아닐까 싶습니다. 모르는 것이 많아서 검색하고 또 검색하는데도 저번 프로젝트에 비해서 검색해도 나오는 것이 없는 경우도 많아서 스택오버플로우에 직접 물어봤던 경험도 생겼고, 체크박스 디자인을 해보겠다고 8시간동안 고민을 했었는데도 결국 하지 못했는데 알고보니 인터넷에서 검색해서 알아낸 것들이 제가 사용하지 못하는. 다른 곳에서 사용되는 코드라는 것을 알아냈을 때는 허탈감에 웃음만 나왔었는데 그래도 이것때문에 느낀 것도 있습니다. 프로젝트를 진행할 때는 큰 토대 먼저 잡아놓고 작은 것은 나중에 해도 된다는 것. 디테일한 부분은 나중에 기본이 완성 된 다음에 해도 늦지 않다는 것. 이 중요한걸 이제야 알게 되었습니다.
마치며...
2차 프로젝트는 1차 프로젝트보다 역시 더 어려웠었습니다. 그리고 정말 회사에서 일하는 것 같이 작업을 했고, 모르는 부분이 많아 제 실력을 탓하고 저를 의심하며 울었던 적도 있고 다사다난했던 프로젝트였던 것 같습니다. 그래도 이런 경험을 해야지 제가 더 발전 할 수 있는 것이라고 생각합니다. '성장한다'는 것은 위쪽을 향해 나아간다는 뜻이고 '뛰어넘는다'는 것은 계속 앞으로 나아간다는 의미입니다. 우리 모두는 포기하는 것보다 더 나은 선택을 할 수 있다고 누군가 얘기했습니다. 저도 포기하지 않고 앞으로 좋은 개발자가 될 수 있도록 최선을 다하겠습니다.
2차 프로젝트를 함께해준 5명의 동기들에게 감사하고, 수고하셨습니다.
2차 프로젝트를 함께 할 수 있어서 덕분에 많이 배웠습니다.
정말 감사했습니다! 나중에 꼭 리팩토링도 다시 할 수 있으면 좋겠습니다. 수고 많으셨습니다!
