2020.07.13.

* 아래의 글은 Do Your Best 프롤로그를 먼저 읽으신 후 읽으시기를 권장합니다.

---

2020.07.13

 

오늘의 목표

• simplecounter를 활용한 scorecounter 개발하기

동기

• class형 컴포넌트가 아닌 함수형 컴포넌트로 개발하고 싶어서
• react hooks를 사용한 함수형 컴포넌트 개발에 익숙해지고 싶어서
• 다른 사람들이 포기 편하도록 Readme 파일 정리

---

React Hooks의 기본정보를 알기 위해서는 2020.07.08.과 2020.07.09. 게시글을 보시면 됩니다 😀

 

오늘 scorecounter 개발을 완료하고 싶었지만 말도 안되는 오류를 만나서 완성하지 못했다.

 

그 말도 안되는 오류와 함께 오늘 개발하면서 새롭게 배운 지식들을 적어보려고 한다!

 

일단 useState로 초기 값을 설정할 때 object형으로 초기 값을 설정하고 싶었다.

그래서 열심히 구글링을 해서 찾은 좋은 해법이 있었다. 아래의 예시 코드를 보면서 알아봅시다😀

import React, { useState } from 'react';

const Home = () => {
  const [ player1, setPlayer1 ] = useState({ name : "", startScore : null, endScore : null });
}

export default Home;

코드는 생각보다 간단했다! useState() 안에 내가 원하는 값들을 키와 벨류로 object형으로 묶어서 넣으면 되는거였다!

 

React Hooks에서 react-router-dom의 history를 사용하는 방법이 궁금하고, 필요했다.

그래서 찾아 본 결과 이 코드도 정말 간단하고 쉬웠다.

import { useHistory } from 'react-router-dom';

const Home = () => {
  const history = useHistory();
  return <button onClick={() => history.push('/profile')}>Profile</button>;
}

해답은 react-router-dom에서 React Hooks를 위해 useHistory를 지원해주었다.

const history = useHistory(); 로 history를 사용합니다.

그리고 이벤트 발생시 history.push()로 내가 원하는 링크로 이동합니다!

 

앞서 이런 문제점들을 해결하고 기분좋게 코딩을 하던 중 말도 안되는 오류를 만났다...

실제 오류 화면

구글링을 하면서 찾아보니까 이 오류의 의미는 '액션은 순수한 객체여야 하며 비동기 액션을 위해서는 커스텀 미들웨어를 쓰라는 뜻'이다.

그래서 이것을 해결하기 위한 방법을 찾아보니, redux-thunk를 사용하여 비동기 처리를 해주어야하는 것 같다.

하지만 나는 그것을 모르고 다른 방법으로 삽질하다가 시간을 다 날린 후라서, 내일 redux-thunk를 공부하면서 해결 해 보아야겠다. 내일 무조건 오류를 고치고 프로젝트를 완성할 것이다.

---

이 후 리액트 디자인 패턴을 공부해보았다.

그런데 내가 현재 사용하고 있는 방법이 Container + Presenter Pattern 이였다.

 

그런 의미로 Container + Presenter 패턴을 알아보자!

• Container 컴포넌트에서는 논리, Logic, api연결 등을 갖고 있고,
• Presenter 컴포넌트는 UI, 사진 등 실직적으로 보이는 View를 가지고 있다.

이것을 정리해서 여러분이 이해해야 하는 것은

1. 컨테이너는 state도 이해하고, api, 리덕스를 부를 수 있다. (state 변경, 리덕스 액션, 디스패치...)
2. 프레젠터에서는 컨테이너의 props 값에 따라 데이터가 어떻게 보이는지 알려준다.

이것이 Container Presenter 패턴이다.

 

데이터 그리고 데이터 출력 방법을 분리하는 것!

 

+) 디자인 패턴에 대해서는 추 후에 더 많이 공부해서 총 정리한 글을 작성하겠습니다!

---

2020.07.13. 회고

 

오늘의 목표를 이루었는가?

• simplecounter를 활용한 scorecounter 개발하기

2020.07.13. 하루를 지낸 소감

일요일이 지나고 월요일 아침에 일어나는것은 역시 지옥이였다. 진짜 너무나도 정말 많이 피곤했다. 그렇게 오늘 하루를 시작했는데 그래도 아침부터 정신차리고 공부한 것은 다행이라고 생각한다. 하지만 버티고 버텨도 저녁시간 쯤 되니 피곤하고 의지가 약해지는 것은 사실이였다. 그래도 저번 주 보다 더욱 더 오래 공부할 수 있었던 것은 '공부할 때 공부하고, 놀 때 놀자'라는 생각을 계속 생각하고 지낸 덕분인 것 같다. 나는 오늘 수업시간에 열심히 코딩하고, 쉬는시간에는 칼같이 하던 것들을 멈추고 나에게 휴식을 주었다. 이게 흐름이 끊기거나 비효율적이라고 생각이 들 수는 있지만 장기적으로 보았을 때 이게 나는 더 도움이 되는 것 같다.

오늘 scorecounter를 완성 못한 것이 너무 아쉽다. 상상치도 못한 곳에서 오류가 나서 멘탈도 좀 약해졌고, 다른 것들로 삽질한다고 많이 지쳐있는 상태여서 끝까지 집중못한 것 같다. 내일은 무조건 scorecounter를 완성해야겠다.

내가 말하는 scorecounter 완성에는 반응형 웹 디자인까지 포함되어 있는 것이다.

일단 scorecounter를 완성하면 React Hooks와 함수형 프로그래밍과 충분히 친해질 것 같다. 그러면 이 후에는 JavaScript에 대한 중요한 지식들과, 프론트엔드 개발자로서 가져야할 지식들을 글로 정리하면서 공부해야겠다.

이 지식들이 머리에 다 담겨진다면 TypeScripts를 공부하면서 scorecounter를 TypeScripts로 리팩토링 해야겠다. 내 목표는 이 과정을 2주 안으로 끝내고 싶다. 할 수 있을 것이다 아자아자 힘내서 열심히 해보자.

오늘도 긴 글 읽어주셔서 감사합니다😀 내일은 완성된 scorecounter 모습을 보여드리겠습니다!

이 글을 읽으신 모든 분들, 대한민국의 모든 분들 좋은 하루 보내시고 내일도 힘내서 살아봅시다! 감사합니다😀🥰

 

아래는 이 글을 쓰면서 도움을 받은 링크입니다.

저의 글보다 훨씬 더 좋은 영상과 자료들이 많으니 아래의 사이트도 한 번씩 들어가보시는 것을 추천드립니다!

 

React Hooks useHistory - https://css-tricks.com/the-hooks-of-react-router/

React Hooks use Object in useState - https://stackoverflow.com/questions/54150783/react-hooks-usestate-with-object

 

저의 깃헙 링크도 첨부하겠습니다. 공부하면서 작성한 코드가 있으니 들어오셔서 봐주시면 감사하겠습니다!

Bigstar1108 - https://github.com/Bigstar1108/Do_Your_Best