봉보로봉봉

⭐️모두에게 롤링페이퍼 쓰러 가기 JUSTCODE 6기 롤링페이퍼 JUSTCODE 6기 롤링페이퍼 토이 프로젝트입니다. justcode-6th-rolling-paper.vercel.app 🤔 프로젝트를 시작하게 된 이유 수료식을 앞두고 동기들과 이야기를 하다가 롤링페이퍼를 하는 건 어떻냐는 이야기가 나왔다. 프로젝트를 또 만들기에는 시간이 모자라다고 생각해서 있던 서비스를 이용하기로 했다. 구글에 롤링페이퍼로 검색했을 때 제일 상단에 나오는 서비스를 이용해보려고 했는데 내가 원하던 방식이 아니었다. 롤링페이퍼를 서로 써주려면 동기들 모두가 서비스를 가입하고 자신의 보드를 만들어야 했다. 이렇게 되면 모두들 롤링페이퍼 작성에 참가하지 않을 것 같아서 시간이 촉박하지만 일단 만들어보기로 했다. 🛠 프로젝트 ..

저번에 만들었던 토이 프로젝트에 페이지를 더 추가하고 버그를 고쳤다! 반응형 깨지는 부분 수정 message 페이지 추가 HashRouter로 라우터 변경 저번에는 빨리 배포하느라고 반응형을 추가했음에도 특정 디스플레이에서 깨짐이 있었다. (내 폰... 아이폰 mini 12.. 🥲) 그래서 반응형을 수정했다. 링크를 공유했을 때 썸네일도 뜨도록 index.html에 meta태그도 추가했다. 작성한 메세지를 볼 수 있도록 하는 message 페이지를 추가했다. 파이어베이스에 추가했던 데이터들을 받아와서 작성자의 이름과 메세지들을 보여주는 페이지이다. 메세지가 있는데 작성자의 이름이 빈 문자열이라면 익명이라는 이름으로 변경하여 출력했고, 메세지가 없는 사람들은 보이지 않도록 했다. 지금은 내 친구들의 메세지..

🛠 사용 기술 및 기간 22.10.20 - 22.10.21 react react-dom react-router-dom react-scripts dotenv firebase styled-components styled-reset react-icons js-confetti 🏗 프로젝트 구조 public : 파비콘과 이미지 파일 폴더 src : index.html과 package.json 등 중요 파일 폴더 src/pages/home : 랜딩 페이지와 메인 페이지 파일 폴더 src/pages/form : 설문 페이지와 설문 제출 완료 페이지 파일 폴더 src/styles : 전역 스타일 파일 폴더 👉 프로젝트 실행 방법 터미널에서 프로젝트를 클론 받습니다. git clone https://github.com/..

✅ 과제 해당 월에 예약 가능한 목록을 보여줍니다. 예약자, 이름, 예약 시간, 예약 종류를 이용하여 예약합니다. 중복 예약은 불가합니다. 노쇼 예약자는 예약이 불가합니다. 예약 번호나 예약자 이름으로 예약 목록 조회가 가능해야 합니다. 🗓 진행 기간 기간 : 2022.10.15 ~ 2022.10.19 🔗 레포 주소 및 배포 링크 깃헙 레포 배포 링크 🏗 프로젝트 파일 구조 public/data: Mock 데이터 폴더 src/pages/reservation: 예약 페이지 파일 폴더 src/pages/inquiry: 예약 조회 페이지 파일 폴더 src/utils: 함수 파일 폴더 src/styles: 전역 스타일 폴더 🛠 적용 기술 JavaScript React.js React 관련 라이브러리 react-..

✅ 과제 1. 오디오 녹음 화면 오디오 녹음이 가능하다. 오디오 녹음 중일 때에는, 녹음 중 UI가 표시된다. 녹음 중에는 녹음이 되고 있는 시간을 표기한다. input 값을 받아 최대 녹음 가능 시간을 컨트롤 할 수 있어야 한다. 오디오 녹음 완료 후에는 firebase firestorage를 이용하여 음성 파일을 저장한다. (선택 구현 사항) 2. 음성 재생 화면 오디오 재생이 가능하다. 오디오가 재생된 시간을 표시한다. 오디오 파일을 다운로드 할 수 있다. 오디오 파형을 표시할 수 있다. (선택 구현 사항) 🗓 진행 기간 및 팀원 - 2022.10.11 ~ 2022.10.13(3일) - 프론트엔드 3명 🛠 적용 기술 JavaScript React.js react-router-dom styled-co..

✅ 과제 1. 첫번째 페이지 목데이터를 이용해서 센서 정보가 나열된다. 데이터가 오름차순, 내림차순 정렬이 가능하며 필터 기능도 가능하도록 구현한다. hover효과를 구현하고, 센서데이터의 배터리가 20퍼센트 아래면 빨간색으로 표시한다. 반응형으로 구현한다. 2. 두번째 페이지 API를 통해 받아온 데이터로 온도, 습도, 기압 세가지 그래프를 표시한다. 날짜를 선택하여 특정 날짜의 데이터(24시간)을 확인할 수 있다. x축 확대/축소 기능을 구현한다. 데이터를 csv로 export할 수 있다. 온도 그래프는 온도 값에 따라 색을 다르게 표시한다. (선택사항) 🗓 진행 기간 및 팀원 - 2022.10.07 ~ 2022.10.09(3일) - 프론트엔드 5명 🛠 적용 기술 JavaScript React.js..

✅ 과제 1. 첫번째 페이지 Figma를 참고하여 UI를 구현하고 카테고리별로 키보드 테마를 보여준다. 각 테마를 눌렀을 때, 두번째 화면으로 이동한다. 반응형으로 구현한다. 2. 두번째 페이지 Figma를 참고하여 UI를 구현하고 상세페이지를 보여준다. 라이브테마가 있을 때는 라이브테마를 보여준다. 뒤로가기를 눌렀을 때 첫번째 페이지로 이동한다. 반응형으로 구현한다. 3. 세번째 페이지 (선택사항) 두번째 페이지 최상단의 테마 프리뷰 이미지를 클릭했을 때 키보드를 체험할 수 있도록 UI를 구현한다. 지우기 버튼을 눌렀을 때 한글 음소가 하나만 지워져야 한다. (예 : 안녕 -> 안녀) shift를 눌렀을 때 쌍자음을 사용할 수 있도록 한다. 🗓 진행 기간 및 팀원 - 2022.10.04 ~ 2022.1..

✨프로젝트 소개 여기어때 모티프 프로젝트 사이트 선정 이유 이전 프로젝트로 다들 이커머스를 진행해 새로운 유형의 사이트를 하고 싶어 선정하게 되었다. FRONT 프로젝트 목표 Styled-components, Axios, Recoil, React-datepicker 등 새로운 기술을 사용해 본다. 이전에 해본 적 없는 기능을 맡아서 구현해 본다. 진행 기간 2022.09.19 - 09.30 (2주) GitHub repo 프론트 백 ✨사용된 기술 JavaScript React Styled-components Recoil Git, GitHub props drilling이 심각하게 발생하거나, 파일이 많아지면 state가 어디서 관리되고 있는지 알기 어려운 문제를 해결하고자 상태 관리 라이브러리를 사용하기로 ..