Development

📘 커피/티 정기 구독 쇼핑몰 ERD 설계 (표 기반 정리) 🧑‍💼 users (회원)필드명 타입 설명 idPK사용자 고유 IDemailVARCHAR이메일passwordVARCHAR비밀번호 해시nameVARCHAR이름addressTEXT배송 주소created_atTIMESTAMP가입일 ☕ products (원두/티 상품) 필드명 타입 설명idPK상품 IDn..

1. 프로젝트 개요목표:사용자의 커피/티 취향 및 소비 패턴에 맞춰 개인화된 원두 구독 서비스를 제공하는 지능형 쇼핑몰 플랫폼 개발주요 기능:사용자 맞춤형 정기 구독 상품 추천 (맛, 향, 산미 기반 선호도 분석)배송 주기 설정 및 자동 결제 기능마이페이지 구독 관리 (일시 정지, 변경, 취소)후기 기반 상품 추천 알고리즘관리자 상품/구독 관리 기능향후 추천 알고리즘/기계학습 기반 최적화 기능 연동2. 구축 전략2-1. 정기 구독 중심 설계구독은 단순 구매와 달리 정기 반복성과 사용자 커스터마이징 요소를 강조사용자 선호도 설문 기반으로 추천 초기화 후, 리뷰/구매 이력을 통한 지속적 개인화2-2. 개인화 추천 기능초기: 조건 기반 추천 (산미/바디감/카페인 유무 등 필터)확장: 유저 피드백 + 행동 데이..

아래는 개인프로젝트로 사용할 프로젝트를 기획하기 위해 작성한 내용입니다. 🥇 기획서 ① – 기억하는 AI 친구 (Persistent Memory Chatbot)1. 프로젝트 개요 목표사용자와 지속적인 관계를 형성하며, 이전 대화 내용을 기억하고 그에 맞는 응답을 제공하는 지속형 감성 대화 AI 개발 주요 기능사용자 정보, 감정 상태, 관심사 등을 기억하고 자연스럽게 반영자유로운 일상 대화와 감정 공감관계 기반의 대화 흐름 (예: “지난번에 피곤하다고 했었지? 좀 나아졌어?”)캐릭터 말투/성격 커스터마이징 기능 2. 구축 전략 2-1. LLM 기반 설계OpenAI GPT API 또는 오픈소스 LLM(Mistral, LLaMA 등) 활용사용자별 프롬프트 설정 또는 컨텍스트 리트리버 기반 기억 삽입감성 필터..

