[Dev_log] 25 June (Thur)

[terry-yes]

🐾 1. Done

• We've made drafts of our 'Home' pages for bootcamp

  • Shared drafts are on the Issue Page.

🐾 2. Learned

• NextJS React framework

  • Advantage
  • SSR optimization by SSR(Server Side Rendering)
  • Many configurations are ommitted
  • Easy routing feature

• Lots of libraries for Styling

  • Codepen Ex) Horizontal Timeline

  • Reference: 365kim github

  • Material Design Lite

  • Materialize

  • Material UI

  • MDB(Material Design for Bootstrap)

• License

  • MIT License: A lincense for commercial use

• Sites for color picking(365kim github참조)

  • adobe color
  • Color extracting from image
  • Combination of colors
  • Keyword searching for color combination
  • coolers
  • List of hot treding color combinations
  • colud flare
  • Comparing colors between components and colors

  
  

🐾 3. Decided

• To share the drafts which we've made on the Issue Page

• Standardize the words

  • Yearly Schedule: yearly schedul that implemented from react timeline on our 'home' page
  • Timeline: Timeline that will be implemented on detail page(Now it's implemented on 'home' page for yearly schedule )

• daelee's draft has been selected for 'Home' page(yearly timline + comparison table)

  • Timline will be used in page of details
  • But yearly timeline will be replaced by yearly schedule
  • Comparison table is placed on the same position

• 5E Tech seminar(To explain a selected topic once a week)

  • First seminar: License, Copyright(mihykimm), Serverside Rendering(secho)

• Offline meeting (2020.07.02 Thur)

  • Reserve a time between 10:00~17:00 on Reservation site

• Interim review

  • To share our code in limited time(Code Ignite)

  • Next check: 2020.06.26 Sat PM 4:00

🐾 4. Thinking

• To decide a way to notification

  • No login vs Login
  • No login -> Enter an email address
  • Login -> Alarm button
  • Whole schedule notification vs Individual schedule notification
  • Whole schedule -> Enter an email address
  • Individual schedule notification -> Need to login
  • Email vs Kakaotalk vs Message
  • We've decided to notify with email

• Counting the number of like would be better to grasp how many people are interested in each program.

• 1 file 1 component

  • Advantage1: Easy to grasp what component is in the file
  • Advantage2: No need to load the codes that won't be used in the same file

• Let's think about how to put the whole program in one table

• Let's pick one design library from Codepen(CSS), Material UI, MDB, etc.

  • Material UI is pretty but not abundant

• What contents are inFooter?

  • Let's take on each own, and then compare those.

• What ratio is good for JumboTron?

  
  

🐾 5. To-Do.

Deadline: 2020. 07. 02(Thur)

front-end

• Develop the 'Home' page
  • Implement the Yearly Calendar (daelee)
  • Implement the Comparison table considering responsive design with all 7 bootcamps (jehong)
  • Implement the Navbar, Jumbotron, Footer and Apply the color scheme(mihykim)

back-end

• Back todo list
  • To deploy Daelee's code on GCP.
  • To connect yebalja.com to GCP
  • To make DB from Yearly timeline data
  • To make SSL certificate to let connect our site by HTTPS
  • To help Daelee's work(React Timeline)

---

🐾 1. 마무리했습니다.

• 각각 부트캠프 소개 '홈'페이지의 시안을 만들어봤습니다.

  • 이슈페이지에 공유된 시안이 있습니다.

🐾 2. 배웠습니다.

• NextJS라는 리액트 프레임워크가 있습니다.

  • 장점
  • SSR(Server Side Rendering)을 통한 검색엔진 노출
  • 리액트의 각종 설정 간소화
  • 간편한 라우팅 기능

• 스타일에 도움을 주는 라이브러리들이 많이 있습니다.

  • 코드펜 예시) 가로 타임라인

  • 365kim github 참조

  • Material Design Lite

  • Materialize

  • Material UI

  • MDB(Material Design for Bootstrap)

• 라이센스

  • MIT 라이센스: 상업적 이용이 가능한 라이센스

• 색상 고르기가 어려워 알아낸 사이트들(365kim github참조)

  • adobe color
  • 이미지를 업로드하면 색상 추출
  • 색상 조합을 만들어 줌
  • 키워드로 원하는 색상 조합 검색
  • coolers
  • 인기있는 색상 조합을 볼수 있음
  • colud flare
  • 컴포넌트들과 비교해보면서 색상을 정할 수 있음

  
  

🐾 3. 결정했습니다.

• 서로 만든 시안들을 이슈에 정리하기

• 용어 통일

  • 연간일정: 리액트 타임라인으로 구현할 연간일정표
  • 타임라인: 상세페이지에서 사용될 가로 타임라인(현재는 '홈'페이지에 타임라인으로 구현되어 있음)

• 부트캠프 '홈' 페이지에 시안은 대현님껄로 결정(연간 타임라인 + 비교표)

  • 다만 타임라인은 추후 상세페이지에서 활용하기로 결정
  • 타임라인이 있던 자리에 대신 연간일정 넣기
  • '홈'에 있는 비교표는 그대로 사용하기

