ENs
what we did
- 오전 9시: 모여서, 전날 작업 더한 것 상황 공유 및 하루 계획 → 작업 더하고 저녁8시 1차 배포 하기로 함
- 오전~ 오후 시간: 각자 코딩, 작업
- 프엔 1시 반 모여서 작업한 것들 PR 진행
- 저녁 8시~ : ec2, pipeline을 이용한 1차 배포 try~
프엔_목업 완료 → 기능 시작
메인 페이지- 사이트인포, 테마리스트, 네브,네브체인지, 푸터,
로그인, 회원가입, 비밀번호변경 모달, 플랜트인포
플랜트카드, 서치, 마이페이지
각 테마별 페이지- 인테리어, 초보자, 행운 완료!
+ 이쯤되니, 문득, 나는 원래 css 는 대애충 구별 갈 정도로 배경색정도만 깔아두고 기능을 먼저 만졌던 것 같은데, 이번에는 협업이다 보니, 시안 설정 한데로 디자인을 구현하는 것을 먼저 하고, 기능을 이어 하게 됐다
하던 것과 다른 방식을 시도해볼 수 있어 좋고, 또 나보다 디자인 디테일에 대해 섬세한 팀원이 있어서 끝까지 한번 더 css 연습을 하게 되니 좋았다 (물론 아~~ 언제까지 다시해~~할때도 있었지만 ㅋㅋㅋ 무한 컨펌 받던 대학시절 떠오름;)
어떤 방식이 더 좋은 걸까? 답은 상황과 개발자 판단에 달린 듯 하지만, 효율과 기술스택 관련해서 정해진 답이 있는걸까 문득 궁금해진다,, 찾아봐야겠네..
++ flex-wrap, grid, 그리드에 대해
+++ slick-slide 리액트 슬라이더 라이브러리, 바닐라js 캐러셀 구현 글 비교
++++ CSS, 디자인 구현 관련: 플렉스 양각/음각 처럼 div를 감싸서 그곳에 패딩주고 자식width 100%로 정렬하는 방식!, transform으로 스르륵 올라오는 효과 주기(코드확인필요), useRef로 돔요소 지정- 모달창 끄기, 스크롤 고정, 셀렉터 인접자 선택 + 두 형제 요소에 hover 효과 같이 필요할 때
- 백엔드
##잊기 전에 써두는, API 수정해야할까 그냥 둘까 싶은
→ 실제로 서버가 클라에 응답하는 형태로 맞춰줘야하는데,
플랜트 리스트 같은 경우 (식물 전체 조회), created_at, updated_at 등 우리가 쓸 일이 전혀 없음
→ 실제 응답 바디에 들어갈 형태에 맞춰야 한다면 바꿔야 할듯 하나 놔둬도 모르긴 할듯;
1차 서버 배포 과정 (에러 기록)
- EC2 빌려서, 깃헙 앱 연결로 서버 자동 배포 (pipeline)
- ec2 내 node, nvm, npm 등을 설치 (설치 후 잘 깔렸는지 꼭 확인)
배포 과정 중 에러 케이스들
- error case 1 배포: 소스 단계 에러 - 증상: 그냥 실패 (아마도 인터넷 연결 등 문제?)
- 해결: 재시도 눌러 성공 (소스만)
- error case 2 배포 에러 - appspec.yml, scripts/ initialize.sh 등 파일 내의 경로 오류 (app.js 위치가 src 안으로 되어있었음)
- 해결: 경로를 수정해 줌
- error case 3 배포 에러 - 경로 수정해도 여전히 안됨
- 해결: 깃헙에 수정한 파일 push , 반영하고 파이프라인 새롭게 다시 구축 (자동 배포 실패 상태이므로 자동으로 소스 업데이트 되지 않음)
- error case 4 배포 에러 -"no space for dir...어쩌고" codePipeline 에러 상태
- 해결: EC2 프리티어 용량 부족 (우리 파일이 용량 더 큼) → 이미지 자료 지움
- error case 5 배포 성공 - 드디어 배포성공! 기뻤으나, 실제로 서버는 작동이 안됨 → 수동으로도 실행이 안됨 → 수동으로 app.js 실행 시키려했으나, npm install 도 안됨
-
EC2 에러:" Missing required argument#1" 메세지 (검색해보니 node@8, node@10 과 신규 패키지 문제 어쩌고, npm 을 최신으로 업데이트 시키라는 게 주요 내용_ 사실 제대로 이해 못했다ㅠ 이미 다들 지쳐 있어서 시간압박이 느껴져 일단 무지성 시도;)
-
sudo npm install -g n
sudo n latest
sudo npm install -g npm
hash -d npm
npm i-> npm install로 npm start 성공
중간중간 자잘한 코드 내 에러 있었으나 해결하고 깃 푸쉬함 (npm start 내 경로, 패키지.json 파일 내 수정 등, 뭔가 더 이것저것 많이 한 것 같은데 하나하나 다 생각이 안남 ㅠ이래서 바로바로 캡쳐 기록해야둬야하는데, 당장 해결하는데 맘이 급해서 항상 실행하긴 어렵다; 깃 푸쉬 많이했는데; 아마 팀원 깃헙 커밋로그 보면 알듯.. )
-
error case 6 - pm2
pm2 리스트에 아무것도 없는 증상 → 이게 pm2 관련 start.sh 명령어 경로가 오류였나?
→ 우선 수동으로 app.js 실행 시킴
→ 여전히 엔드포인트로 브라우저에서 겟요청 보내도 네트워크 에러-
"provisional headers are shown" 에러
→ 해결 : 인바운드 규칙 재설정 http,https 포트에 대해서가 아니라 모든 트래픽, ipv4, ipv6에 대해 허용
→ 마침내 서버 응답 확인 👏
→ 되다 안되다 pm2 쭉 백그라운드로 실행되지 않고,
online상태가errored로 바뀌어 있고, 한번씩 수동으로 다시 열어줌;
-
-
error case 7 - 클라이언트에서 요청 보내보기
서버가 일단은(?) 열렸으니, 클라이언트 요청을 보내 보기로 함
-
헷갈리던 것들, 엔드 포인트 주소뒤에 :8080 포트 번호를 붙여야 하는가?
→ 서버 설정에 따라 다른 듯 하나 우리가 임시로 연 서버는 붙여 줘야 했음 -
클라이언트에서 axios 요청을 보낼 때 http, https?
→ 서버를 어떤 서버로 열었냐에 따라서, 서버가 http면 http://ec2-endpoint:8080→ 뭐라도 서버 응답을 받고 싶었으나,
-
에러 증상: "Network Error" - 가정: CORS 문제 같음
→ 클라이언트 요청 헤더에 cors 관련 헤더 설정
-
// 헤더에 추가
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Max-Age: 3600
Access-Control-Allow-Headers: Origin,Accept, X-Requested-With, Content-Type,Access-Control-Request-Method, Access-Control-Request-Headers, Authorization→ 아직 미해결, CORS 는 항상 공부해둔 것 같은데, 맨날 모르겠는 놈..=_ = 분명 공부할 땐 아하 했자녀... 귓가에 들린다 "이건 꼭 아셔야 됩니다 여러분" 새침한 목소리ㅎ -> 모르면 공부해야지!! 요걸 해결해야 프로젝트 배포를 한다!!
개인
- 프로젝트 기간 동안에도 개인 학습기간을 지키자고 호기롭게 계획했지만ㅠ 코딩 시작하면서부터는 24시간이 모자라~~
-> 프로젝트 기능 구현에 힘쓰고, 커밋 규칙들, 프로젝트 기록 남기는 것들을 잘 챙기자, 짬나면 코테 계속, - 4주 프로젝트 아이디어 브레인스토밍 _
+ 스트레칭, 운동은 개발자에게 필수! 앉은 채로 몸이 굳어~~
+ 눈건강도 챙겨야겠다..
내일은
- 기능: 로그인, 즐겨찾기 추가/ 삭제 - 인풋, 상태 관련
- 잠깐 돌아보기
- 저녁 팀 모임, 휴식 충분히 갖기
