본문 바로가기

프로젝트/202421

[react/nextjs] 양방향 무한스크롤 2 끝날 것 같지 않던 무한스크롤... 드디어 끝이 나는 것인가.... 역방향으로 무한스크롤을 할 때 여유 있게 미리 데이터 불러오기아.. 정말 이 부분이 제일 어려웠다.며칠을 고민했는지... 일단 intersection observer로 해결하려고 낑낑대다가 며칠을 보냈다ㅋㅋ 하 ㅋㅋ intersection observer로 정방향처럼 감지하기.처음에 하려고 했던 방법은 정방향 그러니까 아래로 내렸을 때 무한 스크롤이 되듯이 intersection observer를 사용해서 역방향도 하려고 했다.그런데... 문제가 있었다. 문제 1. 상단에 있는 intersection observer를 만나야 데이터가 불러와진다. 일단 이 문제가 제일 심각했다.정방향을 생각해보면 하단에 도달했을 때 데이터를 불러오는데, .. 2024. 4. 26.
[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.
최종 팀 프로젝트 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.
최종 팀 프로젝트 Day8 팀 프로젝트 시작하면서 정말 시간이 빨리 지나감을 느낀다. 아니 시간이 정말 왜 이렇게 빨리 지나가는 거죠?? 일요일까지 기능구현 마쳐야 하는데 메인의 늪에 빠져있다. 슬라이드와의 싸움.. 과연 내가 이길 수 있는가.. 메인에서 특히 오래 걸린 이유는 슬라이드와 로그인했을 때 안 했을 때, 또는 어떤 데이터가 있을 때 없을 때 나와야 하는 콘텐츠가 달라서 어떤 리스트 조회 작업이라는 1개처럼 보이는 작업이 있다면 사실은 작업이 2개다... 디비에 요청하는 쿼리도 달라야 하고... 어쨌든 그렇다... 아래의 코드는 내가 처참하게 실패한 코드... 유저가 우리 서비스에서 퍼스널 음악 진달을 받고 결과를 가진 유저라면 추천 장르에 따라 노래를 보여주고, 아니면 랜덤으로 보여주는 작업을 진행했는데, useQue.. 2024. 4. 4.
최종 팀 프로젝트 Day7 음 이제 계속 하루 지나고 작성하게 되는 것인가! 오늘은 하루종일 슬라이드랑 싸우고 있었다. 메인에 슬라이드가 3개 아니 혹시 4개? 어쨋든 한개는 아주 간단한 기능만 넣어서 구현했고, 한개는 조금만 더 하면 될 것 같고... (완료한 슬라이더) 음 오늘 다 완료하려고 했는데... 시간이 너무 빠르게 지나간다. 오늘의 메인 이벤트는? 디자인 시안 2개 중 최종 시안 고르기 디자이너님과 개발자들 모두 잘해보려는 마음은 같고 디자인은 두개가 서로 정반대의 성격인데 둘다 잘 나왔고... 그래서 결국 박빙의 표를 받아서 갈팡질팡 하다가 최종적으로는 힘들게 1개를 고를 수 있었다. 결정하는 시간들이 좀... 순탄하지는 않았지만 그래도 잘 됐다. 아마도.. 이번주에는 얼른 기능을 마무리하고, 다음주부터는 UI 작업.. 2024. 4. 4.
리액트로 슬라이드 만들기 + typescript 이번 팀플에서 맡은 페이지에 슬라이드 파티가 시작됐다. 전부 라이브러리 없이 구현하려니 신나네?(정말... 신나..)어쨌든.. 그렇게 시작된 리액트로 슬라이드 만들기시작합니도~ 슬라이드 만들기지만 정말 별 기능이 없는 간단한 슬라이드이다. 근데 이건 뭔가 슬라이드 느낌이 나지 않아서 곧 옆으로 넘어가는 슬라이드로 다시 작업할 예정이지만, 첫 슬라이드 작업이라서 기록에 남겨본다. fade 되는 슬라이드를 구현하려 했지만, 지금은 display block/none으로 동작하는 슬라이드이다.곧.. fade도 도전! 생각한 로직useState를 만들어서 현재 슬라이드의 index 관리다음 버튼을 누르면 state + 1, 이전 버튼을 누르면 state - 1을 해서 배너의 index와 state 값이 같으면 배.. 2024. 4. 3.
최종 팀 프로젝트 Day5 벌써 4월 1일이 되었다. 어젯밤에 팀원들이랑 프로젝트 세팅을 끝내서 오늘은 개발을 할 수 있을 것이라고 생각했지만... 아직 정리되지 않은 내용들이 있었다. 기획 최종_최종_찐최종 느낌.. ㅋㅋㅋ 이번에는 진짜로 다 정리를 했고, 피그마에도 코멘트로 남겨두었다. 그리고 db 설계했던 대로 supabase에 테이블도 다 만들었다. 이번에 깃에 프로젝트랑 마일스톤도 제대로 사용하기로 해서 이 부분도 익혀야 한다. 음... 마일스톤 기한을 상세하게 정해서 올려야 하는데 하하 깃 때문에 작업이 두려워질 지경...ㅎ 하다 보면 익숙해지겠지... 2024. 4. 1.

티스토리툴바