Develop_story (120) 썸네일형 리스트형 Audio custom hook - currentTime (조회수 관련) 1. 문제점 프로젝트에서 음악 재생 수 즉, 스트리밍 수에 따른 순위를 만들기 위해 음악이 재생되고 X초 후에 api를 요청하여 조회수를 1회 늘리는 방법을 구현해야 했다. X초 후에 api를 요청하여 조회수를 1씩 늘리려고 하는 이유는 다른 사람들이 편법을 사용해 스트리밍 수를 조작할 수 있기 때문에, 이를 막기 위해 제한 사항을 만들었음 2. 시도한 방법 audio 태그를 사용했을 때, 분명히 현재 얼마나 재생됐는지, 혹은 재생하고 있는 시간이 몇 분, 몇 초인지 알 수 있는 event가 있을 것이라 생각했고, 대부분 current 관련된 이름으로 되어있을 것이라 생각해 audio current 관련된 것들을 모두 검색했고, currentTime이라는 event를 하나 알게 되었다. 그리고 이를 가지.. 채팅방 역 무한 스크롤 구현 하기 (intersection-observer) 1. 구현해야하는 부분 실전 프로젝트에서 채팅방 기능을 구현하고, 채팅방에서 위로 올렸을 때 위에 데이터들이 더 불러와지는 무한 스크롤을 구현하게 되었다. 일반적인 무한스크롤이 아닌 역방향 무한 스크롤이라 생각보다 자료를 찾기 어려웠던 부분이 있었고, socket을 이용한 무한 스크롤이라 더욱 헷갈리는 부분이 많았다. api 없이 구현하면 자업이 메인 쓰레드에서 이루어지는데, 들어오는 엘리먼트마다 체크를 해주는 작업을 하고, 메인 쓰레드에서 이런 작업을 하게 되면 성능 상의 문제가 생길 수 있음 api를 사용하면 비동기로 해결해주기 때문에 api로 구현하는게 구현하는 방법도 쉽고 성능상으로도 더 좋음 target을 지정해주고, target이 사용자의 화면 즉 veiwport에 지정한 target이 들어오.. chat 역방향 무한 스크롤 비동기 처리 1. 문제점 무한스크롤을 구현할 때, react-intersection-observer 를 사용하여 무한스크롤을 구현하였는데, 새로운 데이터들이 로딩이 되면 스크롤이 멈춰있으면 안 되고, 이전 내역 쪽으로 가야함 → 즉, 데이터가 로딩이 되고 스크롤의 위치가 맨 위로 되어 있어, 보여지는 데이터의 값들이 순서대로 보여지지 않는데, 스크롤의 위치를 변경하여 순서대로 보이도록 해야 함 2. 시도한 방법 prevScroll을 state 값으로 만들고, 들어왔을 때, scrollRef.current.scrollHeight 값으로 지정해줌 target이 들어왔을 때, 바뀐 scrollRef.current.scrollHeight 에서 prevScroll을 뺀 것을 scrollTop으로 옮김 prevScroll을 s.. React socket.io-client 이번 실전 프로젝트를 진행하면서 채팅 방을 구현하게 되었다. 백엔드에서 이미 socket.io-client를 찾아보시고 어느 정도 공부를 진행하셔서 나 또한 socket io로 채팅을 구현하게 되었다. 코드는 프론트엔드 위주로 서술 될 것이고, 이해를 위해 백엔드 코드를 살짝 작성할 예정이다. (같이 프로젝트를 진행한 팀원의 코드이며 허락을 받았음) 1. socket.io 를 사용하기 위한 사전 작업 npm install socket.io-client npm을 이용해 socket.io-client 설치 const socket = io(`${process.env.REACT_APP_SERVER}`, { transports: ['websocket'] }) 라이브러리에 설치되어 있는 io를 사용해 socket .. WIL - 실전 프로젝트 1주차 1. 이번주 공부를 통해 알게된 점 Div를 click했을 때, 해당하는 좌표 값을 가져오는 방법 socket.io-client를 사용해서 채팅방을 구현하는 방법 (아직 완벽하게 완성을 시키지 못했음) typescript를 사용하면서 모르는 type을 찾는 방법 실제 프로젝트를 진행하면서 백엔드, 디자이너님과 협업을 진행할 때 변경사항이 있으면 바로바로 공유하고, 코드를 작성하거나 기능을 구현할 때, 헷갈리거나 정확하게 어떠한 방식으로 할지 정해져있지 않으면 팀원들과 소통을 하고 그 이후에 코드를 작성하거나 기능을 구현해야 한다는 것을 알게 됨 2. 아쉬웠던 점 / 보완할 점 어떠한 라이브러리를 사용했을 때, 이 라이브러리를 왜 사용하고 다른 라이브러리 외에 이 라이브러리를 선택한 이유에 대해 생각을 별.. Div에서 onClick event시 좌표 값 구하기 1. 문제점 Div를 클릭했을 때, Div 내부에서 좌표 값을 얻어 얻은 좌표 값을 백엔드에 보내주는 방법 2. 해결한 방법 offsetX, offsetY를 활용하여 좌표 값을 얻어냄 const onClickcoordinateHandler = (e: React.MouseEvent) => { const coorinate: Coordinate = { //e.nativeEvent.offsetX 를 이용해 X축의 좌표를 알아냄 (Y축도 동일) coordinateX: e.nativeEvent.offsetX, // -300에 * -1을 한 이유는 좌측 하단부터 0, 0으로 시작하기 위해 coordinateY: (e.nativeEvent.offsetY - 300) * -1, } ... return ( ... 선택할 .. socket이 적용된 room에 들어갔을 때, 연결이 제대로 안 되는 상황 1. 문제점 이전 trouble shooting에서 작성한 React.Strict를 제거했을 때 밑에 있는 error가 났다. EIO=4&transport=websocket&sid=I1OW0BmU3sdmRODXAAK-' failed: WebSocket is closed before the connection is established. 2. 해결한 방법 기존에 있던 socket 을 io로 지정하는 과정에서 {transports: ['websocket']} 을 추가하였다. // 이전 코드 const socket = io(`${process.env.REACT_APP_SERVER}`) // 변경된 코드 const socket = io(`${process.env.REACT_APP_SERVER}`, {transp.. socket io join 중복 작동 1. 문제점 socket을 사용해 채팅기능을 만들어 어느 user가 채팅방에 접속해있는지 구현을 하려고 하였는데, join이 중복으로 일어나서 userList에 같은 닉네임이 2명씩 뜨는 경우가 생김 2. 해결 방법 이런 방법, 저런 방법을 시도하기 보단 찾아보았는데, 찾아본 글과 작성한 코드가 일치하는 부분도 없었고, 애초에 마땅한 해결 방법이 없어서 하루, 이틀 정도 계속 헤맸음 React에서 기본적으로 작성되어 있는 React.StrictMode를 제거해보았음 // 기존 코드 // index.tsx // 변경한 코드 문제 없이 잘 작동 됨 3. 알게 된 점 이런 쉬운 방법으로 해결이 되니 처음에는 이전에 했던 것들이 조금은 고생만 했다고 생각이 들었다. 하지만 이렇게 해결되지 않은 문제점들도 찾으면.. 이전 1 2 3 4 5 ··· 15 다음
