Log 7/24 useState, Oauth, flexbox

Dev Log

1 useState

오늘 만났던 어려웠던 점은 잘 알고 있다고 생각했던 React Hook 인 useState 였다. useState는 특정한 변수의 상태를 항상 체크하는 React의 특별한 메소드로 이전의 Class Component의 this.state와 같은 기능을 한다. 이전에 공부할 때 겪었던 문제였던 걸로 기억하는데 오랜만에 다시 만나고보니 더 당황스럽기도 했다. useState가 onChange 이벤트 메소드를 통해서 변화를 감지하여 변수에 할당하는 기능을 하는데 이 부분이 한박자 늦은 state 변화가 이해하기 어려운 부분이었다.

import { useState } from 'react';
...
const [currentId, setCurrentId] = useState({ id: '' });
...
const inputId = (e) => {
  const input = e.target.value;
  setCurrentPassword({...currentId, id: input });
  console.log('안', currentId);
};
console.log('밖', currentId);
...
  <input
   id="input-id" 
   value={currentId.id} 
   onChange={(e) => inputId(e)}
  ></input>

여기서 안과 밖의 결과가 다르게 나온다. id 입력 창에 한 글자를 입력하면 '안'에는 state 변화가 없고 '밖'에만 state 변화가 있었다. 랜더링 순서의 문제인 것 같았지만 변화를 즉시 적용시키고 싶었는데 그 해결책을 찾기가 쉽지 않았다. useState만 사용해서는 저렇게 했을때 왜 '안'과 '밖'의 콘솔로그가 다른지 이해하기가 어려웠다. 결국은 useEffect를 사용해서 랜더링 이후에 재랜더링을 통해서 변화를 적용했다.

import { useState, useEffect } from 'react';
...
const [currentId, setCurrentId] = useState({ id: '' });
...
useEffect(() => {
  console.log('effect', currentId);
},[currentId]);
...
const inputId = (e) => {
  const input = e.target.value;
  setCurrentPassword({...currentId, id: input });
  console.log('안', currentId);
};
console.log('밖', currentId);
...
  <input
   id="input-id" 
   value={currentId.id} 
   onChange={(e) => inputId(e)}
  ></input>

이렇게 해서 우선 변화된 값을 적용했지만 저렇게 하지 않고도 적용할 수 있는 방법을 더 찾아보고 프로젝트 끝난후에 더 공부해봐야겠다.
참고 기술블로그

2 Oauth

두번째는 Oauth의 리다이렉트 문제였다. Oauth의 리다이렉트를 권한을 주는 서버 API의 앱을 등록할때 url을 적을 수 있는지 몰랐다. 이 부분으로 입력해두고 코드에서 정해놓은 uri로 보내야 하는데 다른 곳을 보냈더니 mis match 에러가 발생했다. 이 부분도 더 공부해야겠다. AccessToken과 RefreshToken을 어디로 보내는 것이 안전하고 보관에 용이할지 더 고민해보고 다양한 방법들을 찾아서 공부해봐야겠다.

3 flex-box

CSS 부분의 flex-box를 쓰기가 어려웠다. 이 부분을 더 자유롭게 사용하고 싶은데 원할 때 적용하고 싶은데 꼭 원할때는 작용이 안된다. 아직 잘 모르는 부분이 많은 것 같다. 자유롭게 위치를 정렬할 수 있게 연습해봐야겠다.

4

같이 진행하는 팀원들에게 미안했던 것이 정말 내 개발 속도가 다른 팀원들에 비해 현저히 느렸다. 느린 부분이 정말 스트레스를 받는 부분인데 빠르게 맡은 부분을 해결해야 하는게 중요한 프로젝트에서 속도가 느리다보니 병목현상이 생겼다. 그러다보니 쉬는 시간을 짧게 가져가는 수 밖에 없었다. 그런데 그런 걱정했던 점들이 팀원들에게 전달이 되었었는지 잘하고 계시다는 격려를 받기도 했고 좋은 팀에 온것 같다고 해주시는 팀원도 있었다. 그런 말들이 더 힘이 나게 하고 열심히 하게 만드는 것 같다. 실수도 많이하고 속도도 느리지만 혼자하지 않기 때문에 이 프로젝트가 진행되어 갈 수 있다는것을 알았다. 개발은 혼자 하는 것이 아니라는 것이 예전에는 남들과 꼭 함께 해야한다는 부담으로 느껴졌었는다. 그런데 요즘은 내가 못한 부분을 채워주기도 하고 어려운 점은 같이 해결하는 동료가 되는 좋은 경험을 하고 있다보니 개발은 혼자하는 것이 아니라는 말에 긍정적인 이미지가 채워지는 거 같다.

etc 알아보고 싶은 것

WoW.js
{...currentId, id: input} 스프레드와 객체
eslint