• 5E 테크세미나 개최(1주일에 한번씩 주제를 정해 설명)

  • 1회: License, 저작권 관련(미혜), 서버사이드렌더링(성상)

• 드디어 오프라인 회의 (2020.07.02 목)

  • 예약사이트에서 10~17시 시간확보하기

• 화,목,토요일마다 중간 점검

  • 정한 시간동안만 코드, 작업 공유 (코드 이그나이트)

  • 다음 중간점검: 2020.06.26 토 PM 4:00

🐾 4. 고민입니다.

• 알림설정을 어떤 식으로 구현할지 고민입니다

  • 로그인 없이 구독방식 vs 로그인한 사람에게만 알림
  • 로그인 안한사람 -> 메일 입력
  • 로그인 한사람 -> 알림 버튼
  • 전체 일정 알림 vs 각 일정 개별 알림
  • 전체 일정알림 -> 이멜쓰기 (로그인 한사람은 생략)
  • 각 일정 알림 -> 로그인하세요
  • 메일 vs 카톡 vs 문자 등
  • 이부분은 메일로 일단 정했습니다.

• 알림설정의 좋아요 횟수를 집계해서 관심도를 표현하면 좋을 것 같습니다.

• 리액트의 컴포넌트들을 세세하게 구별하면 좋을 것 같습니다.(1파일 1컴포넌트)

  • 장점1: 파일별로 컴포넌트가 구분되어 있어 컴포넌트들을 파악하기 쉽습니다.
  • 장점2: 컴포넌트들을 다시 불러올 때 같은 파일내의 필요없는 코드들까지 불러올 필요가 없습니다.

• 비교표에 한번에 여러 프로그램들의 정보를 담기 어려워 각자 고민해기로 했습니다

• Codepen(CSS), Material UI, MDB 등 디자인을 다루는 여러가지 라이브러리의 통일이 필요합니다

  • Material UI가 깔끔한데 쓸만한게 많이 없다는 의견이 있었습니다.

• Footer에 어떤 내용을 담을지 고민입니다.

  • 일단은 각자의 의견대로 만들어보고 비교해보면 좋을 것 같다는 의견이 있었습니다.

• JumboTron의 비율을 어느정도로 할지 고민입니다.

  
  

🐾 5. 할 일이 있습니다.

기한: 2020.07.02(목), 중간점검: 2020.06.27(토) PM 4:00

front-end

• 'Home' 페이지를 디벨롭합니다.
  • 연간일정 구현 (대현)
  • 비교 표 구현, 7개요소 포함 및 반응형 고려 (정아)
  • 내비바, 점보트론, 푸터 구현, 컬러스킴 적용 (미혜)

back-end

• 대현님 코드를 바탕으로 서버에 배포합니다.
  • 대현님 코드로 gcp 서버에 올려서 작동해보기
  • yebalja.com 에서 볼수있게 하기
  • 연간에 있는 타임라인 db화 해보기(타임라인이 상세로 가더라도 양식이 비슷하기때문에 미리해도 될거 같아서)
  • ssl 인증서 받아서 https로 접속할 수 있게 만들기
  • 대현님 리액트 타임라인 도와주기

[365kim]

제1회 테크세미나 뱉어놓고 까먹고 있었군요 껄껄껄 무려 5인 * 3시간 = 15시간의 방대한 내용을 아주 깰꼼하게 정리해주셔서 오늘 하루가 정리되는 느낌이었습니다. 감사합니다 !!!

[SeongsangCHO]

와우! 맞아요 테크세미나 ㅋㅋ 기대됩니다 ㅎㅎ 정리 감사합니다!!

[joey-ful]

많은 이야기가 오고 갔네요 ㅎㅎ 깔끔한 정리 감사합니다!

[365kim]

회의내용 중

• Jumbotron의 비율을 어느정도로 할지
• Footer에 어떤 내용을 담을지 이 고민에 참고하려고 주요 웹사이트에 홈화면 과 푸터 를 모아봤습니다.

보고나서 제가 느낀 점은

• 홈화면
  • (검색포탈을 제외하고는 거의) 점보트론 또는 광고배너로 화면의 2/3 정도를 차지해서 안정감을 주는 디자인이 공통적으로 나타났습니다.
    • 또 색상을 넣는다면 색상조합을 넣기보다 깔끔하게 단일 포인트 색상을 넣는 경우가 많았습니다.
    • 생각보다 애니메이션을 넣는 경우는 찾아보기 어려웠습니다.
• 푸터
  • 크기와 담는 내용의 베리에이션이 굉장히 컸습니다. 사이트맵 전체를 담을 경우 크기가 많이 커지는 것 같아요.
  • 또 공통적으로 보이는 '이용약관', '개인정보처리방침' 이런거는 법적으로 명시해야 하는 사항인지 알아보면 좋을 것 같아요!

이건 참조로 하고 저희만의 또 좋은 안을 얘기해보아용~~

[joey-ful]

색 선정 및 조합에 관한 꿀팁을 봐서 정리해봤습니다 https://digitalsynopsis.com/design/how-to-apply-color-to-user-interface/