Dev log
1 함수 Prop 전달
프로젝트 도중에 함수가 전달되지 않는 것을 경험했기 때문이다. 분명 위에서 함수를 내렸는데 함수라고 인식하지 못하는 문제를 만나게 되었다. 그래서 오늘은 react에서의 상위 컴포넌트에서 하위 컴포넌트로 props 전달 하는 부분에 대해서 알아봤다. props를 전달하는 것은 JSX로 작성된 컴포넌트의 return 부분에 컴포넌트의 attribute로 props를 전달한다.
import React from 'react';
import Nav from './Nav';
import Footer from './Footer';
function Mypage ({ isLogin, userInfo, infoHandler }) {
return (
<div class="mypage_container">
<Nav />
<div class="username">{userInfo.username}</div>
<Footer />
</div>
)
}
export default Mypage;이렇게 적혀있을때 isLogin은 login 여부를 나타내는 boolean값, userInfo는 유저정보를 나타내는 객체, infoHandler가 함수라고 할 때 infoHandler는 상위 컴포넌트에서
<Mypage infoHandler={infoHandler} />이렇게 함수가 전달 되어온 형태다. 이렇게는 자식 컴포넌트에는 전달이 잘 되는 것을 확인했다. 그런데 바로 자식 컴포넌트가 아니고 자식의 자식에게 즉 손자에게 props를 내린다면 다른 타입의 값들은 전달이 되지만 함수를 변수그대로 전달하게 되면 손자에게 전달된 변수는 함수를 나타내지 않게 되고 함수가 아닌데 호출한다는 오류를 보게 된다. 그 원인을 찾아보니 함수라고 인식하지 않고 값을 전달한다고 인식하게 되는것 같았다. 그래서 자식으로 전달하고 다시 자식에게 전달을 할 때 중간에서 전달하는 props 가 함수라는 것을 인식할 수 있게 전달할 필요를 느꼈다. 그래서
<Mypage infoHandler={() => infoHandler()} />이렇게 익명함수로 함수의 호출을 담아서 전달해주는 방법을 생각했다. 익명함수를 담지 않고 바로호출을 하면 전달되는 것은 함수가 아닌 함수 실행의 리턴 값이 전달 될 것이기 때문에 익명함수로 묶어야 했다.
이렇게 작성을 바꾸니 함수가 아니라는 오류가 생기지 않았다.
바로 자식에게 전달되는 함수를 props로 전달할 때는 문제가 되지 않지만 자식의 자식으로 보낼 때는 중간에 함수라고 인식할 수 있게 해야한다는 것을 알게 되었다.
2 소개글 시간 간격 문제
로그인을 한 상태라고 한다면 mypage가 활성화되고 mypage로 들어갔을때 서버에 요청하여 사용자의 정보를 받은 대로 보여주게 구현하는 작업을 했다. mypage에 들어갈때 useEffect로 사용자의 정보를 가져와서 사용자 정보를 client의 state로 setState를 하여 사용자 정보 state를 렌더링하게 구현했다. 그런데 이렇게 구현을 하니 사용자 정보중에 소개글을 수정하는 기능에서 문제가 있었다. 소개글을 수정하면 소개글을 서버에 업로드 하고 사용자 정보를 받아올 때까지 잠깐의 시간동안 이전 글이 보이다가 바뀌는 현상이 생겼다. 업로드 잘 되고 바뀌기도 잘 바뀌었지만 이 문제는 사용성이 그다지 좋지 않아보였다. 이 상태의 구현은 사용자 소개글을 입력하면 소개글 핸들러가 호출되고 핸들러 안에 소개글을 서버에 업로드하는 과정과 사용자 정보를 state로 변경하는 과정이 함께 있는 상태였다. 업로드를 하면서 사용자 정보를 state 변경을 통해 바꾸면 사용자 정보를 useEffect가 의존성 배열로 가지고 있기 때문에 변동이 생기면 다시 유저 정보를 서버로부터 받아오게 구현되어 있었는데 이 사이의 시간간격이 이전 글을 보이게 만든 것 같았다. 그래서 유저정보의 소개글을 또 다른 useState로 지정하고 처음부터 이 정보를 렌더링하게 바꾸었다. 그리고 사용자 정보만이 아니라 소개글을 setState로 바꾸는 작업을 통해 입력되는 즉시 입력한 정보가 보이게 만들었다. 이렇게 구현하니 시간 간격이 보이지 않아서 바로 입력한 소개글이 적용되는 것을 볼 수 있었다.
3 Deploy 문제 인식
next.js로 프로젝트를 진행하고 배포를 점검중에 문제를 발견했다. 배포는 aws의 amplify를 사용해서 배포를 진행하고 있었다. next.js를 aws의 amplify에서 지원한다는 것을 보고 배포는 amplify에서 진행해보자고 정했었다. 그렇게 next.js, mysql, sequelize, amplify의 조합으로 진행되고 있었다. 개발서버에서는 제대로 작동을 하고 있었지만 배포상태에서는 sequelize가 작동하지 않는 현상을 발견했다. 화면이 잘 나오고 있어서 문제가 없다고 생각했는데 모두 확인을 잘 하지 못했던 잘못이 있었다. sequelize가 작동하지 않는 이유를 찾아봐야 했다. 개발에서는 문제가 없었던 것을 보고 배포의 설정이 잘못인지 amplify가 sequlize를 지원하지 않는 것인지 찾아봐야 했다. 하지만 만족하는 결과를 아직 찾지 못했다. next.js는 vercel에서 만들었기 때문에 vercel에서 배포를 하는것이 추천되고 궁합도 맞아보였다. amplify는 Rest API보다 Graph-QL을 추천하고 있었다. 두 방향이 다르게 가다보니 어느 부분을 수정해야 할지 문제가 발생한 당장은 판단하기가 어려웠다. 우선 팀원들 모두 작업을 잠깐 중지하고 각자 배포에 대한 정보를 찾고 해결할 방안을 찾고 모색하는데 시간을 사용하기로 회의를 했다. graph-ql로 바꾸기에는 시간이 부족해서 배포를 amplify에서 vercel로 바꾸는 방안이 더 안전해 보인다는 생각이 들었다. 우선은 각자 찾아보고 더 좋은 방안이 있으면 나누기로 했다. next.js의 next.config.js에서 설정하는 부분이 있지 않나 생각하고 찾아봤지만 원하는 답을 찾지 못했다. 내일 더 배포에 관한 문제를 더 찾아봐야 될 것 같다.
