본문 바로가기

전체 글93

nextjs/typescript lodash 에러 yarn add lodash 후import _ from 'lodash';  를 했는데 정상적으로 import 되지 않고 아래와 같은 메시지가 출력되었다.  Could not find a declaration file for module 'lodash'. 'c:/codeGit/v-up-ver2/node_modules/lodash/lodash.js' implicitly has an 'any' type. Try `npm i --save-dev @types/lodash` if it exists or add a new declaration (.d.ts) file containing `declare module 'lodash';`  찾아보니 typescript에서 외부 라이브러리를 사용할 때 발생할 수 있으며, t.. 2024. 4. 29.
[react/nextjs] 양방향 무한스크롤 2 끝날 것 같지 않던 무한스크롤... 드디어 끝이 나는 것인가.... 역방향으로 무한스크롤을 할 때 여유 있게 미리 데이터 불러오기아.. 정말 이 부분이 제일 어려웠다.며칠을 고민했는지... 일단 intersection observer로 해결하려고 낑낑대다가 며칠을 보냈다ㅋㅋ 하 ㅋㅋ intersection observer로 정방향처럼 감지하기.처음에 하려고 했던 방법은 정방향 그러니까 아래로 내렸을 때 무한 스크롤이 되듯이 intersection observer를 사용해서 역방향도 하려고 했다.그런데... 문제가 있었다. 문제 1. 상단에 있는 intersection observer를 만나야 데이터가 불러와진다. 일단 이 문제가 제일 심각했다.정방향을 생각해보면 하단에 도달했을 때 데이터를 불러오는데, .. 2024. 4. 26.
tailwind 로컬 서버랑 배포 서버의 css 우선순위가 왜 다르지? 왼쪽은 개발서버, 오른쪽은 배포 서버인데 같은 코드임에도 다른게 보여졌다. 이유를 모르겠어서 개발자 도구를 서버별로 비교를 해봤는데, 우선순위가 달라서 나타나는 문제였다. tailwind 내부적으로 w-full 클래스 하위에 이미지는 100프로라는 tailwind 규칙이 있었다. 로컬 서버에서는 제대로 나와서 몰랐는데... w-full을 딱 필요한 부분으로 옮겨서 수정을 했다. css 적용되는 범위를 내가 크게 잡은게 문제이긴 하지만... 우선순위가 같아서 개발서버에서도 이렇게 나왔다면 발견했을텐데..ㅠㅠ 아니 왜 다른거지... 흑 이유는 아직 못찾아서 찾게된다면 이 글에 업데이트를 해둬야겠다...ㅠㅠ 2024. 4. 19.
상위 컴포넌트에서 하위 컴포넌트로 늦게 내려오는 문제 마이페이지 내에 마이 플레이리스트라는 컴포넌트가 있는데, 이 컴포넌트에 마이페이지에서 조회한 유저의 정보를 전부 내려준다.  이렇게 했더니 마이플레이리스트에서 노래를 삭제하고 invalidateQueries로 쿼리키를 무효화하는데, 마이페이지의 정보를 조회하는 쿼리만 늦게 가져와져서 마이플레이리스트가 마이페이지 정보가 가져와진 줄 알고 이전 데이터로 조회하는 문제가 있었다.  상위 컴포넌트에서 전달해 주는 데이터는 조회하는 컬럼도 많고 조인 다른 테이블에서 가져오는 데이터도 있어서 비교적 다른 데이터에 비해 무겁긴 했다.  이러한 문제가 있어서 하위 컴포넌트에서 상위 컴포넌트의 데이터에 의존하지 말고 하위 컴포넌트에서 필요한 데이터를 조회하도록 전체적인 코드를 변경했다. 2024. 4. 18.
[react] 탭 메뉴 만들기 완성된 탭 메뉴 이번에 담당한 화면에 탭 메뉴가 필요한 부분이 2곳 정도 있어서, 컴포넌트로 만들어보기로 했다. 탭 메뉴 코드TabProps에서 id는 탭 메뉴를 식별하고자 추가했고,title은 탭 메뉴의 이름, content는 탭 메뉴를 눌렀을 때 나와야 하는 컴포넌트를 전달하고자 추가하였다. 탭 메뉴를 아래와 같이 배열로 전달하면 TabMenu.tsx 탭메뉴 컴포넌트에서 map으로 돌려서 렌더링 하게 된다.const tabArr = [ { id: 0, title: '내 프로필', content: }, { id: 1, title: '내가 쓴 글', content: }, { id: 3, title: '좋아요 한 글', content: }, ]   이렇게 위 탭 메뉴 정보 배열을 아.. 2024. 4. 16.
[react/nextjs] 데이터가 있는지 판단 후 insert 또는 update 음악 추천 리스트에서 + 추가 버튼을 누르면 현재 유저의 재생 목록 테이블에 데이터가 추가되어야 하는데 고려해야 할 부분이 있다. 데이터가 있는지 판단하는 이유는 재생 목록에 추가하는 노래 id를 배열에 담기 때문에 한 번이라도 노래를 추가하여 재생한 적이 없다면 재생목록 테이블에 유저의 현재 재생 목록은 없다. (재생 목록 데이터가 있어야 그 데이터의 노래 컬럼에 배열로 재생할 노래를 담을 수 있다) 그렇기 때문에 먼저 이 유저가 현재 재생 목록을 가졌는지 판단 후 insert 또는 update를 해야 한다. 사실 회원가입 할 때 유저의 현재 재생 목록을 가지도록 재생 목록 테이블에 빈 값으로 insert를 하는 건 어떨지 고민도 했다. 만약 이 방법으로 한다면 추가할 때마다 재생 목록이 있는지 판단하.. 2024. 4. 5.
최종 팀 프로젝트 Day9 오늘부터는 진짜 메인페이지를 끝내고 마이 페이지로 넘어왔다. 아직 메인에 개선해야 할 부분들이 많이 남았지만 일단 구현하고 마이페이지, 유저 프로필 페이지까지 다 하고 나서 개선을 해야 할 것 같다. 할 일이 태산인데 시간이 너무 빠르게 간다. 오늘은 모의 면접도 있었다. 면접 본 키워드들도 복습을 해야 될 것 같다. 부족한 점이 많았다. [오늘 진행한 작업] 음악 추천 리스트의 추가 버튼 클릭 시 현재 재생 목록에 추가 미로그인 시 : 로그인 화면으로 이동 로그인 시 현재 재생 목록 db에 데이터가 없을 때(플레이어를 한 번도 사용하지 않은 경우) : insert 현재 재생 목록 db에 데이터가 있을 때 : update 처음 회원가입 및 로그인 후 추가를 하면 현재 재생 목록 디비에 insert를 해주.. 2024. 4. 5.
리액트로 슬라이드 만들기 2 + typescript 슬라이드의 늪에 빠진 나... 하하 즐겁다. 더 제대로 만들었다면 더 즐거웠을 텐데...? 어쨌든 리액트로 슬라이드 만들기 시작~ 생각한 로직 슬라이더 안의 요소의 사이즈에 기반하여 이동한다. 다음/이전 버튼을 누르면 슬라이드 요소를 감싸는 박스를 이동시킨다. 위치가 0이면 이전 버튼 미노출 슬라이드 요소를 감싸는 박스의 사이즈가 위치 값이랑 같으면 미노출(하지만 이 부분은 개선이 필요..) 작업 설명 현재 슬라이드의 위치를 담을 state를 만든다. const [position, setPosition] = useState(0); 슬라이드로 이동할 값을 정한다. 354 부분은 슬라이드 요소 1개의 가로 사이즈이고, 16은 오른쪽 마진의 값이다. 값을 합해서 370이라고 해도 되지만 각 값의 구분을 위해 .. 2024. 4. 4.

티스토리툴바