개발새발 로그

어느때와 같이 NextJS app router를 이용해서 프로젝트를 진행하던 도중에 문제가 생겼다. 보통 클라이언트 사이드에서는 useParams를 써서 동적 라우팅의 값을 가져오고 서버사이드에서 사용할 때는 아래처럼 props부분에 params를 넣어서 가져온다. 근데 이 로직을 사용하면서 문제가 생긴 것이다. 프로젝트에서 테스트를 하면서 만들었던 유저 데이터에서 프로필 이미지에 "string"(서버에서 지정한 기본 값으로 추정) 처럼 잘못된 값이 들어가게 됐고, 그 이미지 문자열을 next/image의 src에 넣어주면서 진행하고 있었다. 당연히 이미지는 깨진 상태로 나오게 됐다. 그래도 테스트니까 상관없어서 진행하고 있었는데 갑자기 문제가 생긴 것이다. params에 해당 Image의 "string..

저번에 Carousel을 완성하고 보니 Touch이벤트에서 문제가 생겼다. 모바일 환경에서 기능을 수행하니까 드래그는 되지만 그냥 클릭했을 때 Link기능이 안되는 것이었다. 이 문제의 원인을 찾고 해결하는 과정을 작성해보았다. 1. 아니! 왜 클릭이 안될까? 웹 환경에서는 정상적으로 클릭까지 작동했지만 모바일 환경에서는 드래그만 작동했다. 이를 통해서 등록된 이벤트와 이전에 생성했던 isDragging 상태가 문제가 있음을 추측했다. 위 사진에서는 onTouchMove와 onTouchEnd에 handleMouse~ 함수를 넣어줫는데 어차피 같은 기능을 하는 거여서 넣어준 것이다. 일단 아래와 같이 이벤트에 모든 console.log를 작성해서 문제를 찾아보았다. 첫번째 블록이 터치를 딱 했을 때 나오는..

1. 이전에 만든 Carousel의 내부에 만약 Link 태그와 같이 이벤트를 갖는 요소가 들어가면 드래그할 때 그 이벤트가 실행되는 문제가 발생 말 그대로 큰 문제가 생겼다. Carousel 내부에 이벤트를 가진 요소가 들어간다는 생각을 하지 못했다. 그래서 드래그를 했을 때 내부의 이벤트를 막아주는 로직이 필요했다. Link태그를 비활성화 하는 방법? 일단 드래그의 상태는 배제하고, Link 기능을 비활성화 할 수 있는 방법이 있는지 찾아봐야했다. 공식문서를 찾아보니 아래와 같이 나와있었다 그래서 아래와 같이 만들어 주었다. ... 그럼 이제 a태그에는 onClick이나 onMouseDown을 적용할 수 있으니까 Link태그를 비활성화 할 수 있는 방법을 찾은 것이다! onMouseDown, OnMo..

1. 이전 프로젝트에서 만든 Carousel 컴포넌트 뭔가 부족하다! 먼저 내가 만든 Carousel을 보자 요소를 flex no-wrap으로 하고, overflow hidden을 적용한 다음, scroll을 적용해서 스크롤 값으로 요소들을 드래그 할 수 있도록 했다. 근데 잘 보면 드래그를 하고 이후에 슬라이드(?) 효과가 일어난다. 이전 프로젝트에서는 생각하지 않았지만 다시 Carousel 컴포넌트를 사용하려고하니 뭔가 부족한 느낌이 들었다. 내가 원하는 건 아래와 같다. 이를 위해서 다 갈아엎기로 했다! 1. 첫번째 문제 scroll-smooth 이 녀석! 이전 프로젝트에서 scroll이 너무 부자연스러워서 넣었던 녀석인데 이 속성이 드래그했을 때 싱크가 안맞는 대신 부드럽게 하는 것이었다. 내가 ..

useModal을 만들면서... 1. 무엇을 만들려고 했지? 나는 아래와 같은 모달을 만들려고했다. 사실 이게 모달인지 아닌지 구분이 가질 않았는데 당근마켓을 보니까 아래처럼 백그라운드에 오버레이가 생기고, 모달처럼 grow 애니메이션이 나온다. 그리고 다른 페이지에서 아래 중고나라의 메뉴창처럼 왼쪽에서 오른쪽으로 슬라이드해서오는 것이 있는데 이 부분도 url 주소창이 바뀌지 않는 걸로 봐서 모달로 판단되었다. 그래서 나도 내가 필요한 컴포넌트를 구현할겸 useModal을 구현하기로 한다. 참고로 현재 NextJS에서 구현 중이다! 2. 모달은 그냥 css로 만들면 안될까? 나는 처음에 아래와 같이 css로만 모달을 구현하고 Modal을 컴포넌트로 만들어서 구현했다. "use client"; import..

1. 여전히 찝찝한 다크모드.. https://ydoag2003.tistory.com/442 [2024-02-09] 팀프로젝트 개인 회고 - SSG에서 코드블록 무시 1. 서버에서 렌더링한 것과 클라이언트에서 렌더링한 결과가 다르다고?다크모드를 위해 다크모드 버튼을 만들면서 생긴 상황이다.기존에 리액트에서 구현해서 그대로 사용하면 되지않을까? 했 ydoag2003.tistory.com 이전에 다크모드를 구현하면서 플래시 현상을 해결하기 위해 html 내부에 즉시실행 스크립트를 넣어서 현재 브라우저의 테마상태와 일치시켜서 중간에 플래시 현상이 없도록 했다. 서버사이드에서 html을 파싱할 때 스크립트를 만나면 파싱이 중단되고 스크립트를 실행하는 점을 이용했다. 일치시켰다고는 하지만 클라이언트 사이드에서는 ..

1. 연관 검색어를 모달처럼 닫을 수 있게 해 보자! 검색어를 입력해서 연관검색어가 나오게 되고, 만약 다른 요소(배경)를 클릭하면 연관검색어가 보이지 않는 기능을 만들었다. 먼저 코드를 작성한 코드를 보자! import { useEffect, useRef, useState } from 'react' const useModal = () => { const modalRef = useRef(null) const [isShow, setIsShow] = useState(false) const handleOutsideClick = (e: MouseEvent) => { const isOutsideClick = modalRef.current && e.target instanceof Element && !modalRe..

팀프로젝트에 NextJS 공부에 묻혀서 개인프로젝트를 소홀히 해버렸다. 얼른 다시 개인 프로젝트 1일 1커밋을 위해 노력할 것이다...ㅠㅠ 1. 검색 API를 이용해서 검색을 하자 이제 검색 API를 이용해서 검색어에 해당하는 약초 데이터를 불러올 것이다. 공공데이터에서 제공해준 문서를 보면 아래와 같다. 기존에 약초리스트를 모두 불러올 때는 sType값과 sText값을 쿼리에 넣지않고 보냈다. 이번에는 sType과 sText를 넣어서 요청을 하면 검색이 가능할 것이라고 예상된다. 1. 먼저 서버 라우터를 구축을 해야했다. 이전에 만들었던 서버의 router에 '/serach' url을 추가해줬다. router.get('/search', async (req, res) => { try { const sTe..