기존 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가 모두 초기화되어 작성한 내용이 빈칸으로 되는 이슈가 발생하였다. 해당 이슈가 발생한 원인은 한 페이지 안에 여러 개로 뎁스가..
유저 동시 접속 방지 기능을 개발이 완료된 서비스에 추가하는 방식으로 구현해야될 일이 생겼다. 해당 서비스의 경우, 로그인, 유저 관리를 세션/쿠키 방식이 아닌 JWT 방식으로 관리하고 있었기 때문에 동시 접속 방지를 websocket을 활용하여 구현하였다. 대략 어떻게 동시접속 방지를 구현할지에 대해 생각해보면 순서가 다음처럼 되었다. 유저가 로그인할 때, 토큰을 프론트로 전송함과 동시에 socket connection을 연다. 해당 유저가 로그아웃 할때까지 connection을 유지한다. 다른 클라이언트에서 해당 유저가 접속하면 기존의 connection을 끊고, 새로 접속된 클라이언트에서만 로그인시킨다. 위와 같은 방식으로 큰 틀을 잡고 구현하였다. 기존의 사용하던 NestJS가 v7이고 socke..
[추가하기] 버튼을 눌렀을 때, 컴포넌트를 추가해야 하는 일이 있었다. //Page.tsx export const Page = () => { const [story, setStory] = useState([]); const addStory = () => { setStory(story.concat()); }; return ( {story} { addStory(); }} /> ) 위와 같이 story를 array 형태의 state로 관리하여 버튼을 클릭했을 때, onClick 이벤트로 story state에 를 추가하는 함수인 addStory( )를 실행하는 방식으로 구현하였다.
개발/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가 모두 초기화되어 작성한 내용이 빈칸으로 되는 이슈가 발생하였다. 해당 이슈가 발생한 원인은 한 페이지 안에 여러 개로 뎁스가..
개발/NestJS 2022. 3. 24. 08:20
유저 동시 접속 방지 기능을 개발이 완료된 서비스에 추가하는 방식으로 구현해야될 일이 생겼다. 해당 서비스의 경우, 로그인, 유저 관리를 세션/쿠키 방식이 아닌 JWT 방식으로 관리하고 있었기 때문에 동시 접속 방지를 websocket을 활용하여 구현하였다. 대략 어떻게 동시접속 방지를 구현할지에 대해 생각해보면 순서가 다음처럼 되었다. 유저가 로그인할 때, 토큰을 프론트로 전송함과 동시에 socket connection을 연다. 해당 유저가 로그아웃 할때까지 connection을 유지한다. 다른 클라이언트에서 해당 유저가 접속하면 기존의 connection을 끊고, 새로 접속된 클라이언트에서만 로그인시킨다. 위와 같은 방식으로 큰 틀을 잡고 구현하였다. 기존의 사용하던 NestJS가 v7이고 socke..
개발/ReactJS 2021. 11. 1. 08:20
[추가하기] 버튼을 눌렀을 때, 컴포넌트를 추가해야 하는 일이 있었다. //Page.tsx export const Page = () => { const [story, setStory] = useState([]); const addStory = () => { setStory(story.concat()); }; return ( {story} { addStory(); }} /> ) 위와 같이 story를 array 형태의 state로 관리하여 버튼을 클릭했을 때, onClick 이벤트로 story state에 를 추가하는 함수인 addStory( )를 실행하는 방식으로 구현하였다.
개발/ReactJS 2021. 10. 30. 08:20
...(users?.map((user: User) => { const { data: userStories } = useQuery( `/admin/${user.id}/stories`, fetcher ); const { data: likes } = useQuery( `/admin/${user.id}/likes`, fetcher ); ------- 생략 -------- } 위와 같이 리턴받은 User타입의 배열을 .map()을 통해 userId별로 useQuery를 통해 api를 호출하려하였는데 callback안에서는 useQuery를 사용할 수 없다고 에러가 발생하였다. const [userId, setUserId] = useState(Number); const { data: users } = useQuer..