far

1. Query-KeyQuery-Key란?Query-Key는 쿼리를 고유하게 식별하기 위한 키로, 데이터를 캐싱하거나 새로고침할지, 캐시에서 데이터를 사용할지를 결정한다. 보통 배열 형태로, 리소스 이름과 파라미터를 포함하여 사용한다. 예를 들어, ['todos', userId]처럼 설정할 수 있다.Next.js 서버사이드에서의 Query-Key 사용서버에서 Query-Key를 설정해 데이터를 미리 가져오고, React Query가 이를 캐싱해 활용할 수 있다.// app/layout.tsximport { ReactQueryProvider } from './_providers';import './globals.css';export default function RootLayout({ children,}..

Next14 app router로 작성되었으나, React에서도 똑같이 사용 가능하다. 사이트를 이용하다 보면 특정 페이지에서 로그인창으로 가기를 클릭하고 로그인을 하게 된다. 이 때, 로그인 성공시 전에 있었던 페이지로 다시 돌아가게끔 구현되어 있는 경우가 많다. 하지만 로그인 기능이 들어있는 도메인과 로그인 페이지로 이동시키는 기능이 들어있는 도메인이 다른 경우, 이전페이지로 돌아갈 트리거를 공유할 수 있도록 어딘가에 저장해둬야 한다. 나는 여기서 cookie를 사용해 이전 페이지로 돌아갈 트리거를 저장하기로 했다. export const setCookies = (name: string, value: string, days: number, isProduction: boolean) => { let e..

특정 값에 따라서 서로다른 input엘리먼트가 보이는 컴포넌트를 만들던 도중, 한 글자를 입력 할 때 마다 input의 포커싱이 풀리는 현상이 나타났다.대체 왜 그런가 했더니 테스트용으로 외부에 만들어뒀던 Input 컴포넌트가 스코프 내부에 들어있었다.import React, { useState } from 'react';const App = () => { const [inputValue, setInputValue] = useState(''); const InputComponent = () => ( setInputValue(e.target.value)} /> ); return ( input label {/* 이 컴포넌트는 App 컴포넌트가 리렌더링될 때마다..

프로젝트를 하던 도중 로컬 서버에서는 잘 돌아갔는데 production레벨에서 api 통신을 하기만 하면 에러가 발생했다. 처음에는 cors에러인가 싶었는데 그것도 아니었고, 배포시 .env를 잘못 등록했나 싶었는데 그것도 아니었다.이것저것 삽질을 한 결과 Github Action의 빌드창을 확인해봤더니...Cannot get final name for export 'QueryClient' of ./node_modules ......라는 에러가 발생하고 있었다. 이 에러는 React-Query의 QueryClient를 사용중인곳에 'use client'를 붙이지 않아서 생기는 문제인데, 나의 경우 Provider로 사용중인 QueryClient말고 다른곳에 테스트용으로 만들어둔 QueryClient에 '..

이 글은 Next.js 14, App Router를 기준으로 작성되었습니다.Cookie와 도메인쿠키는 기본적으로 생성된 도메인과 서브도메인에서만 사용이 가능합니다. 예를들어 domain.com이라는 도메인에서 domain.com에 대한 쿠키가 생성되는 경우, domain.com과 서브 도메인인 blog.domain.com에서는 사용이 가능하지만 testdomain.com에서는 사용이 불가능합니다. 또한 서브도메인에서 생성된 쿠키는 메인 도메인에서 사용할 수 없습니다. 즉 blog.domain.com에서 생성되는 쿠키는 domain.com에서 사용할 수 없다는 뜻입니다. 그래서 멀티도메인 사용시 domain.com에서 쿠키가 생성되도록 하는게 효율적이라 할 수 있습니다만, 프로젝트 자체가 login.dom..

Styled-compoents를 몇달간 사용하면서 자주 사용하는 기능만 모아봤다. // 기본 구조 const Elem = styled.div` ... 여기에 css입력 `; // 컴포넌트 스타일링 const Elem = styled(Component)` ... 여기에 css입력 `; // Props 받기 ... ... const Elem = styled.div` color: ${props => props.isColor ? '#fff' : '#000'}; `; // Typescript 사용시 const Elem = styled.div` color: ${props => props.isColor ? '#fff' : '#000'}; `; // styled-components의 css라는 기능 사용해 props받..

이제 블로그의 메인화면을 만들어야 하는데, 그 전에 저번에 만든 Signup과 Login의 디자인을 AppLayout으로 감싸줘야 /login, /signup으로 들어갈 때 네비바가 상단에 보인다. return ( Sign-Up ) Footer도 필요하기 때문에 만들어 준다. // components/footer/footer.styles.tsx import styled from "styled-components"; export const FooterContainer = styled.footer` position: absolute; bottom: 0; left: 0; width: 100%; background-color: #f2f2f2; padding: 1rem; display: flex; justify-..

백엔드와 React를 연결하기 위해 데이터를 fetch 시켜야 한다. 만약 백엔드 작업이 되어 있지 않다면 axios는 건너뛰고 더미 데이터 넣어주면 된다. npm i axios npm i react-query react-query를 선택한 이유는 redux가 redux-toolkit으로 오면서 보일러플레이트가 많이 줄었다고는 하나, 전역 상태를 관리하기 때문에 여전히 코드량이 많았다. 그래서 서버 스테이트를 관리하는 react-query를 사용해보고 싶었다. 아직 조금밖에 사용해보지 않았기에 장단점은 잘 모르겠으나, 확실히 코드는 많이 간결해졌다. // configs/config.ts export const backUrl = 'http://localhost:3065'; configs폴더를 만들고 안에 ..

프로젝트중 websocket을 도입해보자는 말이 나와서 Sock.js와 Stomp.js를 사용해 실시간 채팅을 구현해봤다. Sock.js Sock.js는 클라이언트와 서버간의 연결을 유지하며 양방향 통신을 가능하게 해주는 websocket과 비슷한 기능의 Javascript 라이브러리다. 프로젝트에서 Sock.js를 선택한 이유는 두가지가 있다. 첫째로, Sock.js는 크로스 브라우징을 지원하는 API이며, websocket 프로토콜을 지원하지 않는 브라우저의 경우 자동으로 Streaming, Long-Polling 같은 HTTP 기반의 다른 기술로 전환해 연결해준다. 둘째로, SpringBoot를 사용해 웹소켓을 구현할 경우 Sock.js를 사용하는게 일반적이라는 글을 읽기도 했고, Stomp.js를..

과거에 만들었던 개인 프로젝트를 보다 보니까 내가 사용하면서도 UX가 안좋다는 생각이 들 정도로 불필요한 링크 이동이 있었다. 그래서 조금이라도 UX적으로 좋게 만들기 위해 간단한 정보들은 링크 이동 대신 모달창을 사용해 정보를 보여주기로 했다. 여태까지 모달창은 Bootstrap이나 TailwindCSS에서 등에서 제공하는 걸 사용해 왔는데, 바꾸는 김에 내가 만들어보는 것도 나쁘지 않겠다고 생각해 작업을 해보았다. index.tsx // 설명하는데 불필요한 코드는 전부 생략했다. import Project from '../components/Project'; import Aco from '../components/Aco'; export default function Home() { const [mod..