전체 글

보호되어 있는 글입니다.

최근 스터디를 하면서 React Portal이라는 개념을 처음 알게 되었다. 평소에 z-index를 아무리 높게 줘도 모달이나 툴팁이 의도한 대로 안 보이는 경우가 종종 있었는데 이게 Portal로 깔끔하게 해결된다는 걸 배웠다. 그래서 이참에 왜 z-index가 안 먹히는지, Portal이 어떻게 그 문제를 해결하는지 정리해 봤다.z-index가 안 먹히는 진짜 이유z-index를 아무리 높게 줘도 원하는 대로 안 되는 상황을 겪어본 적이 있다. 모달이 다른 요소 뒤에 숨거나, 툴팁이 카드 밖으로 나가지 못하고 잘려버리는 경우다.원인은 stacking context(쌓임 맥락) 때문이다. z-index는 같은 stacking context 안에서만 비교된다. 문제는 부모 요소가 아래 속성 중 하나라도 ..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

SQL과 NoSQL이란?SQL (관계형 데이터베이스)데이터를 표(테이블) 형태로 저장저장 전에 틀(스키마)을 미리 정해야 함데이터 간의 관계를 표현하는 데 강함대표 DB: MySQL, PostgreSQL, OracleNoSQL (비관계형 데이터베이스)표 형식 없이 자유로운 구조로 저장틀을 미리 안 정해도 됨 (유연함)대량의 데이터를 빠르게 처리하는 데 강함대표 DB: MongoDB, Redis, Cassandra SQLNoSQL데이터 형태표 (행/열)문서, 키-값 등스키마고정 (미리 설계)유연 (자유롭게 변경)확장서버 업그레이드서버 추가트랜잭션강력 (ACID)상대적으로 약함적합한 데이터정형 데이터 비정형 데이터 데이터 저장 방식 예시SQL 표 형태로 저장, 모든 행이 같은 컬럼을 가져야 한다.id이름..

Next.js는 서버에서 HTML을 미리 생성해 초기 로딩과 SEO 문제를 해결한다. 그런데 실제 프로젝트에서는 어떻게 사용할까?Next.js App Router는 렌더링, 데이터 패칭, API 작성, SEO 설정까지 하나의 구조 안에서 처리할 수 있도록 설계되어 있다.이번 글에서는 App Router를 기준으로 자주 사용하는 기능을 정리해보려고 한다.App Router의 특징 App Router에서는 서버 컴포넌트(Server Component)가 기본값이다.React에서는 보통 브라우저에서 데이터를 가져오고 화면을 만들었다. 반면, App Router는 필요한 HTML을 서버에서 먼저 생성한다.그리고 버튼 클릭, 입력 처리처럼 상호작용이 필요한 부분만 클라이언트 컴포넌트(Client Componen..

보호되어 있는 글입니다.

React를 처음 배우면 보통 이런 구조를 보게 된다. 브라우저가 처음 받는 HTML에는 실제 화면 내용이 거의 없다. 대신 브라우저가 JavaScript를 다운로드하고 실행한 뒤에야 React가 화면을 만들어낸다. 이런 방식을 CSR(Client Side Rendering)이라고 한다.그런데 왜 React는 굳이 이런 구조를 선택했을까?React SPA가 등장한 이유기존 웹사이트는 보통 MPA(Multi Page Application) 방식으로 동작했다. 그러나 페이지를 이동할 때마다 아래와 같은 문제가 발생했다.새로운 HTML 요청전체 페이지 새로고침화면 깜빡임상태 초기화React는 이런 불편함을 해결하기 위해 등장했다. 브라우저 안에서 JavaScript로 화면을 만들고 필요한 부분만 다시 렌더링..