diff --git "a/study/Health for Everyone PJT \354\235\274\354\247\200.assets/KakaoTalk_20201103_190317295.png" "b/study/Health for Everyone PJT \354\235\274\354\247\200.assets/KakaoTalk_20201103_190317295.png" new file mode 100644 index 0000000..601baa5 Binary files /dev/null and "b/study/Health for Everyone PJT \354\235\274\354\247\200.assets/KakaoTalk_20201103_190317295.png" differ diff --git "a/study/Health for Everyone PJT \354\235\274\354\247\200.md" "b/study/Health for Everyone PJT \354\235\274\354\247\200.md" index 9df56d5..ee87000 100644 --- "a/study/Health for Everyone PJT \354\235\274\354\247\200.md" +++ "b/study/Health for Everyone PJT \354\235\274\354\247\200.md" @@ -32,27 +32,33 @@ #### 2020-10-19 프로젝트 기획 회의 및 DB모델링 1. 지금껏 아이디어 회의로 정리된 어플리케이션의 테마와 기능, 백엔드 모델링, 프론트 페이지별 기능을 정리함 + 2. 회원 페르소나를 설정. (트레이너 - 트레이니) 2가지 사이드로 나누어, 카카오 로그인 시 두가지 회원 권한 별로 다른 페이지로 리다이렉트 되기로 결정 + 3. 어플리케이션 형태로 만들어 주는 **NativeScrip**t와 웹앱의 형태로 나오는 **PWA** 기술 중에 여러가지를 타산해 보다가, Native Script 개발에 필요한 설정 프로그램인 안드로이드 에뮬레이터가 싸피 노트북에서 설정하고 세팅하는데에 치명적인 오류(재부팅시 블루스크린)이 발생하는 것을 발견하고, PWA 기술로 웹앱을 개발하는 것으로 개략적인 틀을 잡음 + 4. 트레이너 페이지의 아래쪽 Navbar에 대한 기능들을 총 4가지 테마로 나누고, 각 페이지별 들어가야 할 기술을 정리함. 트레이니 쪽도 완성하여 총 8페이지의 개략적인 어플리케이션 기능 구성이 될 것으로 예상. + 5. ##### 트레이너 페이지 - + 1. PT 프로그램 CRUD, 내 회원관리 CRUD. 2. 캘린더 기능을 통한 회원 식단관리 및 PT 일정 스케쥴링 3. 트레이너 - 트레이니 채팅 기능 (+ 웹소켓 이용 화상채팅 기능) 4. My Page (기본 프로필 CRUD) -> 후에 트레이니 검색 페이지(5page)로의 리다이렉트 될 섹션 추가 예정 + 6. ##### 트레이니 페이지 - -5. PT 프로그램 지역별 검색기능 R, 이달의 우수 프로그램 R, 추천 트레이너 프로필 R, - -6. 캘린더 기능을 통한 식단 및 PT 스케쥴링 확인 (Read only) - -7. 트레이너 - 트레이니 채팅 기능 (+ 웹소켓 이용 화상채팅 기능) - -8. My Page (내가 수강중인 프로그램, 앱 설정) - -7. 이번 주는 새로 써야할 프로그램에 관해 각자 학습하고, 프론트는 페이지의 기본 프레임 형식을 구현하기로 함. 그 후 각 페이지별로 프론트 3명이 나뉘어서 작업할 예정 -8. Home Training 카메라 인식 AI API **Teachable Machine** 을 통해서 AI 홈트레이닝 서비스도 추가 구현 예정 + +7. PT 프로그램 지역별 검색기능 R, 이달의 우수 프로그램 R, 추천 트레이너 프로필 R, + +8. 캘린더 기능을 통한 식단 및 PT 스케쥴링 확인 (Read only) + +9. 트레이너 - 트레이니 채팅 기능 (+ 웹소켓 이용 화상채팅 기능) + +10. My Page (내가 수강중인 프로그램, 앱 설정) + +11. 이번 주는 새로 써야할 프로그램에 관해 각자 학습하고, 프론트는 페이지의 기본 프레임 형식을 구현하기로 함. 그 후 각 페이지별로 프론트 3명이 나뉘어서 작업할 예정 + +12. Home Training 카메라 인식 AI API **Teachable Machine** 을 통해서 AI 홈트레이닝 서비스도 추가 구현 예정 @@ -69,8 +75,11 @@ 이라는 cmd 명령어로 문제를 해결할 수 있었으나, 결국 돌아간 Android Emulator가 느린 속도 및 저조한 성능으로 인해 개발로 부적합하다고 판단이 들어 **FrontEnd를 Android App 개발보다는 PWA Web App 으로 개발하는 것으로 방향을 설정**하고 그에 적합한 라이브러리를 사용하기로 판단함. 3. PWA는 2018년도부터 도입된 새로운 형태의 개념(Library나 Framework가 아님)으로 Android 및 iOS의 모바일에서 Web을 App의 형태로 볼 수 있는 하나의 큰 틀을 말한다. **Web App**의 형태로 개발했을 때의 **장점은 웹과 앱의 장점을 두 가지 다 결합한 환경**이라는 것이다. 웹과 같은 형식으로 개발 할 수 있어 DX 향상 및 유지 보수의 장점이 있고, App과 같이 설치가 필요 없고, Data Caching을 통해 느린 네트워크 또는 오프라인 환경에서도 로드 될 수 있다는 점. 관련된 푸시알림 기능 및 홈 화면 아이콘 생성 을 통해 사용자 유입을 더욱 도모 할 수 있고, 앱과 비슷한 UI 를 통해 UX를 향상 시킬 수 있다는 장점이 있다. 단점은 새로운 기술이라 한글 강의 및 자료가 많지 않고, 영어권 자료를 참고를 많이 해야 한다는 점과, 그에 따른 새로운 라이브러리 및 개발 환경에 대한 러닝 커브가 존재한다는 것이 단점으로 예측이 된다. + 4. PWA 개발에 관련한 레퍼런스 및 동영상 강의를 찾던 중(교보재 신청을 했으나 아직 도착하지 않음. 언제부터 교보재 사용을 할 수 있을 지에 대한 확신이 없어 일단은 무료강의로 시작해보기로 함) 유투브에 Ionic 이라는 Mobile Web App 개발 Framework 에 대한 추천을 보게 되었고, Ionic 이 우리에게 익숙한 기술스택인 Vue-Ionic을 지난달 9월에 출시 했다는 소식을 듣게 되었음. 새로운 기술을 적용해 웹앱을 효율적이고 빠른 시간안에 개발하기 위해 Ionic이라는 Library를 좀 더 깊게 학습해보기로 결정하고 각자 Front Page를 Ionic을 통해 짜보는 시간을 갖음. + 5. Ionic이라는 Framework를 통해 예상되는 장점은 Android 와 iOS 환경 두가지 모두 다 한가지 코드를 통해 실행이 된다라는 점이다. 또한 디자인 적인 것에 대한 베이직 가이드라인 및 컴포넌트 활용을 통해 DX를 향상 시키기에도 좋고, 모바일 웹앱을 처음 개발 해보는 입장에서 모든 반응형 컴포넌트를 만들기에 무리가 있다고 판단하여, Ionic 혹은 각자 써보고 싶은 Framework에 대한 학습을 시작하고, 세 명의 회의를 거쳐 최종적으로 사용할 프레임워크를 선택하기로 결정. + 6. PWA의 디자인에 대한 영상 레퍼런스 및 Dribbble.com 의 예제들을 공유하고 학습함으로써, 개략적인 와이어프레임에 대한 기본 틀을 짜는 법을 익힘. 구체적으로 글자 폰트가 web에 비해 크게 잡아야 한다는 점, 2020 Mobile Design Trend Top10에 관련한 영상들을 보면서, Animation이나 Slide, 컴포넌트의 디자인등에 대한 영감을 얻기도 함. @@ -79,12 +88,12 @@ 1. 각 기능별 REST API server의 URL 목록 Page를 작성함. 트레이너 평가 / 헬스장 / 태그 / 프로그램 크게 4가지 카테고리로 나누어 기능별로 HTTP 요청을 GET POST PUT DELETE 에 따라 CRUD로직을 완성할 예정. - 2. PT 온/오프라인 프로그램 생성 기능은, Backend에서 프로세싱하는 것보다 프론트에서 넘겨줘야 할 데이터 값들에 대한 확인이 필요해서, 창완이형은 예비 frontpage의 형태로 simulation 하며 Back 작업을 하기로 함. 특히나 같은 출석 시스템이더라도 트레이너 측에서 보는 화면과 트레이니 측에서 보는 화면이 비슷하면서도 다른 기능으로 이루어져야 하기 때문에 직접 log를 찍어보면서 개발하는 것이 기능개발에 수월할 것으로 판단 - 3. Calendar 기능으로 기존에 full screen calendar 라는 Library를 사용하기로 했으나 (장점: 기능이 많고, 쉬우며, 예제 사이트가 많다), 이는 웹 버전 (특히 풀 스크린)의 캘린더에 최적화된 라이브러리여서 다른 라이브러리를 사용하기로 검토. Date pick(애니메이션이 부드럽고 디자인이 세련됨) 혹은 V-calendar(간단하고 심플함) 라는 모바일 최적화 Library를 찾았고, 여러가지 기능개발에 필요한 사항들을 검토하며 선정할 예정(요일 이슈) - 4. 특히 월별로 날짜가 무슨 요일에 해당하는지 알아내야 하는 이슈가 발생함 (ex) 월수금 프로그램이 21, 23, 25일? 다를 수도 있다) Back end 인 장고에서 Pythonic하게 Datetime field 객체를 전처리 해주는 과정으로 사용해도 좋으나, 몇몇 라이브러리에서는 일요일은 1 ~ 토요일은 7의 형태로 제공해주는 Library가 있어, 여러가지 사용해 보고 판단해 볼 듯 - 5. Q) 프로그램 설명 디테일 썸네일로 어떤 사진을 넣을것인가? A1) 트레이너 프로필 사진 A2) 프로그램별 상징 아이콘 - 6. Ionic - Vue가 2020년 10월 2일에 출시되어서, 최신 버전의 Ionic을 (강제로) 사용하게 되었음. 그에 따라 아직 정립되지 않은 공식문서와 Icon 오류 등 많은 잔버그와 싸우며 작업하게 될 것으로 사료됨. 하지만 Ionic 이라는 프레임워크가 Vanilla JS 문서가 정리가 잘 되어있고, Angular 와 React 사용자는 많기 때문에, 다른 개발 예제를 참고하며 개발할 시 높은 효율성을 가질 것으로 사료 됨. 특히나 본디 사용해왔던 Vuetify 와 같은 Design Framework 와 크게 DX가 다르지 않기 때문에, 짧은 시간에 많은 성과를 얻을 수 있는 것이 특징 - 7. 프론트 페이지의 라우터링 버튼과 Modal , Card, Image, Icon 등의 컴포넌트들을 실험해보고 적용해 보는 것에 성공. 총 4가지의 라우팅 메뉴를 선정한 뒤 각 페이지 별로 디테일 있게 개발할 예정. 모바일 웹앱은 화면의 크기가 크지 않고, 디자인적 변경의 요소가 많지 않기 때문에 기본 프레이밍을 하는 것에는 짧은 시간이 소요될 것으로 보이지만 , 내부의 CS 디테일을 뜯어 고치기엔 높은 레벨의 CSS 개발이 필요할 것으로 예상됨. + 2. PT 온/오프라인 프로그램 생성 기능은, Backend에서 프로세싱하는 것보다 프론트에서 넘겨줘야 할 데이터 값들에 대한 확인이 필요해서, 창완이형은 예비 frontpage의 형태로 simulation 하며 Back 작업을 하기로 함. 특히나 같은 출석 시스템이더라도 트레이너 측에서 보는 화면과 트레이니 측에서 보는 화면이 비슷하면서도 다른 기능으로 이루어져야 하기 때문에 직접 log를 찍어보면서 개발하는 것이 기능개발에 수월할 것으로 판단 + 3. Calendar 기능으로 기존에 full screen calendar 라는 Library를 사용하기로 했으나 (장점: 기능이 많고, 쉬우며, 예제 사이트가 많다), 이는 웹 버전 (특히 풀 스크린)의 캘린더에 최적화된 라이브러리여서 다른 라이브러리를 사용하기로 검토. Date pick(애니메이션이 부드럽고 디자인이 세련됨) 혹은 V-calendar(간단하고 심플함) 라는 모바일 최적화 Library를 찾았고, 여러가지 기능개발에 필요한 사항들을 검토하며 선정할 예정(요일 이슈) + 4. 특히 월별로 날짜가 무슨 요일에 해당하는지 알아내야 하는 이슈가 발생함 (ex) 월수금 프로그램이 21, 23, 25일? 다를 수도 있다) Back end 인 장고에서 Pythonic하게 Datetime field 객체를 전처리 해주는 과정으로 사용해도 좋으나, 몇몇 라이브러리에서는 일요일은 1 ~ 토요일은 7의 형태로 제공해주는 Library가 있어, 여러가지 사용해 보고 판단해 볼 듯 + 5. Q) 프로그램 설명 디테일 썸네일로 어떤 사진을 넣을것인가? A1) 트레이너 프로필 사진 A2) 프로그램별 상징 아이콘 + 6. Ionic - Vue가 2020년 10월 2일에 출시되어서, 최신 버전의 Ionic을 (강제로) 사용하게 되었음. 그에 따라 아직 정립되지 않은 공식문서와 Icon 오류 등 많은 잔버그와 싸우며 작업하게 될 것으로 사료됨. 하지만 Ionic 이라는 프레임워크가 Vanilla JS 문서가 정리가 잘 되어있고, Angular 와 React 사용자는 많기 때문에, 다른 개발 예제를 참고하며 개발할 시 높은 효율성을 가질 것으로 사료 됨. 특히나 본디 사용해왔던 Vuetify 와 같은 Design Framework 와 크게 DX가 다르지 않기 때문에, 짧은 시간에 많은 성과를 얻을 수 있는 것이 특징 + 7. 프론트 페이지의 라우터링 버튼과 Modal , Card, Image, Icon 등의 컴포넌트들을 실험해보고 적용해 보는 것에 성공. 총 4가지의 라우팅 메뉴를 선정한 뒤 각 페이지 별로 디테일 있게 개발할 예정. 모바일 웹앱은 화면의 크기가 크지 않고, 디자인적 변경의 요소가 많지 않기 때문에 기본 프레이밍을 하는 것에는 짧은 시간이 소요될 것으로 보이지만 , 내부의 CS 디테일을 뜯어 고치기엔 높은 레벨의 CSS 개발이 필요할 것으로 예상됨. @@ -108,5 +117,70 @@ -2020-10-26 +#### 2020-10-26 UserSerializer 및 카카오 로그인 기능 작업 + +1. Back 단에서의 +2. Front단에서 Card의 크기 조절에 관한 이슈가 있었음. Ionic-Card Component에서 기본 제공하는 프로퍼티에는 크기 조절에 관한 클래스가 지정되어 있지 않아서, 문제를 겪은 팀원이 있었지만, CSS를 통해 크기를 %로 조절하는 방법으로 문제를 해결함. +3. Ionic이 기본 typescript 의 형태로 제공되기 때문에 javascript 와의 차이점을 논의하고 배포함. +4. Kakao Social Login 기능을 만들 때, 로그인 버튼과 회원가입 버튼이 따로 있는게 아니고, 카카오 로그인을 하고나서 처음 보는 회원이면 회원가입이 되도록, 기존 등록 유저이면 로그인이 되도록 하는 기능을 구현함에 Django User모델과 호환이 되지 않는 문제가 발생. 이를 위해, User Custom 정보에 is_first라는 칼럼을 추가하고, 이를 통해 Frontpage에서 분기가 생기도록 로직을 수정함. 생성될 때 user의 토큰을 받아오고, request.user로 정보를 알아낸 다음 is_first 값을 1로 바꿔주는 함수를 생성함. +5. ionic 프레임워크는 새로고침 기능을 이용하면 여러 이미지가 실시간으로 반영이 되지 않는 등의 문제를 일으킴. 그래서 Android Studio를 통한 개발을 시도해보았으나, SSAFY 노트북의 성능 문제로 버츄얼 머신을 돌릴 때, 프로세스를 너무 많이 잡아 먹는 문제가 발생함. 나중에 확인해보니 이미지가 실시간 반영 되지 않는 auto refresher 기능을 넣으면 개발 과정에서 문제를 해결 할 수 있는 것으로 파악함. +6. Front 기본 구성 로직과 탭 별 분기점을 완성함. 라우팅 및 경로 설정도 완료. + + + + + +#### 2020-10-27 프론트 페이지 스켈레톤 코드 완성 및 기획 총 정리, Jira 정리 + +1. 지금껏 각자 ionic을 사용해 학습하던 브런치들을 통합하고, 기본적인 라우터와 탭, 메인화면 구성과 인트로페이지 등을 만든 강동훈 팀장의 스켈레톤 코드를 develop 에 merge한 후, 각자 페이지를 맡아서(Mainpage 강동훈 Calendar 강병국 Chatting 노현석) 분업하기로 결정. +2. Ionic의 기본적인 구성 및 이미지 파일 경로 문제(Ionic 자체적으로 img 폴더안에 이미지 파일 이름을 붙이는 문제), icon이 사라졌다 나타났다 하는 문제 등을 공유하고 서로의 코드 중 Best를 뽑아 적용함. +3. Calendar Library가 원래 예정되었던 fullcalendar는 모바일 환경에 최적화 되지 않음을 발견하고, 다른 여러가지 라이브러리를 검증하는 시간을 보냄. Ionic-vue 가 나온지 1달도 채 되지않은 최신 버전이라 다른 사람들의 프로젝트를 참고할 여지가 적은 것이 단점 +4. 특히나 React와 angular 기반 Ionic 프로젝트가 많아, 강제로 React 와 Angular 혹은 Javascript 코드 기반으로 정적 페이지를 따오는 것부터 작업하는 중. 프론트 페이지에 대한 작업 요소가 많아 보인다. +5. Backend 역시 Front와의 기본적인 통신 및 배포 테스트를 완료함. Vue-Ionic의 배포를 Netlify 라는 사이트를 통해 미리 dist 파일을 업로드 해봄. Router 경로 문제가 발생했지만 우리가 걱정했던 이미지 부분들은 다행히 잘 작동되는 것을 확인 할 수 있었음. +6. 슬라이더 및 Navbar 컴포넌트들을 가져오는 것에 어려움을 겪음(노현석) 내일까지 해보고 안되면 포기할 예정 +7. 추 후 배포를 위한 .apk 파일을 생성하는 것 역시 연습해 보기로 함 + + + +#### 2020 - 10 - 28 Calendar 기능 자체 구현 + +1. 결국 여러가지의 Calendar Library를 실험해봤으나 잘 되지 않아, Ionic React의 Calendar 앱을 가져와서 작업해 봄. 정적인 동작밖에 수행되지않고, 우리가 만드려고 했던 일정관리, 식단관리 기능 등을 추가 구현하려면 많은 소요시간이 필요할 것으로 보임. +2. Vue.use 를 사용하는 Library들이 대체적으로 Ionic프로젝트에서는 오류가 많이 나고 작업이 잘 되지 않는 것으로 파악. CDN 방식으로 적용하는 참고 예제들을 가져오려고 하나 어려움이 많음. +3. 도커와 CI/ CD에 관련한 학습을 진행중이라 도커를 도입할 예정. +4. Alert 기능을 준비하기 위한 기본 세팅 페이지를 생성 완료 + + + +#### 2020 - 10 - 29 Ionic Framework 제거 결정 + +1. 큰 소요가 있었다. 그것은 바로 Ionic Framework를 버리기로 결정한 것. 큰 이유는 다음과 같다. + 1. Ionic - Vue가 나온지 한달 밖에 되지 않은 최신 프레임워크라 아직까지 잔버그가 너무 많다. 예를 들어 npm run serve와 비슷한 기능을 하는 서버를 돌리는 명령어 ionic serve는 자동 reload 기능을 제공하지 않아서, 컴포넌트의 수정사항들이 바로바로 보여지지 않았기 때문에 수정사항이 한번 생길때마다 서버를 한번씩 껐다켜야하는 번거로움이 있었다. 새로운 프레임워크를 적용하는 단계인 우리 셋에겐 이것이 개발속도를 현저히 더디게 만드는 점이었다. 예를들어 똑같은 코드를 실행시켜도, 어떤 경우엔 아이콘이 로딩되고, 새로고침하면 보이지 않는 경우, 슬라이더가 넘어가기도, 안 넘어가기도 하는 등, 코드를 제외하고도 알 수 없는 부분에서 오류가 많이 일어났었다. + 2. 원하는 기능을 만들기 위한 라이브러리와의 호환성 문제. 우리가 만드려는 메인 기능 중 하나인 스케쥴 및 식단 관리 기능을 만드려면 달력 기능을 만들어야했다. 이미 존재하는 Vue 라이브러리들(fullcalendar API, v-calendar, date picker 등등)의 경우엔 Ionic 모바일 환경에서 최적화되지 않았으며, 이미 존재하는 Ionic 라이브러리들은 모바일 환경에서 너무 제한적인 기능만 제공하거나, 디자인이 예쁘지 않았다. 우리가 직접 정적 javascript로 짜보려는 노력까지 시도해봤으나, 심미적 요소가 너무 가미되어있지 않았고, 애니메이션 외에도 우리가 원하는 기능을 구현하기에 모바일 환경은 너무 크기가 작다고 판단이 들었다. 짧은 기간(5주)을 고려한다면, 우리가 만약 달력 기능만 만든다면 그것에 올인 했기에 작업을 끝낼수도 있을거라고 생각했지만, 다른 웹소켓을 이용한 채팅기능, webRTC 를 이용한 화상채팅 기능, 수강신청 기능 등 다른 굵직한 작업들이 많아 호환성 문제가 큰 Ionic은 단점으로 다가왔다. + 3. 우리의 메인기능인 화상 online PT 프로그램이 모바일 환경에서, 다 대 다 화상채팅을 구현해내기 어렵다는 것을 깨달았다. 그동안 웹엑스의 웹페이지 형식만 생각해오던 우리는 모바일 환경에서의 화상채팅이 대부분 1:1에 국한되어있다는 점을 인지하지 못했었는데, 트레이너의 입장에서 모바일 환경으로 많은 사람들의 자세를 봐준다는 것은 사실상 불가능 하기 때문에 모바일 환경에서의 개발이 크게 장점을 가지지 못한다는 점을 깨닫게 되었다. +2. 그런고로, 결국 Ionic 이라는 프레임워크를 갈아엎고, 다시 우리가 익숙한 Vuetify를 활용한 반응형 웹을 목표로 프로젝트의 골자를 다시 짜게 되었다. 이에 따른 백엔드 모델링 수정과 프론트엔드 수정이 필요하다 + + + +#### 2020 - 10 - 30 Vuetify 기본 Skeleton 코드 배포 및 백엔드 모델링 수정 + + 1. Vuetify 는 이미 공통 / 특화 프로젝트를 하며 얻은 경험치가 있기 때문에, 빠르게 스켈레톤 코드 작성에 들어갔다. 기본적으로 섹션별로 Lazy Loading을 구현하는 mixin 을 가져오고 각각의 섹션 밑에 컴포넌트를 넣는 구성을 통해 반응형 모바일 웹을 목표로 기본 골자를 구성하였고, Appbar, Footer, Drawer, Hero Image를 설정하여 각각의 페이지별로 기능과 역할을 나누었다. 나(강동훈 팀장)는 메인페이지를, 강병국은 Calendar를, 노현석은 webRTC를 통한 화상채팅 기능을 각각 구현해내기로 하고, 백엔드와 연동을 준비중이다. + 2. Backend 역시 기본 ERD를 수정하고, 코드를 수정하는 작업을 거쳤다. 기본적으로 Django REST API를 만든다는 사실에는 큰 변함이 없어서, 조금씩 수정해나가며 시나리오를 고칠 생각이다. 특히나 모바일 기준으로 접속시에 트레이너 - 클라이언트를 바꾼다는 형식으로 시나리오를 짰는데, 그 부분을 로그인 / 회원가입 부분으로 옮겨 작업해야 할 것이다. + +#### + +#### 2020 - 11 - 2 Backend Remodeling 및 Frontpage 작업 + +1. 프론트를 Vuetify로 바꾼 이후, 시나리오면에서 수정해야 할 DB 내용들이 많이 생겼다. +2. 프론트 Mainpage에 Slider와 그라데이션 작업, 각각 외부 컴포넌트들 가져오고, 버튼, 카드 등 여러가지 작업을 진행 중 +3. webRTC는 1:1 연결하는 코드 작성에 성공. 그러나 이후 배포 된 이후에도 잘 작동할지, 다대다 화상 채팅 기능이 가능할지 여부에 대해서는 추후 연구해보아야 할 여지가 있음 +4. v-calendar 앱에서는 기능 제한이 있어 fullcalendar를 통해 스케쥴링 기능 작업 중. 식단 관리 까지 한 페이지에 넣으려다 보니 넣어야 할 정보가 많아져 정보의 명시성에 관해 계속 생각해보면서 작업해야 할 것 같음. + +#### 2020 - 11 - 3 Backend DB Refactoring + +​ 1. 트레이너와 클라이언트 간의 스케쥴링 및 예약을 위한 DB 작업을 진행함. + +![KakaoTalk_20201103_190317295](Health for Everyone PJT 일지.assets/KakaoTalk_20201103_190317295.png) + +이런 방식으로 DB 및 기능을 구현 할 예정. 각각의 시간대를 트레이너가 열어두면 클라이언트가 1시간 단위로 선택해서 예약 할 수 있는 수강신청과 비슷한 방식으로 예약 기능을 구현 할 예정. +2. 캘린더 라이브러리에서 제공 되는 기능광 우리가 만들고 싶은 기능이 충돌해서 많은 기능 구현이 필요해 보임. Volume을 최대한 늘리려 하지만 생각보다 오래 걸리는 작업이 많다. \ No newline at end of file diff --git "a/study/\354\235\264\354\260\275\354\231\204/\353\224\260\353\235\274\355\225\230\353\251\260 \353\260\260\354\232\260\353\212\224 \353\217\204\354\273\244 CI/\353\224\260\353\235\274\355\225\230\353\251\260 \353\260\260\354\232\260\353\212\224 \353\217\204\354\273\244 CI-\354\240\225\353\246\254.assets/image-20201027212125189.png" "b/study/\354\235\264\354\260\275\354\231\204/\353\224\260\353\235\274\355\225\230\353\251\260 \353\260\260\354\232\260\353\212\224 \353\217\204\354\273\244 CI/\353\224\260\353\235\274\355\225\230\353\251\260 \353\260\260\354\232\260\353\212\224 \353\217\204\354\273\244 CI-\354\240\225\353\246\254.assets/image-20201027212125189.png" new file mode 100644 index 0000000..b103034 Binary files /dev/null and "b/study/\354\235\264\354\260\275\354\231\204/\353\224\260\353\235\274\355\225\230\353\251\260 \353\260\260\354\232\260\353\212\224 \353\217\204\354\273\244 CI/\353\224\260\353\235\274\355\225\230\353\251\260 \353\260\260\354\232\260\353\212\224 \353\217\204\354\273\244 CI-\354\240\225\353\246\254.assets/image-20201027212125189.png" differ diff --git "a/study/\354\235\264\354\260\275\354\231\204/\353\224\260\353\235\274\355\225\230\353\251\260 \353\260\260\354\232\260\353\212\224 \353\217\204\354\273\244 CI/\353\224\260\353\235\274\355\225\230\353\251\260 \353\260\260\354\232\260\353\212\224 \353\217\204\354\273\244 CI-\354\240\225\353\246\254.assets/image-20201102222749605.png" "b/study/\354\235\264\354\260\275\354\231\204/\353\224\260\353\235\274\355\225\230\353\251\260 \353\260\260\354\232\260\353\212\224 \353\217\204\354\273\244 CI/\353\224\260\353\235\274\355\225\230\353\251\260 \353\260\260\354\232\260\353\212\224 \353\217\204\354\273\244 CI-\354\240\225\353\246\254.assets/image-20201102222749605.png" new file mode 100644 index 0000000..bc036ed Binary files /dev/null and "b/study/\354\235\264\354\260\275\354\231\204/\353\224\260\353\235\274\355\225\230\353\251\260 \353\260\260\354\232\260\353\212\224 \353\217\204\354\273\244 CI/\353\224\260\353\235\274\355\225\230\353\251\260 \353\260\260\354\232\260\353\212\224 \353\217\204\354\273\244 CI-\354\240\225\353\246\254.assets/image-20201102222749605.png" differ diff --git "a/study/\354\235\264\354\260\275\354\231\204/\353\224\260\353\235\274\355\225\230\353\251\260 \353\260\260\354\232\260\353\212\224 \353\217\204\354\273\244 CI/\353\224\260\353\235\274\355\225\230\353\251\260 \353\260\260\354\232\260\353\212\224 \353\217\204\354\273\244 CI-\354\240\225\353\246\254.md" "b/study/\354\235\264\354\260\275\354\231\204/\353\224\260\353\235\274\355\225\230\353\251\260 \353\260\260\354\232\260\353\212\224 \353\217\204\354\273\244 CI/\353\224\260\353\235\274\355\225\230\353\251\260 \353\260\260\354\232\260\353\212\224 \353\217\204\354\273\244 CI-\354\240\225\353\246\254.md" index 595f718..83434d7 100644 --- "a/study/\354\235\264\354\260\275\354\231\204/\353\224\260\353\235\274\355\225\230\353\251\260 \353\260\260\354\232\260\353\212\224 \353\217\204\354\273\244 CI/\353\224\260\353\235\274\355\225\230\353\251\260 \353\260\260\354\232\260\353\212\224 \353\217\204\354\273\244 CI-\354\240\225\353\246\254.md" +++ "b/study/\354\235\264\354\260\275\354\231\204/\353\224\260\353\235\274\355\225\230\353\251\260 \353\260\260\354\232\260\353\212\224 \353\217\204\354\273\244 CI/\353\224\260\353\235\274\355\225\230\353\251\260 \353\260\260\354\232\260\353\212\224 \353\217\204\354\273\244 CI-\354\240\225\353\246\254.md" @@ -13,4 +13,23 @@ - 코드, 런타임, 시스템 도구, 시스템 라이브러리 및 설정과 같은 응용프로그램을 실행하는데 필요한 모든 것을 포함하는 가볍고 독립적이면 실행가능한 소프트웨어 패키지이다. - 런타임에 컨테이너가 되고, 도커 컨테이너의 경우 도커 엔진에서 실행될 때 이미지가 컨테이너가 된다. -![image-20201026183648903](따라하며 배우는 도커 CI-정리.assets/image-20201026183648903.png) \ No newline at end of file +![image-20201026183648903](따라하며 배우는 도커 CI-정리.assets/image-20201026183648903.png) + + + + + +도커의 사용 흐름 + +- 도커 Client에 명령어를 입력하면 도커 Server(Deamon)에서 작업한다. + - 기초 명령어 + - `docker run hello-world` + - ![image-20201027212125189](따라하며 배우는 도커 CI-정리.assets/image-20201027212125189.png) + +![image-20201102222749605](따라하며 배우는 도커 CI-정리.assets/image-20201102222749605.png) + + + + + +- docker는 개별 VM을 만들어 서로 독립적인 컨테이너를 만든다. \ No newline at end of file