til

검색 필터로 나라 이름을 보여주는 UI를 추가한 이후 만든 꾹 눌러 단어 삭제하는 기능.디자이너님이 요청해주셔서 만들어봤는데 완성되니 예쁘고, 디테일도 올라간 느낌이다~    ※ 구현 로직Q. 꾹 누르는 것?   A. mousedown(커서 누르기)이 일어나고 몇 초뒤 뒤에 mouseup(커서 떼기)이 일어남- 필터 단어를 누르면 n초 뒤에 삭제되도록 setTimeout을 걸어두고, mouseup이 지정된 시간 전에 일어나면 꾹 누르는게 취소되었으니 clearTimeout으로  setTimeout을 삭제시킴- once:true => 이벤트 핸들러가 한 번만 실행되고 바로 삭제되게 함 2. 모바일 지원(+ 추가 기능)- window 객체에 touchstart 이벤트가 있으면 모바일 환경- touchcanc..

다 잘 동작하는데 색상에 관련된 css만 안되는 이유를 모르겠다...

다음주부터 시작하는 본격적인 개발에 앞서 마지막으로 주어지는 최후의 주말을 하루 앞둔 금요일~ 부족한 부분이 많은데 주말에 좀 많이 채워넣어야겠다오늘 한 일1. 코드 컨벤션, github rules 정하기2. 프로젝트 세팅 논의 조금3. 모델 체크

튜터님과의 아침 회의@ 튜터님:1. 모바일 first로 작업 했으면2. 모바일 뷰로 한 페이지가 나오면, 그 데스크톱 뷰가 와이어프레임 수준으로는 나왔으면뒤늦게 모바일 버전이 데스크톱 버전으로 할 때 호환이 안되는 경우가 있을 수 있음=> 이번 프로젝트는 보통 데스크톱을 우선시 하여 개발하던 이전과 다르게 모바일을 우선시 하여 개발하게 되었다. 처음 해보는 방식이라 익숙치 않아도 이 방법의 장점이 부각될 수 있었으면 좋겠다! 오후 회의디자이너님이 가져오신 IA와 레퍼런스 보면서 기능 논의하는 시간을 가졌다. 확실히 추상적으로 머릿속에 있는 아이디어만으로 서로의 의견을 나누는 것 보다, 무언가 시각적으로 볼 게 있으니 좀 더 명확한 의사결정을 내릴 수 있었다.

좌충우돌 최종프로젝트 하루의 시작은 튜터님과의 회의로 시작! 전날에 작성된 기획안, 타임라인 등을 보시고 전체적인 일정 조정과 디자이너님과의 협업 방법을 추가로 조언해 주셨다. 확실히 튜터님이 명료하게 길을 제시해주시니 좀 더 수월해지는 느낌 튜터님 피드백1. 개발일정: 무리가 아닐까 싶을정도로 빡빡하게 하기(우리의 한계까지?)2. 로그인, 모달, 버튼 컴포넌트 등 사전 준비작업 ⇒ ui가 나오면 최대한 빠르게 할 수 있도록3. 다른 서비스들을 탐색해보고 편리한 점, 불편한 점을 직접 느껴보기 이후 팀 노션을 작성하며 팀 이름, 그라운드 룰, 목표 들을 정하고 가볍게 코드 컨벤션을 나누었다. 그리고 다른 여행 관련 애플리케이션을 직접 사용해보았는데 정말 실제 사용자들이 있고 유명한 서비스들은 그만한 이유..

오늘의 기능 개선: 재배치 버튼 추가기존의 재배치 기능은 리스트에서 드래그를 통해 이루어졌는데, 자칫 클릭하다가도 의도치 않게 위치가 수정될 수 있어 '재배치' 버튼을 만들어 해당 버튼 활성화 상태에서만 위치를 수정할 수 있게 변경하였다.

오늘 한 일알고리즘 코드카타 풀이 수업심화프로젝트 발제기획 및 디자인챌린지반 수업SSR을 활용한 SUPABASE 로그인/회원가입 기능벌써 최종 프로젝트 이전 마지막 프로젝트!  준비한 기획이 우연찮게 선정되어 진행되었는데, 내배캠 참여 이전에 조금 생각만 해본 구성이 이제는 간단해보여서 뭔가 뿌듯하다.  한 줄 정리 : 모임이 끝나고 후기를 전할 수 있는 롤링페이퍼 프로젝트기획 의도 : 어떤 모임을 마치고 소감은 듣고 싶은데, 막상 부탁하기 어려울 때! 어땠어?를 사용해보는건 어떨까요?(팀플을 마치고, 회의를 마치고, 어떤 모임을 마치고)

Next.js에서 데이터 로딩 상태를 표현하기 위한 방법으로 loading.tsx와 suspense를 적용해 보기로 했다. 🍀 도입배경Toss의 SLASH21의 '프론트엔드 웹 서비스에서 우아하기 비동기 처리하기'라는 세션을 보고 인상 깊은 내용이 있어 적용해보고자 했다. 로딩과 에러 상태를 매 페이지마다 useState나 useQuery문 등으로 관리하기에는 비효율적인 것 같아 부분적으로 Suspense와 ErrorBoundary를 사용하면 코드의 중복도 줄이고 로직도 이해하기 편해지지 않을까?라는 생각으로 개인 프로젝트 때 도입해 보았다. 🔥 하지만 실패와 실패...Next.js 14에는 클라이언트 사이드일 경우 로딩 상태를 감지하여 loading.tsx의 내용을 보여주는 내부 기능이 탑재되어 있..