#etl

프론트 배포 netlify 환경변수

리액트에서 백엔드 서버주소를 관리할 때 .env 파일에 환경변수로 관리하고 있습니다. 그런데 netlify로 배포를 할 때, netlify.toml 파일을 작성해주는데, 이때 redirect에 백엔드 주소를 그대로 사용하면 깃허브에 toml파일이 노출되며 .env 파일로 관리해주는게 의미가 없어지는거 같은데 어떻게 해야되나요?

신입 개발자 물경력..

안녕하세요. 올해 3월에 졸업하고 7월에 중소기업 si 회사로 취업을하고 현재 다니고있는 27살 신입입니다..! 제목 그대로 물경력이 될까봐 걱정입니다. 일단 저는 취업할때는 서비스기업을 목표를 두고 백엔드 개발자로 취업 준비를 하였습니다. (현재도 서비스 기업을 목표로하고 있습니다. ) 하지만 취업시장도 많이 안 좋고 금전적인 이유로 si 회사로 빠르게 취업을 했습니다. 회사에서는 회사자체 솔루션 ETL 기술을 가지고 있어서 그쪽 업무를 맡고 있습니다. 하지만 현실은 프로젝트도 없고 솔루션 기술을 저 혼자 담당하고 있는 상태입니다. 사실 말만 솔루션 담당이지 하는게 없습니다. 원래 맡던 사람이 나가게 되면서 자리만 채울 수 있게 제가 들어간 것 같습니다.. 그리고 주 2회 금융권 유지보수하러 가지만 기술력을 요구하지 않아 경력에 쓰지는 못할 것 같습니다 최근까지는 회사의 사람도 많았지만 현재는 다들 프로젝트에 나간 상황이라 회사에는 저밖에 없는 상황입니다. 그래서 개인 공부를 하고 있는데 공부한 것을 블로그에 작성하거나 강의를 듣고 있습니다.. 공부하면서 돈 받으면 좋을진 몰라도 미래가 걱정이 됩니다… 대표님이 회사에 혼자 있으니까 현재 진행하고 있는 금융 프로젝트에 자리를 만들어주겠다고 하시긴 했는데 제가 목표하고 있는 것과는 거리가 있다보니 계속 다녀야 고민입니다. 그래도 1년은 다니려고 생각은 했는데 물경력이 될까봐 걱정이 됩니다. 어떻게 해야할지 모르겠네요 회사 다니면서 이직 준비가 나을까요 아니면 퇴사를하고 이직 준비를 할까요..? 그리고 이직 준비를 어떻게 해야할지 선배님들의 조언 부탁드립니다..!

6년차의 중간 직책 고민

현재 6년차 개발자입니다만 고민이 있습니다. 1년차에는 신입으로 혼자 자바 유지보수 운영을 1년 나갔고 그 다음해에는 프로젝트 중간에 사수가 퇴사를 하여 의도치않게 자바 개발에서 메인 업무는 리눅스 환경과 web, was, db 및 오픈소스 설치, 보조 업무로는 etl 개발을 하였습니다. 그렇게 4년을 일했는데, 현재 6년차에 갑자기 ETL 직무를 맡게 되었고, pl까지 하게 되었는데, 메인 업무가 아닌 서브 업무로 했었던 etl pl을 하려니 일을 효율적으로 시키는 방법 등 고민이 많습니다. 지금 년차에 pl을 맡는 것은 맞다고 생각이 듭니다만, 일이 잘 풀리지 않아 많은 고민이 있습니다. 스스로도 지금 물 경력인듯 생각이 들어 어디서부터 다시 손을 대야하나 스스로에게 질문을 요즘 하고 있습니다. 혹시나 이런 경험이 있으신 분들이 있다면 조언이나 충고 등 가감없이 말씀해주시면 감사하겠습니다. 그리고 참고할만한 서적이 있다면 추천 부탁드리겠습니다.

Expo SQLite WHERE 조건 한글 안됨

