프로젝트

GOYO-MV 완성된 배포링크 팀명이 GO!YO!가 된 이유가 있다. 내향적인 팀원들로 모인 탓인지 처음 팀에 모였을 때 아무 말이 없고 한 마디를 뱉는 게 너무 어려워 고요했기 때문이다. 그런 와중에 제가 '팀명이 고요가 뭐야.. 뭔가 좀 파이팅 넘치고 싶다'는 생

1번이 스타일 컴포넌트..? 순서가 잘못 되긴 했지만.. 나중에 순서 고치는걸로 하고..스타일 컴포넌트 사용해서 꾸미기 부분 중 잘 해결이 안나던 부분을 다른 수강생 분께 질문하여 알게 된 부분을 정리했다.: 카드를 선택하지 않았을 때 보이는 p태그의 "선택된 포켓몬이

포켓몬 도감 만들기 151종의 포켓몬 중 원하는 6마리 포켓몬을 선택하여 '나만의 포켓몬'을 골라라! https://my-pockemon-app.vercel.app/ 필수구현사항 1. 페이지 라우팅 구현하기 : react-router-dom을 이용해 홈 페이지

ex) 블로그, 커뮤니티, SNS 등페이지는 크게 Home / MyPage 로 나눴다.Home네비게이션바(로고, 프로필사진)카테고리(탭)피드보기도전과제 : 로그인했을 때 보일 팔로워∙팔로잉 MyPage탭을 내 게시물 / 좋아요 누른 게시물 로 나눠 보여주기로 했다.도전

한 번도 지금까지의 프로젝트를 직접 배포해 본 적이 없었는데 같이 공부한 수강생 분들이 배포까지 해보라며 github로 배포하는 것 보다 Vercel이 더 쉽고 간편하다고 이걸로 배포 해보라고 추천해주셨다.서버리스 클라우드 플랫폼으로, 자체 서버를 구성하지 않아도 플랫

메인페이지에서 피드 중 게시물 하나를 클릭했을 때 나타나는 자세히보기와 같은 프리뷰 모달창의 구성이다.FeedWrapper / ProfileContainer / Container / ImgContainer / FeedImage / ContentContainer / Co

로그인 했을 때 보여지는 '작성' 버튼을 클릭하면 게시물 작성 폼이 모달로 나타난다. 이 모달에서 게시물을 작성하고, 업로드 버튼을 누르면 메인페이지 피드에 보여질 수 있도록 supabase에 데이터를 보내는 부분이 내가 맡은 역할이다. supabase.from('f

README 내용 중 일부 내용을 가져왔다.주제 : 워케이션(Work + vacation의 합성어로, 일을 하면서 휴가를 동시에 즐기는 근무 형태)내용 : “여기가 일하면서 쉬거나 놀기 좋더라~” 자랑과 공유를 동시에 할 수 있고, ‘좋아요’ 버튼을 눌러 놓은 게시물만

👊 새로고침하면 로그인 페이지로 가는 현상 문제발생 로그인은 되어있어서 위에 레이아웃 부분은 제대로 프로필/테스트/결과보기/로그아웃 이 보이는데 새로고침만 하면 아랫부분이 로그인페이지로 넘어갔다. 원인 추론 ProtectedRoute 부분이 Profile페이지 바깥에

json-server를 사용 시, vercel로 배포하게 되면 리액트 앱이 json-server도 함께 배포되는 것이 아니다. json-server는 별도로 배포 후에 해당 링크를 프로젝트 내부에 기존에 적혀있던 http://loacalhost:3000를 바꿔

지도 API / Youtube API / 설문조사 중 최소 택1하여 해당 내용을 지원하는 웹사이트 만들기 1. 주제 선정 24시 카페만 따로 모아 보여주는 곳이 없어 불편하다는 의견을 제시한 팀원의 말씀을 시작으로 카페를 분류해서 정보를 공유하는 커뮤니티를 만들면

: postId를 작성되어진 article 하나의 id인 'ceda'로 고정시켰다.useMutation 훅을 사용하여 addComment 함수 정의'댓글 추가' 버튼에 onClick으로 실행시킬 handleAddComment 함수 정의useQuery 훅을 사용하여 댓글

: 기존에 작성되어 있던 articles 배열 속 구성된 객체내용에 'isBookmarked'라는 내용을 Boolean값으로 주는 것을 추가했다.axios.get으로 /articles?isBookmarked=true인 부분만 내용을 불러올 수 있다.useQuery 훅을

주말+추석 연휴 5일동안 각자 맡은부분의 기능 80% 구현이 숙제였어서 나름 다 했다고 생각했는데, 팀원 5명 PR 후 merge까지 했더니 이제부터 시작이라는 것을 깨닫고... 마음은 급한데 git 충돌과.. 코드 작성해야하는 부분의 이해도도 떨어지고..😭😭 👊 트러블슈팅 1. 'embed' 사용하여 db.json 내용 조인 유저가 북마크한 게시글...

팀 프로젝트의 방향성이 바뀌었다. 기존에는 사용자가 카페의 정보를 공유하는 커뮤니티라는 목적이 있었다. 그러나 관리자가 카페의 정보를 제공하는 페이지도 추가하기로 했다. 정보제공이 주된 방향이고 그 외 사용자들의 정보 공유는 자유롭게 할 수 있도록 공간을 제공한 프로젝

1) 기존 : 수정버튼을 클릭하면 기존에 작성된 댓글 오른쪽에 textarea 박스가 뜨고 그 안에 변경 후 보여지고 싶은 댓글을 작성하는 방식이었다.2) 수정 후 : 수정버튼을 클릭하면 기존에 작성된 댓글 부분과 같은 위치에 textarea 박스가 뜨고 그 안에 작

