프로젝트 리뷰 리체크

1. sass : focus 시에 &focus 연산자 활용. 

 

2. 굳이 버튼을 만들지 않아도 되는 함수들. 

즉 다이렉트로 조건으로 쓸 수 있는 것들 확인해서 중간단계 없애기.

ex) 변수의 조건이 참이라면 버튼을 true로 만들어라. 버튼이 true라면 효과를 적용해라 (x)

-> 변수의 조건이 참이라면 효과를 적용해라(o)

시작값에 자동으로 적용되는 문제가 있다. 조건부렌더링으로 해결. ( length > 0 && condition ? ~ : ~)

 

3. CSS property 순서

• Layout Properties (position, float, clear, display)
• Box Model Properties (width, height, margin, padding)
• Visual Properties (color, background, border, box-shadow)
• Typography Properties (font-size, font-family, text-align, text-transform)
• Misc Properties (cursor, overflow, z-index)

 

4. import 순서 

React → Library(Package) → Component → 변수 / 이미지 → css 파일(scss 파일)

 

 

5. 함수로 만들어서 가독성을 높일 수 있는 것들에 대하여 생각하기 (바로 인라인으로 fetch 넣지 말고 함수로 만들어서 사용)

 

 

6. onFocus={e => {}) : 사용하지 않는 e빼기

 

 

7. () 불필요한 괄호가 있는지 확인. 

 

<form className="login-main" onSubmit={loginFetch()}>
	<form className="login-main" onSubmit={loginFetch}>

 

8.   setInputTitleGoUpBtn(prev => !prev);

 

 

9. useNavigate -> LINK 로 변환 

단순하게 페이지를 이동할 경우에는 button에 onclick 이벤트를 걸어주는 것 보다  

Link 컴포넌트를 사용하는 것이 더 좋습니다!

 

 

10. 

 

body : JSON.stringify({

korean_name,

email,

password,

address,

phone_number,

})

 

->

 

body : JSON.stringify(signInput),

 

 

11. 상수데이터 관리. 긴 상수데이터는 별도 파일 만들어서 관리. 

 

const userInputData = [

    {

      name: 'korean_name',

      koreanName: '이름',

      condition: 'nameCondition'

      inputValue: 'korean_name',

    },

    {

      name: 'email',

      koreanName: '이메일',

      condition: 'emailCondition',

      inputValue: 'email',

    },

 

 

13.

컴포넌트 맵을 돌리는 전달값중에 함수가 들어있을 때, 즉 상수데이터 안에 함수 값이 들어 있을 때, 

목데이터 함수값으로 이용하기. 

 

오브젝트.  키 : 값으로 만들어주기 !!

 

 const signConditions = {

    nameCondition: korean_name.length > 1,

    emailCondition: emailRegex.test(email),

    pwdCondition: pwdRegex.test(password),

    phoneCondition: phoneRegex.test(phone_number),

    addressCondition: address.length > 3,

  };

 

 

   <UserInput

                  key={i}

                  name={element.name}

                  koreanName={element.koreanName}

                  condition={`${element.condition}`}

                  inputValue={inputValue[`${element.name}`]}

                  loginInputHandler={signInputHandler}

                />

 

  <UserInput

                  key={i}

                  name={element.name}

                  koreanName={element.koreanName}

                  condition={signConditions[`${element.condition}`]}

                  inputValue={signInput[`${element.name}`]}

                  loginInputHandler={signInputHandler}

                />

 

 

 

14 . 작은 컴포넌트의 분리 

작은 컴포넌트를 따로 분리 가독성과 유지보수 측면에서 그리 좋은 방법은 아님.

그 컴포넌트가 다른데서 쓰여야 한다면 공통 컴포넌트로 빼서 관리 -> 그게 아니라면 코드를 그대로 작성해서 map을 돌리는 것.