팀프로젝트

스파르타 부트캠프를 수강하고 첫번째 프로젝트인 팀원 소개하기 페이지 만들기를 시작했다.역할 분담에서 와이어프레임과 상세페이지 단을 맡게 되었는데 pigma툴로 와이어프레임을 만들고 싶어 도전해보았다.팀원들과 회의에서 필요한 페이지와 나열 방법 기능에 대해 이야기 하였고

header의 메뉴를 아이콘을 눌렀을 때가 아닌 사용자의 편리성과 실용성, 가독성을 생각하여 다시 메뉴로 복귀메뉴에 커서를 올렸을 때 효과를 주어 가독성을 키우기(css디자인 사용(::before))상단 스크롤 프로그래스바 구현전체적으로 상세 페이지, 메인 페이지 cs

⭐️프로젝트명 : 누구인가? > 프로젝트기간 : 7/15~7/18 최종배포 : 7/19 배포된 링크 : https://shyunis.github.io/sparta_first/index.html#member-desc 참여인원 : 6명 🌼 날짜별 세부 진행사항 > 첫

피드백 받았던 header + footer를 와이어프레임 디자인에 추가하고 본격적으로 웹사이트 만들기를 시작했다.와이어프레임 상세페이지와이어프레임 메인페이지header, footer 영역과 상세페이지의 자기소개칸을 만들었다.grid활용하여 자기소개란 배치링크들 연결상세

fetch를 사용한 컴포넌트화원하는 위치로 페이지이동 & 스크롤 이동마우스 hover 시 class add&removegrid를 사용한 카드만들기 + slider효과 주기nav 메뉴바 icon눌러서 보이게 한 후 화면 상단 오른쪽 위치 고정시키기css에서 scroll바

