Tailwind CSS Grid 실무 레이아웃 정리: 카드 목록부터 대시보드까지
이 글에서 정리하는 내용 Tailwind CSS Grid를 카드 목록, 대시보드, 사이드바 레이아웃처럼 실제 화면에서 어떻게 선택하고 조합할지 정리합니다. 기준은 Tailwind CSS v4 문법에 두고, 클래스 암기보다 레이아웃을 판단하는 순서에 초점을 맞춥니다. …
더 읽기
hebi_admin
Tailwind border flex 사용법: 레이아웃 기본 클래스 기준
이 글에서 정리하는 내용 Tailwind CSS v4 기준으로 보더 두께, 방향, 색상, 라운딩, flex 배치와 정렬 클래스를 정리합니다. 클래스 이름을 따로 외우기보다 실제 CSS 속성과 연결해서 보는 데 초점을 둡니다. border는 선을 켜는 기본 스위치에…
더 읽기
Tailwind CSS 기본 클래스 사용법: text font bg spacing 익히기
이 글에서 정리하는 내용 Tailwind CSS 기본 클래스는 전부 외워야 하는 목록이 아니라 CSS 속성을 짧게 부르는 규칙에 가깝습니다. Tailwind CSS v4 기준으로 text, font, bg, w, h, p, m 접두사가 타이포그래피, 색상…
더 읽기
Tailwind CSS 실무 로드맵: 기본 클래스부터 반응형·상태·동적 클래스까지
이 글에서 정리하는 내용 Tailwind CSS는 클래스 이름을 많이 외우는 도구처럼 보이지만, 실제로는 화면을 만드는 순서대로 익힐 때 훨씬 편해집니다. 기본 유틸리티, flex와 grid, 반응형, 상태 variant, 다크 모드, 동적 className 문…
더 읽기
Expo Router 사용법: app 폴더와 Stack Tabs 구조 잡기
이 글에서 정리하는 내용 Expo Router를 처음 볼 때 가장 헷갈리는 src/app 폴더 규칙, 파일 이름 표기법, _layout.tsx, Stack, Tabs, 화면 이동, URL 파라미터, 인증 보호 흐름까지 한 번에 정리합니다. 글을 끝까지 읽으면 폴더 구조…
더 읽기
Expo Safe Area 사용법: 화면 여백을 안전하게 잡는 방법
이 글에서 정리하는 내용 Expo에서 safe area를 왜 써야 하는지부터 시작해, SafeAreaProvider를 어디에 두는지, SafeAreaView와 useSafeAreaInsets를 언제 나눠 써야 하는지, 그리고 스크롤 화면·고정 버튼·커스텀 헤더에서 어떻…
더 읽기
Expo Status Bar 사용법: Safe Area와 화면별 설정
이 글에서 정리하는 내용 이 글에서는 expo-status-bar가 무엇을 제어하는지부터 시작해서, 루트 레이아웃에 기본값을 두는 방법, 화면별로 상태바 스타일을 바꾸는 방법와 왜 분리해서 이해해야 하는지까지 한 번에 정리합니다. 읽고 나면 상태바 스타일과 상단 여백 …
더 읽기
Expo React Native Web 사용법: 앱을 웹으로 확장하기
이 글에서 정리하는 내용 react-native-web이 무엇인지, React Native와 React DOM 사이에서 어떤 역할을 하는지, 기본 컴포넌트와 스타일 작성 방식, 웹 전용 분기 방법, Expo와 함께 웹까지 확장하는 흐름을 한 번에 정리합니다. 끝까지 읽…
더 읽기
Expo vector icons 사용법: 탭바와 커스텀 아이콘 적용하기
이 글에서 정리하는 내용 Expo에서 @expo/vector-icons를 어떻게 이해하고 써야 하는지, @expo/vector-icons의 기본 사용법부터 탭 아이콘, 버튼 조합, 폰트 preload, 커스텀 아이콘 확장까지 한 흐름으로 정리합니다. @expo/v…
더 읽기
Expo Location 사용법: 현재 위치와 백그라운드 추적 처리
이 글에서 정리하는 내용 이 글에서는 Expo Location이 무엇인지부터 시작해 현재 위치를 한 번 가져오는 방법, 위치 변화를 실시간으로 구독하는 방법, 그리고 백그라운드 위치 추적과 지오펜싱이 왜 더 복잡한지까지 순서대로 정리합니다. 단순히 API 이름만 나열하…
더 읽기