Today 요약

1. 프로젝트 리팩토링 생각하기
2. 강의 듣기

1. What I did?

1. 1 프로젝트 리팩토링

오늘은 지금 TodoApp을 전체적으로 좀 더 리팩토링 할 수 있는 부분은 없을까 고민해봤다.

• 컨텍스트에서 관리되어야 할 변수들은 무엇이 있을까? 너무 과하게 관리되고 있는 건 없을까?

일단 컨텍스트에서 관리되어야 하는 것들에는 무엇이 있으면 좋을까에 대해서 생각해봤다. email, password는 로그인페이지와 회원가입 페이지에서 둘 다 사용되는 변수니까 전역에서 관리하면 좋을 것 같았다. 그래서 그냥 두면 될 것 같다. 그리고 email과 password가 변경되는 걸 감지하는 handleChange 함수는 좀 애매하긴 한데, 각 페이지에서 사용되고 있은이 일단 이것도 같이 Context에서 관리하는 걸로 결정했다.

그 다음이 애매한 부분인데, accessToken을 체크해서 리다이렉션 해주는 코드를 기존에는 각 컴포넌트 페이지에서 처리했었다. 하지만 멘토님 피드백 받은 뒤로는 전역에서 먼저 토큰을 체크해서 리다이렉션 할 수 있게 하는 코드를 처리하는 게 맞는 건지에 대한 기준을 확실히 해야했다. 그리고 맞다면 이 부분을 명확하게 설명할 줄 알아야겠다는 생각이 들었다. 그래서 일단 피드백을 참고해서 전역에서 관리할 수 있도록 해보고 있는데, 생각보다 잘 안되고 있다.

일단은 todo페이지에서도 토큰이 없으면 로그인페이지로 리다이렉션 해주는 걸 관리하고 있었다. 그래서 그 부분도 전역에서 처리하고 넘겨주는 걸로 수정했다.

useEffect(() => {
  const accessToken = localToken.get()
  const authPath = ['/signin', '/signup']

  if (accessToken) {
    if (authPath.includes(path)) {
      navigate('/todo')
    }
  } else {
    if (path === '/todo') {
      navigate('/signin')
    }
  }
}, [path, navigate])

이렇게 모든 리다이렉션 처리를 Context로 가지고 왔다. 그 다음은 이걸 왜 이렇게 하느냐를 명확하게 설명해야 하는데, 그게 쉽지 않다. 일단 멘토님한테 답변 드렸던 건 컴포넌트에서 체크하는 것보다 전역에서 체크해서 뿌려주는 것이 더 안정적인 걸까라는 질문을 해놓은 상태다.

하지만 이렇게 하고 리다이렉션 처리는 잘되지만 문제가 하나있다. api 통신하는 부분을 클래스로 변경하고 나서부터 아직 해결 못 한 이슈다. 처음에 투두페이지를 불러오거나 로그인페이지에서 로그인 성공하고나서 리다이렉션 되면서 getTodos해올 때, 401 에러가 발생한다. 인증이 안되어 있다는 오류가 발생하는데, 원인을 계속 못 찾고 있다. 예전에 클래스로 변경하기 전에는 api각자에 토큰을 전달해서 해결했던 걸로 기억한다. 하지만 지금은 인스턴스를 생성할 때 토큰을 기본으로 전달해서 생성하는데 getTodos가 왜 인증오류가 발생하는지 모르겠다. 인증이 되는 시점의 차이일까? 실제로 처음에 투두페이지가 마운트 될 때만 문제가 발생하고 새로고침하게 되면 다시 정상적으로 인증 처리가 되기 때문에 투두페이지를 정상적으로 이용이 가능하다. 왜 그런걸까? 내가 뭘 놓치고 있는지 잘 모르겠다;;

처음부터 다시 생각해봤다. 로그인 컴포넌트에서는 로그인이 성공하고 성공하면 그걸 응답 메세지에 담아 토큰을 보내준다. 그럼 그 토큰을 로컬스토리지에 저장하고 난 뒤 투두 페이지로 리다이렉션 한다. 이때 투두 컴포넌트가 호출되면서 렌더링 될 것이다. 이때 getTodos를 호출하는데, 그 과정에서 todoApi에 토큰을 전달해서 인증된 사용자라면 todos 값을 제대로 가지고 올 것이다. 근데 정확히 이 중간지점에서 인증오류가 발생하고 있는 것 같다. getTodos를 호출하는 시점이 잘못된 걸까…? (오늘은 시간상 여기까지 고민..)

2. What I Learned?

2.1 자바스크립트 강의

• 세터와 게터
  • getter와 setter는 객체 지향 프로그래밍에서 사용되는 개념 (하지만 객체 지향이 아니여도 사용 가능)
  • 객체 내의 속성 값을 가져오거나 설정하는 역할을 한다. (객체 리터럴, 함수, 클래스 등에서 사용가능)
  • Getter: 객체의 속성 값을 가져오는 메서드. 주로 객체의 내부 속성을 외부에 반환할 때 사용. 객체 내의 값을 노출시키지 않으면서, 값을 읽을 수 있게 해준다. Getter 메서드를 정의하면 해당 속성에 접근할 때 메서드 호출이 발생한다.
  • Setter: 객체의 속성 값을 설정하는 메서드. 주로 객체의 내부 속성을 외부에서 설정할 때 사용. 객체의 속성 값을 변경할 때, 로직을 추가하여 값의 유효성을 검사하거나 변환 작업을 할 수 있다. Setter 메서드를 정의하면 해당 속성에 값을 할당할 때 메서드 호출이 발생한다.

2.2 기타 강의

• a태그 안에 텍스트가 아니라 아이콘을 명시할 때는 스크린리더가 의미있는 텍스트를 읽어줄 수가 없다. 그럼 텍스트보다 접근성이 떨어지게 되는데, 이때 a태그의 title 속성에 의미 있는 텍스트를 전달해서 해결할 수 있다.
• .headerlogo img 보다 .headerlogo__img라고 클래스명을 지정해주는 것이 성능에 더 유리하다?
• 두 개의 클래스를 가진걸 css 선택자로 선택하기 위해서는 .header.active 처럼 .을 연결해서 사용하면 된다.