소소한 지식 저장소

📂 1. 프로젝트 폴더 구조프로젝트는 관심사 분리(Separation of Concerns) 원칙에 따라 다음과 같이 구성되어 있습니다.app/├── _layout.tsx # 전역 레이아웃 (ClerkProvider 설정)├── (auth)/ # 인증 관련 그룹│ ├── _layout.tsx # 인증 화면 Stack 레이아웃│ └── sign-in.tsx # 구글 OAuth 로그인 화면└── (tabs)/ # 메인 앱 기능 그룹 (로그인 필수) ├── _layout.tsx # 인증 체크 Guard + 탭 네비게이션 ├── index.tsx # 홈 화면 (백엔드 등록 로직 ..

1. param 문법URL 경로에서 동적으로 값을 가져오는 방법UseProfile.jsimport { useParams } from "react-router-dom";const UserProfile = () => { let { username } = useParams(); // URL에서 username 추출 return 👤 {username}님의 프로필 페이지;};export default UserProfile; "react-router-dom" 의 useParams 를 import 해서 사용 가능하다. /user/alice 와 같은 url 주소에서 내가 원하는 값을 추출하기 위해서 사용한다. /user/{username} 의 경우, username을 추출하기 위해 사용어떤 parameter를 추..

State 문법state는 React에서 컴포넌트의 상태를 관리하는 데 사용되는 개념으로, 특정 값이 변경될 때 자동으로 UI가 다시 렌더링되도록 하는 역할을 한다. 일반 변수를 사용할 경우에는 UI가 state 값이 바뀔 때마다 렌더링하지 않아, 최신 상태를 UI에 반영할 수 없다. state를 사용하지 않은 경우 (비효율적인 방법)let count = 0;function App() { function increase() { count += 1; console.log(count); // 값은 증가하지만 UI는 업데이트되지 않음 } return ( 현재 카운트: {count} +1 증가 );}  위 코드에서는 count 값이 증가해도 UI가 변경되지 않음..