본문 바로가기

분류 전체보기94

마지막 프로젝트, 그리고 부트캠프 종료.. 어제부로 부트캠프가 종료되었다.이번 최종 프로젝트는 5주간 진행하였고, 이렇게 긴 호흡을 가지고 프로젝트를 진행해 본 적이 처음이라 진행하면서도 잘 끝낼 수 있을까? 잘 마무리할 수 있을까? 하는 의구심이 스스로 들었던 것 같다. 구현5주라는 시간이 길다면 길고 짧다면 짧지만 진짜 밤을 새우면서 프로젝트를 진행했던 것 같다.밤을 새우는 건 좋은 효율이 나는 건 아니지만, 정말 시간이 너무나도 부족했다. 구현에 급급해서 아쉽게 완성된 기능들도 있었다. 특히 이번에 메인에 캐러셀 슬라이드를 만들었는데, 정말 미흡하게 완성이 돼서 이 부분도 굉장히 아쉽고, 배너 슬라이드의 경우 배너 관리하는 기능도 만들어서 관리하고 싶었는데 하지 못했다.이 외에도 더 있는데 생각이 나지 않는다...최종 발표4개월 동안 부트.. 2024. 5. 2.
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.

티스토리툴바