글이 너무 길어질 것 같아서 나눠서 포스팅한다. 채널과 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 섹션에 뜨게 되지만, 어쨌든.. 회원가입을 한 값이 여기에 추가된다는 게 중요한 게 아닐까? 싶다. 진행을 하기 전에 이전 포스팅에서는 전부 서버 주소가 ..
클론코딩 강의를 들으면서 점점 구조가 복잡해지고, 어려워지고 있음을 몸소 느끼고 있다. 오늘 배운 부분은, 실제 Slack에서 워크스페이스를 API통신을 활용하여 만드는 것이다. 우선 시작하기에 앞서 스타일링은 전부 Slack의 개발자도구에서 그대로 가져온 것이므로, 따로 말할 게 없다는 점을 밝힌다. styled-components를 사용하긴 했지만, 이마저도 결국 뭐 직접 짠 거는 아니니까.. 그냥 그러려니 하면 될 것 같다. 사실 중요하지도 않고. 간단해 보이지만, 이것을 만들기 위해서는 많은 함수가 필요하다. + 버튼을 눌렀을 때 모달을 불러오는 것이라든지, 모달의 우측상단 X 버튼을 눌렀을 때 모달이 꺼지는 것이라든지.. 우선 페이지와 컴포넌트로 나눠서 설명을 해야할 것 같다. 1. 컴포넌트 이..
이 글은 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..
이 글은 인프런의 실전 프로젝트로 배우는 TypeScript 강의를 듣고 정리한 글입니다. 유틸리티 타입은, 이미 정의해 놓은 타입을 변환할 때 사용하기 좋은 타입 문법이다. 유틸리티 타입을 꼭 쓰지 않더라도 기존의 인터페이스, 제네릭 등의 기본 문법으로 충분히 타입을 변환할 수 있지만 유틸리티 타입을 쓰면 훨씬 더 간결한 문법으로 타입을 정의할 수 있다. 1. Partial 파셜 타입은 특정 타입의 부분 집합을 만족하는 타입을 정의할 수 있다. interface Address { email: string; address: string; } type MayHaveEmail = Partial; const me: MayHaveEmail = {}; // 가능 const you: MayHaveEmail = { ..
이 글은 인프런의 TypeScript 입문 - 기초부터 실전까지 강의를 듣고 정리한 글입니다. 타입스크립트의 모듈 시스템에 대해 알아보자, 우선 모듈회란.. export / import 형태로 다른 파일에 있는 타입스크립트 파일을 특정 파일에서 사용할 수 있게 하는 것을 의미한다. 기본 틀 // types.ts export interface Todo { title: string; checked: boolean; } // app.ts import { Todo } from './types'; let item: Todo = { title: '할 일 1', checked: false, }; types.ts에서 인터페이스를 정의한 뒤 이를 export하여 app.ts에서 import해 오면, 타입 지정을 impo..
이 글은 인프런의 TypeScript 입문 - 기초부터 실전까지 강의를 듣고 정리한 글입니다. 타입 단언(Type Assertion) let z; z = 20; z = 'z'; let b = z; // b: any let b = z as string; // b: string 세번째 줄 까지만 봤을 때, 결국 z는 마지막에 문자열 타입으로 인식이 되었을 것이라고 추론할 수 있지만, 실제로 프리뷰를 보면 any 타입으로 되어있다. 그래서 b도 any타입을 반환한다. 이렇게, 명확한 typing이 되지 않는 문제를 해결하기 위해서 맨 마지막 줄의 let b = z as string 으로 z를 string type으로 단언해준 뒤 그것을 b에 부여하였다. 이 결과 b는 문자열 타입을 갖게 된다. 예시를 보자. ..
이 글은 인프런의 TypeScript 입문 - 기초부터 실전까지 강의를 듣고 정리한 글입니다. let x = 3; 이 코드를 보면, x에 대한 타입을 따로 지정하지 않더라도 x는 number type으로 간주가 된다(숫자 형태를 띠고있으니까). 이러한 과정을 타입 추론이라고 한다. 타입 추론은 다음과 같은 상황에서 발생한다: 변수를 선언하거나 초기화할 때 변수, 속성, 인자의 기본 값, 함수의 반환 값 등을 설정할 때 첫 번째 예시 function getB(b = 10) { let c = 'hi'; return b + c; } 첫 번째 줄을 보자. b 자리에 typing 대신에 10이라는 값이 들어가 있다. 이는, b라는 값을 넘기지 않으면 기본적으로 10을 가진다는 뜻이다. 그러니까 default 값이..
이 글은 인프런의 TypeScript 입문 - 기초부터 실전까지 강의를 듣고 정리한 글입니다. 기본적으로 Promise에서 제네릭을 이용하는 것은, 제네릭 타입을 적용하고 그 타입을 돌려받는 것이라고 생각하면 편하다. function fetchItems() { const items = ['a', 'b', 'c']; return new Promise(function(resolve) { resolve(items); }); } 이런 Promise 사용 함수가 있다고 해 보자. 그러면 이 함수는 위와 같이 Promise의 타입을 가진다. 이는, return new Promise의 타입을 알 수 없기 때문이다. 그래서, function fetchItems(): Promise { const items: string..