[Dev_log] 14 July (Tue)

[SeongsangCHO]

14 July(Tue)

---

:paw_prints:1. Done

Front End

• Navbar Reconstruction
• Footer alignment
• Jumbotron text location and SVG animation updating
• Table color and width adjustment
• Yearly Table color and CTA add

Back End

• login pade configuration
• login function implementation (JWT 이용)
• register page configuration
• Double check using render

---

:paw_prints:2. Learned

Learning about cookie, session and webtoken.

Implementing CTA using CSS, and learning

Learning about Asynchronous process, try, catch, finally

---

:paw_prints: 3. Decided

Don`t fasten Navbar

Detail Page implementation

Organize components for FAQ page

Share components in FAQ, Detail issue

FAQ, Detail issue에 정리한 컴포넌트들 공유

---

:paw_prints: 4. Thinking

We were set firewall setting in GCP Enviroment but certain ports (3000, 5000) are not running So we have to solve this problem.

I guess that we need to seek advise how to deploy server and we apply the correct method

Add a sidebar or think about the content in the sidebar

---

:paw_prints:5. To-do

Thusday 16:00 0Todo

• Front Team
  • Response the table column data format to back end team
  • 미혜 : Organize components to go into FAQ Page
  • 미혜 : Apply selected Nav item .active
  • 미혜 : except for bootcamp in sheet Think about non-regular program to go into nav bar using rollin text effect like naver real-time search box(login / register place)
  • 대현 : Page for program reviews
  • 정아 : Organize the timeline
  • 정아 : Timeline box size, interval constant
  • 정아 : CTA width size up and color change
  • 정아 : change the table font
  • 정아 : Increased table readability
  • 대현 : Yearly table font change, future scheduling
  • 대현 : Table components center alignment
  • 대현 : 42Seoul Program Order Change to the top.
• Back end Team
  • Issuing SSL certificate for HTTPS
  • Make it accessible from ports other than 80
  • Check if next static files can be built
  • 성상 : Checking if window env can access GCP VM using putty
  • 성상 : Implementing logout function
  • Updating the server DB
  • Search like nodemon to auto deployment tool in nextJS
  • Managing security related information using .env package

---

7월 14일 (화)

---

:paw_prints: 1. 마무리했습니다.

Front End

• Navbar 재구성
• Footer 정렬
• Jumbotron 텍스트 위치 및 SVG 애니메이션 조정
• Table 색상 및 너비 조정
• Yearly Table 색상 및 CTA추가

Back End

• 로그인에 필요한 페이지 구성
• 로그인 기능 구현 (JWT 이용)
• 회원가입에 필요한 페이지 구성
• Render를 이용한 중복값 체크

---

:paw_prints: 2. 배웠습니다.

쿠키, 세션, 웹토큰에 대한 이해 및 코드 적용

CSS를 이용한 애니메이션 및 CTA 적용 및 학습

비동기처리, try, catch, finally 문법 학습

---

:paw_prints: 3. 결정했습니다.

NavBar 고정하지 않기로 정함

Detail Page 기한을 다시 정해서 구현

FAQ Page에 들어갈 컴포넌트 정리

FAQ, Detail issue에 정리한 컴포넌트들 공유

---

:paw_prints: 4. 고민입니다.

GCP환경에서 방화벽설정을 했음에도 특정 포트 (3000, 5000)가 구동되지 않는 이슈가 발생했는데 이를 해결할 수 있어야 함

서버를 배포하는 방법에 대해서 자문을 구하거나, 정확한 방법을 적용해야할 듯합니다.

사이드바에 들어갈 컨텐츠나, 사이드바를 추가할지 미정

---

:paw_prints: 5. 할 일이 있습니다.

목요일 16:00에 팀 회의까지 Todo

• Front Team
  • [x] 컴포넌트에 들어갈 데이터들의 테이블 컬럼 정리해 백엔드팀에 요청
  • [x] 미혜 : Detail페이지 FAQ에 들어갈 컴포넌트 정리(Toggle list를 이용한 페이지구성)
  • [x] 미혜 : 선택된 내비아아템 .active 적용
  • [x] 미혜 : 현재 조사한 부트캠프 이외의 비정기적 프로그램까지 넣는 방안 구상(한화 IOS, 광주인공지능)과 실시간검색처럼 애니메이션효과가 들어간 rollin text 추가 (로그인/회원가입 공간)
  • [x] 대현 : 후기 보여줄 컴포넌트
  • [x] 정아 : 타임라인 구성하기
  • [x] 정아 : 타임라인 박스크기, 간격 일정하게 하기
  • [x] 정아 : CTA 좌우로 길게, 색, CTA커서 변경
  • [x] 정아 : 표 폰트 변경
  • [x] 정아 : 표 가독성 높이기 (주관 정보를 작은 크기로 프로그램명 이하로 넣거나 디테일로 빼기, 선발과정, 모집인원, 교육기간, 혜택으로 컬럼 축소, 표 컬럼에 선발과정에 대한 정보를 뱃지형태로 추가)
  • [x] 대현 : 연간일정테이블 폰트 변경 및 예정된 일정 빗금처리 같은 효과로 구분하기
  • [x] 대현 : 테이블 요소 중앙정렬
  • [x] 대현 : 42서울 프로그램순서 맨 위로 변경
• Back end Team
  • [x] HTTPS를 위한 SSL인증서 발급
  • [x] 80이외의 포트에서 접속될 수 있게 하기
  • [x] next정적파일로 빌드할 수 있는지 확인하기
  • [ ] 성상 : PUTTY로 윈도우 환경에서 SSH접속가능하도록 세팅
  • [x] 성상 : 로그아웃 기능 구현 및 admin이 아닌 계정 login시 발생하는 issue 해결
  • [x] 서버 DB 최신화 하기(로컬에서의 변경사항 적용하기)
  • [x] 프론트 서버가 계속 살아있을 수 있도록 nodemon같은거 알아보기
  • [x] .env패키지를 이용해서 보안관련 정보들 관리하기
  • [x] secho: 로그아웃 버튼 구현
  • [ ] secho: 프론트 빌드해서 서버 올리기(빌드로도 백서버와 통신가능한지도 확인)
  • [x] taelee: 헤더에 회원가입, 로그인 버튼 만들기
  • [x] 마스터 계정이 아닐때 jwt token 오류메세지가 아닌 '권한 없음'을 알려주는 페이지 만들기
  • [x] 백서버 프론트서버 taelee, secho 하나씩 나눠갖기
  • [x] taelee: 'www.yebalja.com' 'http://yebalja.com' 으로 들어왔을때 'https://www.yebalja.com'으로 리다이렉션하기

[365kim]

끼얏호우~! 빛의 속도로 정리해주셨군요 프론트+백 요소요소별로 꼼꼼하게 정리해주시니 프로젝트 진행상황 파악에도 앞으로 진도 나가는데도 좋은 것 같아요! 감사합니다!

• 사이드바 구현방법

[joey-ful]

데브로그 정리 감사합니다! 할 일 세부적으로 정리해주시니까 보기 편하고 너무 좋아요

[terry-yes]

너무 깔끔한 정리 감사합니다. 할일이 잘 나뉘어 있어서 앞으로 진행할 때 너무 좋을거 같아요

[SeongsangCHO]

GCP상에서 npm 명령어로 build되지 않는 이슈를 해결했습니다.

• front/package.json에 "build"스크립트를 next build로 변경하고 npm run build로 빌드가 잘 됩니다.

front/server.js를 추가해야하는지 고민입니다. node로 80포트로 서버를 열었는데 next build, next start로 .next 정적파일을 배포하는 것이 아닙니다. next build, start로 정적파일 배포를 하면 back서버와 통신할 수 없는 이슈가 있을 것 같은데(뇌피셜) server.js를 추가해서 node로 서버 구동은 확인했고, 무중단서비스에 필요한 pm2로 이를 해결할 수 있을 것 같습니다. pm2를 통해 front서버 구동하는 방법을 조금더 찾아보겠습니다.

HTTPS를 위한 SSL인증서도 server.js를 통해 적용하는 것 같습니다. 더 확인해보겠습니다.

하루죙일 한거 같은데 결과물이 암것도 없어서 넘모 슬퍼욜,,ㅠ

로컬에서 pm2 start server.js로 했는데 80포트로 잘 돌아갑니다. SSH 접속이 아직 안되어서 확인은 못해봤습니다. 07/17/ 12:28, 아직도 접속 X,, => 오 해결 front/pm2 start server.js로 실행했습니다~! 참고자료

GCP상에서 npm 명령어로 build되지 않는 이슈를 해결했습니다. front/package.json에 "build"스크립트를 next build로 변경하고 npm run build로 빌드가 잘 됩니다.

next build참고 nextJS에서 SSL인증서 적용 nextJS HTTPS적용한 깃헙예제 SSL인증서발급 GCP 로드밸런서 ~ SSL인증서 적용 nodejs에서의 SSL인증서 적용 포맷

[terry-yes]

I added BackEnd TODO list.

---

백엔드 투두리스트 추가했습니다~