React Native Expo에서 앱을 개발중에 sql문이 오류가 뜹니다. 코드는 아래와 같습니다. async function SearchName() { console.log("load data"); try { const db = await SQLite.openDatabaseAsync("MountBedge.db"); const data = await db.getAllAsync(`SELECT * FROM HikingData WHERE Name = '가';`); setLoadedData(data); } catch (error) { console.error("Error testing database connection:", error); } } 문제가 되는 부분은 getAllAsync의 WHERE부분입니다. 한글로 검색한 부분을 영어로 변경하면 오류도 뜨지 않고 검색도 잘 됩니다. 한글로 검색 시 뜨는 오류는 아래와 같습니다. Error testing database connection: [Error: Calling the 'prepareAsync' function has failed → Caused by: Error code 1: near "'ㄱ'": syntax error] 혹시 해결할 방법을 아시는 분이 계시나요? 이게 expo에서는 해결이 가능한건지, 아니면 react native cli로 넘어가야 하는건지 모르겠습니다. 추가로 expo에서 sql문으로 데이터를 저장 시 db가 어디에 있는지 알 수 있는 방법이 있다면 알고싶습니다. 영어를 못해 영어로는 검색을 거의 안해봤지만 자료가 너무 없네요...

프론트엔드 취업에 대해 몇가지 질문있습니다.

안녕하세요 프론트엔드 취업을 준비중인 비전공자입니다. 취업관련 2가지 질문이 있습니다. 1. 작년 국비학원에서 백엔드팀과 협업 프로젝트를 했는데 당시 백엔드에서 스웨거를 이용하여 데이터를 받았는데 수료후에 스웨거 자체에서 오류가 있어 현재 배포한 프로젝트 주소로 들어가면 오류가 발생합니다. netlify로 다시 배포를 해서 나오긴하지만 이미지같은 데이터는 나오지 않는데 무슨 방법이 없을까요? 2. 국비학원 수료후 혼자 계속 공부한지 약 1년이 다되가지만 개발자분야로 취업이 힘들고 또 개인사정까지 생겨 정말 어쩔수없이 개발자분야가 아닌 단순업무 분야로 일을 다니면서 퇴근 후에 계속 프론트엔드 공부를 하고 있는데 인강을 보면서 할땐 코드가 해석이 되고 쉽다고 생각을 했는데 막상 혼자 코드를 작성을 할려고 하면 코드작성이 힘들더라구요. 혼자 코드를 작성한다고 해도 인강에서 봤던 코드를 외워서 적는 느낌도 드는데 혼자 코드를 작성할 수 있고 응용까지 가능한 공부방법이 있을까요? 실력이 많이 늘 수 있는 공부방법 조언부탁드립니다.

[프론드엔드] 이력서, 포트폴리오 피드백 받고싶습니다.

대학 졸업 후 조교로 일하다 부트캠프 수료하고 이제 취업을 준비하고 있습니다. 학과가 정보통신공학이라 제로베이스 비전공자는 아닙니다. 처음에는 노션으로 이력서와 포트폴리오를 통합하여 되는대로 제출하다가 계속되는 불합격에 분리했습니다. 이력서는 꼭 필요하다고 생각되는 항목들을 한눈에 볼 수 있도록 간단하게 작성하였고, 자기소개서를 추가했습니다. 포트폴리오는 노션 포트폴리오로는 부족하다 생각해서 개인 포트폴리오 사이트를 제작했습니다. 현직자의 시선으로 제 이력서와 포트폴리오가 경쟁력이 있는지, 선배님들께 피드백을 받고싶습니다. <이력서 URL> https://drive.google.com/file/d/19bKofHn2hF8KYDQxJiPUbP8CQE6SDiBh/view?usp=drive_link/ <포트폴리오 URL> https://ksyee.netlify.app/

신입 SI 회사 입사 후 고민

