전체 글 썸네일형 리스트형 Margin Collapse Margin Collapse (마진 상쇄)란?- 두 요소의 마진이 만날 때, 둘 다 적용되는 게 아니라 더 큰 하나만 적용되는 현상. 예시첫 번째 박스두 번째 박스.box1 { margin-bottom: 30px;}.box2 { margin-top: 20px;} box1의 아래 마진에 30px을 적용하고, box2의 위 마진에 20px을 적용하면30과 20을 더해 총 50px의 간격이 적용될 것 같지만, 실제로는 30px의 간격만 생긴다. 왜 이런 일이 발생할까?- 브라우저가 "의도치 않은 과도한 간격"을 방지하기 위해 설계되었으며, A와 B 둘 중에 더 필요한 것만 적용하는 방식이다. 발생 조건은 무엇일까?1. 세로 방향에서만 (위아래만)2. Block 요소끼리만3. 인접한 요소들 .. 더보기 [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 영역.. 더보기 이전 1 2 3 다음
