항해99

4주차 리액트 숙련주차는 너무 너무 힘들었다.항해에서 준 스파르타강의에 베이스를 두지 않고 다른 강의들을 보고 따라하려 했으나 잘 되지 않았다. 아마 유료강의와 무료강의의 차이인 것 같다.

5주차가 조금 넘어가고 있는 지금 CS스터디에서 오해가 있었다. 나도 CS 책을 읽으면서 힘들어하고 있는데 내가 책읽기를 좋아하는 것으로 사람들이 알고 있었다. CS스터디 블로그의 내용만 보고 전공지식 겉햙기 하는 것을 추천하지 않고 전공책보다 쉽게 풀어써서 비전공자도 이해에 무리가 없는 이 책을 계속 읽기를 계속 하자고 했다. 하지만 책의 내용이 어려워지고 할 것은 많아지다 보니 그 불만의 화살이 엉뚱하게 나에게로 돌아오고야 말았다. 다 같이 동의한 내용과 의도였지만... 뭐... 왜 한 사람에게만 잘못했다고 덮어씌우는 건지. 덕분에 책을 읽는게 스트레스가 되어 간다. 이것 또한 항해에서 요구하는 문제해결 능력인가.

chapter4. React 숙련

이번주차의 과제는 단어장 만들기였습니다. 리덕스에서 CRUD를 잘 적용하는가 알아보는 과정이었습니다.

• 리덕스 미들웨어(파이어베이스) UPDATE ActionCreater

export const modifyWordFB = (word, word_id) => {
    return function (dispatch, getState) {
        updateDoc(doc(db, 'word', word_id), word);
        //firbase 정보를 바꿈으로 리덕스에 디스패치를 해주지 않아도 로드(리렌더링) 되면서 자동으로 실행!
    };
}

이번주차에서 제일 어려웠던 부분입니다. dispatch를 이해해야 했고 state 실행 및 가져오기를 이해해야 했습니다. 또한 미들웨어 doc 관련 함수들도 알아야 했습니다.

이번 주차에는

공부방법을 바꿔보았고 엄청난 시행착오를 겪어야만 했다. 생활코딩에 나와있는 리덕스 사용법을 따라했지만 미들웨어를 사용하지 않아서 다시 스파르타강의를 들었어야 했다. 그리곤 스파르타 강의 중 리덕스 파일을 여러개 만들어서 하는 프로젝트에 중점을 두고 개인과제를 진행하다가 큰 낭패를 보았다. 리덕스 파일을 여러개 만드니 컴포넌트들 중 어떤 것과 연동시켜야 할 지 몰랐고, 과제가 요구하는 최소한의 기능을 구현하는 것이 더뎌지다보니 결국 코드가 꼬여서 추가 기능을 만들지 못하였다.

팀원과의 소통 문제도 컸다. 모르는 기능을 얘기하는 장이 마련되지 않아서 이전 주차와는 다르게 모르는 것을 혼자만 풀기 버거웠던 것 같다.

Wrap-up

4주차 팀원들과의 한 주 회고

안 좋았던 점

• 개인적으로 힘든 주차였다.
• 이번주차가 제일 힘들었다. 하차 생각까지. 알던 분들도 하차해서 멘붕.
• 팀장으로 무게감을 덜 느꼈다.
• 회사 퇴사 후 폐인처럼 지내서 화면키기 민망했다.
• 역시나 가장 힘든 주. C반의 전반적인 분위기 않좋았음. 불만의 분위기.
• 리액트 주특기에 대한 전반적으로 안좋은 분위기

좋았던 점

• 팀원을 도와줄 수 있다는게 좋았다.
• 수다떠는 조여서 좋았다.
• 질문을 할 수 있어서 좋았다.
• 사람이 안 나갔다는 것이 좋았다.

개선하고 싶은 점

• 기본기를 쌓아야겠다. 과제만 푸는것이 아닌.
• 세세한 것을 알아가야겠다. 정신개도.
• 앞으로 모르는 것 적어두고. 집중에 도움이 되는것을 소비하자.
• 어찌됐든 수업을 잘 들어야겠다.
• 참여를 잘 해야겠다.

마무리

추천을 하든 비판을 하든 하는 나의 말이 다른 사람의 현재와 미래에 어떻게 영향을 끼칠지 생각하는 한 주 였다. 며칠동안의 고민은 이제 떨쳐내고 앞으로 할 공부에 대해 더욱 집중해야겠다. 아직 삼분의 이의 항해 여정이 남아있다. 깃헙 개인 페이지를 만들기 위한 공부를 게을리 하지 말자!!

항해99 이번주 WIL 키워드

React : 라이프사이클(클래스형 vs 함수형), react hooks

Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다.

Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다.

✌️ Hook 사용 규칙
Hook은 그냥 JavaScript 함수이지만, 두 가지 규칙을 준수해야 합니다.

• 최상위(at the top level)에서만 Hook을 호출해야 합니다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하지 마세요.
• React 함수 컴포넌트 내에서만 Hook을 호출해야 합니다. 일반 JavaScript 함수에서는 Hook을 호출해서는 안 됩니다. (Hook을 호출할 수 있는 곳이 딱 한 군데 더 있습니다. 바로 직접 작성한 custom Hook 내입니다. 이것에 대해서는 나중에 알아보겠습니다.)