TIL (100) 썸네일형 리스트형 최종 프로젝트 발표 및 부트캠프 수료 후 회고 지난 주 금요일 내일배움캠프를 수료했다. 이전 ~ 캠프 과정내가 선택한 과정은 매일 오전 9시 ~ 오후 9시까지 진행되었지만, 커리큘럼을 따라가기 위해서는 12시간을 넘어서 새벽, 주말까지 공부 해야했다. 중간에 지치고 힘들어 울고 포기하고 싶었던 순간도 많았지만, "취업은 모르겠고 일단 수료라도 해보자. 여기까지 왔는데 중도포기 할 수는 없다. 포기하던지는 그 이후에 생각하자" 라는 생각이 계속 들었고 결국 어떻게든 해보자는 마음으로 수료까지 달려왔다. 나는 비전공자로 개발 공부를 전혀 해본적 없었다. 이전에는 창업기업들의 국가 기업지원금을 지급하는 공기업 색깔의 업무를 했었다.기계적으로 일을 하다 보니 크게 힘들지는 않았지만 쉽게 대체가능한 직무라는 생각에 고민이 많았다. 일을 하면서 성장할 수 있는.. 마우스 감도에 따른 스크롤 불일치 문제 🚨 발생한 문제 ScrollPicker 컴포넌트의 일관되지 않는 스크롤 동작 확인(데스크탑 마우스 설정에 따라 1칸씩, 3칸씩 스크롤 상이)모바일 퍼스트로 화면 드래그로 스크롤 할때는 문제가 없었으나 웹 뷰 테스트 중 해당 문제가 발생 ❓원인 사용자의 마우스 감도 설정에 따라 wheel 이벤트의 발생 빈도 차이가 발생해 다르게 동작함높은 감도 설정에서는 작은 휠 움직임으로도 여러 번의 이벤트가 발생 ✅ 해결 과정 1. isScrolling ref 사용const isScrolling = useRef(false);연속 스크롤 입력 시에도 일관된 스크롤을 보장하고 스크롤 중복 실행을 방지하기 위해 사용 2. handleWheelScroll 함수 추가스크롤 속도 최적화 (behavior: 'smooth' 시간.. 일정등록 모달 구현 방식 개선 ■ 배경처음 기능을 구현할 때는 모바일 퍼스트 접근으로 달력의 일정을 클릭하면 일정을 등록하고 관리하는 화면을 모달이 아닌 날짜 값을 받는 동적 경로로 페이지를 구현했었다. 그러나 웹 디자인 시안을 검토한 결과, 일정 관리 페이지가 모달 형태로 설계되어 있었다.이에 따라, 같은 페이지 내에서 다른 경로의 URL을 어떻게 효과적으로 보여줄 수 있을지 고민하게 되었다. 일정 클릭 시 /study/[studyId]/[date]새로운 페이지로 이동 ■ 초기 접근Next.js의 Parallel Routes 또는 Intercepting Routes 기능을 활용하면 기존 페이지를 유지하면서 모달 형태로 일정 관리 화면을 구현할 수 있을 것이라고 판단했다. 이를 공부하고 적용해 보았으나, 뷰에 맞게 분기 처리하는.. Tailwind css 로 반응형 구현하기 반응형하나의 웹사이트가 데스크톱, 태블릿, 모바일 등 다양한 디바이스의 화면 크기에 자동으로 최적화되어 보여지는 디자인 방식 Tailwind css 의 반응형 디자인기본 브레이크 포인트(sm, md, lg, xl, 2xl)를 제공해 직관적이고 빠르게 적용할 수 있어 어떤 화면 크기에서 어떤 스타일이 적용될지 쉽게 파악할 수 있다.- 큰 화면의 스타일이 작은 화면에 영향을 미치지 않는다.- 모든 유틸리티 클래스에 반응형 적용할 수 있다.Tailwind css 공식문서에서 Responsive Design 탭을 보면 반응형 디자인에 대한 설명을 확인할 수 있다.https://tailwindcss.com/docs/responsive-design 커스텀 브레이크포인트 설정tailwind.confing.js 파.. favicon & og 설정하기 ■ favicon- 브라우저 탭에서 보이는 작은 로고- 북마크할 때 옆에 표시되는 사이트 대표 이미지- 보통 16x16 또는 32x32 픽셀 크기의 작은 이미지 favicon 등록시의 장점- 사용자가 여러 탭 사이에서 원하는 페이지를 쉽게 찾을 수 있다.- 모바일 기기에서 홈 스크린 바로가기 아이콘으로 활용할 수 있다.- 사이트의 첫인상을 결정하는 요소이며 완성도를 높일 수 있다. favicon 설정하기① 프로젝트 안의 public 폴더에 변경할 로고이미지 추가 및 기본 favicon 삭제요롷게 생긴 기본 favicon 을 삭제하고 변경할 로고이미지를 추가해주었다. ② Metadata 설정 변경하기layout.tsx 컴포넌트안의 Metadata 설정에서 icon - 이미지 경로를 넣어주어 설정완료!.. 아키텍쳐, 다이어그램, 기능명세서 만들기 최종프로젝트의 브로슈어를 제작 중 아키텍쳐가 필요했다. 아키텍쳐활용 사이트 https://www.cloudcraft.co/ 피드백- 어떤 식으로 굴러가는지 기능별로 흐름이나 아키텍쳐를 간결하게 구조도처럼 개발자스럽게 수정하면 좋을 것 같다.- 기능 명세서도 추가하면 좋을 것 같다. 피드백 적용- 다이어그램 - 기능명세서구분주요 기능상세 기능비고홈이벤트 페이지캐러셀을 통해 스터디 관련 이벤트 확인 검색검색으로 원하는 스터디 조회 인기스터디인기스터디를 캐러셀로 확인 모집글최신순, 태그 필터링 순으로 모집글 조회 찜모집글 찜 -> 마이페이지에서 찜 리스트 조회 인증인가소셜 로그인supabase auth 소셜 로그인 연동 (카카오 / 구글) 이메일 로그인 / 회원가입 마이페이지프로필 관리프로필 이미지,.. 더보기 기능 구현하기 스터디 멤버들의 회고록 데이터여서 양이 그렇게 많지 않아 데이터 전체를 불러와 클라이언트에서 더보기 처리를 하였다.만약 서버에서 많은 데이터를 불러오는 경우라면 API 호출 로직을 수정해야 할 것이다. 구현 기능- 초기에 4개의 메모만 표시되고, 더보기 버튼을 클릭할 때마다 4개씩 추가로 메모가 표시됨- 더 이상 표시할 메모가 없으면 더보기 버튼이 사라짐 구현 과정1. useState 훅을 사용해 초기값이 4인 showItems 상태를 관리const [showItems, setShowItem] = useState(4); 2. handleLoadMore 함수를 추가해 더보기 버튼 클릭 시 showItems + 4씩 증가const handleLoadMore = () => { setShowItem((.. css 우선순위 문제 🚨 문제Calendar 컴포넌트의 스타일링에서 day_today 클래스가 제대로 적용되지 않는다.오늘 날짜의 경우 글자 색상이 black 이어야하는데 반영이 안되었다.day_today: "bg-primary-50 w-7 h-7 text-black rounded-full font-bold hover:bg-white/10 hover:text-white" ❓ 원인- CSS 우선순위 문제- day 클래스의 text-white 스타일이 day_today의 text-black 을 덮어쓰고 있음day: "text-white font-medium text-[12px] caption w-7 h-7 hover:bg-white/10 rounded-full",day_range_end: "day-range-end",day_.. 이전 1 2 3 4 ··· 13 다음
