본문 바로가기

코딩

 (157)
ReactJS + Spring Content-Type is not supported 오류 해결 'application/json', 'application/octet-stream 노트북 생활을 청산하고 데스크탑으로 돌아왔다. 노트북에서 인텔리제이를 돌리면 발열과 배터리가 감당이 안돼서 어쩔 수 없이 NestJS를 이용해서 테스트를 진행했는데 데스크탑에서는 인텔리제이랑 VSCode랑 크롬이랑 이것저것 다 띄워도 문제가 없기 때문에 이제 가내수공업으로 만든 NestJS 서버는 치워두고 팀원들이 만든 Spring 서버를 사용해서 테스트를 진행할 수 있게 되었다. 그동안은 NestJS에서 테스트한 코드를 test 브랜치에 머지하면 팀원들이 pull 해서 직접 테스트를 진행하고 오류를 캡쳐해서 보내줬었는데 이제 직접 테스트하고 수정할 수 있게 되어서 능률이 많이 올랐다. 오늘 처음으로 테스트해본 내용은 채팅방 생성 기능이다. 우리 프로젝트에서는 채팅방 생성 시 채팅방 제목과 썸네일을 PO..
ReactJS에서 react-youtube 라이브러리로 유튜브 영상 제어하기 지난번에 유튜브 API를 이용해서 뮤직 플레이어를 만들었었다. 2023.08.23 - [코딩/ReactJS] - 리액트에서 유튜브 API를 이용해 뮤직 플레이어 만들기 리액트에서 유튜브 API를 이용해 뮤직 플레이어 만들기 제목은 뭔가 완성된 프로그램을 만든 것처럼 보이지만 내가 만든건 프로그레스바(재생바)가 동작하지 않는 반쪽짜리 프로그램이다. UI에서부터 느껴지는 반푼이 프로그램의 기운... 주제에 반응 bebutae.tistory.com 그런데 이때 chatGPT를 통해 코드를 생성했고 생성된 코드를 제대로 이해하지 못한 상태에서 프로그램을 만들었더니 기능 추가를 한다던가 오류를 수정한다던가 하는 상황에서 상당히 어려움을 겪었다. 그래서 찾은게 react-youtube라는 라이브러리인데, 유튜브 a..
react에서 댓글 기능 구현하기(선택된 컴포넌트만 댓글UI 보여주기) 오늘 하루종일 씨름한 댓글 기능 구현하기 후기... 기존에 댓글 기능을 간단하게 구현해두었지만 서버와의 연동을 위해서 조금 손보고자 시작한게 하루를 뚝딱 집어삼켜버렸다. 처음에는 그냥 axios로 대충 그까이꺼 구현하면 되지 싶었는데 몇가지 난관이 있었다. 첫째로, 서버에 delete 요청을 하기 위한 URL에 피드의 ID와 댓글의 ID가 모두 들어갔고 map함수를 중첩해서 피드와 댓글을 구현한 나는 댓글에서 피드의 ID를 불러오는 방법을 찾지 못해 한참을 헤맸다. axios를 이용해 feed 데이터와 comment 데이터를 각각 불러온 뒤 피드 UI를 생성하는 map함수 하위에 댓글 UI를 생성하는 map함수를 넣었다. {feedData.map(function(a,b)=>{ return ( {a.tit..
리액트에서 MUI로 체크박스 + 선택된 항목들 axios로 DELETE 요청하기 현재 진행중인 프로젝트에서 채팅방 목록을 보여주고, 거기서 삭제하고 싶은 채팅방을 선택, 삭제할 수 있는 기능을 구현중이다. 그런데 내가 사용 중인 MUI에서 ToggleButton 컴포넌트를 사용하니 하나만 체크해도 전체가 체크되는 현상이 발생해서 머리가 아팠다. 체크박스를 누를 때 마다 해당 채팅방의 id를 추출하는 로직은 구현했는데 아무리 머리를 쥐어짜내도 전체가 체크되는 현상을 해결할 수가 없었다. 그러다가 어이없게도 Togglebutton 대신 Checkbox를 사용하니 개별 선택이 가능해졌다. 설마 채팅방 리스트를 보여주는 UI를 구현할 때 채팅방 데이터들이 담긴 리스트를 map함수로 반복해서 생긴 문제인가? 싶어서 각각의 채팅방 id를 뽑아내서 체크박스를 체크할 때마다 조회, 대조해서 해당 ..
리액트에서 axios로 데이터 불러올 때 오류 핸들링하기 나는 현재 진행중인 프로젝트에서 axios를 이용해 nest 서버의 데이터를 불러오도록 코드를 작성하였다. 하지만 서버가 꺼져있거나 데이터 바인딩이 잘못되어서 불러올 데이터가 없을때는 페이지 전체에 오류 메시지가 떠서 아예 페이지를 볼 수 없는 경우가 발생했다. 사실 나는 항상 서버를 같이 켜뒀고 데이터 바인딩도 직접 해서 이런 오류를 볼 일이 프로젝트 초반 이후로는 없었다. 그런데 팀원들과 사용중인 깃허브에 푸시하고 팀원이 풀 해서 코드를 실행하니 이런 오류가 발생하는 걸 보고나서야 문제를 인식할 수 있었다. 그래서 내가 데이터 로딩 오류를 해결한 방법은 axios에 catch문을 붙이는 것이었다. 현재 사용중인 코드에서 axios관련 코드는 아래와 같이 대부분 useEffect 아래에서 실행되었다. ..
리액트에서 filter로 검색 기능 구현하기 리액트 프로젝트에서 검색기능을 구현할 일이 있어서 구글링을 좀 해봤다. 죄다 filter를 쓰고 있길래 filter를 쓰면 되는구나 했는데 정확한 사용 방법을 잘 모르겠어서 좀 더 찾아보았다. filter() 함수는 자바스크립트 내장 함수인데 아래 코드와 같이 사용할 수 있다. const searched = data.filter((item) => item.roomName.toLowerCase().includes(search) ); searched에는 검색 결과가 배열로 저장되며 data 변수에는 데이터베이스에서 불러온 데이터가 저장되어 있다. filter 함수 안에 있는 item은 data 변수에 저장된 배열형 데이터의 각 요소를 순차적으로 담는 변수이다. 즉, 서버에서 전달받은 데이터가 아래 코드와 같..
리액트에서 게시글 목록 클릭해서 해당 게시글 상세 페이지로 이동하기 제목이 좀 길지만 쉽게 말하면 내가 게시판에 접속했는데 수많은 게시글 중 한 개의 제목을 클릭하면 해당 게시글의 상세 페이지로 넘어갈 수 있는 로직을 소개하고자 한다. 우선 나는 ReactJS와 NestJS를 이용해서 프로젝트를 진행중이다. 마이페이지에 접속하면 아래 사진과 같이 내가 작성한 피드 리스트가 보이고 피드의 제목을 클릭하면 해당 피드의 상세페이지로 접속할 수 있다. 쉽게 생각하면 각 피드의 제목마다 해당 피드의 상세 페이지의 주소를 하드코딩 해서 쉽게 페이징 기능을 구현 할 수도 있지만 이 프로젝트는 서버와의 연동을 통해 실제 게시판 서비스 처럼 생성, 조회, 수정, 삭제가 가능하도록 제작하는 것이 목표이므로 피드 리스트의 각각의 피드 제목을 클릭했을 때 해당 피드의 id를 기반으로 상세 페..
React Hook useEffect has a missing dependency 오류 해결하기 리액트 앱을 실행했는데 갑자기 이런 오류가 발생했다. 이게 뭔데... 검색해보니 useEffect에서 데이터를 렌더링 하는데 그 데이터가 useEffect 외부에 존재할 경우 발생한단다. 사실 뭔 말인지 잘 모르겠다... 사실 오류 메시지도 아니고 경고 메시지라서 리액트 앱 실행에는 큰 문제가 없기 때문에 개발과정에서는 신경 안써도 되지만 그래도 문제가 생겼으면 해결은 해봐야지 싶어서 이것저것 시도해봤다. 그 중에서 제일 효과적이었던 방법이 eslint를 무시하도록 코드를 작성하는 것이었다. 리액트는 친절해서 어떤 파일의 몇번째 줄에서 문제가 발생했는지 다 알려준다. 위 이미지에서는 musiccontroller.js 파일의 38번째 줄에서 문제가 생겼다고 알려줬다. 그럼 우리는 37번째 줄에 아래 코드를..

티스토리툴바