[ 22.04.20 ] 오늘의 회고

 

⏳ 돌아보기

 

1. Mbti 과몰입 테스트 리펙토링

2. 알고리즘 공부

3. FE_interview 스터디 준비하기

4. 코딩테스트 준비

 

Mbti 과몰입 테스트

 

 

1. Home에서 버튼이 한쪽으로 쏠리는 현상을 교정했다

 

🤨 원인

트위터에 웹을 올리고 많은 분들이 테스트해주면서 피드백해주셨다.

 

정말 정말 감사합니다!

 

그 중 한 피드백이 아이폰 12 미니에서 home 화면 버튼과 form 쏠림 현상이 나타난다는 피드백이었다.

분명히 크롬 개발자 모드로 볼 수 있는 모바일 화면들을 두루두루 확인했다고 생각했지만,

예상치 못한 피드백이었지만 문제의 원인을 빠르게 파악할 수 있던 피드백이었기 때문에 다행이라고 생각했다.

 

🥳 결과

home.module.css에서 form width를 90%로 설정하니 form이 제 자리를 찾았다.

 

 

 

 

2. q_mbti.jsx 리펙토링

 

  useEffect(() => {
    if (point >= 10) {
      setPointRange(1);
    } else if (point > 3) {
      setPointRange(2);
    } else if (point >= -3) {
      setPointRange(3);
    } else if (point > -10) {
      setPointRange(4);
    } else {
      setPointRange(5);
    }
  }, []);

  useEffect(() => {
    if (location.state === null) {
      navigate("/");
    }
  }, []);

🤨 원인

함수의 역할을 한눈에 알기가 어려웠다

똑같이 로드될 때 함수를 불러오는 useEffect가 특별한 이유 없이 두 번 쓰였다.

 

🤔 고민

=> 함수를 이용해서 역할을 한눈에 알아보기 쉽게 만들면 처음 코드를 보는 사람도 빠르게 이해할 수 있을 것 같다

=> useEffect를 하나로 통일하는 것이 낫겠다.

 

 

  const isAccecedOutsideLink = () => {
    if (location.state === null) {
      navigate("/");
    }
  };

  const calcPointRange = () => {
    if (point >= 10) {
      setPointRange(1);
    } else if (point > 3) {
      setPointRange(2);
    } else if (point >= -3) {
      setPointRange(3);
    } else if (point > -10) {
      setPointRange(4);
    } else {
      setPointRange(5);
    }
  };

  
  useEffect(() => {
    isAccecedOutsideLink();
    calcPointRange();
  }, []);

🥳 결과

이렇게 리펙토링해서

=> 함수명을 보고 하는 일이 바로 유추될 수 있도록 하였고

=> 쓸데없이 useEffect를 두번 사용하지 않게 했다.

 

 

 

3. 폴더 구조화

 

<result.jsx>

const Result = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const [paper, setPaper] = useState("");
  const user = location.state && location.state.user;
  const pointRange = location.state && location.state.pointRange;
  const mbti = location.state && location.state.mbti;
  const result = [...
  ];
  
  useEffect(() => {
    if (location.state === null) {
      navigate("/");
    }
    setPaper(result[pointRange * 1 - 1]);
  }, []);

  return (
    <section className={styles.resultContainer}>
      <h1 style={{ fontSize: "2rem" }}>🥳</h1>
      <h3 className={styles.resultHeader}>
        {user}님의 MBTI 과몰입 정도는
        <hr />
      </h3>
      <h2 className={styles.resultRes}>과몰입 검사결과 : {paper.res}</h2>
      <h3 className={styles.resultDesc}>{paper.desc}</h3>
      <h3 className={styles.resultDescription}>{paper.description}</h3>
      <Graph pointRange={pointRange} mbti={mbti} />
    </section>
  );
};

export default Result;

 

<graph.jsx>

const Graph = ({ mbti, pointRange }) => {
  const [testArray, setTestArray] = useState([]);
  const [openRes, setOpenRes] = useState(false);

  const getResultArrFromFireBase = async () => {
    await onSnapshot(doc(db, "userResults", "resultArr"), (doc) => {
      setTestArray((prev) => [...doc.data().resultArr]);
    });
  };
  const sameRange = testArray.filter((res) => res.Range === pointRange);
  const sameMbti = sameRange.filter((res) => res.mbti === mbti);
  const per = ((sameMbti.length / sameRange.length) * 100).toFixed(2);

  useEffect(() => {
    getResultArrFromFireBase();
  }, []);

  return (
    <section className={styles.dataContainer}>
      <h2 className={styles.testProgress}>
        지금까지 {testArray.length}명이 테스트를 진행했어요
      </h2>
      <h3 className={styles.myMbtiPer}>
        {mbti}유형의 사람의 {per}%가 같은 결과를 얻었습니다
      </h3>
      <Share />
    </section>
  );
};

export default Graph;

 

🤨 원인

이렇게 작성이 되었는데

Graph에서 할 수 있는 일들을 다 result에서 하는 것이 더 효율적으로 느껴졌다

 

🤔 고민

왜 그렇게 느꼈는지 고민해보면서

=> react의 폴더 구조화와

=> react 컴포넌트 분리 기준

=> 프론트엔드의 명명 규칙

에 대한 이해가 더욱 필요함을 느끼게 되었다

관련 자료를 하나하나 찾아가면서 더 좋은 코드로 바로 리펙토링해보고 싶었지만

깊게 들어가게 되면 오늘 계획해둔 일정이 심하게 어긋날것 같아 관련 내용은 내일 시간을 따로 빼서 찾아보기로 했다.

 

🥳 결과

21일 어떻게든 시간을 따로 마련해서 관련 내용을 업로드해야지..

할일이 산더미다

하고싶은 일도 산더미다

화이팅!!

 

 

알고리즘 공부 / 코딩테스트 준비

나동빈님의 파이썬 알고리즘 / 코테 관련 강의를 유투브에서 발견하고 시청했다.

기본이 덜 잡힌 상태로 테스트를 수행했기 때문에 성적이 좋지 않았던 것 같다.

 

1. 인프런 코딩테스트 강의 듣기(구현 방법 / 알고리즘)

2. 나동빈님의 파이썬 코딩테스트 강의 (기본 / 알고리즘)

3. 코딩테스트 열심히 풀어보기 (구현)

의 방법을 이용해서 더 나아갈 것 같다.

현재 가장 중요한 것은 2번 기본기와 알고리즘 관련 이해를 키우는 일이라고 생각해서 나동빈님의 강의를 중점으로 알고리즘 공부를 수행해야겠다.

 

 

 

 

FE_interview 스터디 준비하기

내가 이번에 준비하는 내용은 React의 상태 관리 툴에 대한 내용이다

상태의 정의, 상태 관리가 필요한 이유, 상태 관리 툴들을 비교하고

react와 다른 언어들의 상태 관리가 가진 공통점과 차이점에 대해 비교하는 글을 쓸 예정이다.

 

친구들과 여행 일정을 짜느라 오늘 다 완성하지 못했다

내일 오전까지 완성에서 PR할 예정.