항해 중/8-13주차 실전 프로젝트28 [실전 프로젝트] 다이어리 페이지 마무리, 네비게이션 바 만들기 오늘 한 일 1. 오후 1,2시까지 다이어리 페이지에 오류 없는 지 테스트 해보고, 변수/함수 정리할 예정 2. 네비게이션 바 컴포넌트 만들 예정 3. 힐링 보이스 페이지 구현 4. 로그인 유도 페이지 구현 하신 거 반영은 안했지만 프로젝트에 연결 해본 코드 더보기 더보기 import { fontWeight, margin, textAlign } from "@mui/system"; import React from "react"; import Modal from "react-modal"; import { history } from "../redux/configureStore"; const RequireLogin = (props) => { const [modal, setModal] = React.useStat.. 2021. 12. 29. [실전 프로젝트] 달력 + 해당 월의 일수 계산하기 (+ fill : 특정 값으로 배열 채우기) 1. 달력을 만들기 위해서 moment 패키지를 사용했다. yarn add moment or npm install moment --save 더보기 더보기 https://momentjs.com/ Moment.js | Home Format Dates moment().format('MMMM Do YYYY, h:mm:ss a'); moment().format('dddd'); moment().format("MMM Do YY"); moment().format('YYYY [escaped] YYYY'); moment().format(); Relative Time moment("20111031", "YYYYMMDD").fromNow(); moment("20120620", "YYYYMMDD" momentjs.com 2. .. 2021. 12. 28. [실전 프로젝트] 녹음, 녹음 파일 재생 + 보이스 페이지..? 오늘 한 일 1. 어제 각자 진행한 부분 develop branch에 merge 함 2. API에 맞춰서 api.js 수정하고 instanceRecord.js 추가함 3. 녹음 기능 맡아서 진행 (어제 연습 했던 거 참고해서 구현 하면 될 것 같다!) 4. 팀장 멘토링에서 보이스 페이지는 빼는 게 좋을 것 같다는 피드백을 받아서 보이스 페이지는 추후에 구현하는 걸로 미뤄짐 5. 다이어리 페이지에 달력 구현 맡아서 진행하기로 함 (해당 과정은 다음 게시물에서 정리함) 기능 구현 1. src/pages/Voice.js를 구현 하던 중 버블 차트와 음성 녹음 컴포넌트를 분리 하는 게 좋을 것 같다는 생각이 들었다. → src/components/Bubble.js와 src/components/AudioRecor.. 2021. 12. 28. [실전 프로젝트] 푸쉬 알람 여부 오늘 한 일 1. 첫 로그인 시 팝업 기능 2. 녹음, 녹음 파일 재생 기능 연습 3. 오전, 오후 회의 진행 4. 매니저님과 면담 5. 음원 조사 및 디자이너 분들과 회의 기능 구현 1. 첫 로그인 시 팝업 기능 - yarn add react-modal 라이브러리 설치, PushNoticationPop.js 생성 - 모달 창 + 기능 구현 더보기 더보기 더보기 // src/pages/PushNoticationPop.js // 푸시 알림 팝업 페이지 import React from "react"; import Modal from "react-modal"; import Switch from "@mui/material/Switch"; import { useHistory } from "react-router-.. 2021. 12. 27. [실전 프로젝트] API 설계, 기능 자료 조사, 프로젝트 기본 틀 잡기 1. 오전 회의 때 와이어 프레임을 기반으로 초기 API 설계함 https://www.notion.so/API-e7de065746ca42d0a8ce56c98abdbf21 API 회원 정보 www.notion.so 2. 점심 먹고, 오후 회의에서 음원 자료나 기능에 필요한 자료 조사 함 (+버블 차트, 전체적인 참고 사이트) https://www.notion.so/6890252e3e574a0bae8f285d9a8dfc0c 참고사이트 음성듣기 버블형식으로 만들기 참고 사이트 www.notion.so 3. 프론트엔드 하루 일정 정리 4. 버블 차트 라이브러리를 맡아서 찾아 보게 되어서 3시간 정도? 찾아 보다가 직접 만들었다 2021.12.24 - [더 알아보기/기능] - 버블 차트 만들기 (라이브러리 X) .. 2021. 12. 24. [실전 프로젝트] UX Flow / 와이어 프레임 / API 1. UX Flow https://www.notion.so/12-22-463e18bd3108447892d9324bac3adaf6 [12.22 (목)] 임민영 튜터님 피드백 타겟은 최대한 넓게 설정하여 시작 → 수면 www.notion.so 2. 와이어 프레임 https://www.figma.com/file/y5rGVQW6HpaB81UeTUFYiJ/4%EC%A1%B0-%EC%8B%A4%EC%A0%84-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8?node-id=219%3A592 Figma Created with Figma www.figma.com 3. API https://www.notion.so/API-e7de065746ca42d0a8ce56c98abdbf21 API A new too.. 2021. 12. 23. [실전 프로젝트] 주제 회의 / UX Flow 프로젝트를 또 갈아 엎게 되었다. 대표님이 기존 프로젝트의 기능을 기간 안에 구현 할 수 있겠냐라는 피드백을 주셨고, 수요가 없을 것 같다는 의견들이 나와서... 오늘 한 일 1. 프로젝트 주제 회의 (55시간 째...) 2. 연애 고민 투표 플랫폼으로 주제 선정 3. 디자이너분들이 마음에 안드신다고 하셔서 다시 회의 시작 : 잠을 잘 못자는 사람들을 위한 서비스를 제공하는 플랫폼 https://play.google.com/store/apps/details?id=com.scatterlab.peace&hl=en_US&gl=US 블림프 (BLIMP) - 소리로 떠나는 휴식 여행 - Apps on Google Play "Escape from everyday life and go on a trip!" Hop o.. 2021. 12. 22. [실전 프로젝트] Geoloacation, 카카오 Map API, PWA, 프론트엔드 규칙 1. geolocation을 사용해서 사용자의 실시간 위도, 경도를 불러옴 https://inpa.tistory.com/240#navigator-geolocation-watchPosition-- [JS] 📚 Geolocation API로 🗺️ 위도, 경도 얻고 ⛅ 날씨, 온도 정보를 얻어오기 HTML5 API Geolocation Geolocation API는 자바스크립트 프로그램이 사용자의 실제 위치를 브라우저에게 요청할 수 있도록 해준다. 물론 이런 정보들은 주요한 개인 정보와 관련되어 있으므로, 브라우저에 inpa.tistory.com 2. 카카오 map api + 마커 띄우기를 사용해서 위도, 경도를 기준으로 현재 위치를 보여줌 https://gingerkang.tistory.com/65 [Rea.. 2021. 12. 21. [실전 프로젝트] 와이어 프레임/진행 방향 수정, Git 세팅 오늘 일정 1) 디자인 와이어프레임 디테일 하게 수정 및 기획 2) Git, 프로젝트 세팅(패키지 설치, 공통적인 부분) 3) 프론트 회의에서 프로젝트 방향을 웹 → 모바일로 바꾸자는 얘기가 나옴 고로 와이어 프레임을 갈아 엎어야 한다. 4) 팀별 주제 초안 피드백 반영해서 진행방향 수정 피드백 좋은 포트폴리오는 하이라이트가 되는 기능이 있거나 아예 기능이 엄청 많다는 느낌이 있어야 한다 기술적으로 대단한 느낌이 없다. 내가 이 사람에게 채택 당하면 수락/거절 할 수 있는 UX가 어려울 부분이다. (채팅은 의미가 별로 없다.) 채팅 보다는 쪽지가 더 의미가 있다. 어떤 고객 군을 찍고 그 고객 군의 니즈를 파악한다. (주제를 좁힌다. 좁으면 멋있어 진다.) → 처음부터 다시 정하기로 함. → 바꾼 것도 .. 2021. 12. 20. 이전 1 2 3 4 다음 728x90
