본문 바로가기

분류 전체보기22

실시간 웹 통신(Polling, Long Polling, WebSocket, SSE) 들어가며 최근, 저희 회사에서는 새로운 채팅 서비스 개발에 착수했습니다. 이 과정은 기존에 존재하던 백엔드의 웹소켓 기반 레거시 코드를 재사용하려는 초기 시도에서 시작되었습니다. 하지만 프로젝트 진행 중, 몇 가지 도전과제를 마주하게 되었고, 이는 저희 팀이 아예 제로베이스에서 시작하는 결정을 내리는 계기가 되었습니다. 이러한 전환점에서, 실시간 웹 통신 방법에 대해 재고찰하게 되었고, 최종적으로 서버-전송 이벤트(Server-Sent Events, SSE)를 채택하기로 결정했습니다. 그리고 공부하는김에 익숙한 4가지 실시간 웹 통신에대해 포스팅 하려고 합니다. Polling 폴링은 실시간 웹 통신에서 가장 기본적인 방법 중 하나로, 클라이언트가 주기적으로 서버에 HTTP 요청을 보내어 새로운 정보가 있.. 2024. 1. 13.
[SEO] 검색엔진최적화란? 들어가며 최근 SEO(검색엔진최적화) 관련 이슈를 처리하면서, 한 페이지 내에서 queryString을 사용하여 페이지를 분리하는 작업을 진행했습니다. 이는 SEO 작업에 있어 중요한 부분이었습니다. 사실, 면접 준비를 제외하고는 SEO에 대해 깊이 있게 접해본 적이 거의 없었습니다. 실제로, 저는 Next.js를 사용하고 있음에도 불구하고, SEO에 관한 실질적인 지식이 부족하다는 것을 깨닫게 되었습니다. 이러한 인식을 바탕으로, 조금이라도 제대로 된 지식을 공부하고 싶어서 이 포스팅을 작성하게 되었습니다. 1. 검색엔진최적화(SEO)란? 대부분의 사람들은 검색 결과의 첫 번째 페이지를 넘어가지 않고, 특히 상위에 나타나는 몇 개의 결과에 주목합니다. 이는 검색 엔진에서 상위에 노출되지 않는 콘텐츠나 .. 2024. 1. 8.
[MFA] 마이크로프론트엔드란? 들어가며 현재 실무에서 모노레포 방식으로 웹 프론트엔드 개발중인 쿰척 개발자입니다. 현재 프론트엔드 개발자로 전향한지 1년5개월 정도 되었는데 모노레포란? 그리고 마이크로프론트엔드란? 아직 정확하게 공부한적이 없어 이렇게 포스팅 하게 되었습니다. 이번글은 마이크로프론트엔드에 대해서 포스팅을 하겠습니다. 이 개념은 처음에는 다소 낯설게 느껴졌지만, 점차 그 가능성과 유연성에 매료되기 시작했고, 마이크로 프론트엔드는 각각의 기능이 독립적으로 작동하면서도 하나의 큰 애플리케이션을 형성하는 현대적인 개발 방식입니다. 이 글을 통해, 마이크로 프론트엔드의 특징, 장단점 등을 살펴보려고 합니다. 1. 특징 마이크로 프론트엔드는 대규모 웹 애플리케이션을 작은, 독립적인 부분으로 나누는 아키텍쳐 스타일입니다. 이는 각.. 2024. 1. 4.
[React] useMemo, useCallback 사용법 들어가며 이전 React.memo 사용법 글에서 리렌더링하는 대표적인 조건으로 props가 변경되었을때 react.memo를 사용는 방법을 살펴 보았다. 그러나 React 애플리케이션에서 성능 최적화를 위해 고려해야 할 요소는 이것만이 아니다. 이번 글에서는 React의 또 다른 두 가지 중요한 도구인 useMemo와 useCallback에 대해 알아보고 언제, 왜 사용하고 어떻게 성능향상에 기여할 수 있는지 알아보려고 한다. 1. useMemo useMemo 공식문서를 확인해 보자. "useMemo is a React Hook that lets you cache the result of a calculation between re-renders." useMemo는 리렌더링 사이에 계산 결과를 캐시할 수.. 2024. 1. 1.

티스토리툴바