목록스파르타코딩클럽 내일배움캠프 (116)
Just Do IT!

오늘 일과 간단 요약 오전 스크럼 SNS 공유 버튼 UI 수정 amplitude 강의 듣기 top 버튼 수정 global css 파일 생성 SNS 공유 버튼 UI 수정 어제 기능을 만들어뒀던 버튼들 UI를 수정했다. 희현님이 좋아요랑 댓글 아이콘을 한 줄에 넣어주셔서 그 줄 왼쪽 부분에 SNS 공유 버튼을 넣고 조금씩 수정했는데, 솔직히 말해서 나는 CSS가 기능 구현보다 어려운 것 같다...ㅎ div로 감싸던지 아니면 따로 빼던지, 그리고 간격은 얼마나 줘야 하는지 나란히 정렬하려면 어떤 식으로 해야 하는지 등등...따져야 할 게 너무 많아서 그런가 오히려 CSS 하는 게 더 어렵다. 그래서 오늘도 기능 구현하는 것보다 UI 구현하는 데 시간이 더 오래 걸렸다... 이게 수정된 UI. 공유하기 저 멘트..

오늘 일과 간단 요약 오전 스크럼 (기술면접 질문 답변 정리) SNS 공유 기능 오후 스크럼 면접 질문 튜터님과 진행 SNS 공유 기능 필수 기능은 아니었지만, 코스 페이지를 만든 만큼 SNS 공유하는 기능을 넣고 싶어서 후반 작업의 첫 번째로 정했다. 검색해보니까 라이브러리 설치하고, 생각보다는 간단하게 될 것 같아서 오늘 하루 내에 전부 구현할 수 있었다. 내가 구현한 공유는 facebook, twitter, 웹 링크 복사, 그리고 카카오톡으로 보내기이다. facebook이랑 twitter는 아예 공통된 라이브러리를 다운받아서 했고, 웹 링크 복사도 라이브러리가 있어서 설치 후에 바로 넣었다. 생각보다 오래 걸렸던 건 카카오톡으로 보내기인데, 뭔가 제대로 되는 듯 싶으면서 계속 안되고....ㅋㅋ 여튼..
최종 프로젝트 중간 발표 3주간의 기능 구현을 마치고 최종 프로젝트 중간 발표가 있는 주간이었다. 기능 마무리를 해야 했고, 발표 준비도 해야 해서 지난 주보다 더 바빴던 것 같다. MVP 완료 3주 동안 우리 웹페이지에서 필요한 필수 기능을 구현하는 것을 목표로 세웠었고, 우리 조의 목표는 수요일까지 필수 기능 구현 완료였다. 사실 내가 맡은 부분은 월요일에 기능 구현이 모두 끝났고 나머지 이틀은 디자이너님이 디자인해주신 대로 UI를 바꾸고 버그를 점검해보는 시간을 가졌다. UI 구현이 생각보다 오래 걸렸고, 중간이 비밀번호 재설정 폼을 리팩토링 하는 걸 제외하고는 나름대로(?) 무난하게 수요일까지 전부 완료했다. 아, 모달 라이브러리를 회의를 통해 바꾸기로 해서, alert창이 아닌 sweetaler..

오늘 일과 간단 요약 오전 스크럼 깃허브 README 작성 중간 발표 중간 발표 회고 다면 평가 깃허브 README 작성 오늘은 중간 발표날이기 때문에 오전에는 딱히 뭘 해야 하지는 않았고 깃허브 리드미 작성을 맡아서 했다. 이번에는 이전 프로젝트와 조금 다른 형식으로 작성했다. 기존에는 프로젝트 진행한 날짜와 기획 의도, 페이지마다 구현한 기능, 그리고 실제 배포한 페이지 캡처본을 넣었었는데 조금 많이 달라졌다. 우선 기획 의도와 프로젝트에 참여한 우리 조원 모두의 깃허브 링크와 블로그 링크를 추가했다. 다른 프로젝트들을 보니까 프로젝트를 참여한 사람들의 깃허브, 블로그 주소를 첨부해서 이 사람이 어떤 사람인지 들어가서 볼수 있게 해놓은 곳이 많았다. 사실 누가 참여했는지 알아야 하니까, 넣어주는 게 ..

오늘 일과 간단 요약 오전 스크럼 검색 페이지 pagenation 구현 버그 테스트 vercel로 배포 발표 자료 준비 검색 페이지 pagenation 구현 오전 스크럼 후에 검색 페이지의 pagenation을 구현하는 걸 맡아서 했다. 사실 희현님이 이미 구현해 놓으신 코드를 search 페이지에 적용하기만 해서 코드만 공부해서 빠른 시간ㄴ 내에 구현할 수 있었다. const [currentPage, setCurrentPage] = useState(1); const [postsPerPage] = useState(12); const { isLoading, isError, error } = useGetCourseQuery(); const lastPostIndex = currentPage * postsPer..