내가 만들었던 개인프로젝트를 기반으로 상세페이지, 마이페이지 여러가지 기능들을 추가하기로 되었다. 회의를 진행하여 새롭게 만들 기능을 정하고 각자 기능들을 분배했다.javascript fetch url baseurl로 엮어서 재사용성 증가시키기코드컨벤션 수정즐겨찾기(

메인페이지 nav바 추가상세페이지 댓글 (등록,수정,삭제)프로젝트를 빌드업 하면서 페이지들이 늘어났고 로그인, 회원가입, 마이페이지가 추가로 생기게 되어 깔끔하게 정리할 수 있는 곳이 필요했다..!햄버거 아이콘을 눌렀을 때 나타나고 X표시하면 닫을 수 있도록 자바스크

상세페이지 댓글 수정 기능 prompt창에서 모달창을 띄우는 것으로 변경(팀원분이 댓글 수정을 prompt창을 띄워서 하는 것이 아닌 새로운 모달창을 띄워서 만드는 것이 어떨까 하는 제안을 해주셨고 좋은 제안이라고 생각이 들어 수정하게 되었다.먼저 모달 창을 띄우기 위

팀원들 함께 노력해 만든 영화커뮤니티 페이지 moview프로젝트가 끝이 났다.이번에 팀장으로서 최종발표까지 맡게 되었으며 git세팅 작업, dev 브랜치에서 main브랜치로 옮겨 배포하고 시연하며 오류를 수정해나가는 일을 맡았다.git 배포주소 : https:

지금까지 배웠던 React hook, react-route-dom 들을 이용하여 뉴스피드 사이트를 만들게 되었다. 저번에 이어 팀장을 맡게되었고 프로젝트 관리, 일정 관리 등 신경써야 할 부분들을 놓치지 않고 챙기기 위해 많이 노력할 것이다.팀원들과 함께 주제를 정하기

나는 이번에 프로젝트, 깃 초기세팅을 하고 supabase를 이용해 회원가입, 로그인, 로그아웃을 하고 해당 사이트들의 디자인을 맡았다. 회원가입할 때의 정보를 auth 에서 public으로 연결해 정보들을 사용할 수 있도록 연결해주었다.굉장히 시간을 많이 소비하고 헤

대부분의 사이트에서는 사용자들의 많은 유입과 편리를 위해 1분회원가입, 소셜로그인 기능을 제공한다...!오늘은 supabase를 사용하여 소셜로그인 기능 개발을 해보았다로그인 화면에서도 회원가입 창에서도 공통적으로 똑같은 UI가 들어갈 것 같아 SocialSign.js

기본 로그인 회원가입 구현이 끝난 뒤 로그인 여부에 따른 사이트별 접근성을 부여하였다. 마이페이지, 레시피작성은 로그인을 한 대상자들에게만 접근성을 주었다.이미 context를 사용해 전역에서 로그인 상태를 관리하고 있었기에 여기에서 처음 페이지를 로딩할 때 뿐만 아

프로젝트 명 : 공연 공유 페이지소개한 줄 정리 : 공연을 공유하고 검색할 수 있는 페이지내용 : 메인페이지 - 현재 상영중인 공연(일주일), 내 위치 주변 공연장 카테고리 - 장소로 검색하기, 장르로 검색하기, 검색바 (+시간되면 날짜 포함)

: 상세페이지 정보는 KOPIS의 개발 PDF를 참고하여 상세데이터 API를 연결하였다. URL뒤에 개별 id를 붙여서 가져오는 방법으로 작성하였다. XML데이터를 json으로 변환해주고 data정보는 zustand를 사용해 저장해주었다. axios를 사용하여 api를

상세페이지의 지도를 연결하고 맨 처음 zustand를 사용해서 api를 연결하고 데이터를 저장했다. tanstackQuery로 댓글 작성 기능을 만들고 zustand로 데이터를 저장할 필요없이 tanstackQuery로 관리하는 것이 더 좋을 것 같다는 피드백을 받았다

메인페이지 스크린샷 2024-09-20 오후 4 45 08상세페이지 커뮤니티 페이지카테고리 페이지 내일배움캠프 5진스프로젝트명   :  커튼콜진행 기간  :   24.09.11 ~ 24.09.23프로젝트 세팅 : yarn create vite --temp

팀원들과 함께 상세페이지 빌드업을 하고있다.내가 맡은 부분은 상세페이지쪽에서는 댓글작성과 비슷한 장르 fetch로 불러오는 부분이었다.삭제랑 비슷한 과정을 거쳐서 만들었지만 수정을 하기 위해 다시 입력을 받고 입력 받은 것을 대체 시켜주는 과정을 구현하고 생각하는 것이

☘️ 프로젝트명 : Pokétify ☘️ 프로젝트 개요 : 음악과 관련된 서비스를 제공하며 자신만의 플레이리스트를 만들어 커뮤니티페이지에서 유저들과 공유할 수 있는 페이지 ☘️ 개발 예정 기능 앨범명, 가수명 등 키워드로 관련된 곡 검색가능 곡을 검색하여 플레이리스트에

저번시간 작성했던 accessToken은 개인플레이리스트까지 접근할 수 없는 token이라 새로 accessToken을 구하는 로직을 작성했다.supabase session가져오기session에 있는 provider_token 을 저장하여 accessToken에 넣어주

지금 개발이 남아있는 기능은 검색바에서 실시간으로 곡제목, 아티스트명으로 곡을 검색하고 선택되어있는 내 플레이리스트에 항목을 추가하는 것이다.먼저 spoitify developer에서 제공해주는 항목검색 api를 호출하는 함수를 만들어주었다.params(type)에서

음악과 관련된 서비스를 제공.사용자는 앨범명, 가수명 등의 키워드로 관련된 곡을 검색할 수 있으며, 자신의 취향이 담긴 플레이리스트에 곡을 추가하고 삭제하며 재생할 수 있습니다. 또한, 커뮤니티 사이트에서 해당 링크에 대한 댓글을 남기며 소통할 수 있습니다.플레이리스트

🌟 프로젝트 최종마무리 👨‍🏫 프로젝트 소개 유저들이 공유한 요리 레시피 기록을 한 눈에 볼 수 있는 뉴스피드 사이트 🚩 프로젝트 개요 프로젝트명 : Yummy Yummy! 진행 기간 : 24.08.28 ~ 24.09.04 👨‍👩‍👧‍👦 팀

최종프로젝트를 시작하게되었다.약 1달 조금 넘는 기간동안 진행하게 된다.이전부터 진행해보고 싶은 프로젝트가 있었다.주변에 점점 결혼하시는 분들이 많아지면서 모바일 청첩장을 받아보면서 직접 구현을 해보고 싶다라는 생각이 많이 들었다. 그리고 일생의 가장 중요한 경조사 중

팀원들과 함께 페이지별로 들어갈 ERD 를 작성했다.크게 리뷰페이지, 참석여부, 템플릿 선택페이지, 방명록 을 나누었다. 대략적으로 템플릿 꾸미는 페이지에 대한 논의를 디자이너님과 진행한 후 구체적인 디자인이 그려지는 동안 나머지 팀원들은 각자 우선적으로 개발할 수 있

🌟 구현 계획 useInfiniteQuery을 이용해 구현 ☘️ 선정이유 useInfiniteQuery는 캐싱, 동기화, refetch 등의 복잡한 네트워크 로직을 처리하며, 페이지 파라미터를 자동으로 처리하고, 'fetchNextPage' 함수를 호출해 다음 페이지 데이터를 가져올 수 있다. ☘️ useInfiniteQuery 훅 사용 인터페이스...

★ React Hook From 우리는 사용자의 정보를 받아 실시간으로 미리보기를 제공하기로 하였다. reacthookform을 사용하여 구현하기로 하였다. ♧ React Hook Form 사용이유 간결하고 직관적인 코드의 작성 입력값의 변화에 따라 전체 폼을 다시

지난번 시간에 이어 사용자가 맨 처음 글꼴을 선택하였을 때 전체 미리보기에 글꼴을 적용시켜 커스텀할 수 있도록 설정해주었다.이 기능을 구현하기 위해 ReactHookForm과 useState, useEffect를 사용하였다.커스텀을 진행하는 create > card >

청첩장 대표사진을 첨부하고 소개말을 쓰는 부분에서 사용자가 자유롭게 글꼴, 텍스트 굵기 등을 설정하면 좋을 것 같다고 이야기를 나누었다.텍스트에디터를 사용하여 꾸미기 요소를 처리하고 사용자가 꾸미기를 완료한 요소들을 DB에 저장하여 렌더링 해주는 것까지 기록해보려고 한

Typescript란 Javascript의 단점을 보완하기 위해 만들어진 정적 타입 언어이다.개발 단계에서 발생할 수 있는 에러들을 사전에 방지한다.개발도구에 (컴파일러, IDE) 개발자가 의도한 변수나 함수 등의 목적을 명확하게 전달한다.전달한 정보를 기반으로 코드

모바일 청첩장 커스텀 서비스를 개발하면서 실제 이 서비스를 사용할 사용자들이 어떤 점을 중요하게 여길 지 사용법적으로도 기획적 측면으로도 생각해야할 부분이 많았다.비슷한 사이트를 벤치마킹하고 조사하는 시간을 가지며 각자 좋았던 기능과 아쉬웠던 기능에 대해 이야기를 하며

프로젝트에 반복해서 사용되는 토글이 많아 커스텀 훅을 만들어 사용하기로 하였다.먼저 커스텀 훅임을 명시적으로 확인하기 쉽도록 use를 붙여 useToggle.ts파일을 만들어주었다.useToogle.ts사용

모바일 청첩장이다보니 많은 사진들이 들어간다. 처음에는 base64 형식으로 이미지를 넣어주었는데 웨딩 사진인만큼 용량이 클 것 같아 스토리지에 사진을 저장 후 URL을 넣어주기로 하였다.처음로직 supabase 업로드변경

링크 클립보드에 복사하기

맨 처음 작업했던 후기 보여주는 사이트를 무한스크롤로 구현했는데 그 때 > useInfinityQuery와 Scroll event로 무한스크롤을 구현했었다.다른 팀원분이 작업하신 캐러셀 부분애서 후기를 불러오고 페이지를 연동하였을 때 계속해서 오류가 나 오류를 해결하면

모바일 청첩장인 만큼 누군가에게 꼭 공유를 해야만 한다.원래는 클립보드 주소로만 복사하는 기능을 구현했었는데 대부분 모바일 청첩장을 카카오톡이나 문자매체등을 통해서 보내기 때문에 바로 연결하여 보낼 수 있도록 하면 좋을 것 같아 Web_share_api를 사용해보았다.

갤러리에서 사진이 보이도록 구현을 한 후 , 사용자가 사진의 위치를 변경하고 사진을 빼고 다시 추가하고 싶을 수 있다고 생각했다.그래서 사진을 위치를 변경할 때 드래그로 가능하게 하면 좋을 것 같다고 생각해 React-DnD로 이미지를 업로드 하기 위해 이미지를 받고

지금까지 기본으로 필요했던 필수 기능들을 모두 구현하고 맡았던 페이지의 디자인들을 구현하였다.제작 메인페이지 (갤러리)제작 메인화면페이지(메인사진, 폰트선택)제작 인사말페이지마이페이지quill 텍스트에디터 사용한 부분의 align 을 적용시키기 위해 global.css

처음 사이트를 만들었을 때에는 글꼴종류 (폰트)만 고려하고 글꼴의 크기는 고려하지 않았었다. 하지만 실제로 폰트들을 적용시켜본 후 폰트들마다 가지고 있는 특성이 다르기 때문에 같은 폰트의 크기더라도 다른 사이즈로 보여 가독성과 디자인에 영향을 많이 끼쳤다.그래서 글꼴만

사용자 행동 데이터를 받아 프로젝트를 개선하기 위해 GA를 사용하려고 한다. 나는 현재 Next.js 14버전을 사용을 하고 있기 때문에 Next.js 14버전 공식 Docs에서 권장하고 있는 next/third-parties 를 사용한 구글 애널리틱스 설정을 하려고

마이페이지부분의 와이어 프레임 & 최종 디자인이 확정되면서 처음 제작했던 마이페이지와는 많은 변동이 생겼다. 청첩장이 기획단계에서 유저당 1개씩만 만들 수 있는 것으로 변경되며 청첩장이 있을 때는 미리보기가 가능하고 수정할 수 있고 공유를 할 수 있는 기능이 추가되었다

내가 맡았던 마이페이지 부분에서 청첩장 제작이 얼마까지 완료되었는지 사용작에게 제공해주는 것이 유저가 계속해서 진행하는데에 도움이 될 것 같아 디자인이 변경이 되었다. ☘️ 1. 진척률 구현계획 원형프로그래스바가 채워지는 형태로 진행을 하고 팀원들과 완성의 depth

모바일 퍼스트로 작업을 한 후 데스크탑 시안을 반영하고 있다.내가 맡았던 마이페이지부분을 먼저 반영하려고 한다.tailwind css + Next.js 14 + typescripttailwind.config.ts에서 mobile과 desktop일 때 좀 더 편리하게 구

사용자들이 작성한 후기들을 볼 수 있는 후기조회페이지를 만든 후 다른 유저들이 후기에 도움돼요(좋아요)를 달 수 있는 기능을 만들려고 한다.좋아요가 눌러진 정보를 supabase에 저장하여 나중에 좋아요 순으로 정렬하는 등 사용하기 위해 추가로 table을 만들어주었다

도움돼요 기능을 구현한 뒤 도움돼요 횟수를 카운트하여 표시해주는 것이 필요하다고 생각이 되었다.도움돼요 기능은 supabase reviews table의 likes column에 사용자 아이디를 뒤에 추가하는 방식으로 구현하였다. 도움돼요 횟수를 카운트하여 실시간 반영

팀원들과 이야기를 나누던 중 설계적인 부분에서 초기에 후순위로 좋아요를 만들어 둔 후 바쁘게 달려오다보니 기획적인 이야기를 많이 하지 못하고 일을 진행했다. 그렇게 되면서 처음에는 supabase Table을 reviews 테이블과 likeReview테이블을 만들어 후

♥︎ 인사 안녕하세요! 드림카드를 제작한 도비 팀의 개발자 정소현입니다. 서비스의 사용성을 개선하기위해 사용 후 의견을 듣고자 합니다. 🌟 프로젝트 설명 드림카드는 모바일 청첩장 제작 서비스입니다. 프리셋과 다양한 옵션들을 직접 골라 나만의 청첩장을 제작하고 공

내가 맡은 부분이었던 메인 사진 저장과 갤러리 사진 저장하는 로직은 BASE64저장 => supabase storage저장 public Url을 받아와 useFormContext()에 저장하는 방법으로 진행되고 있었다.사진을 BASE 64저장하는 방식에서 스토리지로 옮

나는 드림카드라는 서비스를 개발하며 후기페이지에서 무한스크롤이라는 기능을 개발하게 되었다. 이 기능을 개발했던 구현방법, 무한스크롤 기능을 스크롤 이벤드에서 Intersection Observer API를 이용하여 리펙토링 했던 무한스크롤에 모든것에 대하여 이야기해보려

lighthouse 측정 결과를 통해 메인 지도 이미지 LCP가 지연돼 초기 렌더링이 느리다는 문제를 발견했습니다.Next.js의 <Image /> 는 최적화된 이미지 렌더링 기능을 제공하지만 원본 이미지 파일이 큰 경우 로딩 시간이 길어질 수 있는 문제가 있었습