기존 React Router에서 Route를 지정할 때, 안에 컴포넌트에서 path props으로 url을 지정하고 component props로 랜더링을 원하는 페이지 컴포넌트를 지정하였었다. // Route.tsx 한 페이지 안에 3개의 UX 뎁스로 구성되어있는 UI에서 3번째 뎁스 까지 도달했을 때, Add 혹은 EditPage로 넘어가게 하였다. 2번째 뎁스에서 id값을 props로 넘기는 것을 받아왔을 때, focus가 해당 페이지를 벗어나면 AddPage 혹은 EditPage가 언마운트되었디가 다시 마운트되면서 3번째 뎁스 안의 title, content등의 state가 모두 초기화되어 작성한 내용이 빈칸으로 되는 이슈가 발생하였다. 해당 이슈가 발생한 원인은 한 페이지 안에 여러 개로 뎁스가..
Ably.io로 채팅 기능을 구현하다보면 유저가 메세지를 읽었는지의 유무에 대해 체크해봐야하는 상황이 있다. Ably가 웹 소켓을 사용해서 채팅을 쉽게 구현하게 해주는 서비스이므로 유저가 소켓에 접속해있는지 아닌지 체크할 방법이 있을 것이라고 생각하고 공식 문서를 확인해봤는데 다행히 있었다. Presence / REST / Docs | Ably Realtime Presence events provide clients with information about the status of other clients 'present' on a channel ably.com 공식 문서에서 볼 수 있듯이 presence를 통해 현재 channel에 참여하고 있는 client들의 상태에 대해 체크할 수 있다. Prese..
React로 프론트를 개발하다보면, api request를 하기전에 state 값이 set되지 않아서 request시 body나 parmater에 담겨와야되는 정보가 null이나 state를 정의할 당시의 default값으로 들어오는 경우가 종종 발생한다. 물론 다른 이유로 인해 안 담겨오는 경우도 있지만, 대부분의 경우는 React의 생명 주기(LifeCycle)만 제대로 지키면 발생되지 않을 문제이기도 하다. React LifeCylcle에 대해서는 이번 포스트의 주제와는 살짝 벗어나므로 다른 포스트에서 다뤄보겠다. useEffect(() => { if (token) { const socket = io(`${process.env.REACT_APP_API_URL}/message`); setSocket(..
어드민이나, 홈페이지에서 다운로드 버튼을 클릭하면 대량의 파일(CSV, 이미지 파일, PDF 등)을 다운로드 받아야되는 경우가 있다. 기존의 어드민에서는 다운받아야하는 파일의 개수가 1,2개 단위로 한정적이여서 아래와 같이 반복문 방식으로 react-saver 패키지의 saveAs() 메소드를 파일의 개수만큼 호출하는 방식으로 구성하였다. const saveFiles = (files: File[]) => { files.map((file: File) => { saveAs(file.url,`${file.name}.{file.type}`); // saveAs 메소드는 'file-saver.js'에서 import함 }) } 어드민에서 한번에 700~1000개 내외의 다른 포맷의 파일을 다운로드 받아야하는데 위의..
개발/ReactJS 2022. 7. 28. 08:20
기존 React Router에서 Route를 지정할 때, 안에 컴포넌트에서 path props으로 url을 지정하고 component props로 랜더링을 원하는 페이지 컴포넌트를 지정하였었다. // Route.tsx 한 페이지 안에 3개의 UX 뎁스로 구성되어있는 UI에서 3번째 뎁스 까지 도달했을 때, Add 혹은 EditPage로 넘어가게 하였다. 2번째 뎁스에서 id값을 props로 넘기는 것을 받아왔을 때, focus가 해당 페이지를 벗어나면 AddPage 혹은 EditPage가 언마운트되었디가 다시 마운트되면서 3번째 뎁스 안의 title, content등의 state가 모두 초기화되어 작성한 내용이 빈칸으로 되는 이슈가 발생하였다. 해당 이슈가 발생한 원인은 한 페이지 안에 여러 개로 뎁스가..
개발/ReactJS 2022. 5. 1. 14:31
Ably.io로 채팅 기능을 구현하다보면 유저가 메세지를 읽었는지의 유무에 대해 체크해봐야하는 상황이 있다. Ably가 웹 소켓을 사용해서 채팅을 쉽게 구현하게 해주는 서비스이므로 유저가 소켓에 접속해있는지 아닌지 체크할 방법이 있을 것이라고 생각하고 공식 문서를 확인해봤는데 다행히 있었다. Presence / REST / Docs | Ably Realtime Presence events provide clients with information about the status of other clients 'present' on a channel ably.com 공식 문서에서 볼 수 있듯이 presence를 통해 현재 channel에 참여하고 있는 client들의 상태에 대해 체크할 수 있다. Prese..
개발/ReactJS 2022. 3. 8. 08:20
React로 프론트를 개발하다보면, api request를 하기전에 state 값이 set되지 않아서 request시 body나 parmater에 담겨와야되는 정보가 null이나 state를 정의할 당시의 default값으로 들어오는 경우가 종종 발생한다. 물론 다른 이유로 인해 안 담겨오는 경우도 있지만, 대부분의 경우는 React의 생명 주기(LifeCycle)만 제대로 지키면 발생되지 않을 문제이기도 하다. React LifeCylcle에 대해서는 이번 포스트의 주제와는 살짝 벗어나므로 다른 포스트에서 다뤄보겠다. useEffect(() => { if (token) { const socket = io(`${process.env.REACT_APP_API_URL}/message`); setSocket(..
개발/ReactJS 2022. 2. 17. 08:20
어드민이나, 홈페이지에서 다운로드 버튼을 클릭하면 대량의 파일(CSV, 이미지 파일, PDF 등)을 다운로드 받아야되는 경우가 있다. 기존의 어드민에서는 다운받아야하는 파일의 개수가 1,2개 단위로 한정적이여서 아래와 같이 반복문 방식으로 react-saver 패키지의 saveAs() 메소드를 파일의 개수만큼 호출하는 방식으로 구성하였다. const saveFiles = (files: File[]) => { files.map((file: File) => { saveAs(file.url,`${file.name}.{file.type}`); // saveAs 메소드는 'file-saver.js'에서 import함 }) } 어드민에서 한번에 700~1000개 내외의 다른 포맷의 파일을 다운로드 받아야하는데 위의..