안녕하세요 이번에 서울에 위치한 중소 si 회사에 들어가게 되었습니다. 요즘 개발자 취업이 힘들어서 먼저 경력을 쌓고 서비스기업으로 이직을 하자는 마음으로 일단은 입사를 결정하였고 현재 다니고 있는 상태입니다. 근데 걱정이 크게 3가지 있습니다 si 회사에서 경력을 쌓고 서비스 기업으로 이직하는 게 어려울까요? 회사에 자체 솔루션이 있습니다. 대충 설명하자면 oracle -> mariadb로 데이터를 추출하고 가공하고 변환하는 ETL 관련 제품인 것 같습니다. 하지만 회사 솔루션을 이용해서 프로젝트를 한다던가 솔루션을 크게 지원을 해주는 것 같지는 않습니다 그냥 회사 방향성 때문에 억지로 잡고 있는 느낌입니다. 근데 입사한지 얼마 안 된 제가 그 솔루션을 맡게 되어 현재 조금씩 인수인계를 받고 있는 상황입니다. 회사 내에 본부장님과도 얘기를 하였을 때 회사에서 버리는 카드가 아니니 배우고 싶은 것이 있으면 언제든 말해라 도와주겠다 이런식으로 말씀을 하셨습니다. 제가 원래는 웹/앱 백엔드 쪽으로 방향성을 잡고 있었고 그쪽으로 성장을하고 싶었습니다. 근데 이제 자체 솔루션을 맡게 된다면 어떻게 방향을 맞춰야할지 모르겠습니다. 궁극적으로 저는 서비스기업으로 취직을하고 싶습니다. 지금은 회사에서 리눅스와 데이터베이스 관련해서 교육을 듣고 있는데 방향성을 어떻게 잡고 어디로 가야할 지 잘 모르겠습니다 그리고 서비스 기업으로 갈 수 있을까요..?

React Spring 배포과정 중 의문의 404