Using React Query install react-query먼저 react-query를 설치하기 위해서 아래 명령어를 터미널에 입력해야 합니다.npm install @tanstack/react-query Create queryClient & QueryClientProvider QueryClient 생성자로 쿼리와 캐시를 관리하는 Query Client를 생성하고  컴포넌트를 통해 생성한 Query Client를 하위 컴포넌트들이 접근할 수 있도록 최상위 컴포넌트로 감싸주어야 합니다.모든 하위 컴포넌트들은 Query Client가 갖고 있는 캐시와 모든 기본 옵션을 사용할 수 있게 됩니다.참고로 은 React의 Context API를 사용하여 생성된 queryClient를 제공합니다.import {..

Client State vs Server State Client State란 클라이언트가 자체적으로 생성한 상태로 사용자의 input 값이나 UI 변경을 담당하는 부분으로 볼 수 있습니다. 예를 들어, 모달창을 열고 닫는 상태나 사용자가 입력한 값 같은 것들을 의미합니다.즉, 서버에서 일어나는 일과는 아무 관련이 없는 상태들을 의미합니다. 반면 Server State란 클라이언트에 표시하는 데 필요한 서버 데이터를 의미합니다. 예를 들어, DB에 존재하는 데이터들을 의미합니다. React Query는 React 애플리케이션에서 서버 응답에 대한 상태인 fetch, caching, update와 같은 동작을 쉽게 다룰 수 있도록 하며, Client State와 Server State를 명확하게 분리하여 관..

Next.js는 SSR(Server Side Rendering)을 쉽게 구현할 수 있는 개발 환경을 제공하는 React의 프레임워크이다.  NextJS가 등장한 이유는 이전 브라우저의 동작방식을 보면 알수있다. 과거의 대부분 웹사이트들은 SSR과 MPA(Multi Page Application) 방식으로 동작해왔었다  하지만  페이지 이동 시에 깜빡거리는 현상과 같은 문제들로 인해 사용자 경험이 좋지 못했고 스마트폰의 시대가 도래하면서 앱과 같은 사용성 측면에서 수요가 커져갔다. 이런 시기에 AJAX와 jQuery가 등장했고 커뮤니티에서도 많이 사용되면서 클라이언트에서 비동기적으로 JSON 형태의 데이터만을 서버에 요청하고 받아와서 사용자에게 데이터와 함께 웹 페이지를 보여주는 방식이 대세가 되었다. 하..

Next 13 이후에 바뀐 점app router / pages router 두 가지로 구성되어 있다.app router 도입 이유pages router의 구조상 기존 문제를 개선할 수 없었기에 새로 도입디렉토리 기능공통 레이아웃 기능페이지별 권한 체크 (어드민/로그인 유저 등) → app router 미들 웨어로 가능react 18 버전 사용 → 서버 컴포넌트 적극 활용 서버 컴포넌트란?next 서버에서 리액트를 미리 렌더링해서 프론트 혹은 브라우저, 클라언트로 데이터를 보내줄 때 완성된 HTML을 미리 보내주는 것 장점 HTML 로딩 시간, JS 용량 감소단점 Next 서버 자체의 부담 증가 → 이에 따라 ‘캐시’ 적극 활용 Nextjs란?React 위에서 돌아가는 프레임워크React는 라이브러리로써 ..

ReactNative를 시작하기에 앞서 환경설정을 진행해야 합니다. MACOS를 기준으로 설명을 진행하려고 합니다.  1. mac terminal 실행2. "brew install node" :  node 설치3. "brew install watchman" : watchman 설치 4.  https://apps.apple.com/us/app/xcode/id497799835?mt=12 다음의 링크에서 xcode를 설치5. https://cocoapods.org/ 해당 경로로 접속후 "sudo gem install cocoapods" 를 터미널에 입력하여 설치

시맨틱 웹(Semantic Web)이 뭔가요? 시멘틱 웹에 대해서 알기 이전에 시맨틱 웹이 등장한 배경에 대해 이해하면 좋습니다. 인터넷이 등장하고 인터넷이 활성화 되기 시작하면서 웹의 사용이 폭발적으로 늘어나게 되었습니다. 그에 따라 웹상에 축정된 정보가 지나치게 많아짐에 따라 여러 문제에 봉착하게 되었습니다. 웹 기술은 축적된 방대한 데이터에 대하여 키워드(Keyword)에 의한 정보접근만을 허용하고 있어, 정보 검색 시 무수히 많은 불필요한 정보가 처리되어 정보의 홍수를 가중시켰습니다. 또한 검색 시 컴퓨터가 필요한 정보를 추출, 해석, 가공 할수 있는 방법이 없어, 모든 정보를 사용자가 직접 개입해서 처리해야하는 문제가 생겼습니다. 위와 같은 문제를 해결하기 위해 웹 기술의 비전으로 시맨틱 웹(S..

서버과부화란? 서버 과부화 (Server Overload)는 서버가 처리할 수 있는 트래픽 또는 부하보다 더 많은 요청이 들어오는 상황을 가리킵니다. 이러한 상황은 서버의 성능 저하, 응답 지연, 서비스 중단 또는 서버 다운의 원인이 될 수 있으며, 이로 인해 사용자 경험에 부정적인 영향을 미칠 수 있습니다. 대규모 트래픽으로 인한 서버 과부하를 해결하기 위한 방법은 다음과 같습니다: 1. 부하 분산 (Load Balancing): 부하 분산은 서버 과부하를 완화하는 핵심적인 방법 중 하나입니다. 로드 밸런서를 사용하여 트래픽을 여러 서버로 분산시키고 각 서버에 동등하게 분배합니다. 이를 통해 각 서버에 가해지는 부하를 분산시키고 서버 응답 시간을 최적화할 수 있습니다. 2. 자동 확장 (Auto Sca..

L2 스위치 (Layer 2 Switch): 역할: L2 스위치는 데이터 링크 계층에서 동작하며, 주로 이더넷 프레임을 스위칭하여 로컬 네트워크 내에서 데이터를 전달하는 역할을 합니다. 이더넷 스위치라고도 불립니다. MAC 주소 기반 스위칭: L2 스위치는 MAC 주소를 기반으로 프레임을 전달합니다. 스위치가 각 포트에 연결된 디바이스의 MAC 주소를 학습하고, 이 정보를 사용하여 프레임을 해당 디바이스로 전달합니다. 스위칭 테이블: L2 스위치는 스위칭 테이블을 유지하여 MAC 주소와 해당 포트를 매핑합니다. 이를 통해 프레임이 목적지로 직접 전달되므로 네트워크 트래픽을 효율적으로 관리합니다. 로컬 영역 네트워크: L2 스위치는 주로 로컬 네트워크 내에서 사용되며, LAN에서 서로 다른 디바이스 간의 ..

인터넷 계층(Internet Layer)에서 네트워크를 이루는 장치 중 가장 중요한 역할을 하는 것 중 하나는 라우터(Router)입니다. 라우터는 데이터 패킷을 받아서 최적의 경로를 선택하여 목적지로 전달하는 장치로, 인터넷과 다양한 네트워크 간의 연결을 관리하며 데이터 흐름을 제어합니다. 라우터의 주요 특징과 역할: 패킷 전달 및 라우팅: 라우터는 패킷(데이터 단위)을 받아서 목적지 IP 주소를 기반으로 최적의 경로를 선택하고 패킷을 전달합니다. 이로써 데이터는 출발지에서 목적지까지 안정적으로 전달됩니다. 다중 네트워크 연결: 라우터는 여러 네트워크 간의 연결을 관리하며, 다양한 종류의 네트워크를 연결하는 역할을 합니다. 예를 들어, 로컬 네트워크(LAN)와 외부 인터넷 간의 연결을 제공합니다. 패킷..