1. 주차가 바뀌었더니 팀장이었던 건에 대하여

실전프로젝트에서는 한 명은 백엔드로 두명이 모여서 팀을 구성 +신청하고, 나머지 인원이 랜덤으로 채워졌다.
현재 부팀장님이 먼저 같이 하자고 제안을 해주셔서 하겠다고 하셨고, 본인이 부팀장을 하시겠다고 하셨다.
사실 그건 신청하는 분 마음이니까 슈뢰딩거의 고양이처럼 신청하기 직전까지
내가 팀장이냐 아니냐는 부팀장님의 마음에 달렸겠지? 마음이 바뀌실 수도 있겠지? 하는 마음으로 OK했다.
근데 정말로 먼저 제안하시고 계획서 까지 써오신 부팀장님은 자신을 부팀장으로 신청하셨다.
어찌저찌 맡게 됐으니까 잘하고 싶다.

2. 기획회의 (2회차)

처음에는 캐치마인드 식 웹 게임을 개발하려고 했는데, 게임 로직 구현에 대한 개발 스코프가 너무 넓다고 판단되어서 6/29에 개발팀 회의를 통해 주제를 바꾸기로 했다. canvas로 그리고, 색과 두께를 바꾸는 것 까지 구현을 하고 웹소켓 공부를 하고 있었는데 아무튼 ... 그렇게 됐다.
와중에 웹소켓 공부하려고 node.js로 데이터 주고받는거나 채팅 주고받는걸 연습해봤다.
데이터가 바로바로 내손에서 왔다갔다 하니까 재밌었는데 실무는 안그러겠지 ...?(당연하다)

두번째 주제는 플러스 알파로 도전하게 되는 부분들은 전부 2차 스코프로 넘기고, (기존에는 도전하는 것 밖에 없었음)
대신에 프론트 백 각각 툴의 풀을 넓히고, 리액트와 스프링에 대한 이해를 높이고, 클린코드로 작성할 수 있게끔! 할 수 있는 주제로 선정했다.
그러다보니까 전 기수 실전 프로젝트와 완.똑(완전똑같음)이 되어버려서 더 잘해야겠다는 생각을 했다.

3. 클린코드

📎 SLASH 21 / 실무에서 바로 쓰는 Frontend Clean Code
정말 정말 클린코드에 대한 욕심이 많이 생긴다. 처음에는 정말 같은 기능이나 스타일을 중복적으로 쓰기 싫어서, 재사용할 수 있는건 재사용하고 보기 좋게 하고싶어서 찾아봤는데 그거뿐만 아니라 유지보수를 위한 커뮤니케이션을 위해서 꼭 꼭 필요한 점 같았다.
코딩이라는게 기능구현도 중요하지만 혼자 코딩할 게 아니면 (솔직히 혼자 코딩을 하더라도 ...) 클린코드가 엄청 엄청 중요한 것 같다.
실전 프로젝트 때 클린 코드로 짤 수 있었으면 좋겠다.

4. 리덕스, 리덕스 툴킷, 리코일, 리액트 쿼리

상태관리 툴에 대해서 고민을 해봐야할 것 같았다.
전 주차 까지는 계속 리덕스만 주구장창 쓰다가 잠깐! 미니프로젝트 주차 때 리덕스 툴킷을 써봤다.
근데 그 때 리듀서에 저장하는 코드가 이해가 안돼서 도로 리덕스로 돌아왔었는데
실전프로젝트에서는 좀 더 다양하게 배워보고 선택지를 늘려보고싶어서
팀원들과 서버 스테이트는 리액트 쿼리로 관리하고, 클라이언트 스테이트는 리덕스 툴킷으로 관리하자고! 얘기하고 공부했다.

내가 리덕스를 주구장창 써서 리덕스가 어떻게 움직이고 있는지 이해하고 있다고 생각했는데 아니었다.

매니저님이 리덕스 툴킷, 리액트 쿼리에 대한 숙제를 내주셔서 포켓몬 openAPI를 1)리액트 쿼리로 불러오고, 2)리덕스 툴킷을 써서 불러오는 걸 해봤다. 원래 처음에는 리덕스, 리덕스 툴킷, 리액트 쿼리 세 개 써서 데이터 가져오는게 숙제였는데 시간 내에 못할 것 같아서 리액트 쿼리부터 해서 갔다 🥺

포켓몬 API 완전 타쿠 중의 타쿠 서양 타쿠가 만든 것 같았다. 포켓몬마다 url이 또 따로 있고, 능력이나 성장 관련된건 또 따로 url 속에 있었다. 포켓몬 이미지도 게임 버전 별로.... 앞과 뒤 ... shiny 버전과 default 버전으로 나뉘어져있었다. 이렇게 나눌 수 있으니까 또 open API도 배포할 수 있고 그런거겠지 ...?

import { useDispatch } from "react-redux";
import { useSelector } from "react-redux";
import { getpoke } from "./redux/pokeSlice"
import React, { useEffect, useState } from 'react';

function App() {
  const [index, setIndex] = useState(1);

  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getpoke(index))
  }, [index])

  let pokemon_data = useSelector((state) => state.pokemon.data)
  let isloading = useSelector((state) => state.pokemon.loading)

  console.log(pokemon_data);
  console.log(isloading);

  return (

    <div>
      {isloading ? <h1 style={{color:"red"}}>loading</h1> : 
      <div style={{ textAlign: "center", marginTop: "20px" }}>
      <button onClick={() => setIndex((prev) => prev - 1)}> ⬅︎ </button>
      <button onClick={() => setIndex((prev) => prev + 1)}> ➡︎ </button>
      <h3>#{index}</h3>
      <h2>{pokemon_data?.name}</h2>
      <img src={pokemon_data?.sprites.front_default} alt="포켓몬 이미지" />
    </div>}
      

    </div>

  );
}

export default App;

⬆︎ 리덕스 툴킷으로 데이터 관리한 app.js
물론 리덕스보다 적은 코드로 구현할 수 있지만 리액트 쿼리 보다야 할일이 많았다.