우리 프로젝트의 아주 중요한 핵심 기능 중 하나는 '실시간으로 진행되는 문제 풀이 기능'이다. 표준 웹소켓을 이용해 구현하였다. http 통신만 해오다가 ws 통신을 하려니 시작 당시엔 나에게 꽤 큰 도전이었다. 거기다 (기획적인 면에서) 플로우가 제법 복잡했기에, 특히 처음 구현 시에 머리가 많이 아팠던 기억이 난다. 그래도 좋은 경험이 돼서 꼭 정리해봐야지 하다가... 벌써 반년도 넘게 미루다가 지금까지 왔다.ㅋ그렇게 해서 (드디어) 이번 시리즈는 두 개의 포스팅에 걸쳐 해당 기능 구현을 위해 왜 WebSocket을 선택하였는지부터, 적용하며 마주한 문제 상황과 해결한 과정들을 정리하여 이야기해보려고 한다. 왜 WebSocket인가?✅ 웹소켓(WebSocket) : 사용자의 브라우저와 서버 간 지속적..

지난 주 웹소켓 관련 이슈를 해결하면서 리액트의 생명주기에 대한 이해가 아직 부족하다는 생각이 들었다. 거기다 문제 해결의 열쇠가 useEffect 쪽에 있었는데, 어쩌다보니 해결된 느낌이었어서 이에 대해서도 좀 더 제대로 공부해볼 필요성을 느꼈다. 따라서 이번 주제는 React LifeCycle과 useEffect Hook이다. 두 가지는 연관성도 깊고 매우 중요한 개념인만큼 포스팅 길이가 다소 길어질 예정이지만, 공식문서를 특히 많이 참고하여 작성하였으니 가능한 한 정독^^해볼 것을 추천한다. React Lifecycle리액트에는 생명주기라는 것이 있다. 라이프사이클이라고도 하는데, 이는 리액트의 컴포넌트가 생성되고 소멸되기까지의 기간을 의미한다. 크게 마운트, 업데이트, 언마운트로 과정을 나눈다. ..

사실상 Slack의 클론코딩은 지난 주 6주차가 마지막이었고, 오늘은 보너스 섹션인데, 찐막이라고 할 수 있겠다... (벌써?) 바로 시작해보장~ 1. 이미지 드래그 업로드하기 이미지를 드래그하여 드랍하는 순간 바로 업로드되도록 할 것이다. 핵심 이벤트는 onDragOver : 이미지를 클릭하여 드래그하는 동안에 계속적으로 호출됨 onDrop : 이미지를 드롭하는 순간(드래그에서 손을 떼는 순간) 호출됨 이 두 가지이며, 이 두 가지 이벤트가 설정된 부분을 이미지를 드롭할 수 있는 영역, Drop Zone이라고 한다. (여기서는 Container가 드랍존이 되겠다.) 드랍한 이미지는 items 혹은 files 안에 들어있어 이를 서버로 보내면 업로드가 되는 것인데, 과정을 정리하면 다음과 같다. 1. 브..

1. 타입가드 (타입 점검하기) 두 가지 이상의 타입이 겹쳐져 있을 때, 타입을 구분해주는 역할을 한다. in 연산자 const user = 'Sender' in data ? data.Sender : data.User; // data라는 객체 안에 해당 속성이 있는지 검사함 if문 function a(b: number | string) { if (type of b === 'number') { b.toFixed()// b: string // number에는 toFixed라는 메소드가 존재하여 b가 number라는 것을 확실히 앎 } b.toFixed();// error // if문 바깥에서는 b가 문자열일 수도 있고 숫자형일 수도 있는데, string의 경우에는 toFixed를 사용할 수 없기 때문! fu..

이번 섹션에서는 Slack에서 빼놓을 수 없는 기능 중 하나인 실시간 채팅을 구현하기 위해 웹 소켓을 사용하는 방법을 배운다. 웹 소켓은 사용해본 적이 없는데 안그래도 지금 진행하는 프로젝트에서 웹 소켓을 사용해야하는 상황이 생겨서 배울 수 있음에 반가웠다..ㅎㅎ 추가로 커스텀 스크롤바, 멘션 기능, 리버스 인피니트 스크롤링 등 각종 프론트 기술에 대해서도 다루어볼 예정이다. 1. Socket.io를 통한 웹 소켓 통신 Socket.io 전용 훅스 만들기 const useSocket = () => { const socket = io.connect(`${backUrl}`);// 백과 연결 socket.emit('hello', 'world');// 서버에 hello라는 이벤트 이름으로 'world'라는 데이..

이번 포스팅은 Slack 클론코딩 3주차 메뉴와 모달 만들기, 그리고 4주차 DM 보내기를 수강하고 정리하고 싶은 것들을 몇 가지 적어보았다. 4주차가 실습 위주라 정리할게 많지 않았어서.. 그냥 한번에 쓰기로... 1. npm 모듈 설치 시 @types/gravatar 이런식으로 typescript 버전도 깔아야하는지 유무 시행착오 없이 미리 아는법 : https://www.npmjs.com/ npm | Home Bring the best of open source to you, your team, and your company Relied upon by more than 17 million developers worldwide, npm is committed to making JavaScript de..