전체 글93 최종 팀 프로젝트 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. nextjs 외부 이미지를 사용할 때 / Invalid src prop (이미지주소~) on `next/image`, hostname "호스트명~" is not configured under images in your `next.config.js` 문제 상황 유저의 썸네일이 supabase stoage에 저장되어 있는데, 불러오려니 에러가 발생했다. Error: Invalid src prop (https://lukvbpxaabobwpzkacow.supabase.co/storage/v1/object/public/userThumbnail/screen.png?t=2024-04-02T10%3A26%3A52.780Z) on `next/image`, hostname "lukvbpxaabobwpzkacow.supabase.co" is not configured under images in your `next.config.js` See more info: https://nextjs.org/docs/messages/next-image-unconfigured-hos.. 2024. 4. 3. 최종 프로젝트 Day6 아아 4/2일 일지인데, 시간이 지나가버렸다....ㅜ 오늘부터는 본격 개발에 들어갔다. 이번 팀플에서는 깃의 이슈, 프로젝트, 마일스톤을 적극 활용하기로 해서 열심히 배우면서 사용 중이다. 이슈는 그래도 프로젝트와 마일스톤에 비해서는 많이 써봤는데, 프로젝트와 마일스톤은 많이 사용해보지 않아서 개발만큼 걱정되는 부분이었다. ㅋㅋㅋ (몇 시간 해봤다고 좀 익숙해진 것 같기도?) 지금은 나름 팀원분들께 물어도 보고 검색도 하면서 사용하고 있다. 우리 팀은 크게 맡은 페이지? 또는 컴포넌트 별로 프로젝트를 만들어서 관리하고 있다. 하나의 프로젝트를 파서 모두가 사용할 수도 있지만, 이렇게 관리하면 더 개발하는 영역에 대해서 쉽게 볼 수 있어서 관리가 좋다고 한다. 일단은 한 개의 기능에 집중하고 있어서 이슈는.. 2024. 4. 3. 최종 팀 프로젝트 Day5 벌써 4월 1일이 되었다. 어젯밤에 팀원들이랑 프로젝트 세팅을 끝내서 오늘은 개발을 할 수 있을 것이라고 생각했지만... 아직 정리되지 않은 내용들이 있었다. 기획 최종_최종_찐최종 느낌.. ㅋㅋㅋ 이번에는 진짜로 다 정리를 했고, 피그마에도 코멘트로 남겨두었다. 그리고 db 설계했던 대로 supabase에 테이블도 다 만들었다. 이번에 깃에 프로젝트랑 마일스톤도 제대로 사용하기로 해서 이 부분도 익혀야 한다. 음... 마일스톤 기한을 상세하게 정해서 올려야 하는데 하하 깃 때문에 작업이 두려워질 지경...ㅎ 하다 보면 익숙해지겠지... 2024. 4. 1. [typescript] 교차 타입 Intersection Type 교차 타입 교차 타입(Intersction Type)은 & 기호를 사용하여 여러 타입을 조합하여 하나의 타입으로 만들 수 있다. 객체의 경우 조합한 모든 타입을 가져야하고 하나라도 없을 경우 에러가 발생한다. type Color = { code : string; } type Animal = { name: string; } type Cow = Color & Animal; const brownCor : Cow = { name:'ddd', code:'#693f00' } Color 의 code 타입과 Animal의 name 타입을 조합하여 Cow 타입을 만들었다. 객체가 아닌 경우 객체가 아닌 경우에도 사용할 수 있는데, 공통된 타입으로 판단한다. type T1 = string | number; type T2 .. 2024. 4. 1. react/typescript input checkbox 전체 선택 구현 그동안 프로젝트 진행하면서 구현한 적이 없어서 이번에 연습 삼아 구현하게 되었다. 기능 1. 전체 선택 클릭 시 다른 체크박스 전체 선택/해제 2. 전체 선택 상태에서 다른 체크박스 해제 시 전체 선택 부분도 선택 해제 3. 체크박스 재사용 가능하도록 컴포넌트로 분리 Checkbox 컴포넌트 / Checkbox.tsx 재사용 가능하도록 props를 내려줬다. import React from "react"; const Checkbox = ({ title, name, checked, onChange }: { title: string; name: string; checked: boolean; onChange: React.ChangeEventHandler }) => { return ( {title} ); }; .. 2024. 3. 29. 이전 1 2 3 4 5 6 ··· 12 다음
