Archive

2021-05-12 TIL

12 May 2021 | 로그포스

2021-05-12 TIL

  • 오늘 한 것
  1. 학원 대면수업 (15:30~22:00) 프로젝트 기간
  2. 팀 프로젝트 스토리보드 제작 - 프로젝트 어드민 스토리보드 완성
  3. 팀 프로젝트 마무리
  4. Udemy 모던 리액트와 리덕스 - 토이 프로젝트에서 openweather API에 도시명으로 axios 요청을 보내서 받은 5일간의 기상 예측 데이터를 가져와 그래프로 그려냈다. 이때, react-sparklines 패키지를 이용했는데 사용법도 간단하고 그래프도 잘 나왔다. 데이터를 넣을때는 해당 컴포넌트에서 useSelector를 사용해서 store에 저장된 기상 데이터를 꺼내어 사용했다. 이 데이터에 담긴 위도, 경도를 이용하여 google-map-react 패키지로 해당 지역의 지도까지 그리는데 성공했다. 이 차트와 맵 컴포넌트는 재사용을 위해 독립된 컴포넌트로 만들어주었다. 재밌는 토이 프로젝트였다.
  5. Typescript 개본 개념 정리 - 얼마전 구입한 Do it! 타입스크립트 프로그래밍 책을 짬짬이 들여다보고 있다. 그날 배운 내용은 그날 바로 정리하도록 해야겠다.
  • 내일 할 것
    1. 학원 대면수업 (15:30~22:00) 프로젝트 기간
    2. 팀 프로젝트 최종 점검
    3. Udemy 모던 리액트와 리덕스 강의 수강
    4. Typescript 기본 개념 정리


  • 끝으로

팀 프로젝트는 다행히 일정 내로 ppt까지 최종 완성했다. 내일은 데이터좀 넣고 최종 테스트를 해야겠다.

오늘의 한 줄 총평 : 금요일 발표

2021-05-11 TIL

11 May 2021 | 로그포스

2021-05-11 TIL

  • 오늘 한 것

  1. 학원 대면수업 (15:30~22:00) 프로젝트 기간

  2. 팀 프로젝트 스토리보드 제작 - 프로젝트 테스트도 겸하면서 실제 서버에 올린 웹 사이트에 접속하여 기능을 하나하나 캡쳐해가면서 스토리보드를 제작하고 있다.

  3. 팀 프로젝트 마무리

  4. Udemy 모던 리액트와 리덕스 - openweather API에 axios 요청으로 받은 primose 객체를 payload로 그대로 전달하면 redux-promise 미들웨어에 의해 뼈와 살이 분리되어 데이터만 받을 수 있다. redux-thunk, promise 등 미들웨어를 예전에 사용해본 경험은 있지만 정확히 무슨 일을 하는 애들인지는 몰랐다. 다시 복습을 하면서 정확히 알아가고 있다. 또, hooks에 익숙해지기 위해 react-redux도 hooks로 사용하고 있는데, mapStateToProps 와 같은 해괴한 메소드를 사용하지 않아도 돼서 정말 편리하다.

  5. 자바스크립트 쿠키로 팝업창 제어 - 같은 팀원이 우리 사이트가 피싱 사이트가 아님을 알리기 위해 팝업창을 띄우자고 제안했다. 지난번에 쿠키로 팝업창을 제어하는 포스팅을 한 적이 있어서 바로 vscode를 키고 간단하게 코드를 짜봤다. 하루동안 보지 않기, 일주일간 보지 않기 등의 기능을 체크하면 그 기간동안 팝업창을 띄우지 않는 기능인데, 사용자가 접속을 하면 우선 쿠키의 유무를 확인하여 팝업창을 띄운다. 첫 방문시에는 당연히 쿠키가 없을 것이고 체크박스를 체크한 채로 닫기 버튼을 누르면 그 때 쿠키를 생성한다. 쿠키에 설정해놓은 유효기간으로 날짜를 조정한다. 쿠키에 expires를 넣을 때에는 date 객체를 toUTCString() 메소드로 변환 후 넣어야 한다.

  • 내일 할 것
    1. 학원 대면수업 (15:30~22:00) 프로젝트 기간
    2. 팀 프로젝트 ppt 제작
    3. Udemy 모던 리액트와 리덕스 강의 수강


  • 끝으로

