본문 바로가기

프로젝트27

최종 팀 프로젝트 Day5 벌써 4월 1일이 되었다. 어젯밤에 팀원들이랑 프로젝트 세팅을 끝내서 오늘은 개발을 할 수 있을 것이라고 생각했지만... 아직 정리되지 않은 내용들이 있었다. 기획 최종_최종_찐최종 느낌.. ㅋㅋㅋ 이번에는 진짜로 다 정리를 했고, 피그마에도 코멘트로 남겨두었다. 그리고 db 설계했던 대로 supabase에 테이블도 다 만들었다. 이번에 깃에 프로젝트랑 마일스톤도 제대로 사용하기로 해서 이 부분도 익혀야 한다. 음... 마일스톤 기한을 상세하게 정해서 올려야 하는데 하하 깃 때문에 작업이 두려워질 지경...ㅎ 하다 보면 익숙해지겠지... 2024. 4. 1.
최종 팀 프로젝트 Day4 오늘은 기능 분배를 하는 아주 중요한 날이였다. 사다리타기를 해서 순서대로 하고싶은 기능을 선점하도록 했다. 나는 마이페이지, 유저 상세 페이지, 메인페이지를 담당하게 됐다. 사실 다 재밌어보여서 어떤걸 할지 정말 고민스러웠다. 일단은 마이페이지에 다양한 컨텐츠가 많아서 여기서 최대한 기술적인 부분을 담아서 개발을 하면 될 것 같다. 얼마전 소통의 부재를 겪고 지금은 매끄럽게 진행되고 있다. 디자이너분도 아주 적극적으로 기획에 참여해주시기도 하고, 이제 개발만 잘 하면 될 것 같다. 떨리는 기능 분배 이후에는 api 설계, db 설계 수정을 했다. 최종적으로 db는 11개 정도가 되었다. 주말에는 팀원들이랑 프로젝트 셋팅하고 다음주부터는 개발을 시작하면 될 것 같다. 진짜 시작인 느낌. 화이팅. 2024. 3. 29.
최종 팀 프로젝트 Day3 오늘은 소통의 부재를 느낀 아주 중요한 날이었다. 팀에 문제가 있었지만, 결과적으로는 잘 해결이 되었고, 와이어프레임과 결정되지 않았던 기능들도 정리하여 디자이너님께 전달했다. 원래 api 설계까지 오늘 마무리를 하려 했지만 못했다. 내일은 api 설계, 와이어프레임/DB 검토, 기능별 역할 분배를 하면 될 것 같다. 그리고 우리가 만들려고 하는 관련 서비스 레퍼런스를 몇 가지 찾아야 하고, 프로젝트 셋업에 들어가면 될 것 같다. 앞으로도 소통에 더 힘을 써야 할 것 같다. 2024. 3. 28.
최종 팀 프로젝트 Day2 오늘은 어제 받은 피드백을 토대로 기획을 다시 다듬고, 변경된 기획에 대해 디자이너분과도 공유하는 시간을 가졌다. 그리고 기획을 토대로 사용할 db 설계를 마무리했다. 이번에 설계한 테이블을 보니 대략 10개 정도의 테이블이 만들어졌다. 그동안 짧게 진행했던 프로젝트에서 만들었던 테이블보다 수가 많아서 잘 파악하면서 개발해야 할 것 같다. 내일은 설계한 db를 다시 한번 검토하고, api 설계도 마무리할 예정이다. 최종 프로젝트이다 보니 이런저런 걱정이 많았는데 차근차근 마무리되고 다음 단계로 가는 것 같아서 다행이다. 남은 기간도 재밌게 보냈으면 좋겠다. 2024. 3. 27.
최종 팀 프로젝트 시작! 어제 7시부터 디자이너분과 최종 팀원들과 같이 팀 프로젝트가 시작됐다. 어제는 새로운 팀원들과 아이스브레이킹을 하고 오늘부터는 아이디어를 얘기하면서 제대로 기획에 돌입했다. 나는 범죄 관련 서비스를 만들고 싶었지만, 관련 api 가 없어서 포기했다. 여러 가지 아이디어가 있었는데 투표를 통해 음악 관련 서비스가 선정되었다. 우리 팀은 유저에게 나이, 성별, mbti 등의 성향을 기반으로 노래를 추천하고, 유저들끼리 서로 플레이리스트를 공유하는 서비스 + 메타버스를 구현하려고 했다. 프로젝트의 체크를 위해 튜터님께 조언을 구했는데, 여러 가지 피드백을 받았다. 피드백 프런트엔드 개발자로서 만들어봐야 하는 기술에 더 집중하라는 말씀을 들을 수 있었다. 전체 선택, 전체 해제 드래그 앤 드롭 이벤트 → 마이 .. 2024. 3. 26.
[react + typescript] typescript 를 하면서 지정하게 된 타입들 useRef useRef에 값과 같은 데이터가 아닌 input을 담을 때는 HTMLInputElement 타입을 지정해야한다. const titleRef = useRef(null); const contentRef = useRef(null); form submit form submit의 매개변수 event 를 사용하기 위해서는 e: React.FormEvent 타입을 지정해야 한다. const form = e.target as HTMLFormElement; todo 추가 완료 후 form reset 하기 위해 선언. titleRef.current?.focus(); titleRef 와 contentRef 의 초기값이 null 이기 때문에 옵셔널 체이닝을 사용하여 에러 방지. const titleRef = u.. 2024. 3. 7.
유튜브 api를 활용한 팀 프로젝트 📢 프로젝트 소개 프로젝트 명 : reactube 프로젝트 일정 : 2024.02.23 - 2024.02.28 깃 허브 링크 : 바로가기 배포 링크 : 바로가기 협업툴 : notion, slack, figma, github 기술스택 redux rtk react query supabase DB / auth youtube api resend api ✏️ 프로젝트 설명 유튜브 API를 활용한 리액트 추천 영상을 공유하는 커뮤니티 프로젝트입니다. 💻 프로젝트 구현 기능 로그인/회원가입 (supabase auth), 가입 확인 메일(resend api) 추천 영상 게시물 crud (supabase DB) 댓글 crud (supabase DB) 등록한 추천 영상 자체 검색 기능 (supabase DB) 유튜브 ap.. 2024. 2. 28.
로그인 기능 작업을 하면서 UI 작업 로그인과 회원가입은 login.jsx 에 구현되어 있으며, isJoin state로 회원가입 상태인지 관리하여, true 일 경우 회원 가입 상태로 보고 회원가입 폼이 나오도록 만들었다. [login.jsx] import React, { useRef, useState } from "react"; import { InputName, InputStyle, LoginWrap, PageTitle, BtnBlackBg, BtnBlackText, ColorError, BtnArea } from "./LoginStyles"; import api from "../../axios/api"; import { useDispatch } from "react-redux"; import { setIsLogin, set.. 2024. 2. 21.

티스토리툴바