Develop43 메시징 애플리케이션의 시스템 디자인에 관한 글을 읽고 정리 회사 프로젝트에서 기획부터 처음에 참여한 첫 프로젝트는 웹소켓을 이용한 실시간성이 보장되어야 하는 프로젝트 였습니다.백엔드에서 종종 실시간에 대한 부분은 시스템 구조상 엄청난 부분인데, 간만에 미디엄의 블로그에서 시스템디자인을 전문적으로 여러 건 다룬 글을 발견해서 기록합니다. (글 링크는 하단부 레퍼런스 링크 참고)이 글은 전반적으로 페이스북 메신저, 디스코드, 왓츠앱과 같은 실시간 메시징 애플리케이션의 시스템 설계를 설명하고 있습니다.low-level 까지 완전히 동일하지는 않겠지만, 지난 개발경험동안 생각했던 구조들과 크게 다르지 않았고 이 구조들이 여러 곳에서 많이 사용된다고 느꼈습니다. 목차 전제조건 및 요구사항 1:1 채팅, 그룹 채팅, 채팅 기록 저장, 여러 기기 지원, 실시간 상태.. 2024. 11. 8. Vercel 404 오류 해결하기 - 간단한 Rewrite 설정 Vercel에서 Next.js 프로젝트를 배포하여 사용 중 입니다. blog나 tags와 같이 미리 정의된 경로 뒤에 예상치 못한 경로가 붙는 경우는 Next.js에서 적절히 커스텀 404 페이지 처리를 해두었습니다. 정확한 원인을 알 수 없으나, 브라우저단에서 다국어 지원 설정에서 특정 언어 경로(/en)가 자동으로 붙는 현상이 생겼습니다. 루트 URL을 기준으로 잘못진입하는 케이스는 생각을 못했었습니다. 때문에 Vercel의 404 오류가 발생했습니다. 목차 해결 방법 Nextjs 프로젝트 Root 에 vercel.json 파일을 생성합니다. vercel.json 파일에 아래 코드를 넣고 저장 및 code push(git)-배포 를 진행합니다. { "rewrites": [{ "source": ".. 2024. 10. 8. Nextjs에서 tag cloud 사용하기 Tag Cloud는 tag들을 마치 구름처럼 뭉게뭉게(?) 표현해주는 라이브러리 입니다.기존에 Tag 페이지가 나쁘진 않았지만, 뭔가 태그가 많아질수록 위아래로 길어지는 느낌이 마음에 들지 않아서 변경하게 되었습니다.Nextjs에서 tag-cloud 라이브러리를 적용한 과정을 기록합니다. 환경은 다음과 같습니다. macOS 15.0(어제업글완.)nextjs 14.2.3node v18.20.4npm 10.7.0 (이미지의 윗 부분이 tag-cloud 를 적용한 부분, 아래 쪽이 기존에 태그 부분 입니다.) 목차 라이브러리 설치 먼저, react-tag-cloud 라이브러리를 설치합니다.npm install react-tag-cloud 이후, 에 무슨 에러가 뜨는 듯하면서 npm audit.. 2024. 9. 21. Nextjs<Image />에서 remotePatterns로 외부 이미지 사용하기 외부(사이트)에서 이미지를 받아오기 위해 next/image를 이용해 이미지를 가져오는 과정에서 에러가 났습니다.Nextjs 버전은 14.2.3 이고 이를 해결하는 과정을 간단히 기록합니다. 목차 next/image와 이미지 최적화 Next.js는 이미지 최적화를 자동으로 처리하는 컴포넌트를 제공합니다.이는 next/image 의 컴포넌트이며 기본적으로 Next.js의 내장 이미지 최적화 서비스를 사용하여 로컬 이미지와 호환되도록 설계되었습니다.그러나 외부 도메인에서 이미지를 로드할 때는 다음과 같은 설정이 필요합니다. Next.config.js 적용방법 Next.js는 보안과 성능을 고려하여 허용된 도메인 목록을 next.config.js 파일에 설정하도록 요구합니다.프로젝트 루트de.. 2024. 9. 18. 이전 1 2 3 4 5 6 ··· 11 다음