react + spring boot로 진행하는 프로젝트가 현재 cloudtype이라는 플랫폼으로 배포중에 있습니다. 문제는 정확한 서버주소를 호출하는 것 같음에 불구하고 404 에러가 발생하여 해결하지 못하고 있습니다. 현재, 아래 사진과 같은 로그가 클라이언트, 서버에 각각 발생합니다. 서버에서는 다음과 같이 구성되어있고 @RestController @RequestMapping("/v1/login") @RequiredArgsConstructor @CrossOrigin(origins = "https://web-secondchance-front-bug-1cupyg2klvnmgdft.sel5.cloudtype.app") public class KakaoController { private final KakaoService kakaoService; private final Logger LOGGER = LoggerFactory.getLogger(KakaoController.class); @PostMapping("/kakao-login") public ResponseEntity<UserDto> kakaoLogin(@RequestBody KakaoLoginDto kakaoLoginDto) { String code = kakaoLoginDto.getCode(); LOGGER.info("Get Code from FrontEnd : {}", code); LOGGER.info("Request getAccessToken()"); kakaoLoginDto = kakaoService.getAccessToken(code); String accessToken = kakaoLoginDto.getAccess_token(); LOGGER.info("access_token : {}", accessToken); if(accessToken != null){ UserDto userDto = kakaoService.getUserInfo(accessToken); return ResponseEntity.ok(userDto); } else { return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(null); } // accessToken이 null임에도 getUserInfo를 부름. // 안부르게 끔 위의 방법을 포함하여 // 1. map에서 true, false를 사용하여 해봄 // 2. getAccessToken을 map객체로 반환하게끔 하여 accessToken이 있으면 true, 없으면 false로 하여 isEmpty 함수로 체크하여 부름 // 위의 두 방법 전부 소용없음. 그냥 getUserInfo를 부름. } @PostMapping("/kakao-logout") public String kakaoLogout(){ return "ok"; } } 현재 리액트에서는 다음과 같이 axios.post로 접근하여 code를 전달합니다. 무엇이 문제일까요?

데이터 엔지니어는 석사 이상만 가능한가요?

진로 고민 중에 데이터 엔지니어 채용 공고를 보고 궁금한 점이 있어서 문의합니다. 닷넷 응용 프로그램 개발 경력만 거의 있는거나 마찬가지이고, 웹은 정말 짧은 기간동안 기존에 구축된 프로그램에서 api 수정 및 기능 추가 정도만 해보았습니다. 기존 경력으론 이직에 한계를 느껴서 웹쪽으로 분야를 잡고, 스터디/이직 준비를 하려고 합니다. 웹 서버에 대한 경험과 지식은 부족하다고 생각되어서 백엔드 개발자로는 이직이 더 힘들지않을까 싶고 기존에 화면 개발할 때 DB 모델링 변경 및 패키지, 프로시저 등 쿼리 작업, 통계 추출, DW에서 데이터 축적용으로 쿼리 생성한 경험을 살려서 데이터 엔지니어에 관심을 가져보려고 하는데요. 데이터 엔지니어는 석사 이상만 뽑는다는 얘기를 들었는데 정말 그런가요? 공고 찾아보면 ETL 개발, 데이터 파이프라인 구축 업무를 한다고 써있는데 관련 스터디나 사이드 프로젝트는 보통 어느 루트로 찾아서 하시는지, 대학원 수료가 정말 필요한지 궁금합니다.

웹 클라이언트랑 서버 따로 배포하는 방법 알려주실 분

안녕하세요. 프론트엔드 개발자를 희망하는 학생입니다. 항상 프론트만 개발했다가 MERN 스택(mongodb, express, react, nodejs) 강의를 보고 이번에 처음으로 백도 개발하게 되었습니다. 프론트만 개발했을 때는 netlify에 배포했는데 서버는 어디에 배포해야할지, 클라이언트는 그대로 netlify에 배포하고 서버는 따로 배포해도 되는 것인지, 서버 무료 배포 사이트는 어떤 것이 좋은지 궁금합니다. 따로 배포해도 된다면 방법을 알려주시면 감사하겠습니다. 참고로 클라이언트와 서버 폴더가 따로 구성되어 있습니다. App 폴더 안에 client 폴더, server 폴더 이렇게 있습니다. 사진은 server/index.js 사진인데 서버를 client/build/index.js에 연결해놨으니까 그냥 서버만 배포해도 되는지도 궁금합니다.

신입 자바 백엔드 4개월차인데 파이썬업무도 병행 중입니다

안녕하세요 현재 개발자로서의 길이 모호해져 저보다 앞선 길을 걸은 선배분들께 질문 남깁니다 저는 비전공자이고 약 8개월간의 국비 교육을 마치고 솔루션업체에 입한지 4개월차인 신입 백엔드 개발자입니다 입사 후 유지보수, etl, 배포 등 여러 작업을 진행했습니다. 하지만 지난주 부터 파이썬으로 데이터 전처리하는 담당자분이 업무가 많아져서 제가 파이썬 데이터 전처리를 담당하게 되었습니다. 국비 교육기간동안 많은 자격증을 취득하였고 그중 빅분기도 취득하여 데이터 전처리나 머신러닝에 관한 기본 지식은 있어서 업무상 어려움은 없었지만 이게 저의 커리어에 도움이 되는 일인지는 잘 모르겠습니다 고생하여 빅분기를 취득했지만, 취업 후 자바, 스프링만 공부하여 파이썬에 관해 많이 잊어먹어서 아쉬움이 컸습니다. 하지만 저번주부터 판다스등을 다루니 반가웠고 기존에 파이썬 지식들을 복기할 수 있어서 좋은 기회가 온 것 같았습니다. 저의 최종 목표는 백엔드로 지식을 쌓고 dba가 되는 것입니다. 서두가 길었습니다 결론적으로 제 고민은 자바 백엔드로서 경력을 쌓고 공부중인데 현재 파이썬 업무와 공부를 하는게 자바 백엔드로써 이직하는데, 추후 dba가 되는데 도움이 되는 것인지 아니면 시간 낭비이고 자바나 스프링 서버에 더 집중해서 깊게 아는 것이 좋은 건지 고민입니다 아직 스프링도 자바도 cs지식도 자꾸 까먹고 깊게 들어가면 모르는 것도 있어서 꾸준히 공부중입니다. 이것들도 회사다니면서 시간쪼개가면 공부중인데 파이썬까지 더 공부하는건 이미 없는 시간에 시간 낭비하는 일이 아닌가 싶습니다. 여기까지 읽어주셔서 감사합니다. 어떤 말씀이든 새겨 듣겠습니다. 감사합니다

포트폴리오 사이트 평가 해주세요.

포트폴리오 : sim-too-portfolio.netlify.app git : https://github.com/SIM-TOO/portfolio2023 주소 입니다. 현재 국비지원 교육으로 수료 2~3주 남았습니다. 리액트를 사용해서 만들었습니다.

React+Next.js 사이트 배포

전공자/프론트/React/3년 공백 React+API+Firebase 적용한 프로젝트 2개 보유 취준 생활이 길어지다 보니 부모님의 걱정으로 우선 지인 회사에 취업해 전산 업무를 담당하며 회사 사이트를 관리하게 되었어요. (연봉이 좋습니다.) 전산 업무는 사실상 나이 있으신 분들 컴퓨터 모르는 부분 가르쳐 드리고 나중에 외주 프로그램 오픈 하면 미팅하고 에러 나는 부분만 전화로 해결 요청 드리면 된다고 아무것도 몰라도 알려주겠다 하셔서 여기서 제가 직접 사이트를 만들어 배포하면 나중에 커리어에 추가할 수 있을 것 같아서 다니기로 했습니다. (모르는 게 생기면 대표님(개발관련X)과 친척 분께 여쭤볼 수 있습니다. 친척=유일한 사수) 현재 운영 중인 사이트는 JSP로 기능만 작동하는 아주 단순한 디자인의 사이트(친척이 4개월 동안 개발하고 이직, 프론트X)라 제가 Next.js를 아직 써본 적은 없는데 차차 공부하면서 사이트를 개발해볼까 합니다. 질문 1. 로그인/로그아웃, 회원가입, 게시판 정도의 기능만 하고 나머지는 회사에 대한 설명 위주인 간단한 사이트인데 React + Next.js + MySql 로 개발해서 배포할 수 있을까요? 아니면 따로 Spring으로 백엔드를 따로 개발해야 할까요? (Spring Framework + mariaDB로 ERP 프로그램 개발 경험 있습니다. 배포는 안 해봤습니다.) 질문2. 질문1 중 하나를 선택해 배포할 때 AWS로 할 지 아니면 다른 추천해주실 만한 것이 있는지 궁금합니다. 기존 토이 프로젝트들은 firebase로 db 및 로그인 구현했고 netlify로 배포해서 아는 게 너무 부족합니다. 질문3 - 여담. 지금이라도 도망가야 할까요?ㅋㅋ 혼자서 독학으로 프론트하고 있던지라 앞으로 TypeScript, Next.js 등 공부할 예정이었는데 여기 취업 아니면 국비지원 부트캠프 가려고 했습니다. 대학생 때 학과 1~2등도 해보고 학점도 4.1~4.3 정도로 공부는 잘하는 편...이었습니다ㅎ... 사이트 개발하다가 도저히 안되겠으면 그냥 외주 맡기시라고 하고 저는 다니면서 개인 공부해도 되지 않을까 생각합니다.

Spark 데이터 파이프라인 클론 코딩 조언 부탁드립니다.

파이썬, Spark로 ETL 파이프라인과 DB연동까지 할 수 있는 클론 코딩을 찾고 있는데 추천해 주실 수 있나요? 데이터 분석 & 엔지니어 교육을 수료했지만, Spark로 ETL 파이프라인에 대해 배우지 않아서, 혼자 클론코딩으로 공부하고, 개인 프로젝트를 진행하려고 합니다. 도움되는 답변 주시면 감사하겠습니다.

api의 첫번째 호출 이후부터 antd Button 렌더링 안되는 이슈가 있습니다.

```jsx import { Popover, Modal, Button, Image, Result } from "antd"; const [prevImg, setPrevImg] = useState(["any"]); const [loading, setLoading] = useState(false); const [removeImgFiles, setRemoveImgFiles] = useState([]); const combinePrevImages = (prevImages, newImages) => { const combinedImages = [...prevImages, ...newImages]; return combinedImages; }; useEffect(() => { const postSeg = async () => { try { const res = await axios.post( "apiurl", { filepath: filePath, clips: sortableList.map(list => `${list.seg.start}-${list.seg.end}`), frame: frameValue }, { proxy: false } ); return res.data; } catch (error) { console.error("Error posting segments:", error); return []; } finally { setLoading(false); } }; const postSegments = async () => { if (segments[0]?.start === 0 && segments[0]?.end === 0) return; if (sortableList && filePath) { setLoading(true); const res = await postSeg(); const combinedPrevImg = combinePrevImages(prevImg, res.results); setPrevImg(combinedPrevImg); console.log("Post Request Success"); } }; postSegments(); }, [filePath, segments, frameValue]); const handleModalOpen = useCallback(() => setModalOpen(true), []); const handleModalClose = useCallback(() => { setRemoveImgFiles([]); setModalOpen(false); }, []); const handleDeleteButtonClick = async () => { if (removeImgFiles.length > 0) { setPrevImg([...removeImgFiles]); setRemoveImgFiles([]); } else { const result = await showSwal({ title: "Are you sure delete?", showCancelButton: true, confirmButtonText: "Confirm", cancelButtonText: "Cancel", confirmButtonColor: "#3085d6", cancelButtonColor: "#d33" }); if (result.isConfirmed) { setRemoveImgFiles([...prevImg]); setPrevImg([]); } const success = await Promise.all(removeImgFiles.map(deleteFiles)); return success; } } const handleRemoveFinish = async () => { if (removeImgFiles) { for (const filePath of removeImgFiles) { try { await removeFile(filePath); } catch (e) { console.log("File Remove Error", e); } } } setRemoveImgFiles([]); handleModalClose(); }; return ( <motion.div initial={{ x: width }} animate={{ x: 0 }} exit={{ x: width }} transition={mySpring} > <div style={{ fontSize: 12, padding: "0 5px", color: "var(--gray12)", display: "flex", justifyContent: "space-between", alignItems: "center" }} > <FaAngleRight title={t("Close sidebar")} size={20} className="angle-right" role="button" onClick={toggleSegmentsList} /> {header} <FaExpandArrowsAlt title={t("Image Inspection")} size={18} className="expand-arrow-alt" style={{ cursor: "pointer" }} role="button" onClick={!loading ? handleModalOpen : handleModalClose} /> <Modal title={t("Image Inspection")} centered onCancel={handleModalClose} open={modalOpen} footer={[]} width="100%" > <div className="imagecontainer"> <Button danger className="toggle-remove" onClick={handleDeleteButtonClick}> {removeImgFiles.length > 0 ? "Add" : "Remove"} </Button> {prevImg?.length > 10 && prevImg.map(img => ( <Popover key={img}> {removeImgFiles?.includes(img) ? ( <span> <Result className="result" icon={<FaSmile />} subTitle="delete" /> </span> ) : <Image key={uuidv4()} src={img} preview={{ src: img }} alt={uuidv4()} /> )} </Popover> ))} </div> <Button block onClick={handleRemoveFinish}> Finish </Button> </Modal> </div> ) ``` api 호출을 통해 frameValue 개수(여기서는 12개씩) 만큼 이미지를 렌더링 하고 있는데 두번째 호출부터는 Button이 렌더링되지 않아서 어디가 잘못됐는지 알고싶습니다.. 필요한 부분이 imagecontainer 클래스네임인 div를 렌더링 해야합니다.

airflow xcom_pull() 이 None 을 리턴합니다 (오류)

api 를 만들고 Airflow 를 사용해서 ETL 파이프라인을 만드는 도중에 생긴 문제인데요, simplehttpOperator 로 api 에서 결과를 가져왔고 (성공), 결과값을 transform 하려고 simplehttpOperator 를 xcom_pull 하는 코드를 짰습니다. (코드는 아래와 같습니다.) def _processing_api(ti): if not len(assets): raise ValueError('empty') assets = ti.xcom_pull(task_ids = 'extract_riot_api') 결과는 ValueError 를 리턴했습니다. 이유를 찾으려고 riot api 에서 테스트를 시작했고 riot api 웹에서 얻어지는 리턴값을 airflow UI 의 simplehttpOperator 의 xcom 에서 key - return_value , value - [{}, {}, ...] json 형식의 값을 확인할 수 있었는데, 역시 xcom_pull 을 한 결과가 ValueError 였습니다. extract_data 는 api 에서 json data 를 가져오는 코드이고 _processing_api 함수는 pythonoperator 에서 쓰려고 만든 코드입니다. stackoverflow, airflow docs 등을 3~4 일 정도 본 것 같은데, 해결하지 못했네요.. 비슷한 경험을 해결하셨던 분 계신가요 ..? 어디 물어볼 곳도 없어서.. 여기에 마지막으로 올려봐요. 아시는 분 도움주시면 감사하겠습니다

웹 배포시 프론트엔드 백엔드 따로 하는게 정석인가요?

안녕하세요 현재 프론트엔드 개발 취준생이고 포폴겸 실제 서비스겸 프로젝트로 MERN 스택으로 CRA + express.js로 해가지고 배포하려는데 여기저기 찾아보니 대부분 서버용 따로 클라이언트용 따로 해서 2개를 배포해서 쓰더라고요. 제 플젝은 하나의 레포로 되어있어 굳이 분리 안해도 되면 한 번에 배포하고 싶은데 이 방식은 잘 안쓰는 방식인가요? 그리고 이용자가 20명 정도는 고정으로 있을 예정이라 무료 플랫폼 써야하는데 Netlify, Vercel등 선택지가 다양해서... 보통 어떤 무료 플랫폼으로 배포하시나요? 감사합니다

Next.js SSR + react-query 조합에서의 serializing 에러

안녕하세요! Next.js SSR + react-query 조합을 사용하려고 하는데요, page 컴포넌트 내 getServerSideProps 함수에서 prefetching을 받아온 후에 serializing 에러가 발생합니다. (Next.js는 13버젼입니다.) 에러 내용은 다음과 같습니다. Error: Error serializing `.dehydratedState.queries[0].state.data.headers` returned from `getServerSideProps` in "/top". Reason: `object` ("[object AxiosHeaders]") cannot be serialized as JSON. Please only return JSON serializable data types. 해당 에러 내용으로 구글링을 해보니, 대부분 getServerSideProps 함수 반환 코드에서 return { props: { dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))), }, }; 와 같이 dehydrate(queryClient)값을 JSON화 -> Object화를 하라고 하는데요, 이와 같이 사용해도 또 다시 아래와 같은 에러가 납니다. TypeError: Converting circular structure to JSON --> starting at object with constructor 'ClientRequest' | property 'socket' -> object with constructor 'Socket' --- property '_httpMessage' closes the circle Backend API는 Express.js를 사용하고 있으며, res.status(200).json({ data: ~ })와 같은 방식으로 응답을 주고 있습니다. 어떻게 해결할 수 있을까요? 코드 첨부가 안되네요, 아래는 page 컴포넌트가 위치한 파일의 전체 코드입니다. import type { ReactElement } from 'react'; import { dehydrate, QueryClient, useQuery } from '@tanstack/react-query'; import { format } from 'date-fns'; import TopMusicContainer from '~containers/TopMusicContainer'; import Layout from '~layouts/Layout'; import type { NextPageWithLayout } from '~pages/_app'; import TopMusicService from '~services/topMusicService'; import * as MusicType from '~types/musicType'; export async function getServerSideProps() { const queryClient = new QueryClient(); await queryClient.prefetchQuery(['fetchTopMusic'], () => { const params: MusicType.ListRequestType = { filter: 'title', keyword: '', page: 1, limit: 25, time: format(new Date(), 'yyyyMMddHH'), }; return TopMusicService.list(params); }); return { props: { dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))), }, }; } const Top: NextPageWithLayout = (): JSX.Element => { const { data, isLoading } = useQuery({ queryKey: ['fetchTopMusic'], queryFn: () => { const params: MusicType.ListRequestType = { filter: 'title', keyword: '', page: 1, limit: 25, time: format(new Date(), 'yyyyMMddHH'), }; return TopMusicService.list(params); }, }); return ( <section> <TopMusicContainer /> </section> ); }; Top.getLayout = function getLayout(page: ReactElement) { return <Layout>{page}</Layout>; }; export default Top;