TIL(21.05.10 - 15)

21.05.10(월)

- 해왔던 거와 흡사한 기능 구현은 이제 어렵지 않다.

새로고침 시 username을 불러오는 함수 실행시키고 닉네임 중복검사 기능을 완성하였다. 이미 다 기반이 다져져 있던 부분 숟가락만 얹은 거라 쉽게 쉽게 하였다.

 

- chart.js 첫 사용

chart.js 활용하여 막대그래프와 선 그래프가 함께 나오는 혼합 차트를 구현해야 한다. Library Docs를 보고 있긴 한데 거의 자바스크립트 위주라 필요한 정보 뽑아내기가 어렵다. 곧 MVP 출시해야 하는 시기가 다가오는 만큼 빨리 끝내야 하는데 내일까지는 성공해보겠다.

 

---

21.05.11(화)

- Chart 작업 완료

그래프 구현 성공을 하였다. 데이터를 넘겨받고 누락된 데이터들도 에러 없이 날짜순으로 표시를 해야 하는데 이 부분에서 알고리즘 공부를 해두면 왜 좋은지를 깨닫게 되었다. 프로젝트 끝나면 매일 1문제씩 자바스크립트로 알고리즘 문제를 꾸준히 풀며 연습해야겠다.

데이터 누락 있고 없고 그래프 상태

- 비밀번호 찾기, 회원 탈퇴 구현

처음으로 비밀번호 찾기 기능을 구현했다. 백엔드 분들이 잘 받쳐주니 생각보다 너무 순탄하게 성공하였다. 역시 팀워크가 중요한 것 같다.

 

- 서비스 준비 중 페이지(리프레쉬)

서비스 준비 중 페이지를 제작하였다. 너무 쉽다 보니 편하게 만들었고 의도치 않게 리프레쉬하는 시간이 되었던 것 같다.

---

21.05.12(수)

- CSS 활용이 눈곱 정도 늘었다.

디자이너분이 보내준 그래픽 화면을 구현하였다. 물론 디자이너분이 보내주신 게 폰트도 이쁘고 전반적으로 최고인 건 틀림없다. 그래서인지 그걸 짝퉁스럽게나마 따라 할 수 있게 된 부분이 뭔가 뿌듯했다. display:flex 도 헷갈리던 예전과는 다르다ㅎ

좌: 디자인 / 우: CSS모방작(me)

- 골빈해커님 강연

개발자 커뮤니티에서 골빈해커라는 닉네임으로 굉장히 유명하신 현) 탈잉 CTO님의 강연을 들었다.

들으면 들을수록 정말 뼛속부터 진짜 개발자 이신 것 같다는 느낌을 강렬하게 받았고 좋은 자극이 되었다. 해주신 말씀들의 대략적인 요약은

오픈소스 많이 읽기 / 오픈소스 참여해서 피드백받기 / 많이 만들어보기 / 레포 홍보하고 같이 만들기

였고 아래 인용문은 가장 중요한 결론급의 명언이라고 생각된 부분이다.

 

의도적으로 사이드 프로젝트를 하고 깊이 있게 파보며 지속적으로 새로운 지식을 탐구하라.
오픈소스 기여와 피드백을 받는 등의 활동을 멀리하면 개발자는 언젠가 도태된다.

추후에 취업을 하고서도 사이드 프로젝트를 통해 경험을 계속 쌓고 핑계 대지 않고 항상 의도적으로 깊이 있는 학습을 하는 습관을 만들어야겠다.

---

21.05.13(목)

- Swal 첫 활용

 sweetalert2를 활용해 기존 window.alert 교체 작업을 하였다. 단순 교체만 했다면 힘들진 않았겠지만 교체를 하면서 몰랐던 자잘한 오류들이 물밀듯 쏟아져 나오는 바람에 디버깅도 하고 교체도 하고 정말 고군분투했다.

그래도 바꾸고 나니 팝업창이 너무 예뻐졌다. 대만족!

팝업교체 작업 흔적

---

21.05.14(금)

- 거의 보수작업의 날

MVP 배포 준비를 앞두고 크게 비중 있는 일을 하며 일을 벌이기보다는 하루 종일 자잘한 오류들 찾고 고치고 뷰 손보고 상태 체크 수준의 코딩을 한 것 같다. 오류가 없으면 참 좋겠지만 그럴 일은 없겠지..

 

---

21.05.15(토)

- 페이지 새로고침마다 특정 함수를 실행되게 하는 방식에 대해 다시 생각해보다

처음 배울 때 새로고침 할 때마다 특정 함수를(ex. 유저 정보 가져오기) 실행시키려면 컴포넌트 전체를 관리하는 App.js 컴포넌트에서 하면 된다고만 배웠고 그렇구나 하고 생각 없이 사용만 하고 있었다.

우리 프로젝트는 첫 화면이 메인 페이지가 아니라 로그인 페이지인데 로그인을 하지 않아도 App.js 에 설정해둔 함수들이 계속해서 서버에 요청을 보내는 일이 생겼다.

처음에는 조건을 안 걸어서 그런가 보다 빨리 걸어야겠다고만 생각했지만 이내 다시 고민을 해보니 기존 App.js에서 하는 방식은 우리 프로젝트의 여건에 맞지 않는 방법이라는 걸 깨달았다. 설정해둔 함수는 로그인이 완료된 상태에서 새로고침 되었을 때만 실시가 되어야 했는데 로그인을 안 했는데도 함수가 실행되니... 맞지 않았다.

문득 로그인을 하고 넘어왔을 때만 보이며 붙박이처럼 따라다니는 헤더(navigator) 컴포넌트가 눈에 띄었고 이 컴포넌트에 함수를 설정하자 문제가 해결되었다.  역시 절대적인 건 없다는 걸 다시금 느꼈고 뭔가를 알 때 그냥 받아들이지만 말고 한 번 더 생각을 해보면서 이 함수를 왜 이렇게 쓰라고 알려준 건지 생각해보는 습관을 들여야겠다고 느꼈다.

 

- 반응형 작업 새로운 시도 : window.innerwidth, eventListener(resize)

특정 사이즈보다 작아지면 화면의 구조 자체가 바뀌어야 하는 문제 때문에 @media 만으로는 커버가 불가능하여 새로운 방법을 찾았다. window.innerwidth와 이벤트 중 하나인 resize 이다. 정확한 활용방법은 아직 제대로 이해하지 못한 채로 반응형을 만들어내서 찝찝하다. 어차피 다음 주에 주야장천 해 댈 거 같은데... 시간 내서 개념 제대로 잡고 넘어갈 예정이다.

 

- chart.js 반응형 작업..! 

기존에 작업했던 chart.js 그래프들이 반응형에 매우 비협조적이라 방법을 찾아냈다. options 항목에 

maintainAspectRatio : false 라는 속성을 넣어주면 상위 컴포넌트의 사이즈에 귀속되어 따라간다고 한다. 나중에 또다시 차트 작업을 하게 되면 무조건 사용할 속성일 듯하다.

 

- "s" 한 글자 있고 없고의 차이...(http - https)

https 배포를 위한 밑 작업을 시작했다. 기존엔 그냥 S3 설정만 해주면 끝났는데 s 하나 더 붙는다고

IAM, CloudFront, Route 53, S3, AWS CLI 등.. 거치는 곳이 정말 너무 많다. 시간이 모자라 다 끝내지 못했는데 다음 주 월요일 즈음엔 꼭 마무리를 지을 예정이다.