본문 바로가기

reactjs

(23)
리액트 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 + 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 아래에서 실행되었다. ..