Web
-
WebSocket 채팅 클라이언트 구현기Web/자바스크립트 2021. 8. 20. 18:19
개인적으로 이번 프로젝트를 시작하기 전에 걱정이 이만저만이 아니었다. 웹소켓을 처음 다뤄보기도 했고, stomp.js에 관한 레퍼런스가 생각보다 너무 없었기 때문. 게다가 리액트까지 더해지니 어떤 식으로 구현을 해야할지 기준이랄 게 딱히 없어서 좀 당황스러웠다. 어떻게 짜야 효율적인 코드인지, 이게 성능적으로는 괜찮은 코드인지 뭐 그런. 그래서 그냥 일단은 돌아가게만 구현을 해야겠다 싶었지. 모 개발자분께서도, 웹소켓은 구현하기 나름이라고 하셔서 그냥 그런가보다 했다. 그래도 우리 팀의 백엔드 크루 '포츈'이 채팅 관련 레퍼런스 코드를 찾아줘서 그걸 기반으로 최대한 리액트에 맞게 이리 고치고 저리 고쳐보려고 노력해봤다. 사실 아직까지도 이게 맞는건가 싶긴 하지만, 뭐 어때. 일단은 잘 돌아간다. 💬 채팅..
-
채팅을 위한 WebSocket 사전 공부Web/Network 2021. 8. 19. 19:43
HTTP(HyperText Transfer Protocol) - HTTP는 단방향 통신 - 서버 프로세스는 클라이언트보다 먼저 실행되어 대기하고, 클라이언트의 요청에 항상 응답할 준비를 하고 있다. - 클라이언트의 요청이 선행되어야만 서버의 응답이 뒤따라올 수 있는 방식 📌 HTTP로 채팅을 구현하려면? 구름EDU - 모두를 위한 맞춤형 IT교육 구름EDU는 모두를 위한 맞춤형 IT교육 플랫폼입니다. 개인/학교/기업 및 기관 별 최적화된 IT교육 솔루션을 경험해보세요. 기초부터 실무 프로그래밍 교육, 전국 초중고/대학교 온라인 강의, 기업/ edu.goorm.io 1. Polling 방식 - 클라이언트가 서버에 일정한 주기로 요청을 보내고 응답을 받는 방식 - 가장 기본적인 기법. 클라이언트와 서버 모두..
-
웹팩으로 리액트 개발환경 구축하기Web/Build and Deploy 2021. 8. 18. 16:31
이번에 우아한테크코스에서 진행한 프로젝트의 개발환경을 처음 세팅할 때, 같은 팀 프론트엔드 크루와 함께 기준으로 삼았던 것은 바로 CRA였다. '우리가 CRA를 쓰던 때와 비슷하게, 아무런 불편함 없이 코딩할 수 있을 정도'로 세팅을 하자는 것. 그러면 그냥 CRA를 쓰면 되지, 왜 굳이 처음부터 세팅을 하느냐? CRA를 사용하면 불필요한 기능들까지 한 번에 딸려오기 때문에 가지치기 작업을 해줘야하는데, 그럴바에 차라리 직접 리액트 개발환경을 세팅하면서 공부를 해보자는 것이 공통된 의견이었다. 더불어 CRA를 사용하는 것이 불가능한 조건이었다는 건 비밀. ■ package.json 우선, 당연히 npm init을 통해 package.json을 만드는 것부터 시작된다. npm init 📦 웹팩(Webpac..
-
프론트엔드 웹 로딩 최적화Web/Optimization 2021. 8. 16. 19:38
웹 성능 최적화는 사용자 경험뿐만 아니라, 매출과도 거의 직접적으로 연결이 될 정도로 굉장히 중요하다. 웹 성능 최적화를 위해서 필요한 기본 지식과 함께, 최적화 방법에 관해서도 간단히 알아보도록 하자. 브라우저의 로딩 과정 웹 로딩 최적화를 위해서는, 브라우저의 로딩이 어떤 식으로 이루어지는지에 관해 알고있는 것이 도움이 많이 된다. 브라우저의 로딩은 크게 파싱, 스타일, 레이아웃, 페인트, 합성의 과정을 거친다. 좀 더 자세한 내용은 TOAST UI의 '성능 최적화' 글을 참조하길 바란다. 성능 최적화 애플리케이션 성능 최적화는 앱과 웹에서 모두 중요하다. 최근 웹 애플리케이션은 Ajax 통신, 복잡한 UI 등 많은 기능을 담으면서 크고 무거워졌다. 무거워진 웹은 긴 로딩 시간 함께 사용자 경험 ui..
-
CORS(Cross Origin Resource Sharing)Web/Network 2021. 5. 26. 03:42
도메인이나 서브도메인, 프로토콜, 포트가 다른 곳에 보내는 요청을 'Cross-origin 요청'이라고 한다. Cross-origin 요청을 보내려면 리모트 오리진(주로 서버)에서 전송받은 특별한 header가 필요하다. 이러한 정책을 바로 CORS(Cross Origin Resource Sharing)라고 한다. HTTP 요청은 원래 Cross-origin 요청을 보내는 것이 가능하다. 태그나 태그 등을 사용하면 다양한 출처의 리소스를 불러올 수 있다. ... 의 형태로 데이터를 요청하면 JSONP(JSON with padding)라는 프로토콜을 사용해서 데이터를 가져오게 된다. 태그의 src 속성에는 도메인 제약이 없다는 점을 이용하는 것. 그래서 jQuery에는 이 JSONP를 이용해서 데이터를 가..
-
React로 Snackbar를 만든 과정Web/React 2021. 5. 16. 06:42
스낵바 하나 만드는 데 이렇게 오래 걸릴 줄 몰랐다. 사실 적당히 만족했더라면 진작에 끝날 수 있었지만.. 그 놈의 욕심 때문에.. 상당한 시간을 소모하고 말았다. 내가 원하는 대로 동작하는 스낵바를 만들고 싶었다. 코치님께서 입버릇처럼 말씀하시는 '주화입마'에 빠지지 말라는 말이 바로 이런 경우겠거니. 참고로, 주화입마는 무협지에서 고수들이 욕심을 부려 무리하게 공력을 끌어올리다가 폭주하여 몸을 망치는 것을 말한다. 불필요한 욕심때문에 삼천포로 빠져 시간을 버리지 말라는 맥락이다. 이전 로또 미션때도 굉장히 사소한 애니메이션 효과에 시간을 많이 쏟았었는데 또 같은 실수를 저지른 셈. 물론, 이번 스낵바같은 경우는 레벨1 때부터 꽤 오랫동안 고민을 하기도 했고, 한 번 만들어두면 자주 쓰겠다는 생각때문에..
-
useEffect를 life cycle method 처럼 사용하기Web/React 2021. 5. 13. 03:51
useEffect는 componentDidMount, componentDidUpdate, 그리고 componentWillUnmount가 합쳐진 훅이라고 생각하면 편하다. 세 가지 life cycle method를 하나의 훅으로 사용할 수 있어서 상당히 편리하긴 한데, 각각을 따로 사용하고 싶을 때는 어떻게 해야할까? ■ useEffect를 componentDidMount처럼 사용하기 useEffect의 두 번째 인자로는 dependency array가 들어간다. 즉, 컴포넌트가 re-rendering을 하기 전에, 변경되었는지 확인할 변수들이 들어가는 배열이다. 이 배열에 변수가 들어가면 해당 변수가 변경되었을 때 useEffect가 호출되면서 componentDidUpdate의 역할을 할 수 있게 되지..
-
PropTypes element vs elementTypeWeb/React 2021. 5. 11. 14:45
■ 리액트에 PropTypes가 존재하는 이유 얼마전까지만 해도 타입스크립트가 있는데, 왜 굳이 PropTypes를 또 써줘야하는지 이유를 알지 못했다. 하지만 둘 사이에는 명백한 차이점이 존재한다. 사실, '타입을 체크해준다'라는 기능만 동일하고 아예 다르다. 타입스크립트는 컴파일 타임에 정적으로 타입을 검사하기 때문에, 코드 작성 시에 발생하는 타입 에러를 잡아주는 반면 PropTypes는 동적으로 타입을 검사해주기 때문에 사용자의 동적인 입력에 따른 타입 체크가 가능하다. 외부 API로부터 데이터를 받아오거나 할 때 발생하는 타입 에러같은 것들을 체크할 수도 있다. 즉, 런타임에서 발생하는 타입 에러를 체크할 수 있다는 것. 타입스크립트에 PropTypes를 자동으로 지정해주는 기능도 있다고 함. ..