사실상 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..

1. 완성 후 반복되는 코드 -> 커스텀 훅 기본으로 제공되는 훅을 합쳐서 만들 수 있다 2. 제네릭 타입 타입을 변수로 만들어서 매개변수 자리에 값이 들어갔을 때 리턴값의 타입도 같은 타입으로 자동으로 정해짐 3. - return 타입에 대해서 변수를 따로 만들어 가독성을 향상시킬 수 있다 - any 대신 ChangeEvent, e.target.value 대신 e.target.value as unknown as T 를 넣어줌 4. axios 요청 보내기, CORS, proxy - Console 탭뿐 아니라 Network 탭도 같이 보면서 개발하기를 추천 프론트에서 보낸 요청을 상세히 확인할 수 있다 - OPTIONS : 프론트(3090)와 백(3095)의 포트번호가 달라서 CORS에 대해 요청을 한 번..

리액트+타입스크립트 공부를 위해 스터디를 시작했다! Slack 서비스를 클론코딩하는 강좌를 들으며 익혀볼 예정 (Slack도 리액트를 이용해 개발되었다고 한다) 첫 주차는 섹션0. 프론트엔드 초기 세팅부터 시작하는데, 본격적인 파트는 아니어도 알아두면 좋을 것 같은 부분들이 있어 정리 겸 적어보려고 한다. 1. tsx 파일을 typescript가 변환을 해주고, 그거를 webpack이 받아서 babel로 처리해서 js파일로 만듦. 브라우저는 항상 html, css, javascript를 인식하기에 그로부터 프론트엔드 개발이 시작된다는 것을 기억하자 babel이 html파일 만들어주는거 아님, index.html이 리액트로 개발할 때(SPA)에도 매우 중요. 성능 개선, 검색 엔진 최적화할 때에도 영향이 ..