GameCord 개요 기간: 2023.09 ~ 진행중 개발자: 1인 Github: [Github 링크] 배포: [배포링크] 기술 스택 Frontend: NextJs v14, Tailwindcss(shadcn-ui), React-Query, Clerk Backend: PostgreSQL(prisma), Redis(upstash) Additional Libraries: uploadthing, Zustand, Pusher 프로젝트 설명 GameCord는 게임에 대한 평가와 리뷰를 공유하며, 모더들을 위한 커뮤니티 기능까지 갖춘 플랫폼입니다. 주요 성과 및 기능 성능 최적화 NextJs v14의 서버 컴포넌트를 활용하여 초기 로딩시 JS 번들 크기를 최소화하고, 병렬적인 데이터 fetch를 통해 로딩 속도 향상..
GameAuction 개요 기간: 2023.05 ~ 진행중 개발자: 김영훈 (1인 개발) Github: GameAuction Repository 배포 상태: 준비 중 기술 스택 프론트엔드: React, TailwindCSS, React-Query, RTK (Redux Toolkit) 백엔드: NodeJs, 마이크로서비스 아키텍처, Redis, RabbitMQ DevOps: Jenkins, Elasticsearch, Kibana, Docker, Kubernetes 프로젝트 설명 GameAuction은 게임 거래를 위한 온라인 플랫폼입니다. 이 프로젝트는 사용자가 간편하고 효율적으로 게임을 사고팔 수 있는 환경을 제공하는 것을 목표로 합니다. 주요 성과 및 기능 사용자 인터페이스 개선 React와 Tailw..
1. 마이크로서비스에서 API gateway, Load Balancer의 역할 마이크로서비스 아키텍처는 애플리케이션을 각 비즈니스 기능별로 독립적으로 개발, 배포 및 확장할 수 있는 결합된 서비스로 나누는 방식의 아키텍처입니다. 또한, 각 서비스는 일반적으로 단일 비즈니스 기능을 구현하고 통신을 위해 간단한 API를 사용합니다. 이러한 마이크로서비스는 각 기능에 따라 서비스가 존재하고, 클라이언트는 적절하게 해당 서비스에 요청을 보내야합니다. 이때 클라이언트가 직접 각 서비스에 적절하게 요청을 보내는 것이 아닌, 그 기능을 처리하는 "어떤 곳"으로 요청을 보내고, 그곳에서 각 서비스로 요청을 분산시켜줍니다. 여기서 말하는 "어떤 곳"이 API gateway, Load Balancer 입니다. 2. Loa..
기획서 1. 프로젝트 개요 프로젝트명: ChatLink 개발 기간: 2024년 2월 ~ 프로젝트 인원: 1인 프로젝트 상세 카카오톡 그룹톡의 친밀함과 트위터의 공개적인 소통 방식을 결합하여, 사용자가 소규모 그룹에서 의미 있는 대화를 나눌 수 있는 새로운 형태의 소통 플랫폼을 제공하는 것이 목적 사용자는 같은 관심사나 목표를 가진 사람들과 개인화된 채팅방에서 특정 주제에 대해 토론하거나 정보를 공유하고 경험을 나눌 수 있음 2. 주요 기능 개인화된 채팅방 유저는 특정 주제나 관심사가 비슷한 인원과 함께 소규모 그룹을 생성하고 관리할 수 있습니다. 공개 커뮤니티 그룹과는 다르게 모든 유저가 참여할 수 있는 커뮤니티가 운영됩니다. 일정 매칭 소규모 그룹 내에서 약속을 잡는 것을 도와줍니다. 3. 사용 기술 ..
[React 문서 링크] 2024년 2월 15일에 React 팀에서 올린 2024년 5월에 React Conf가 있다는 글 입니다. 여기에는 React의 변경 내용을 예고하고있습니다. 주요 변경 내용 1. 리액트 컴파일러 선요약: 기존에 useCallback, useMemo, memo 등과 같은 메모제이션 기능등이 기본적으로 적용 리액트 컴파일러는 자바스크립트와 리액트의 규칙을 모델링하여 안전하게 코드를 컴파일합니다. 이는 컴포넌트가 동일한 입력에 대해 동일한 값을 반환해야 하며, props나 상태 값을 변경해서는 안 된다는 리액트의 규칙을 포함합니다. 2. Actions 선요약: 클라이언트와 서버 간 데이터 전송을 위해 Actions 기능이 도입 Search Actions는 과 같은 DOM 요소에 함수..
저번글 [NextJs] NextJs 시작하기 (NextJs란?, NextJs 핵심기능) NextJs를 사용하는 이유로는 여러 가지가 존재할 수 있습니다. 예를 들어 서버사이드 렌더링 로직을 사용하고 싶을 수 있고, 하나의 프레임워크로 풀스택 애플리케이션을 구축하고 싶을 수도 있 joseph0926.tistory.com - 문제 저번글에도 언급했지만, NextJs는 정적 사이트에 React(동적)를 사용할 수 있게 해주는 프레임워크입니다. 아래 사진은 제 웹 프로젝트 초기 빌드 결과입니다 404 페이지를 제외하고는 모든 페이지가 동적 렌더링되고 있는것을 확인 할 수 있습니다. 이게 꼭 나쁘다고는 할 수 없지만, 개인적으로는 이럴꺼면 Next를 사용할 이유가 없다고 생각합니다. 따라서 아래 과정으로 제 프로..
NextJs를 사용하는 이유로는 여러 가지가 존재할 수 있습니다. 예를 들어 서버사이드 렌더링 로직을 사용하고 싶을 수 있고, 하나의 프레임워크로 풀스택 애플리케이션을 구축하고 싶을 수도 있습니다. 이러한 이유도 존재하겠지만, 근본적으로 Next는 정적 사이트에 React(동적)를 사용할 수 있게 해주는 프레임워크입니다. 이를 염두하고 NextJs에 대해서 알아보려합니다. 1. 파일 기반 라우팅 NextJs는 기본적으로 파일 기반 라우팅을 채택하여 사용하고 있습니다. 즉, React의 react-router처럼 코드를 통해 페이지의 라우터를 정의하는 것이 아닌, 폴더 및 파일을 통해 라우터가 정의됩니다. 여기에는 몇가지 규칙이 존재합니다. app 폴더내의 page 파일은 매우 특별한 파일이며, 해당 파일..
문제 NextJs ^13을 사용중이지만, 첫 페이지에서 서버로부터 데이터를 많이 불러오고 있었지만, 그거에 대한 적절한 조치가 없어 초기 로딩이 매우 느렸음 // layout.tsx const MainLayout = async ({ children }: { children: React.ReactNode }) => { const profile = await getCurrentUser(); const games = await getGames(); const servers = await getServers(); return ( {children} ); }; // page.tsx const MainPage = async () => { const { posts } = await getPosts({}); const..
