소소한 지식 저장소

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

현재 진행 중인 동아리 게시물 웹 프로젝트가 어느덧 배포 단계까지 오게되었다. 구글에서 지원하는 GCP와 Docker를 사용해서 배포할 예정이다. 배포 흐름1. 내 인텔리제이 프로젝트에서 프론트엔드와 백엔드 프로젝트에 각각 DockerFile 및 .dockerignore 작성2. 백엔드(./gradlew build -x test), 프론트엔드(npm run build) 로 앱 빌드3. docker build -t 로 docker 이미지 파일로 빌드(Docker 설치 필요)4. 프론트엔드 백엔드 docker 이미지에 각각 GCP 주요용 이름(tag) 붙이기5. docker 이미지를 Artifact Registry로 푸쉬6. 이후에는 VM을 사용해서 배포할지, Cloud Run을 이용해서 할건지 선택7. 배..

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를 추..

세션 기반의 로그인 프로젝트를 만들기 위한 프론트엔드, 백엔드의 구조를 정리해보았다. 1. 프론트엔드 /src ├── api # API 요청 관련 코드 │ ├── authApi.js # 로그인 및 로그아웃 API 요청 │ ├── userApi.js # 사용자 정보 조회 API 요청 │ ├── components # 공통 UI 컴포넌트 │ ├── InputField.js # 입력 필드 컴포넌트 │ ├── context # 전역 상태 관리 │ ├── AuthContext.js # 로그인 상태 관리 │ ├── pages # 주요 페이지 │ ├── LoginPage.js # 로그인 ..

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가 변경되지 않음..