1) 초기세팅2) 댓글 CRUD 기능구현3) 댓글기능 리팩토링4) 북마크 목록페이지5) 사용자 정보 불러오기(북마크페이지)6) 북마크목록 리팩토링7점 / 완성된 웹페이지 결과물은 각자 맡은 역할을 충실히 하여 완성도 높게 만들어진 것 같다.프로젝트 초반 잦은 회의 누락

서버액션을 만들때는 문제가 없었는데, 이미지 정보를 불러올 때 버전정보를 불러오는데 버전정보 뿐만 아니라 BASE_URL도 가져와야해서 불편함이 있었다.기존에 src>app>api>api.ts파일에 export const BASE_URL = "Data Dragon AP

트러블슈팅 부분만 따로 보기프로젝트 소개(2. 개발기간(3. 프로젝트 파일 구조(4. 주요기능(5. 기술스택(6. Trouble Shooting(👨‍🏫주제 : 리그 오브 레전드(LoL)의 챔피언, 아이템, 무료 챔피언 로테이션 정보를 보여주는 웹 애플리케이션 만들기

스마트폰의 시대에서 네이티브 앱의 사용이 많아지면서, 웹 페이지 뿐만 아니라 네이티브 앱까지 같이 사용할 수 있도록 만든 웹앱.다양한 앱스토어에 출시하기 위해 별도의 프로세스를 거치지 않아도 된다.일반 웹 기술을 활용해서 만들 수 있다.일반적으로 개발비용이 더 저렴하다

컴포넌트를 개별 정돈하는데 굉장히 편리하다고 함..재사용성을 고려한 디자인, 개발이 가능테스트 하기 용이불필요한 작업을 줄임안정적으로 검증된 코드를 사용가능캡슐화를 통해 테스트가 쉬워짐개발자와 소통이 쉬워짐디자인 변경 시 쉽게 수정 가능유저에게 일관된 경험 제공컴포넌트

언어수업에 대해 설명하는 이미지(최대 3장)를 캐러셀로 보여줌.언어부분 클릭하면 드롭다운으로 프로젝트에서 준비한 모든 언어를 보여줌.왼쪽(1사용언어)은 먼저 시작할 언어를 선택하고, 오른쪽(2사용언어)은 10분 뒤 수업할 언어를 선택.‘녹음 토글’은 동의하는지를 온오프

24.10.25(금)오늘은 언어수업 화상페이지로 넘어가기 전에 매칭을 하기 위해 supabase 테이블을 만드는 작업을 하려고 realtime에 대한 공부하는 것을 목표로 했다.그런데, (1) 다른 팀원의 어드민 페이지는 루트레이아웃을 적용하지 않기로 해서 이부분을 같

네이버 개발자센터애플리케이션 등록 -> API Key를 줌.(참고 블로그)호출한 데이터를 보니 내용이 우리 프로젝트에서 필요한 내용이 아닌 것을 확인함.한국어기초사전 오픈 APIjson 형식은 없고 xml형식으로만 데이터를 줌.xml로 호출받아 json으로 바꿔볼까도

기존에 맡았던 오픈AI로 챌린지 문제 만들기는 문법 만드는 것과 로직이 같아 한 사람이 해도 될 것 같아, 역할 재분배를 받았다. 나는 오픈AI로 언어수업을 통해 받은 텍스트를 사용자의 언어로 코칭해주는 기능을 맡게 되었다.어제 API 키 발급과 충전까지는 해놓은지라

페이지 구조가 아래와 같이 모두 분리되어있다.챌린지>단어문제챌린지>단어오답노트챌린지>문법문제챌린지>문법오답노트문제페이지는 AI를 통해 생성하고 questions 테이블(supabase)에 넣어주고,오답노트 페이지는 questions 테이블과 user_answer 테이블

유저Id 값 불러오는 로직을 처음엔 supabase.from(”user_info”)였으나, supabase.auth.getUser();로 변경함. 클라이언트 컴포넌트에서 서버컴포넌트로 변경함.⇒ 탠스택쿼리 바로 적용해서 코드 작성했는데 바뀌니까 시련의 시간;;;🤯 (

기존에 이런 형태의 페이지가 완전히 바뀌었다.여기서, 1) 위에는 녹음 및 수업방식에 대한 설명을 2-3장의 사진으로 주시면 캐러셀로 나타내고,2) 중간에는 사용언어의 순서를 드롭다운 방식으로 지정을 하고,3) 녹음 동의 여부를 나타내는 토글이 있었다.4) '시작하기'

📌 로그인 하지 않았을 때 = auth 정보가 없을 때 홈화면에서 로그인 바텀시트를 나타내기 1. 바텀시트는 모달인가? 기능 구현시작 전에 이런 궁금증이 생겼다. 검색해보니 위의 사진은 바텀시트의 구성이며, 아래는 바텀시트의 유형이 Modal일수도, Non-Modal

기존에 다른 팀원이 슬라이더에 문제 생성하는 기능을 넣어두셨다. 여기에 내 기능을 추가하면 됐다.src>app>(mobile)>challenge>page.tsx문제를 다 풀고 챌린지 결과 페이지에서 오답노트 페이지로 가면 추가된 틀린 문제 리스트에 반영되지 않고, 새로

중간발표를 이틀 남기고 나는 기능 구현을 끝냈지만, 다 끝내지 못한 팀원들도 멈추고 바로 스타일링 작업에 들어갔다. 디자이너분들이 작업해주신 피그마-디자인시스템을 tailwind.config.ts파일에 세팅을 먼저 끝내고 시작했어야 좀 더 반복 작업을 덜 했을 것 같다

헤더와 푸터가 필요하지 않은 페이지에도 공통으로 적용되는 문제(모바일페이지) 공통레이아웃에 헤더와 푸터가 공통으로 주어진 상태이기 때문조건부렌더링 방법으로, 헤더와 푸터를 숨기는 hideHeaderFooter라는 변수를 만들어 '/loginInfo'로 시작하는 페이지는

최종 프로젝트 중간발표 제출시간은 오전 10시중간발표 시간은 오후 2시제출을 끝내고 발표시간까지 남은 시간 동안나는 발표자의 발표자료 만드는 것을 도와드리면서, 나머지 팀원들의 작업 PR(Pull Request)을 코드리뷰 및 승인하는 업무를 맡아 전체적인 페이지 흐름

캘린더에서 날짜 클릭 시 오늘이 아닌 어제의 데이터가 나옴 ⇒ 오늘 날짜와 비겨콘솔 찍어서 확인해본 결과 콘솔이 20개 이상 찍히면서 비교하는 날짜가 점점 하루씩 늘어나다 월말이 되면 콘솔 더이상 안 찍힘 ⇒ 원인 파악 X알림기능이 모바일에서 작동이 웹과 다른 작동이

(왼쪽: 수정 전 / 오른쪽: 수정 후)디자이너님께서 만들어주신 디자인 시안을 보면 틀린 단어문제가 영어로 나타나고, 품사와 뜻이 바로 옆에 나타난다.{question?.content} 부분이 기존에는 '{question?.answer}'였던 것이다.{question

문장을 음성으로 들려주는 것이 아닌 단어이기 때문에 문맥이나 감정의 영향을 받지 않는 부분이라 생각했으며, 이미 다른 페이지에서 OpenAI API를 활용하고 있기 때문에 비용적인 측면에서도 다른 서비스와 비교했을 때 부담되지 않기에 선택하였다.다른 TTS 기능이