백엔드 서버 구현을 어느정도 마무리하고 프론트엔드 뷰를 슬슬 구현하기로 했다. 프로필 페이지는 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)
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가 호출되도록 설계한 것 같다.
useEffect같은 react의 이론을 잘 알고 있었더라면 쉽게 해결했을 이슈를 해결을 못해서 붙들고 있던 내 자신이 너무 한심스러워 보였다. 그래도 이슈를 해결하고 나서 돌아보니 이렇게 프론트엔드에 대해 알아가는 것도 나쁘지 않았던 것 같기도 하다.
필자는 처음엔 chatgpt는 내가 원하는대로 코딩을 하지 못한다는 선입견을 갖고 chatgpt의 코딩을 신뢰하지 않았었다. 사실 왜 chatgpt한테 코딩을 시키는지 이해를 못했었다. chatgpt한테 물어볼 시간에 내가 구글링해서 공부하고 코딩을 하겠다는 마인드였는데 이번 트러블슈팅을 계기로 chatgpt를 어느정도 신뢰를 하게 되었다. chatgpt도 키워드를 잘 넣어서 부탁을 하면 그럴듯 하게 코딩을 해주는 것 같다. 앞으로 모르는 거나 막히는 게 있으면 chatgpt를 적극적으로 활용해야 겠다.
'내일배움캠프' 카테고리의 다른 글
[최종프로젝트]Embedded Redis 이슈 (1) | 2024.08.27 |
---|---|
[최종프로젝트]GenericJackson2JsonRedisSerializer 역직렬화 이슈 (1) | 2024.08.10 |
public class Dev {}(최종프로젝트) 2일차 (1) | 2024.07.22 |
Trello프로젝트(심화 프로젝트) 5일차(KPT 회고) (2) | 2024.07.22 |
Trello프로젝트(심화 프로젝트) 4일차 (6) | 2024.07.20 |