오늘도 디벨롭✨ 오늘도 디벨롭✨

✅ 오늘의 작업 내역 1. single, multiple 버전 예제 준비하기(100%) 2. README 작성하기(100%) 🔍 먼저 짚고 넘어가는 오늘의 깨달음 동일한 UI인데 실행되는 로직만 다른 경우, prop 조건에 따라 컴포넌트 하나로 해결이 가능하다는 사실을 잊지 말자. 폼도 그렇고, 오늘 준비한 아코디언도 그렇고.. 컴포넌트를 재사용할 수 있는지 항상 먼저 생각해 보기! (single 버전과 multiple 버전을 각각 만들었다가 이거 정말 비효율적이다! 를 느끼고 난 자의 회고록..) 0. 아코디언 UI를 준비한 이유 요새는 모바일로 웹이나 앱 사용을 많이 하는데, FAQ만 보더라도 아코디언 UI로 이루어져 있는 곳들이 많다. 작은 화면 속에서 빠르게 내용을 확인할 수 있는 게 편리해서 잘..

✅ 오늘의 작업 내역 1. 정렬 메뉴 버튼 active 상태 변경(100%) 👾 (이슈 처리) 새로고침 후에 바로 로고를 클릭하여 "/" 경로로 이동하는 경우 변경된 active 상태가 반영되지 않는 이슈 👾 (이슈 처리) 모바일 뷰에서 sortPath가 없는 경우 셀렉트 박스 label값이 null이 되는 이슈 💡 구현 결과 1. 정렬 메뉴 버튼 active 상태 변경 기존 정렬 메뉴 버튼의 active 상태는 NavigationBar 컴포넌트 내의 상태값을 통해 관리되고 있었다. 이를 쿼리 스트링 값에 따라 actvie 값이 적용될 수 있도록 변경이 필요했다. 처음에는 active 상태를 관리할 상태값을 useSortFilter 커스텀 훅에 넣어야 하나 고민했다가 해당 커스텀 훅이 처리하는 기능의 경..

✅ 오늘의 작업 내역     1. detail css 작업(70%)         1-1. 프로젝트 정보 섹션         1-2. 탭 메뉴  스타일 작업은 tailwind를 사용합니다.🎨 오늘 작업할 시안💡 구현 결과 1. 프로젝트 정보 섹션1-1. 프로젝트 정보 섹션 구조 portfolio detail 개인 포트폴리오 사이트 포트폴리오 설명 배포 사이트 깃허브 스택 스택  👀 스타일을 작업하며 고려한 점데스크탑 폰트 사이즈반응형 작업 시 프로젝트 제목/내용과 버튼의 배치모바일뷰 이하로 화면이 작아졌을 ..

✅ 오늘의 작업 내역 1. 상세 보기 버튼에 detail.html 연결 2. detail.html 마크업 진행(10%) 1. 상세보기 버튼에 detail.html 연결 태그에 직접적으로 url을 연결해 줬다가 동적으로 portfolio 요소를 생성하고 있으니 페이지 이동도 자바스크립트로 처리해 주는 게 맞다는 생각이 들었다. 문제는 동적으로 요소가 추가되는 경우 추가되지 않은 요소는 DOM에 존재하지 않아 이벤트 핸들러를 바인딩할 수 없는 이슈 1)를 마주하게 되었다. 👾 이슈 1) Uncaught (in promise) project.is:170 TypeError: Cannot read properties of null (reading 'addEventListener') button에 id를 주고, ..

포스팅을 작성할 때 통일감을 주고 싶어서 템플릿처럼 구성을 동일하게 만들어 작성하고 있었는데, 매번 작성할 때마다 일일이 지정해 주는 게 부담되던 찰나 티스토리 서식 버튼을 발견하게 되었다. 세상에나. 당장 만들어보자. 🧐 서식 설정 하기 1) 블로그 관리 - 콘텐츠 - 서식 관리 탭에 접속합니다. 2) 서식 관리 페이지의 서식 쓰기 버튼을 클릭해 주세요! 3) 원하는 템플릿 형식으로 서식을 구성하고, 우측 하단의 완료 버튼을 눌러 서식을 저장합니다. ✅ 사용 방법 글쓰기 버튼을 누르고 에디터 상단에 미트볼 메뉴를 클릭하면 서식 버튼을 확인할 수 있습니다. 서식 버튼을 클릭하면, 방금 저장한 서식 리스트를 확인할 수 있고, 원하는 서식을 클릭하면 적용 완료~! ⚠️ 참고로 제목까지 템플릿처럼 적용이 되지..

🏔️ 티코드 스터디 소개 - 작은 단위의 리액트 컴포넌트 기능을 페어프로그래밍으로 구현하는 스터디 - 목표 : 프로그래밍 사고력 향상과 자신이 구현한 기능에 대해 명확한 설명을 할 수 있도록 연습하는 것 👀 오늘은 스터디 진행 이래 처음으로 라이브러리를 사용하여 구현 연습을 진행했다. 공식 문서를 통해 처음 접하는 라이브러리의 사용법을 파악하고 적용하는 연습도 필요하다는 생각에 적절한 라이브러리가 있는 경우 이를 체험해보고자 하였다. 📚 (사이트) 가이드 투어/온보딩 투어란? 가이드 투어/온보딩 투어는 웹 사이트, 웹 애플리케이션 또는 소프트웨어 플랫폼의 신규 사용자에게 제공되는 체계적인 소개/안내를 뜻한다. 이를 통해 신규 사용자가 플랫폼의 기능 및 UI/UX에 익숙해지도록 도와준다. 오늘 알아볼 기..