전체 글 썸네일형 리스트형 [React] Vite+React-TS 프로젝트에서 Tailwind CSS 설정 문제 해결하기 vite + react-ts 프로젝트에서 tailwindcss 관련 설정을 다 마쳤는데도, tailwindcss가 먹지 않는 것을 발견했다. Postcss 문제 때문인가 했는데 그것도 아니었고.. 아마도 vite랑 tailwindcss 신버전(4.0)이랑 뭔가 호환이 잘 되지 않는 문제인 것으로 예상해 본다. Tailwind CSS가 4.0 버전으로 업데이트되면서 PostCSS 플러그인 구조가 변경되었고, 이로 인해 기존 설정 방식이 제대로 작동하지 않는 것 같은데.. 스택오버플로우에서 본 대로 따라하니 해결되어서 해결 방법을 공유한다.해결 방법 1. Tailwind CSS의 next 버전 설치> Tailwind CSS의 다음 버전(next)과 Vite 통합 패키지를 설치했다.yarn add tailwi.. 더보기 [Nextjs] Nextjs 프로젝트에 localStorage 적용하기 문제 상황 만들고 있는 프로젝트의 사이드바를 열고 닫게 할 수 있게 만들어놨는데, 닫아 놓으면 새로고침 시 풀려서 불편함이 발생했다. 이럴 때는 클라이언트의 localStorage에 상태를 저장해주면 된다. 아래와 같이 localStorage에 값을 추가하는 코드를 작성하고 실행해보았는데, 적용이 되지 않았다. 'use client'export default function ClientLayout({ children }: { children: React.ReactNode }) { const [isOpen, setIsOpen] = useState(true); useEffect(() => { const stored = localStorage.getItem('sidebarOpen') if (s.. 더보기 [Next.js] NextAuth의 JWT 살펴보기 JWT의 기본 개념JWT (JSON Web Token)는 사용자의 인증 정보를 안전하게 저장하고 전송하기 위한 표준이며,기본적으로 헤더, 페이로드, 서명 3개의 부분으로 구성된다.헤더 (Header): 토큰의 유형과 서명 알고리즘 정보를 담음.페이로드 (Payload): 실제 인증 정보 및 추가적인 데이터를 담음. 예를 들어, 사용자의 ID, 이메일, 로그인 정보 등이 포함됨.서명 (Signature): 헤더와 페이로드가 변조되지 않았음을 보장하는 서명.JWT는 기본적으로 서버와 클라이언트 간의 인증 정보를 안전하게 전달하는 데 사용된다. NextAuth는 이 JWT를 쿠키(next-auth.session-token)에 저장하고, 클라이언트가 요청을 보낼 때 이를 복호화하여 인증 상태를 유지한다. JW.. 더보기 [Prisma] P3014, P1010 Error 해결 방법 schema.prisma 파일을 mySQL에 migration 하기 위해 명령어를 입력했는데, 위 이미지와 같은 에러 메세지가 출력됐다. mySQL 워크벤치도 잘 작동되고 있고, Prisma의 명령어가 다 작동되는데 migration만 안되는 것이 매우 이상했다. P3014 Error 해결 방법1. shadow database 생성 및 추가 실행2. .env 파일에 shadowDatabaseUrl 설정 + schema.prisma 파일에 shadowDatabaseUrl 표기 * shadowDatabaseUrl: Prisma migrate를 실행할 때 사용되는 임시 데이터베이스의 URL P1010 Error 해결 방법- 이거는 권한 문제인 것 같다. Error 발생 원인 나는 도커로 MySQL을.. 더보기 [Git] Git 브랜치 구조 및 병합 부트 캠프에서 프로젝트를 진행하면서, 이론으로 배울 때는 잘 와닿지 않던 Git 브랜치들의 진짜 목적을 알고 나니 이걸 좀 더 체계화해서 정리해보고 싶다는 생각이 들었다.지금 잘 정리해 놓으면 나중에 실무에서도 큰 도움이 될 것 같아 아래에 포스팅해 본다! 트리 구조로 보는 주요 브랜치들 master/main│├─── develop│ ││ ├─── feature/│ │ ├─── feature/auth│ │ ├─── feature/payment│ │ └─── feature/...│ ││ ├─── bugfix/│ │ ├─── bugfix/pagination│ │ └─── bugfix/memory-leak│ ││ ├─── .. 더보기 [React] Re-rendering과 함수 참조 관리 ✏️ Re-rendering(리렌더링)이란?React가 컴포넌트를 다시 실행하여 새로운 결과물을 생성하면, 그것을 지켜보고 있던 Virtual DOM이 기존 컴포넌트와 현재 컴포넌트의 차이점(diff)을 발견하여 실제 DOM의 변경 사항만 효율적으로 업데이트하는 것. ✏️ Re-rendering Trigger (컴포넌트가 리렌더링 되는 조건)1. 컴포넌트의 props가 변경되거나,2. 컴포넌트의 state가 업데이트될 때기본적인 조건은 이 두 가지이지만, 3. context가 변경될 때- Context 값이 변경되면, 해당 Context를 사용하는 모든 컴포넌트가 리렌더링 된다. 4. 부모 컴포넌트가 리렌더링 될 때 자식 컴포넌트가 리렌더링 된다.- 이때 React.memo를 사용하면 불필요한 리렌더링.. 더보기 [JavaScript] String의 이중성 (원시 / 객체 타입 사이) 기본적으로 Javascript에서 String은 원시 타입이지만, heap 영역에 저장된다는 이야기를 들었다.원시 타입이면 Stack 영역에 저장되어야 하는 것 아닌가..? 그때부터 String에 대한 혼란이 가중되었고, 이 부분에 대해 찾아보았다. ✏️ 원시 타입으로서의 String 자바스크립트의 명세상 String(문자열)은 원시 타입이 맞다.원시 타입의 특성상, 불변성(Immutability)을 가지며 값에 의한 전달(Call by Value)이 이루어진다. 내가 알고 있던 기본 정보는,원시 타입은 값으로 저장되기 때문에 Stack 영역에 저장되고, 객체 타입은 변동 가능성 때문에 heap 영역에 저장되어 메모리 주소로 참조하는 것이었는데. 그런데 어떻게 문자열은 원시 타입인데, heap 영역.. 더보기 [TypeScript] String Type 구조 탐구해보기 타입스크립트 강의를 듣다가 String Type은 다른 타입들에 비해 조금 더 세분화되어 있다고 느꼈고,정확히 어떻게 구분되어 있는지 궁금해서 찾아보게 되었다. Typescript의 String Type은 대략 아래와 같이 유추할 수 있다. * 기준 : "포괄적인 타입에서 구체적인 타입으로 가는" 범위string (최상위 타입)├── template literal types / union of string literals (조합을 통한 타입 확장)└── string literal types (최하위 타입) 위 계층 구조에서 string을 최상위로, string literal types를 최하위로 보는 건 일반적인 이해를 돕기 위한 표현으로는 괜찮지만,엄밀히 말해 TypeScript에서는 이러한 계.. 더보기 이전 1 2 3 다음