오늘 일과 간단 요약 오전 스크럼 비밀번호 재설정 form 리팩토링 alert 변경 오후 스크럼 프로필 수정 모달창 UI 수정 비밀번호 재설정 form 리팩토링 사실 리팩토링이라고 해서 그다지 거창하진 않다. 그냥 이전에 언급했던 react-hook-form 이라는 라이브러리를 사용해서 유효성 검사를 추가하고 form 코드를 변경했을 뿐... 확실히 이전에 유효성 검사 하나하나 경우의 수를 따져가며 적었을 때보다는 코드가 훨씬 간결하고 편하다. 더 좋은 라이브러리, 혹은 custom hook을 만들어서 사용하는 방법도 있을 것 같지만 우선은 그렇다는 말이다..ㅋㅋㅋ 나중에 시간이 된다면 custom hook으로 useForm을 만들어서 사용해보고 싶다. 구글링해보면 그렇게 하면 form 자체가 간결해지는..

오늘 일과 간단 요약 오전 스크럼 header, 로그인/회원가입/비밀번호 재설정 모달창 UI 수정 my page 프로필 UI 수정 오후 스크럼 프로필 수정 모달창 UI 수정 header, 모달창 UI 수정 오늘은 뭐 기능을 할 건 아니었고....디자이너님이 디자인 해주신대로 UI를 수정하는 걸 했다. 사실 완벽한 최종 디자인은 아니고, 아직 수정할 부분이 남이있긴 하지만 지금 현재 UI가 그야말로 이 자리엔 이게 있어야 합니다, 정도의 UI라서 피그마에 올려주신 디자인을 토대로 만들었다. 기능 구현도 힘들긴 하지만 솔직히 UI 구현하는 것도 그거랑 비슷하게 힘든 것 같다. 일단 내가 디자인적 감각이 별로 없는 것 같다(?) margin이 얼마나 있어야 적절한지 header의 크기가 어느 정도여야 적절하지..

오늘 일과 간단 요약 오전 스크럼 카카오 로그인 구현 ☞ 기능 삭제하기로 결정 header, 모달창 css 모달 라이브러리 회의 카카오 로그인 기능 삭제 지난 주 토요일에 카카오 로그인을 구현하신 B반 분을 만나서 질문 왕창 했었다. 어떤 식으로 구현하는지 물어보니까 바로 블로그 링크를 주셔서 주말 내내 그 코드를 보면서 공부했었다. 사실 카카오 로그인 구현 자체는 토요일에 바로 성공했는데, local storage에 저장된 id이다 보니 firebase에 실제로 저장되지 않아서 여러 문제가 생겨 보류했었고 오늘 다시 시도해보았다. 전제는 오늘 3시까지 해보고 안될 것 같으면 바로 삭제하는 걸로. 그래서 결론은....카카오/네이버 로그인 기능을 빼기로 했다. 구현해주신 걸 토대로 해보는데, 일단 fire..

최종 프로젝트 ~ing 지난 주에 이어 최종 프로젝트를 진행했는데, 사실상 기획 50% 개발 50%를 한 느낌이다. 확실히 우리가 이전에 했던 기획은 정말 틀만 잡아 놓은 것이었고, 지금은 진짜 협업을 한다는 기분이랄까...여튼 기획의 중요성을 절실히 느끼고 있다. 기획 회의 그라운드 룰로 오전 9시 30분에 한번, 오후 17시 30분에 한 번 총 두 번의 스크럼을 정했고 순조롭게 진행 중이다. 사실 오전에는 서로의 컨디션을 체크하고 오늘 할 일들을 이야기해보고, 또 오후에는 진행한 일들을 이야기 하는데 정해진 시간 외에도 자주 마이크를 키고 소통하고 있다. 솔직히 말하자면...내가 좀 말이 많은 편인것 같다 ㅋㅋㅋㅋㅋ 라이브러리 설치할 때도 자주 조원들에게 물어보고 뭐가 잘 안될 때도 조원들에게 공유하..
오늘 일과 간단 요약 오전 스크럼 로그인/회원가입 리팩토링 (react-hook-form 이용) localstorage 부분 삭제 좋아요 수 트러블 슈팅 로그인/회원가입 리팩토링 어제 회원가입 기능을 실제로 해보다가 유효성 검사를 적어두었음에도 비밀번호 작성 도중에 허점이 있다는 발견하게 되었다. 비밀번호랑 비밀번호 재확인이 일치하지 않는데도 바로 회원가입이 되는 것이다...! 그래서 오늘은 아예 그걸 수정하는 걸 목표로 했고, 결과적으로는 아예 통째로 리팩토링 했다. 로그인, 회원가입 폼을 구현하다보면 유효성 검사의 경우의 수가 엄청나게 많아질 때가 있다. input창이 비었을 때, 유효성 검사를 통과하지 않았을 때, 등등... 그걸 전부 구현해야 하나? 싶어서 구글링하면서 찾아봤다. 그러다가 새로 발..