072DATA

최종 프로젝트 계획최종 프로젝트에 대해 데드라인에 맞춰서 어떤 식으로 개발에 들어갈지 계획좀 짜야겠다 프로젝트 데드라인주제 및 기획 선정 10/19~10/21MVP 기능 구현 완료 및 배포 ~11/6
UT 테스트 시작 ~11/8UT 테스트 기반 기능 개선 및 버그 수정 ~11/11최종 발표 11/21 주제 및 기획 선정 10/19~10/21 주제 및 기획 선정으로 팀원끼리 아이디어를 모아서 오늘 주제를 결정하게 되었는데내가 냈던 아이디어 중 하나인 친환경 관련 웹 서비스가 채택 되었다. 사실 맨 처음에 냈던 디지털 갤러리 및 마켓 플레이스가 상당히 좋은 아이디어로 떠올랐고긍정적인 반응이 많아서 이 아이디어가 채택될듯 했었다 왜냐하면 이 아이디어는 개발하고자 하는 것이 명확했다자신의 작품을 알리고 싶은 아..

Next.js를 사용한 프로젝트에서 글 작성 페이지 구현하기 이번 포스트에서는 Next.js와 Zustand를 사용해 글 작성 페이지를 구현하는 방법을 기록하겠습니다물론 이 페이지의 경우 클라이언트 사이드 렌더링을 사용하기 때문에 리액트와 다를 건 없습니다...ㅎㅎ 참고로 글 작성 기능은 이미지 업로드, 상태 관리, 폼 데이터 처리 등의 요소를 포함하고 있습니다. 1. Zustand로 상태 관리하기 먼저, 작성 페이지에서는 사용자 정보와 날씨 정보를 포함한 상태를 Zustand를 통해 관리합니다여기서는 세 가지 상태를 사용해요useUserStore: 사용자 정보를 관리.useWeatherStore: 날씨 데이터를 관리.useWriteStore: 작성 폼에 필요한 데이터를 관리.const { user } ..

에러 사항  "Rendered more hooks than during the previous render" 오류는React에서 훅을 호출하는 규칙을 위반했을 때 발생한다고 함 규칙을 위반했다는 뜻은 조건부로 훅을 호출하거나, 반복문 안에서 훅을 호출할 때를 의미하는데 CommentItem 컴포넌트에서 useDeleteComment 훅을 사용하는 방법에 문제가 있었음 문제 원인 useCommentNickname 훅을 map 함수 내부에서 호출했기 때문에 에러가 발생했고React Hooks는 컴포넌트 함수의 최상위 레벨에서만 호출되어야 하며 그렇지 않으면 렌더링이 반복될 때 Hooks 호출 순서가 변하게 되어 에러가 발생함 문제 코드 {data.map((comment) => { const { data: ..

해시 태그 기능을 구현하는 방법을 차례대로 적어 보겠음  상태 선언 및 타입 지정 먼저 2가지 상태(useState)가 필요한데 category를 입력하는 Input창에 대한 상태(useState) categoryInput 와실제로 데이터를 보낼 때 담아야할 상태(useState) 는 formData로 선언했음 const [categoryInput, setCategoryInput] = useState(""); const [formData, setFormData] = useState>({ post_category: [], }  formData의 타입 지정은 따로 interface로 만들어서 지정했고 문자열 요소들로 구성된 배열 타입으로 지정했음export interface WriteTypes..

이미지 업로드  supabase를 사용하여 스토리지 기능으로 이미지를 업로드하는 방법 파일 업로드 창 안 보이게 하기우선 파일 업로드 창이 못 생겼으니 숨기고 나서 지정한 영역을 클릭하면 파일 업로더가 표시되도록 구현 파일 업로드 버튼을 테일윈드를 사용하여  hidden 속성으로 보이지 않게 하고,사용자가 이미지를 클릭하면 파일 선택 창이 열리도록 구현하였음이를 위해 useRef를 사용해서 클릭 이벤트로 파일 선택 창을 열 수 있게 함.const fileInputRef = useRef(null);// 미리보기 창 선택 시 이미지 업로더 선택const handlePreviewClick = () => { if (fileInputRef.current) { fileInputRef.current.click..