발표가 하루 미뤄진 탓에 여유가 더 생겼다. 마지막까지 확실히 테스트하여 100% 완성된 프로젝트가 될 수 있도록 만전을 기해야겠다.

오늘의 한 줄 총평 : 이래서 훅스 훅스 하는구나

2021-05-10 TIL - 팀 프로젝트 최종 점검

10 May 2021 | 로그포스

2021-05-10 TIL - 팀 프로젝트 최종 점검

  • 오늘 한 것
  1. 학원 대면수업 (15:30~22:00) 프로젝트 기간
  2. 팀 프로젝트 마무리 - 그동안 포스팅은 안했지만 자잘한 프로젝트 디버깅과 오타 수정, 실제 Data 삽입, 에러 해결 등을 하며 프로젝트 마무리 단계 작업을 하고 있었다. 하나씩 자세히 들여다보니 생각지도 못한 오류가 계속해서 나왔다. 예를 들면.. 회원가입 유효성 검사 단계에서 기상천외한 방법으로 가입을 시도하는 사용자를 막기 위해 코드를 다시 뜯어고쳐야했다. 실제 서버에 올리게 되면 다시 한 번 정밀한 테스트를 거쳐야겠다.
  3. 팀 프로젝트 ppt 작성 - 손이 남는 팀원들과 프로젝트 발표 ppt 제작에 들어갔다. 요구사항 관련 부분과 스토리보드를 만드는데 이거 생각보다 양이 만만치가 않다. 앞으로 남은 프로젝트 기간은 ppt 만드는데에만 열중하게 될 것 같다.
  4. Youtube Clone Project / Chatbot Project with React, Node.js - 전에 하던 유튜브 클론 프로젝트를 마치고 주말동안 Google Dialogflow를 활용한 간단한 Chatbot을 만드는 프로젝트도 끝냈다. Node.js도 사용하면 할수록 재밌는것 같다. Spring과는 담을 쌓고 지냈지만 Node.js라면 백엔드 공부도 재밌게 할 수 있을것만 같은 느낌이 든다. 지금껏 React의 class형 Component에만 익숙해져있었는데 이 프로젝트들을 거치면서 Hooks도 점점 손에 잡히고 있음을 느꼈다. 또, Redux를 Hooks로 사용하는 방법을 배우게 되어서 도움이 많이 되었다.
  • 내일 할 것
    1. 학원 대면수업 (15:30~22:00) 프로젝트 기간
    2. 팀 프로젝트 ppt 제작
    3. Udemy 모던 리액트와 리덕스 강의 수강


  • 끝으로

그간 프로젝트 마무리 단계에 해야 할 일처리가 많아 블로그에 소홀해지고 말았다.

어차피 다 핑계일 뿐이고.. 다음 스텝으로 나아가기 위해 다시 한 번 마음을 다잡고 가야겠다. 😤

이 팀 프로젝트의 끝은 내게는 곧 시작일 뿐이다.

이제 진정 하고 싶은 개발을 할 수 있게 된다.

리액트 복습은 지난 주(?) 부터 해왔고 Node.js로 API 서버 구축하는 방법도 배웠으니

이제는 Typescript까지 적용해서 두 번째 프로젝트를 할 계획을 짜봐야겠다.

오늘의 한 줄 총평 : 끝이 곧 시작이오

React Class형 컴포넌트에서의 this와 bind()

10 May 2021 | 퍼온자료 Javascript Jquery

event target vs currentTarget 차이점

10 May 2021 | 퍼온자료 Javascript Jquery