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

✍️ 동적으로 페이지를 처리해야 하는 상황이 생기면서 효율적인 방법을 찾아보다가 데이터를 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에서는..

🏔️ 티코드 스터디 소개 - 작은 단위의 리액트 컴포넌트 기능을 페어프로그래밍으로 구현하는 스터디 - 목표 : 프로그래밍 사고력 향상과 자신이 구현한 기능에 대해 명확한 설명을 할 수 있도록 연습하는 것 이번 포스팅은 구현 과정보다 준비하면서 알게 된 wheel event에 대해 기록하고자 한다. 리액트에서 FullPage Scroll를 구현하기 위해서는 마우스 휠의 방향을 통해 페이지의 이동 방향을 알아낼 수 있는 wheel event값, 스크롤이 발생하는 DOM 요소의 스크롤 위치를 알아내는 useRef.current값, 뷰포트의 세로길이가 필요하다. 이 값들을 사용하여 위치를 계산한 후 scrollTo API를 활용하여 이동할 위치를 지정해준다. 📑 wheel event란? 사용자가 휠 버튼(일반적..

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

🌱 API로 필터링된 데이터를 받아오는 기능을 구현 중에 쿼리 스트링값을 확인하는 과정에서 이중 배열(중첩 배열)을 마주하게 되었다. 1차원 배열로 어떻게 평탄화를 시킬 수 있을지 찾아보다가 flat()이라는 메서드를 알게 되었다. 덕분에 손쉽게 원하는 형식의 데이터를 얻을 수 있었다. 📑 Array.prototype.flat() ? Array 인스턴스의 flat() 메서드는 모든 하위 배열 요소가 지정된 깊이까지 재귀적으로 연결된 새 배열을 생성합니다. - MDN 사용 방법은 아래와 같은데, 옵션으로 depth를 넣어주면 원하는 깊이만큼 평탄화가 가능하다! flat() flat(depth) ⚠️ flat()은 ECMAScript 2019(ES10)에 새롭게 추가된 메서드로, 현재 Opera Mini와 ..

🏔️ 티코드 스터디 소개- 작은 단위의 리액트 컴포넌트 기능을 페어프로그래밍으로 구현하는 스터디- 목표 : 프로그래밍 사고력 향상과 자신이 구현한 기능에 대해 명확한 설명을 할 수 있도록 연습하는 것 👾  문제상황이미지 데이터를 대량으로 받아오는 페이지에 접속한다고 가정해 보자.예시처럼 좋은 화질의 이미지를 제공할수록 데이터의 용량은 커지고, 이미지를 받아오는 시간 또한 증가하게 된다.이에 따라 사용자는 이미지가 모두 받아와질 때까지 하염없이 빈 화면을 보며 기다려야 하는 상황을 마주하게 될 것이다. 사용자가 보고있는 화면(뷰포트)에 보이는 이미지만 먼저 로드되어 보여진다면 사용자 경험을 더 향상시킬 수 있지 않을까? 이 때 사용할 수 있는 최적화 기법 중 하나로 이미지 지연 로딩(Image Lazy..