본문 바로가기

내일배움캠프

[최종프로젝트] 프로필 페이지 런타임 에러

백엔드 서버 구현을 어느정도 마무리하고 프론트엔드 뷰를 슬슬 구현하기로 했다. 프로필 페이지는 React를 활용해서 구현하기로 했는데 React같은 프론트엔드용 언어는 익숙치 않다 보니 구현하던 도중 여러 문제가 있었다. 이번 포스팅도 그 문제 중 하나를 해결하는 과정을 포스트로 남기는 것이다. 여러 사소한 문제들이 개발 도중 있었지만 가장 기억에 남는 이슈를 포스트로 남긴다.

 

각설하고 본론을 얘기하자면 프론트 뷰를 개발하던 과정 중 회원 프로필 페이지를 구현할 때 발생한 이슈이다. 프로필 페이지를 구현하기 위해 백엔드 서버에서 데이터를 요청해서 가져오는 도중 런타임에러가 발생했다.

에러 내용을 자세히 읽어보니 변수가 null이어서 읽을 수 없다는 내용같았다.

const Mypage = () => {
    const [profile, setProfile] = useState(null);

    useEffect(() => {
        const fetchProfile = async () => {
        try {
            const response = await axios.get('http://localhost:8080/api/users/profiles');
            setProfile(response.data.data);
        } catch (err) {
            setError('Failed to fetch profile');
        }
        };

        fetchProfile();
    }, []);
    return(
        <>
            <Nav/>
            <div className= "container">
                <div className="profile-header">
                    <div className="profile-info">
                        <h1>{profile.name} <span className="badge">Bronze</span></h1>
                        <p>{profile.email}</p>
                        <p>{profile.intro}</p>
                    </div>
                </div>
                <div className="section">
                    <h2>최근 나의 게시글</h2>
                    <ul className="list">
                        <li className="list-item">React Hooks 사용 팁</li>
                        <li className="list-item">CSS Grid 레이아웃 예제</li>
                        <li className="list-item">JavaScript 비동기 프로그래밍 기초</li>
                    </ul>
                </div>
            </div>
        </>
    );

하지만 데이터를 가져오는 코드는 멀쩡히 있는데도 저 에러가 발생했다. 저 에러를 해결하기 위해 구글링을 하던 도중 useEffect에 대한 개념을 설명하는 글을 발견했다.(출처:https://i-ten.tistory.com/308)

 

[React] useEffect의 실행 시점

Today, What I learned? 작은 기능을 추가하다가 null값이 포함되어서 원래 되던 기능이 안 되는(!) 일이 발생했다. 발견하신 분이 바로 해결해 주셨지만, 마침 그 부분이 useEffect를 사용했던 부분이고..

i-ten.tistory.com

useEffect라는 함수(?)는 맨 처음 렌더링 될 때 실행되는 게 아닌 렌더링이 완료된 다음에 실행된다는 정보가 적혀있었다. 이 글을 보고 무언가 빠뜨린게 생각난것 같아서 이 코드를 만들기 위해 참고한 chatgpt의 코드를 다시 한번 살펴보았다.

const Profile = () => {
  const [profile, setProfile] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    const fetchProfile = async () => {
      try {
        const response = await axios.get('https://your-api-endpoint.com/profile');
        setProfile(response.data);
        setLoading(false);
      } catch (err) {
        setError('Failed to fetch profile');
        setLoading(false);
      }
    };

    fetchProfile();
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>{error}</p>;

  return (

chatgpt는 로딩과 에러 문구를 화면에 반환에주는 코드가 있었다. 난 이 코드가 불필요하다고 판단해서 멋대로 빼버린 내 실수로 에러를 마주했고 에러의 원인을 파악할 수 없었던 것이었다.

useEffect는 페이지가 렌더링 된 다음에 실행되는 함수여서 api를 실행해서 데이터를 가져오기 전에 먼저 렌더링을 시도해서 에러가 발생했던 것이다. 이런 사태를 방지하기 위해 chatgpt는 렌더링되기 전에는 로딩화면을 먼저 렌더링 시켜서 useEffect로 api가 호출되도록 설계한 것 같다.

chatgpt가 알려준 대로 코드를 추가하니 잘 실행이 된다.

 

useEffect같은 react의 이론을 잘 알고 있었더라면 쉽게 해결했을 이슈를 해결을 못해서 붙들고 있던 내 자신이 너무 한심스러워 보였다. 그래도 이슈를 해결하고 나서 돌아보니 이렇게 프론트엔드에 대해 알아가는 것도 나쁘지 않았던 것 같기도 하다.

 

필자는 처음엔 chatgpt는 내가 원하는대로 코딩을 하지 못한다는 선입견을 갖고 chatgpt의 코딩을 신뢰하지 않았었다. 사실 왜 chatgpt한테 코딩을 시키는지 이해를 못했었다. chatgpt한테 물어볼 시간에 내가 구글링해서 공부하고 코딩을 하겠다는 마인드였는데 이번 트러블슈팅을 계기로 chatgpt를 어느정도 신뢰를 하게 되었다. chatgpt도 키워드를 잘 넣어서 부탁을 하면 그럴듯 하게 코딩을 해주는 것 같다. 앞으로 모르는 거나 막히는 게 있으면 chatgpt를 적극적으로 활용해야 겠다.