[항해99]WEEK4-WIL

   WEEK4. React 기초   

 

• 주특기: React
• 내용: 무슨 말씀이신지..?
• 튜터님: 참 쉽죠?
• 나:

이번 주특기 기초 기간은 팀원들과 튜터님이 없었더라면 마치지 못했을 거다ㅠㅠ(압도적 감사)

첫 과제를 시작하려는데 막막했던 기억이 난다. 모든 강의를 듣고 월요일에 vs code를 켜고 시작하려는데, 뭐부터 시작해야할지 몰라 일단 와이어 프레임에 따라 뷰만 만들어 놓고 멍때리며 우왕좌왕 했었다. 너무 막막해 튜터님께 도움 요청을 했더니 아직 순서가 익지 않아서 그런거라고, 순서 먼저 짚어주셨다. 크게 보자면,

 

① 와이어 프레임 확인

② 뷰 만들기 및 기능 구현

③ 리덕스로 상태관리 하기

④ 파이어베이스로 서버리스 작업

 

순으로 하는 것이고, 구체적으로 보자면

 

① 페이지별로 구현해야하는 기능을 적어 놓고, 뷰를 만들기 및 기능 구현에서 코드를 짠다.

② 페이지별로 컴포넌트를 만들어 뷰 껍데기를 만든다.

• 라우팅으로 페이지를 나누고 연결이 잘 되는지 확인하고 styled-components로 css를 한다.
• ①에서 적어 놓은 기능을 구현한다.
• 사전이 보이는 페이지는 가짜데이터를 3-4개 만들고 useState로 상태 관리 한다.(리덕스로 넘어가면 useSelector로 상태관리)
• 똑같은 형태의 사전카드가 반복되므로 map함수를 이용해 반복시키고
• state에 값이 추가되는지 보기 위해 임시 버튼을 만들고 {함수}를 넣어서 실행 해본다.
• 사전을 추가하는 페이지는 useRef를 이용해 input의 데이터를 받아 오고, 잘 나오는지 콘솔로그로 확인한다.

③ 리덕스를 사용해 상태 관리를 컴포넌트 밖에서 하면서 기존 부모-자식간의 제한적이던 상태관리에서 벗어난다.

• 리덕스 모듈을 만든다.
• action: 데이터(상태) 변경 시 발생하는 것으로 객체형태를 갖는다. dispatch함수로 스토어에 전달된다.
• initialState: is_loaded: false를 추가해 새로고침시 initialState가 안보이도록 한다.
• action creators: export해서 쓸 때, action을 불러오는 함수다. 객체를 반환한다.
• reducer: 리덕스에 저장된 상태(데이터) 변경 함수로 state(현재 상태)와 action(액션객체)를 파라미터로 받는다. 액션객체를 받으면 전달받은 액션의 타입에 따라 업데이트 로직을 정의한다.
• store: 상태(데이터)가 있는 곳으로, 컴포넌트는 스토어에 상태값 변화를 알리고 스토어는 이를 다른 컴포넌트들에게 전달한다.

④ firebase의 firestore(NoSQL)를 이용해 서버리스 작업을 한다. (리덕스도 이해를 다 못했는데, 파이어 베이스라니)

 

많은 분들의 여러번에 걸친 터치 덕분에 완성 할 수 있었다. 배포하는데 한시간 가량 걸려 조금 걱정됐지만 밥 먹고 오니 돼있더라. 만들때는 너무 모르겠고 이렇게 하는게 맞는건지 싶었는데, 배포된 화면을 보니 드디어 끝났다는 후련과 아, 이런걸 추가하고 이런건 뺄걸 하는 아쉬움. 내가 그래도 완성은 했구나 하는 뿌듯함과 스스로 만든게 아니라 온전히 내게 아니라는 불안한 감정들이 알 수 없이 이어졌다. 뭐 어떠랴. 처음인데. 코드 십만줄은 쳐야 익숙해진다니 그냥 해보는 수밖에 더 있겠나 싶다. 

 

당장 내일부터는 심화과제 시작하는데 이번엔 어디까지 혼자 할 수 있을지 벌써부터 떨린다^ㅡ^ 분명 튜터님이 기초과정이 심화과정보다 더 힘들다 그랬는데... 나한테 왜 그랬을까... 과정 이름에서부터 아니란걸 왜 몰랐을까.... 정신 차리고 다시 강의 들으러 가야지. 항상 와이어프레임 먼저 보고 구현할 기능들을 정리한 후, 컴포넌트를 만들고 뷰를 만들고 기능구현을 하는게 순서다. 내일도 (일단은) 침착하게 시작하자.