cha123hein 님의 블로그

수파베이스로의 연결이제 모든 기능을 구현하였으니 자료들을 수파베이스로 연결하기만 하면 되었는데 작성버튼을 클릭을 하였을 때 자료가 가야하기 때문에우선 버튼을 만들었다. navigate(-1)}>취소 등록 취소버튼은 작성을 하고 싶지않을 때 바로 전 화면으로 돌아가게 한 것이고, 등록버튼이 클릭을 하였을 때 수파베이스로 자료가 보내지도록 하였다. const handleSubmit = async () => { const fields = [ { value: postTitle, message: "제목을 입력해 주세요." },..

1. 선택창만들기(계절)계절에 따라 메인메이지의 노래들이 정렬이 되도록 설계를 해야하는데 입력을 하다가 오타가 나거나 여러 계절을 적었을 때에는 그 계절에 해당되지 않을 수도 있겠다는 생각이 들었다.일정한 값을 supabase에 전달하게 하기 위해서 선택창을 사용하기로했다.위와 같이 선택창을 사용하면 supabase에 일정한 값으로 들어갈 것 같았다.아래와 같이 select 태그를 사용하여 코드를 작성하였다. const options = [ { value: "", label: "노래에 어울리는 계절을 선택해주세요.", disabled: true }, //disabled를 통해 선택이 안되도록 한다. { value: "전체", label: "모든 계절" }, ..

오늘은 유튜브 이후의 진행상황은 잠시 미뤄두고 프로젝트를 진행하면서 생겼던 트러블 슈팅에 대해서 이야기 하고자한다.사건의 발단은 해시테그 부분이였다.  해시태그 : {hashArr.map((tag, index) => ( handleTagClick(tag)}> #{tag} ))..

1. 기본틀 만들기페이지를 만들기 위해서 우선 기본적인 형태부터 만들었다.1. 제목2. 유튜브링크3. 유튜브 아이프레임4. 게시글 내용5. 가수이름6. 계절(선택창)7. 해시테그8. 게시글 입력 버튼이 들어가야한다. 기본적으로 우선 input 창이 들어가야하는 제목, 유튜브링크, 가수이름, 해시테그에는 아래와 같은 코드를 기본적으로 작성하여 목록 : input 창이 뜨도록 하였다.(게시글 내용은 input대신 textarea를 사용한다.)placeholder은 input 창안에 뜨는 글이다.(input 입력 시 사라진다.)//useState를 사용하여 미리 변수값들을 정해놓는다.import React, { useState } from "react";const [..., set...] = useState(..

이번 팀 프로젝트의 주제는 뉴스피드를 제작하는 것이다.뉴스피드는 '내 게시물을 포함한 모든 게시물을 볼 수 있는 공간' 인데 즉 현재 보고 있는 티스토리도 여기에 해당한다고 볼 수 있다.어떤 주제로 진행할지 여러 의견이 나왔다. ex) 맛집공유, 여행, 영화 등 아무래도 흔히 접할 수 있는 취미에 대한 아이디어가 나왔는데그 중 노래를 공유할 수 있는 뉴스피드를 만들기로 의견이 모아졌다.(아래 그림들은 과제명을 생각하며 만든 로고이다.)그 후 필수로 구현해야하는 기능과 개인적으로 하길 원했던 기능들을 적어두고 시간 상 가능하지 못할 것 같은 부분은 도전과제로 남겨두었다. 페이지를 제작하는데 메인이 될 색들을 선정하였고,어떤 페이지를 제작할지부터 고민을 하였는데, 메인페이지 / 상세페이지 / 게시글제작페이지..