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

TailwindCSS는 한 번도 사용해본적이 없는데 최근에 조금 궁금했던 적이 있었다. 언젠가 배워야징~ 하고 있었는데 이번에 Next.js 강의를 들으며 공부를 하는데, 프로젝트 생성 시 초기 세팅을 위해 묻는 질문들 중 TailwindCSS를 사용할건지를 묻더라. 어차피 대충 알기론 어렵다거나 배울 내용이 많다거나 한 건 아닌것 같아서, 기회 삼아서 그냥 한 번 써보기로 했다.ㅎ https://tailwindcss.com/docs/installation Installation - Tailwind CSS The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool...

마이페이지 관심 로그인 메뉴 세 개 중 마이페이지와 관심은 누르면 해당 페이지로 이동하도록 해야 하지만, 로그인은 페이지 이동이 아닌 모달창을 띄워줘야 했다. 따라서 상위 두 개 요소는 Link 태그를 사용하면 되고, 마지막 요소는 p 태그를 사용하면 된다. 그렇지만 세 개의 스타일은 똑같다. 이럴 때 const MenuItem = styled(Link)` color: #666; font-family: Noto Sans; font-size: 0.8rem; font-weight: 400; text-decoration: none; &:not(:last-child) { margin-right: 30px; } `; MenuItem을 이와 같이 작성해주었다면, Link 태그는 사용할 때 to 속성을 쓰지 않으면 ..

사실상 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'라는 데이..