개요회사 프로젝트에서 모노레포 구조로 프론트엔드를 관리하며, 여러 서버를 분리해 운영하다 보니 세션 관리에 어려움이 생겼다. 이에 따라 쿠키를 이용한 세션 관리를 선택했지만, 관련 지식이 부족해 도입 과정에서 어려움을 겪었다. 이를 해결하고 좀 더 깊이 있게 이해하기 위해 이번 글을 작성하게 되었다.   쿠키(Cookie)와 세션(Session)을 사용하는 이유HTTP 프로토콜의 특성이자 약점 보완(coonectionless, stateless)Connectionless(비연결 지향)클라이언트가 서버에 요청(Request)을 했을 때, 그 요청에 맞는 응답(Response)을 보낸 후 연결을 끊는 처리 방식Stateless(상태정보유지안함)클라이언트의 상태 정보를 가지지 않는 서버 처리 방식이러한 특성으..

Vue에서 조건부 렌더링할 때 v-if와 v-show를 사용한다.v-ifv-if는 조건(true, false)에 따라 화면 렌더링할 때 사용한다.v-if 기본 문법보입니다.안보입니다.v-if 활용 예시v-else, v-else-if를 사용해서 다중 조건절을 사용할 수 있다.See the Pen v-show by Kyunjihwan (@dogjihwan) on CodePen.v-else, v-else-if 주의 사항if 조건절처럼 v-else, v-else-if는 v-if 바로 뒤에 와야 사용이 가능하다.v-showv-show는 v-if와 같이 조건에 따라 화면 표시할 때 사용한다.차이점으로 v-show는 항상 렌더링 되고 DOM에 유지된다. (css display:block/none으로 전환)안숨김숨김..

Vite란?// gpt왈Vue.js의 창시자 인 에반 유(Evan You)가 개발한 Vite는 Vue.js를 위한 최신 빌드 도구입니다. Vite는 "Very Fast"와 "Dev Server"의 약어로, 프로젝트를 개발하는 동안 매우 빠른 개발 경험을 제공하는 것을 목표로 합니다.Vite는 Vue 3와 함께 사용되는 주요 개발 도구 중 하나로, 빠른 개발 및 빌드 시간, 실시간 모듈 교체 기능 등을 제공합니다. Vite는 기본적으로 ES 모듈을 사용하여 빌드를 하기 때문에, 개발 시간이 단축되고 모듈 간의 의존성을 효율적으로 관리할 수 있습니다.또한 Vite는 기본적으로 브라우저의 네이티브 ES 모듈 지원을 활용하여 개발 서버와 빌드 프로세스를 가속화합니다. 이로 인해 코드 변경 사항이 발생할 때 신속..

Vuex 설치 및 등록Vuex 설치npm install vuex --saveVuex 사용 방법store를 생성 후 export 해준다.// store.jsimport { createStore } from 'vuex'export const store = createStore({})// main.jsimport { createApp } from 'vue'import App from './App.vue'import store from './store/store'createApp(App).use(store).mount('#app')State와 getters 소개state여러 컴포넌트 간에 공유할 데이터 - 상태// Vuedata : { message: 'Hello Vue.js!'}// Vuexstate : { ..

Vuex무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리React의 Flux 패턴에서 기인함Vue.js 중고급 개발자로 성장하기 위한 필수 관문Vuex가 필요한 이유복잡한 애플리케이션에서 컴포넌트의 개수가 많이지면 컴포넌트 간에 데이터 전달이 어려워진다.Vuex로 해결할 수 있는 문제MVC 패턴에서 발생하는 구조적 오류컴포넌트 간 데이터 전달 명시여러 개의 컴포넌트에서 같은 데이터를 업데이트 할 때 동기화 문제Vuex 컨셉State : 컴포넌트 간에 공유하는 데이터 data()View : 데이터를 표시하는 화면 templateAction : 사용자의 입력에 따라 데이터를 변경하는 methodsVuex 구조컴포넌트 → 비동기 로직 → 동기 로직 → 상태

SuspenseNext.js에서 스트리밍을 표현하는 방법을 이해하려면, 서버 사이드 렌더링(SSR)의 한계를 이해하는 것이 중요하다.스트리밍은 서버에서 렌더링된 콘텐츠를 클라이언트에 점진적으로 전송하여 사용자 경험을 향상시키는 기술이다. 페이지의 모든 데이터가 서버로 가져옴서버는 해당 페이지의 HTML을 렌더링당 페이지의 HTML, CSS, JavaScript가 클라이언트로 전송생성된 HTML 및 CSS를 사용하여 비대화형 사용자 인터페이스(non-interactive user interface)가 표시된다.React가 사용자 인터페이스를 상호 작용 가능하게 만듬non-interactive user interface : 사용자와 상호작용할 수 없는 사용자 인터페이스를 의미합니다. 이러한 인터페이스는 사용..

Loadingpage, layout와 같이 Next.js에서 지원해주는 파일명이다.스켈레톤과 스피너와 같은 로딩 표시 부분을 미리 렌더링 한다.모든 컴포넌트에 공통으로 로딩 UI 를 적용하고 싶을 경우, layout 과 동일 하게 app 폴더 내에 loading.js 파일을 생성한다.app/loading.tsx특정 라우터에 특정 로딩 UI 를 출력하고 싶은 경우에는 해당 라우터 폴더에 loading.tsx 파일을 생성한다.app/user/loading.tsxapp/board/[id]/loading.tsxapp/loading.tsx// app/loading.tsxexport default function Loading() { return Loading;} // app/page.tsxexport const..

error.jspage, layout와 같이 Next.js에서 지원해주는 파일명이다.중첩된 라우테에서 예기치 않은 런타임 오류를 처리할 수 있다.파일 시스템 계층 구조를 활용해 세부 사항을 조정해 특정 세그먼트에 맞는 오류 UI를 만든다.나머지 애플리케이션은 작동 상태로 유지하면서 오류를 영향을 받은 세그먼트에만 격리한다.전체 페이지를 다시 로드하지 않고도 오류에서 복구를 시도하는 기능을 추가한다.'use client' // Error 컴포넌트는 Client 컴포넌트로 생성해야 한다. import { useEffect } from 'react' export default function Error({ error, reset,}: { error: Error & { digest?: string } r..

layout페이지간에(routes) 공유가 가능한 UI하위의 page 및 layout 를 자식(children)으로 감싸서 화면을 렌더링 함여러 레이아웃을 만들어 두고, 부모-자식 레이아웃 구조로 중첩하여 적용하는 방식도 가능Root LayoutNext프로젝트를 생성하면 기본적으로 app폴더 안에 layout파일이 생성되는데 이 파일이 루트 레이아웃(Root Layout 파일 삭제 시 자동으로 생성)app/ 디렉토리의 최상위에 있는 layout로, 모든 route경로에 적용 됨// app/layout.tsx (Root Layout)export const metadata = { title: "Next.js", description: "Generated by Next.js",};export default..

루트 정의하기Route 생성app/ 디렉토리 안에 라우팅할 url경로 이름에 맞춰 디렉토리 생성디렉토리명이 url경로가 됨각각의 디렉토리의 page파일은 해당 경로의 페이지의 화면을 의미함└── src/ └── app/ ├── 페이지 이름/(ex)board) │ └── page.tsx ├── layout.tsx └── page.tsxcomponents 디렉토리components 디렉토리명으로 생성 시 라우팅 되지 않음다른 파일에서 해당 컴포넌트 파일을 import해서 사용할 수 있음└── src/ ├── app/ │ └── 페이지 이름/(ex)board) │ └── page.tsx ├── components..