코딩/ReactJS (27) 썸네일형 리스트형 리액트에서 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를 기반으로 상세 페.. 리액트에서 useParams를 이용해 유동적으로 페이지 주소 지정하기 현재 진행중인 프로젝트에서 각 게시글 마다 상세 페이지를 보여주는 기능을 구현하게 되었다. 단순한 페이지 전환은 useNavigate로 처리하고 있었는데 UI는 동일한데 서버에서 반환하는 게시글 id마다 다른 데이터를 보여주기 위해서는 useParams에 대한 이해가 필요했다. useParams는 딱 생긴 것 대로 리액트 훅이다. 설치는 그냥 react-router-dom을 설치하면 같이 설치된다. 아래는 설치 명령어다. npm install react-router-dom 이렇게 설치하고나면 import를 해준다. import {useParams} from 'react-router-dom'; 이제 사용 준비 끝! useParams를 간단하게 알아보자면 URL을 통해 넘겨받은 파라미터 값을 해당 페이지에서.. 리액트에서 유튜브 API를 이용해 뮤직 플레이어 만들기 제목은 뭔가 완성된 프로그램을 만든 것처럼 보이지만 내가 만든건 프로그레스바(재생바)가 동작하지 않는 반쪽짜리 프로그램이다. UI에서부터 느껴지는 반푼이 프로그램의 기운... 주제에 반응형으로 늘어났다 줄어들었다 한다 ㅎ 아무튼 이걸 어떻게 만들었냐면 유튜브 ifram API라는걸 이용해서 만들었다. ifram player API에 대한 자세한 정보는 아래 링크를 참조하면 된다. https://developers.google.com/youtube/iframe_api_reference?hl=ko iframe 삽입에 대한 YouTube Player API 참조 문서 | YouTube IFrame Player API | Google for Developers 애플리케이션에 YouTube 플레이어를 삽입합니다... ReactJS에서 외부 JSON 파일 불러와서 사용하기 1. 개요 데이터나 컴포넌트 같은 걸 app.js에 다 집어넣으면 코드가 길고 복잡해짐 그래서 따로 파일을 만들어서 불러오기 하면 코드가 간결해지고 가독성이 좋아짐 컴포넌트나 데이터를 담을 js파일 하나 만들고, 코드를 작성한 후 export 외부 파일을 사용할 JS파일에서는 외부 파일을 import 하면 됨 2. 사용법 (1) data.js 일단 data.js파일 하나 만들어봅시다 let data = [ { id : 0, menu : "김밥", price : 1000 }, { id : 1, menu : "떡볶이", price : 1000 }, { id : 2, menu : "만두", price : 1000 } ] // 변수 export // export default 변수명 export default .. ReactJS에서 이미지 저장하고 불러오는 방법 1. 개요 리액트는 빌드시 JSX파일들을 HTML과 CSS파일로 변환하는 번들링 과정을 거치면서 public폴더를 제외한 나머지 경로의 파일들을 압축, 변환함 그래서 압축, 변환하면 안되는 이미지 파일들은 보통 public 폴더에 보관함 2. 사용법 그냥 public 폴더에 이미지를 저장하면 됨 위와 같이 코드를 짜면 public 폴더에 있는 이미지를 불러올 수 있음 이전 1 2 3 4 다음
