리액트 (19) 썸네일형 리스트형 리액트, 원하는 게시글의 댓글 목록만 열기(feat. map함수) 요즘 리액트를 이용해 SNS를 구현하고 있다. 게시글의 댓글 아이콘을 클릭하면 댓글 목록이 렌더링 되도록 하고싶었는데 문제가 발생했다. 바로 한 개의 게시글에서만 댓글 아이콘을 눌러도 다른 게시글의 댓글 목록이 모두 열리는 것. 사실 멋쟁이사자처럼에서 프로젝트를 진행했을 때 해당 기능을 구현해보았었다. 2023.08.31 - [코딩/ReactJS] - react에서 댓글 기능 구현하기(선택된 컴포넌트만 댓글UI 보여주기) react에서 댓글 기능 구현하기(선택된 컴포넌트만 댓글UI 보여주기) 오늘 하루종일 씨름한 댓글 기능 구현하기 후기... 기존에 댓글 기능을 간단하게 구현해두었지만 서버와의 연동을 위해서 조금 손보고자 시작한게 하루를 뚝딱 집어삼켜버렸다. 처음에는 그냥 a bebutae.tistory.. 리액트 토이 프로젝트 - 기억력 게임 개선하기 지난번에 리액트를 이용한 토이 프로젝트인 '기억력 게임'을 만들어보았습니다. 2023.10.04 - [코딩/ReactJS] - 리액트 토이 프로젝트 - 기억력 게임 만들기(feat: 42경산 기억력 테스트) 리액트 토이 프로젝트 - 기억력 게임 만들기(feat: 42경산 기억력 테스트) 42서울과 42경산의 기억력 테스트를 간단하게 맛볼 수 있도록 하기 위해서 순서에 맞춰 카드를 클릭하면 승리하는 게임을 리액트로 만들어보았습니다. 물론 에꼴42에서 주관하는 기억력 테스트 bebutae.tistory.com 위 포스팅을 작성한 당시에는 시작 버튼도 없고, 카드를 선택해도 색상 변경이 되지 않는 문제가 있었습니다. 그래서 개선을 해보았습니다. 개선 후의 버전은 1.20버전이며, 시작하기 버튼이 생겼고, 선택.. 리액트 토이 프로젝트 - 기억력 게임 만들기(feat: 42경산 기억력 테스트) 42서울과 42경산의 기억력 테스트를 간단하게 맛볼 수 있도록 하기 위해서 순서에 맞춰 카드를 클릭하면 승리하는 게임을 리액트로 만들어보았습니다. 물론 에꼴42에서 주관하는 기억력 테스트와 다른점이 많습니다. 에꼴42에서는 여러개의 카드 중 몇개의 카드만 순서대로 반짝이고, 반짝였던 카드를 순서대로 클릭하면 승리합니다. 하지만 제가 만든 기억력 테스트는 화면에 표시된 카드 모두에 순서가 부여되고, 부여된 순서에 맞춰 카드를 클릭하면 승리합니다. 저는 이 토이 프로젝트에서 리액트를 사용하였고, 스타일 컴포넌트로 스타일을 주었습니다. 마지막으로 useEffect와 useState 훅을 이용해 코드를 작성하였습니다. 시작하기에 앞서 리액트 프로젝트를 생성하고, 스타일 컴포넌트를 설치하겠습니다. npx crea.. 리액트에서 axios로 데이터 불러올 때 오류 핸들링하기 나는 현재 진행중인 프로젝트에서 axios를 이용해 nest 서버의 데이터를 불러오도록 코드를 작성하였다. 하지만 서버가 꺼져있거나 데이터 바인딩이 잘못되어서 불러올 데이터가 없을때는 페이지 전체에 오류 메시지가 떠서 아예 페이지를 볼 수 없는 경우가 발생했다. 사실 나는 항상 서버를 같이 켜뒀고 데이터 바인딩도 직접 해서 이런 오류를 볼 일이 프로젝트 초반 이후로는 없었다. 그런데 팀원들과 사용중인 깃허브에 푸시하고 팀원이 풀 해서 코드를 실행하니 이런 오류가 발생하는 걸 보고나서야 문제를 인식할 수 있었다. 그래서 내가 데이터 로딩 오류를 해결한 방법은 axios에 catch문을 붙이는 것이었다. 현재 사용중인 코드에서 axios관련 코드는 아래와 같이 대부분 useEffect 아래에서 실행되었다. .. 리액트에서 게시글 목록 클릭해서 해당 게시글 상세 페이지로 이동하기 제목이 좀 길지만 쉽게 말하면 내가 게시판에 접속했는데 수많은 게시글 중 한 개의 제목을 클릭하면 해당 게시글의 상세 페이지로 넘어갈 수 있는 로직을 소개하고자 한다. 우선 나는 ReactJS와 NestJS를 이용해서 프로젝트를 진행중이다. 마이페이지에 접속하면 아래 사진과 같이 내가 작성한 피드 리스트가 보이고 피드의 제목을 클릭하면 해당 피드의 상세페이지로 접속할 수 있다. 쉽게 생각하면 각 피드의 제목마다 해당 피드의 상세 페이지의 주소를 하드코딩 해서 쉽게 페이징 기능을 구현 할 수도 있지만 이 프로젝트는 서버와의 연동을 통해 실제 게시판 서비스 처럼 생성, 조회, 수정, 삭제가 가능하도록 제작하는 것이 목표이므로 피드 리스트의 각각의 피드 제목을 클릭했을 때 해당 피드의 id를 기반으로 상세 페.. React Hook useEffect has a missing dependency 오류 해결하기 리액트 앱을 실행했는데 갑자기 이런 오류가 발생했다. 이게 뭔데... 검색해보니 useEffect에서 데이터를 렌더링 하는데 그 데이터가 useEffect 외부에 존재할 경우 발생한단다. 사실 뭔 말인지 잘 모르겠다... 사실 오류 메시지도 아니고 경고 메시지라서 리액트 앱 실행에는 큰 문제가 없기 때문에 개발과정에서는 신경 안써도 되지만 그래도 문제가 생겼으면 해결은 해봐야지 싶어서 이것저것 시도해봤다. 그 중에서 제일 효과적이었던 방법이 eslint를 무시하도록 코드를 작성하는 것이었다. 리액트는 친절해서 어떤 파일의 몇번째 줄에서 문제가 발생했는지 다 알려준다. 위 이미지에서는 musiccontroller.js 파일의 38번째 줄에서 문제가 생겼다고 알려줬다. 그럼 우리는 37번째 줄에 아래 코드를.. 리액트에서 useParams를 이용해 유동적으로 페이지 주소 지정하기 현재 진행중인 프로젝트에서 각 게시글 마다 상세 페이지를 보여주는 기능을 구현하게 되었다. 단순한 페이지 전환은 useNavigate로 처리하고 있었는데 UI는 동일한데 서버에서 반환하는 게시글 id마다 다른 데이터를 보여주기 위해서는 useParams에 대한 이해가 필요했다. useParams는 딱 생긴 것 대로 리액트 훅이다. 설치는 그냥 react-router-dom을 설치하면 같이 설치된다. 아래는 설치 명령어다. npm install react-router-dom 이렇게 설치하고나면 import를 해준다. import {useParams} from 'react-router-dom'; 이제 사용 준비 끝! useParams를 간단하게 알아보자면 URL을 통해 넘겨받은 파라미터 값을 해당 페이지에서.. 리액트로 서버와 통신할 때 network error 해결 방법(feat : CORS에러) react에서 axios를 이용해 nest서버로 요청을 보냈는데 network error가 발생했다. 에러의 종류는 CORS 에러였는데 간단하게 CORS에 대해 알아보자면 CORS는 Cross Origin Resource Sharing의 약자다. 한글로는 교차 출처 리소스 공유라고 부르는데 여기서 Origin에 주목할 필요가 있다. origin은 protocol, hostname, port의 집합이다. 예를들어 http://localhost:3000이 프론트 주소고 http://localhost:8080이 백엔드 주소라면 이 둘은 protocol이 http로 동일하고, hostname이 localhost로 동일하지만, port는 3000과 8080으로 서로 다르다. 그렇기 때문에 프론트와 백엔드 서버는 .. 이전 1 2 3 다음
