시럽로그

프리온보딩 선발과제는 로그인/회원가입과 투두리스트 추가, 수정, 삭제 기능을 구현하는 것이었다. 과제 자체는 크게 어렵지 않았는데 도중에 자잘한 실수로 계속 삽질을 해서... 똑같은 실수를 반복하지 않고자 기록을 남기려고 한다. 회원가입 먼저 회원가입페이지에서는 state에 email과 password를 넣어줬는데 콘솔로 찍어보니 email과 password input창에 입력해도 undefined에 나오는 것이었다. 한참을 헤매다가 동기분에게 물어서 해결했다...ㅠ 동기분에게 물어보니 handleLoginIntup 함수에 객체 분해 할당한 걸 key 대신 id로 들어가서 e.target 안에 name 속성을 가진 input이 변경될 때마다 값이 들어오게 해야 한다고 했다. 난 key와 value로 넣어..

웹에서 오디오를 녹음하고, 재생하는 등 오디오 파일을 관리하는 프로그램을 만들었다. 다소 생소해서 이걸 프론트엔드가 한다고? 라고 생각했던 것 같다. 오디오 태그나 관련 라이브러리는 가능한 사용하지 않으려고 했는데 구현을 못하는 것보단 기한을 맞추는 게 더 중요하다고 생각해서 결국 우당탕탕 만들었다. 화면은 크게 녹음/리스트/재생으로 나눌 수 있는데, 기능을 완전히 분리할 수 없어서 팀원들과 역할을 나누기 어려웠다. 그래서 전반적으로 한 명이 틀을 만들고, 다른 한 명이 틀을 기반으로 기능 추가, 남은 한 명이 디벨롭 및 UI 수정하는 것으로 계획을 세웠다. 그 중에서 난 마지막의 UI 담당이었다. tailwind css 써 본 동기들이 강추를 해서 이번 프로젝트에서 도입해보았는데 직관적이고 사용하기 편..

토이프로젝트로 비트바이트의 플레이키보드 웹 스토어 페이지 구현을 해보기로 했다. https://plkey.app/ 플레이키보드 - 생동감 넘치는 소통의 시작 내 말에 움직이는 키보드가 나왔다! 귀여운 캐릭터가 움직이는 플레이키보드를 만나보세요. plkey.app 비트바이트에서 제공해 준 API명세서와 Figma를 기반으로 목록페이지와 상세페이지를 만들면 되는 부분이었다. 2페이지를 4명이 나눠서 해야했고, 기간도 짧았기 때문에 많은 역할을 담당하기는 어려웠다. 난 상세페이지의 상단 부분을 맡아서 아래 기능들을 구현했다. 각 테마를 눌렀을 때 themeId 필드를 활용하여 라우터를 이동 API 통신으로 해당하는 데이터가 출력되어야 함 테마 이미지가 슬라이드로 넘어가도록 구현 그러나 테마 이미지가 여러개가 ..