Code Refactoring

haesoo·2021년 12월 25일
0

Refactoring : Style

1. 불필요한 flex 를 사용하지 않기.

flex 를 사용하지 않더라도 각 요소의 width 값을 100%로 주면 자동적으로 세로 정렬이 만들어진다. 불필요하게 flex를 사용해주지 않아도 된다.

리팩토링 후 flex

2. 블록 레벨 요소

<p>의 경우 블록 레벨 요소이다. MDN에서 해당 요소에 대한 설명이다.
"블록 레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지합니다."
즉, width 값을 100%로 지정하지 않아도 100%를 차지한다. 만약 position 속성에 따라 조절이 필요하다면 그럴 때는 해줄 수 있으나 나의 현재 코드에서는 무의미하다는 리뷰를 받았다. width 값을 적지 않아 css가 제대로 먹지 않았던 경험 때문에 무조건 값을 입력해버리는 경향이 있는 것 같다. 불필요한 상황이라면 사용하지 않는 조금 더 유연하고 css 작성도 신경써서 해야겠다는 생각이 들었다.

리팩토링 후 p태그


Refactoring: JS

리팩토링 전 로그인 폼

  1. idpasswordinput 값을 state로 관리한다.
  2. checkedValid 라는 유효성체크 함수를 만들고 buttondisabled 속성을 컨트롤 하도록 작성하였다.
function Login() {
  const [isIdValid, setIsIdValid] = useState('');
  const [isPwValid, setIsPwValid] = useState('');

  const navigate = useNavigate();
  const goToMain = () => {
    navigate('/main-haesoo');
  };

  const handleIdChange = event => {
    const { value } = event.target;
    setIsIdValid(value);
  };

  const handlePwChange = event => {
    const { value } = event.target;
    setIsPwValid(value);
  };

  const checkedValid = () => {
    return isIdValid.includes('@') && isPwValid.length > 6 ? false : true;
  };

  const handleEnter = event => {
    if (checkedValid && event.key === 'Enter') return fetchData();
  };

  const fetchData = () => {
    fetch('http://10.58.3.173:8000/users/signup', {
      method: 'POST',
    }
  }
      
// Do something..
          
  return (
          <div className=login>
            
            <button
              disabled={checkedValid()}
              onClick={fetchData}
              className="login-button"
              type="button"
              >

리팩토링 후 로그인 폼

  1. 하나의 state 에서 idpassword 를 관리한다.
  2. 구조분해할당 내부에 계산된 속성명을 사용해 idpassword 각각에 접근해 변하는 값을 state에 할당해 줄 수 있다.
  3. 유효성검사함수에서 작성된 코드를 읽어보면 결국 truthy한 값 또는 falsy한 값을 리턴한다. 그 자체를 변수안에 넣어 Boolean 값을 가지게 해주어 바로 disabled 속성에 사용해준다.
function Login() {
  const [input, setInput] = useState({
    id: '',
    password: '',
  });

  const inputValue = event => {
    const { name, value } = event.target;
    setInput({ ...input, [name]: value });
  };

  const isFormValid = input.id.includes('@') && input.password.length > 6;

  const navigate = useNavigate();
  const goToMain = () => {
    navigate('/main-haesoo');
  };

  const handleEnter = event => {
    if (isFormValid && event.key === 'Enter') return fetchData();
  };
 
  // Do something ...
  
    return (
          <div className=login>
            
            <button
              disabled={!isFormValid}
              onClick={fetchData}
              className="login-button"
              type="button"
              >

리팩토링 전 fetch URL

const fetchData = () => {
    fetch('http://10.58.3.173:8000/users/signup', {
      method: 'POST',
      body: JSON.stringify({

리팩토링 후 fetch URL

const FETCH_URL = 'http://10.58.6.234:8000/users/login';
const fetchData = () => {
    fetch(FETCH_URL, {
      method: 'POST',
      body: JSON.stringify({

Data의 URL 주소와 같은 string으로 사용되는 부분은 변수에 저장해주고 해당 변수를 사용해주면 주소가 바뀌더라도 해당 변수의 내용만 바꿔주면 되기 때문에 유지보수 측면에서 이점이 있다.


리팩토링 전 Aside 컴포넌트

함수 내부에 TAG_LIST객체가 들어가 있다. 이럴 경우 함수가 호출될 때마다 객체도 함께 호출되게 된다. 객체는 함수 밖으로 빼줘서 불필요한 동작을 줄인다.


export default function Aside() {
  const TAG_LIST = [
  { id: '1', content: '소개 ・ ' },
  { id: '2', content: '도움말 ・ ' },
  { id: '3', content: '홍보 ・ ' },
  { id: '4', content: '개인정보처리방침 ・ ' },
  { id: '5', content: '약관 ・ ' },
  { id: '6', content: '위치 ・ ' },
  { id: '7', content: '인기 ・ ' },
  { id: '8', content: '계정 ・ ' },
  { id: '9', content: '해시태그 ・ ' },
];
 
  return (
    <aside className="info-container">

리팩토링 후 Aside 컴포넌트

const TAG_LIST = [
  { id: '1', content: '소개 ・ ' },
  { id: '2', content: '도움말 ・ ' },
  { id: '3', content: '홍보 ・ ' },
  { id: '4', content: '개인정보처리방침 ・ ' },
  { id: '5', content: '약관 ・ ' },
  { id: '6', content: '위치 ・ ' },
  { id: '7', content: '인기 ・ ' },
  { id: '8', content: '계정 ・ ' },
  { id: '9', content: '해시태그 ・ ' },
];

export default function Aside() {
    return (
      <aside className="info-container">
profile
후론트, 숨참고 딥 다이브

0개의 댓글