배운 것, 공부한 것, 메모할 것 1. TypeScript - 클래스 마무리 2. React - 테스팅 복습, Redux-thunk 복습 3. 컴활 - 3과목 풀고, 이기적 필기 빈출인강 2과목 두개듣기 1. TypeScript: 접근 제어자 코드 간소화 class Department { public id: string; private name: string; constructor(id: string, name: string) { this.id = id; this.name = name; } // 후략 } id, name 각각에 대해 외부 접근 여부를 설정하기 위해서는 public, private로 접근 제어자처리를 해줘야 한다. 이렇게 되면 실제 저 값들을 사용하는 constructor 함수의 파라미터로..

사실 오늘 공부 계획을 전달했을 때는 이미지 드래그앤드랍 외에도 안읽은메시지 보여주는 기능도 하려고 했었다. 근데 이미지 드래그앤드랍에 시간이 좀 많이 소요돼서 결국 못했다 ㅜ 오늘 해본 것은, 이미지를 외부에서 드래그해서 드랍했을 때 바로 나타나게끔 하는 드래그앤드랍이다. DM과 채팅 모두에서 가능하게 했지만, 둘 다 하면 너무 길어지니까.. DM만 작성할 것이다. 1. DM 페이지 여기서 다른 부분은 전부 이전 포스팅에서 다뤘으므로 생략하고 onDrop과 onDragOver만 볼 것이다. 1-1. onDragOver 우선 dragOver 상태, 그러니까 현재 페이지에 드래그오버된 것이 있는지를 나타내기 위해 useState를 setDragOver과 함께 만들었다. onDragOver 함수를 보면, 1..

오늘 공부한 것은, Socket.io를 사용해서 실시간으로 채팅을 주고받는 DM 기능과 이름 옆에 3:57 PM, 11:18 PM과 같은 방식으로 보내는 시간을 표현하는 것을 구현하였다. 빨리 클론코딩을 끝내야 프로젝트를 시작할 수 있는데, 깊은 이해를 요구하기 때문에 진도가 좀 더디다. 빠르게 해봐야겠다. 위와 같은 페이지는, 내가 나에게 보내는 것으로 설정해뒀으나, 페이지를 두개 놓고 할 경우에는 실시간 채팅이 가능하다. 좀 느리긴 하지만 가능하다. 신기하지 않은가?? 1. useSocket custom Hook 기본적으로 socket.io의 사용은 이 useSocket에서 시작된다. Hook은 화면에 어떤 것을 건드리는 게 아니라 로직만 다루는 경우에 보통 사용한다(화면이 들어가더라도 상관은 없다...

글이 너무 길어질 것 같아서 나눠서 포스팅한다. 채널과 DM 목록을 만들었으므로 이제 각 페이지 내부에서 실질적으로 사용되는 채팅을 구현하기 전 먼저 채팅 박스와 내부 스타일링 먼저 구현해본다. 그 이후에 콘솔에 내가 작성한 DM을 띄우는 것까지 해볼 예정이다. 이전과 마찬가지로, 코드부터 보고 시작한다. 1. DM 페이지 내부 1-1. 프로필(gravatar 사용) GitHub를 이용해본 사람이라면 이러한 이모티콘을 많이 봤을 것이다. 이 이모티콘은 gravatar에서 제공하는 것으로, 라이브러리를 다운받아서 import해오면 누구나 손쉽게 사용할 수 있다. gravatar.url(email, options); 이런식으로 불러와서 사용할 수 있다. 이메일은 필수 옵션이다! {userData.nickna..

나는 팀원들과 프로젝트를 하거나 단순 의사소통을 할 때 특히 슬랙으로 소통하는 일이 잦아서 슬랙을 자주 사용한다. 물론 뭐 클론코딩이지만, 내가 사용하고 있는 서비스를 직접 이렇게 구현해보고 있다는게 신기했다. 오늘 포스팅할 내용은 간단하게 채널과 DM 섹션이다. 현재 DM에 사용자로 등록되어있는 'a', 'aa', 'a', 'a', 'a' 이렇게 5개의 계정은 각각 로그인 및 회원가입 페이지를 만들 때 임시로 만들었던 계정들이다. 회원가입을 하면 자동으로 DM 섹션에 추가가 되는 것이다. 사실 실제 슬랙에서는 이 워크스페이스에 사용자를 초대해야 DM 섹션에 뜨게 되지만, 어쨌든.. 회원가입을 한 값이 여기에 추가된다는 게 중요한 게 아닐까? 싶다. 진행을 하기 전에 이전 포스팅에서는 전부 서버 주소가 ..

오늘 모각코 시간에는, 타입스크립트를 사용한 리액트 프로젝트에서 채널 만드는 모달과 사용자 초대 모달, 그리고 라우터 주소설계에 대해 공부했다. 사실 이 부분 자체는.. 이전 포스팅 내용과 막 크게 차이가 나진 않는다. 그나마 차이가 있는 점은, 어제 올린 포스팅에서는 껍데기를 페이지에 부여했다면 이번에는 껍데기를 포함한 전체를 컴포넌트안에 넣고, 파라미터를 담은 채로만 페이지에 불러왔다는 것이다. 이 부분 또한 전체 페이지에서 내가 다룰 부분만 가져왔다. 1. 채널 모달 만들기 ( &라우터 주소 설계 ) 1-1. 컴포넌트 시작하기에 앞서 이전 포스팅들에서 다룬 내용은 전부 생략한다. 1. useParams Hook useParams Hook은, 이후 쿼리문의 형태로 사용하는 것을 수월하게 해 주는 Ho..

클론코딩 강의를 들으면서 점점 구조가 복잡해지고, 어려워지고 있음을 몸소 느끼고 있다. 오늘 배운 부분은, 실제 Slack에서 워크스페이스를 API통신을 활용하여 만드는 것이다. 우선 시작하기에 앞서 스타일링은 전부 Slack의 개발자도구에서 그대로 가져온 것이므로, 따로 말할 게 없다는 점을 밝힌다. styled-components를 사용하긴 했지만, 이마저도 결국 뭐 직접 짠 거는 아니니까.. 그냥 그러려니 하면 될 것 같다. 사실 중요하지도 않고. 간단해 보이지만, 이것을 만들기 위해서는 많은 함수가 필요하다. + 버튼을 눌렀을 때 모달을 불러오는 것이라든지, 모달의 우측상단 X 버튼을 눌렀을 때 모달이 꺼지는 것이라든지.. 우선 페이지와 컴포넌트로 나눠서 설명을 해야할 것 같다. 1. 컴포넌트 이..

최근에 타입스크립트와 리액트를 활용한 슬랙 클론코딩 프로젝트 강의를 듣고 있다. 얼마전까지 로그인 및 회원가입 페이지를 만들어 보면서 axios를 통한 서버와의 API통신에 대해 이해하게 되었고, GitHub에서도 자주 보이는 Gravatar라는 귀여운 레트로 이모티콘도 사용해봤다. 7/7, 그러니까 어제는 본격적으로 워크스페이스를 만들기 시작했다. 리액트 라우터를 활용한 링크는 여러번 해봤으나 중첩 라우터는 해보지 않았다. 생각해본 적도 없지만, 막상 보니까 신기했다. 기본적으로 App 레이아웃의 index.tsx에서는, CRA에서의 일반적인 App.jsx처럼 리액트 라우터를 통해 여러 컴포넌트로 연결되는 형태의 구조를 갖고 있다. 아래는 리액트 라우터를 사용한 아주 기본적인 형태의 구조이다. impo..

이 글은 Slack 클론 코딩[실시간 채팅 with React] 강의의 내용을 담은 글입니다. TypeScript에 대한 이론을 어느 정도 익히고서, 이제 TypeScript를 사용한 React 프로젝트를 진행하는 강의를 수강 중에 있다. 여기서, 내가 궁금했던 axios의 활용법을 어느정도 익히게 된 것 같아서 그 내용을 포스팅 하고자 한다. 1. axios를 활용하여 서버로 데이터 보내기(+CORS, proxy) 우선 백엔드 서버로 데이터 보내기(http://localhost:3095/api/user에 axios 활용)는, 해당하는 서버가 켜져 있어야 한다. 즉, 데이터의 흐름은 localhost:3090(리액트 서버) -> localhost:3095/api/user (백엔드 서버)로 이뤄지게 되는데..

이 글은 인프런의 실전 프로젝트로 배우는 TypeScript 강의를 듣고 정리한 글입니다. function $(selector) { return document.querySelector(selector); } function getUnixTimestamp(date) { return new Date(date).getTime(); } 이 두 자바스크립트 함수를 보자. 기능 자체는 생각하지 말고 코드만 보면, 첫번째 함수의 selector의 타입은 어떻게 될까? 아마 높은 확률로 string일 것이다. 왜냐하면, querySelector 뒤에는 클래스면 ".클래스이름", id면 "#id이름" 이 들어오게 되는데, 어쨌든 간에 id나 클래스의 이름은 문자열로 되어있기 때문이다. 두 번째로 getUnixTimes..