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

✅ 오늘의 작업 내역 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를 주고, ..

✍️ 동적으로 페이지를 처리해야 하는 상황이 생기면서 효율적인 방법을 찾아보다가 데이터를 JSON으로 만들어 fetch 해야겠다는 결정을 내렸다. 일일이 작성하기엔 데이터 형식이 손에 익지도 않고 어려웠는데 objGen 사이트에서 원하는 데이터 형식에 맞춰 쉽게 JSON 데이터를 생성할 수 있다는 것을 알게 되었다. 🧐 JSON(JavaScript Object Notation)이란? Javascript 객체 문법으로 key:value로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷. 웹 어플리케이션에서는 일반적으로 데이터를 전송할 때 사용한다. - MDN 🔗 사이트 주소 https://www.objgen.com/json/local/design ObjGen - Live Code Generation..

🙌 리팩토링을 통해 프론트엔드에서 처리되던 정렬 및 필터 기능을 API와 연결하는 작업을 진행했다. 렌더링 된 버튼의 값과 실제 API 요청을 위해 전달해 줘야 했던 Query String의 값이 달라 두 값을 처리해 줘야 했는데, 이 과정에서 많이 헤맸던 기억을 잊지 않고자 블로그에도 짧게 기록을 남겨본다. 📑 요구 사항 간단하게 어떤 기능을 구현해야 했는지 정리해 보자. 1) UI/UX 2) 기능 초기 렌더링시 정렬 '최신순' 버튼만 기본값으로 선택되어 있으며, 정렬 버튼은 단일 선택만 가능하다. 필터 버튼은 각 조건별로 단일 선택만 가능하지만, 세 옵션은 중복 조합이 가능하다. 정렬과 필터 버튼이 눌리면 API GET 요청을 통해 데이터를 받아온다. 3) API 정렬과 필터의 카테고리는 DB코드로 ..

햄버거 메뉴 토글 버튼 구현 기초 👉 https://dev-thinking.tistory.com/21 🙌 햄버거 메뉴 버튼 구현 시 메뉴 팝업이 열리면 햄버거 메뉴 아이콘이 X로 변경되어야 했다. 이때 svg 이미지를 사용했기에 우선은 각각의 버튼에 addEventListener를 달아줬는데, 중복 코드가 많아져서 좀 더 개선할 방법이 없나 고민하다가 이벤트 위임으로 해결할 수 있다는 것을 알게 되었다. 🧐 기존 코드 살펴보기 * 지금부터는 설명의 편의를 위해 addEventListener를 이벤트 리스너로 명명한다. 기존 코드는 아래와 같이 햄버거 메뉴 버튼을 클릭했을 때와 닫기(X) 버튼을 클릭했을 때 각각 이벤트 리스너를 실행하고 있었다. 하지만 로직이 다른 것도 아니고 이미지만 변경되는 상황에서 ..

👀 모바일 해상도가 되면 햄버거 버튼에 nav가 숨겨지게 된다. 이때 자바스크립트를 활용하여 버튼 클릭 시 요소를 보여주거나 숨겨줘야 하는데, CSS라면 active 클래스를 활용할 수 있지만 tailwind로는 어떻게 처리해야하는지 궁금해졌다. 햄버거 버튼을 자바스크립트 이벤트로 처리해주는 것은 일반 CSS와 동일하다. 먼저, 햄버거 버튼에 ID를 할당해주고, 해당 요소를 가져와 클릭 이벤트를 통해 토글 기능을 추가해준다. 🤔 어떤 요소를 조작하고 싶은가? 현재 모바일 해상도가 되면 햄버거 버튼으로 헤더의 아이콘이 변경되게 만들어져있는데, 우리가 조작해야하는 요소는 햄버거 버튼과 버튼을 눌렀을 때 보여질 nav 요소이다. About 📑 Tailwind에서 사용할 수 있는 클래스 Tailwind에서는..

🌱 구현 연습도 하고싶고, 내 포트폴리오 사이트도 만들어보고 싶은 마음에 시작한 프로젝트! 웹 버전과는 달리 모바일 버전에서는 네비게이션 메뉴가 세로로 정렬되어야 했기에 헤더를 웹 버전에서 모바일 버전으로 변경하는 CSS 작업 중에 있었다. 내 예상대로라면 각 메뉴 항목의 전체 영역 클릭이 가능해야 했다. 그러나 예상과는 달리 메뉴 텍스트를 벗어난 영역은 클릭 영역에 포함되지 않았다. (이미 알고있던 내용이지만 고새 잊어버렸던..) 이는 UX 관점에서 좋지 못한 경험을 제공한다는 생각이 들었다. 그렇기에 li 태그 전체가 클릭 되도록 개선할 필요가 있었다. 📑 태그는 block 요소, 태그는 inline 요소 먼저 알고가야 하는 것은 li 태그와 a 태그의 속성이 다르다는 것이다. li 태그는 block..