본문 바로가기

코딩/ReactJS

(27)
리액트, 원하는 게시글의 댓글 목록만 열기(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..
리액트 JWT 로그인 및 로그인 유지(유저 인증) 방법 프로젝트가 막바지로 접어들고 있는데 드디어 로그인 및 로그인 유지 기능을 구현했다. 사실 로그인 기능은 개념이 그렇게 어렵지 않다. 1. 회원가입을 통해 서버에 유저 정보를 심어둔다. 2. 로그인을 통해 입력한 유저 정보가 서버에 존재하는지 확인한다. 3. 입력한 유저 정보가 서버에 존재한다면 토큰을 반환한다. 4. 반환받은 토큰을 가지고 인증을 유지한다. 5. 서버에 요청할 때 토큰을 첨부하면 해당 토큰을 이용해 유저를 인증한다. 오늘 게시글에서는 회원가입은 미뤄두고 나머지 기능들을 알아보려고 한다. 우선 로그인 하는 방법은 어렵지 않다. let body = { username: id, password: password }; axios .post("http://localhost:8080/users/lo..
react에서 게시글 생성 실시간 적용하기 현재 진행중인 프로젝트에서 채팅방을 생성한 뒤 지금 생성되어 있는 채팅방 리스트를 확인하는 기능을 구현해야 했다. 나는 아래와 같이 modal창을 이용해서 채팅방을 생성하도록 설정하였기 때문에 채팅방 생성 후 따로 라우팅을 시키지 않는 상태였다. 그래서 채팅방을 생성한 뒤에 별도로 리렌더링해주지 않는 한 아래와 같이 생성된 채팅방을 확인할 수 없었다. 나는 채팅방 정보를 useEffect를 이용해 받아오고 있었기 때문에 아래와 같이 rerender라는 state를 이용해 useEffect가 실행되는 트리거를 만들어 페이지를 리렌더링 해주었다. (참고로 리액트로 만든 SPA는 state가 변경되면 페이지가 리렌더링 된다.) useEffect(() => { axios .get("http://localhost..
리액트에서 반복문으로 게시글 역순 렌더링하기 현재 진행중인 프로젝트에서 리액트에서 반복문으로 게시글을 렌더링하도록 하였는데 게시글을 생성할 경우 최신 게시글이 가장 나중에 렌더링된다. 즉, 오래된 게시글이 가장 상단에 노출되고 있다. 이런 현상이 일어나는 이유는 map함수를 사용해서 배열의 요소들을 불러와 렌더링 할 때 순차적으로 렌더링을 하기 때문이다. 예를 들어 아래와 같이 1, 2, 3이 들어있는 배열을 이용해 렌더링을 한다고 할 때 [1, 2, 3].map((a, b)=>{ return {a} } ) 아래와 같은 순서로 렌더링 된다. 1 2 3 여기서 배열에 새로운 데이터를 추가한다고 하면 아래와 같이 배열이 생성될 것이고 [1, 2, 3, 4].map((a, b)=>{ return {a} } ) 아래와 같은 순서로 렌더링 될 것이다. 1 ..
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..