최소 기능 제품 (MVP) 9

[책 요약] 스프린트 (by Jake Knapp)

Introduction 구글 벤처스에서 새로운 로봇을 테스트합니다. 호텔에서 자주 사용될 것이라 예측합니다. 팀의 걱정은 사람들이 로봇에 거부감이 있는지 였습니다. 5일 안에 문제를 검증해보기로 합니다. 칫솔을 가져다주는 로봇을 기획합니다. 해결책 후보를 정하고 가장 좋은 안을 결정내립니다. 소비자들을 인터뷰하는 과정에서 칫솔이 필요한 경우를 물어보고 로봇이 칫솔을 가져다주도록 합니다. 소비자들이 만족합니다. 1. Challenge 클라리넷 연주자 제임스는 은퇴 후 커피 전문점을 창업합니다. 그의 문제는 오프라인 사업을 온라인으로 확장하는 것이었습니다. 제임스는 팀에 소프투웨어 엔지니어, Chieft Operating Officer, 매니저 등을 투입합니다. 온라인 웹사이트 3가지 안이 제시되었습니다. ..

해빗트래커 가이드

해빗트래커 가이드 해빗트래커 가이드입니다. (Link: https://habittracker-53889.web.app/ ). (1) 가입 (2) 해빗 작성/체크/진행상황 확인 (3) 비밀번호 변경에 대해 설명하도록 하겠습니다. 좌측 탭을 통해서 필요한 내용을 찾아보실 수 있습니다. 그리고, 가이드를 영상으로 보고 싶으신 분들은 제 유튜브 영상을 참고 바랍니다. 혹시 질문이나 제안 사항이 있으면 언제든지 편하게 이메일로 연락주세요: doctor.marvin.ds@gmail.com . 생산성이 향상되길 바랍니다! 감사해요! (1) 가입 When you first click the link for the app, you will find the following webpage for log-in or sign..

[프론트엔드 연습 프로젝트] 상세페이지 생성 및 수정

습관 별 상세 페이지를 만들고, 이를 수정할 수 있도록 하려고 한다. 예를 들어, 위의 사진처럼 습관 링크를 클릭하면, 아래 사진과 같이 세부 습관을 일자별로 나타낸다. 먼저, index.html 을 일부 수정해야 한다. script 태그를 다음과 같이 변경한다. 제목을 a href 태그로 감쌀 때, document 의 아이디로 링크를 이동시켜준다. const db = firebase.firestore(); db.collection('habit').get().then((result)=>{ result.forEach((doc)=>{ console.log(doc.data()) var dateHabit = new Date(doc.data().date.seconds*1000) var dateHabit = "Da..

[프론트엔드 연습 프로젝트] 가입&로그인 기능

가입 기능을 만들어보자. 새로운 signup.html 에 기존의 write.html 의 코드를 복붙한 후에 불필요한 script 와 html 내용들을 삭제한다. 나는 BootStrap 에 form 을 검색해서 가입과 관련된 폼을 일부 수정하였다. Navbar 아래에 다음과 같이 가입 기능을 만든다. User Name Email address Password Sign-Up 폼 관련 태그 아래에 태그를 이동시킨다. 아래 script 태그에는 다음과 같이 "signup" 버튼을 누르면, 이메일과 비밀번호를 db 에 저장할 수 있도록 한다. const db = firebase.firestore(); $('#signup').click(function(){ var email = $('#email').val(); v..

[프론트엔드 연습 프로젝트] 파이어베이스에 데이터 저장하기

오늘은 웹페이지에서 저장한 데이터를 파이어베이스에 저장해보자. public 폴더에 write.html 을 새로 만들어보자. index.html 을 복붙하는데 지난 시간에 container 관련된 내용들을 삭제한다 (const db 와 navbar 남김). BootStrap 홈페이지에서 "form" 과 "button" 을 검색해서 원하는 제출 폼과 버튼을 찾았다. Navbar 아래에 아래와 같이 폼을 만들었다. Habit Do Submit 그러면 아래와 같은 예쁜 폼태그가 만들어진다. 이제 const db 가 있는 script 태그를 아래와 같이 수정하자. submit 버튼을 누르면, 제목, 실행여부, (최초작성) 날짜가 파이어베이스 db 에 저장되는 형식이다. db 에 데이터 저장 시 메인 페이지로 이동..

[프론트엔드 연습 프로젝트] 파이어베이스의 데이터 읽기

(작성 시작일) 05월 07일 (2022년) (포스트 공개일) 06월 19일 (2022년) 지난 시간에는 파이어베이스를 설치했다. 지난 시간의 마지막에 했던 것처럼 다시 프로젝트의 html 을 띄어보면서 시작하자. (터미널) firebase serve 지난번에 BootStrap 의 starter template 을 복붙했기 때문에, CSS, JavaScript 파일들이 이미 설치되어 있다. 그렇지 않다면, BootStrap 사이트에 가서 "Introduction" 파트에서 CSS, JavaScript 를 설치하면 된다 (설치 = 복붙). JavaScript 타이핑을 간단히 하기 위해 jQuery 를 설치한다. "jquery cdn" 검색해서 jQuery 3.x 의 "minified" 버젼을 설치한다 (설..

[프론트엔드 연습 프로젝트] 파이어베이스 시작하기

(작성 시작일) 05월 06일 (2022년) (포스트 공개일) 06월 18일 (2022년) 파이어베이스 콘솔에 들어간 후 프로젝트를 생성한다. 좌측 탭의 "Authentication" 들어가서 "시작하기 (Get Started)" 를 클릭한다. Sign-in method 에서 원하는 기능을 고른다. 예를 들어, 이메일/비밀번호를 사용 설정한다. 좌측 탭의 "Database"에 들어가서 데이터베이스 만들기를 클릭한다. 사진 저장 등의 기능이 필요하면 "Storage" 를 클릭하면 되는데, 이번 프로젝트에서는 하지 않을 예정이다. 추후에 웹에 호스팅할 때 좌측 탭의 "Hosting" 을 클릭해서 프로젝트를 배포할 예정인데, 추후 하기로 하자. 이제, 비쥬얼 스튜디오 (visual studio) 에디터로 프로..

[프론트엔드 연습 프로젝트] 해빗 트래커 (Habit Tracker) 제작기

프로젝트 시작 시 To Do List 를 만들고, 이를 수정해나가는 과정을 기록하면 어떨까 궁금 생각이 든다. 해빗 트래커의 상세 기획안은 연습하면서 좀 더 살을 붙혀야겠다. 2022년 5월 5일 [마침 어린이날이네요...] (작성 시작일) 05월 05일 (2022년) (포스트 공개일) 06월 18일 (2022년) To-Do List [ ] 파이어베이스 설치 [ ] 파이어베이스의 데이터 읽기 [ ] 파이어베이스에 데이터 저장하기 이미지 업로드도 가능한데 이 부분은 일단 패스 [ ] 파이어베이스 가입 기능 만들기 + 구글 가입 기능도 추가해볼까? [ ] 파이어베이스 로그인 기능 만들기 [ ] 상세페이지 만들기 - 상품 클릭하면 해당 페이지로 들어갈 수 있도록 하기 -> 내 프로젝트에 관련이 있는가? [ ]..

웹 애플리케이션 직접 만들기

시작하며 데이터 분석 중에서도 특히 온라인 AB 테스팅 실험을 하고 싶은데, 마땅한 데이터와 플랫폼이 없다. 그래서 내가 직접 프로덕트를 개발해서 실험도 해보고 (가능하다면 추천 시스템도 만들고) 해보고자 한다. 우버 엔지니어셨던 테크보이 워니님의 유튜브 영상 중에서 나의 제품 만드는 테크 트리를 유심히 봤는데, 마침 코딩 애플님의 당근마켓 클로닝 강의와 웹개발 프리패스권의 많은 부분들이 커버가 되서 결재했다. HTML, CSS, JavaScript 를 배우고 파이어베이스 관련 영상을 시청하면 내가 원하는 MVP 를 만들 수 있다. 나는 학습 관련 온라인 프로덕트를 만들고 싶었는데, 파이어베이스로 제작하기가 용의하였다. 학습하면서 추가적으로 알게된 사실은 구글 클라우드 플랫폼에서 머신 러닝 관련 제품도 ..