개발 1주차 - 로그인 뿌수기 👊

YJ·2025년 7월 15일

개발에 들어가기 전 여러가지 규칙을 정했고, 간략하게 지금까지 사용했던 규칙들만 작성해보려고 한다.

브랜치 전략

main, dev, feature/ 브랜치를 생성하여 각 기능별로 세세하게 브랜치를 나눠서 작업하기로 결정했다.

main ← 배포용 (최종 완성본)
└─ dev ← 개발 통합 브랜치 (여기서 작업 브랜치 파생됨)
├─ feature/login
└─ feature/signup
.
.
.

우선 현재 깃허브에 세팅한 브랜치는 아래와 같이 구성되어있다. 차차 추가될 예정!

폴더 구조

우선 큼지막한 프론트 폴더 구조는 아래와 같이 정했다.

가장 먼저 로그인과 회원가입을 진행하기로 결정했고, 로그인을 담당하게 되어 우선 조그만 컴포넌트들로 쪼개서 진행하였다.

✏️ 로그인 화면 진행 과정

1. 로그인 폼 구현

아래와 같이 LoginForm.jsx 파일과 Login.jsx 파일을 생성하여 진행하였다.

src/
├── assets/           
├── components/
│   └── auth/
│       └── LoginForm.jsx        ← 로그인 input + 버튼
├── pages/
│   └── Login/
│       └── Login.jsx         ← 전체 레이아웃

또한 처음으로 기능 추가 커밋을 진행했다.

커밋 메시지는 아래의 블로그를 참고해서 작성!
https://duektmf34.tistory.com/206

2. 상단 로고 영역

LoginLogo.jsx와 Koundarytext.jsx, 로고 이미지 등을 폴더에 추가해서 작업하였다.

src/
├── assets/           ← 이미지, 폰트 등 정적인 리소스
│   └── logo.jpg
│   └── Koundary_text.png
│
├── components/
│   └── auth/
│       └── LoginForm.jsx     ← 로그인 input + 버튼
│       └── Koundarytext.jsx     ← "Koundary" 로고 컴포넌트
│       └── LoginLogo.jsx    ← 위쪽 회색 이미지(로고) 컴포넌트
│
├── pages/
│   └── Login/
│       └── Login.jsx         ← 전체 레이아웃 (Form + Logo + Image 조합)

3. 언어 선택 드롭다운

LanguageSelector.jsx 파일을 추가하여 작업하였다.

src/
├── components/
│   └── auth/
│       ├── LoginForm.jsx
│       ├── LoginLogo.jsx
│       ├── LoginImage.jsx
│       └── LanguageSelector.jsx   ← 드롭다운+지구아이콘

코드는 아래와 같은데 특이점은 지구 아이콘을 외부에서 저장해 가지고 오는 형식이 아닌 react-icons를 설치해 진행하였다.

`react-icons` 사용법

1. 아래의 명령어를 이용해 설치

npm install react-icons

2. LanguageSelector.jsx 파일 최상단에 아래의 명령어 작성
: { } 안의 코드는 아이콘마다 상이하니 검색해볼 것!

import { FaGlobe } from 'react-icons/fa'

최종 로그인 화면

로그인 화면 와이어프레임은 아래와 같다.

최대한 비슷하게 해보려고 노력했다 😹
무조건적인 칭찬과 박수갈채 부탁드립니다 👏👏👏

보완해야 될 점

1. 이번에도 역시나 무작정 개발 시작!

: 혼자 개발하는 것이 아니기 때문에 좀 더 세세하게 공통 컴포넌트나 개발 규칙 등을 정했어야 됐는데.. 현생이 바쁘다, 귀찮다라는 여러가지 핑계로 냅다 그냥 시작해버린 것 같다. 뭔가 지금까지 스무스하게 진행되는 것이 불안한 ;; dev 브랜치로 합칠 때 어떤 문제가 발생할지 벌써 두렵다.
~~하지만 미래의 일이니 어떻게든 되겠지.. 라는 마인드로 만들고 있다.~~

2. 이제서야 슬슬 이해되는 react 구조

: 프론트 스터디에서 공식 문서를 정리해서 발표하는 시간을 매주 가지고 있어 안일하게 react 강의를 듣지 않았다. ~~동현오빠한테 왜 물어봤지 어차피 안 할 거 미안합니다~~
그랬더니 역시 처음에는 내맘대로 복사하고 붙여넣고 삭제하고 다시 넣고.. 이랬더니 슬슬 이해되기 시작했다. 개발할 때 당연히 지피티 도움을 받았지만 보다 중요한 건 코드와 구조를 정확히 이해하는 것!이라고 생각한다.
그래서 우선 로그인 화면을 표면상?으로는 만들었으니, 내일 하루는 코드를 이해하고 tailwindcss를 학습하는 데 시간을 할애할 예정이다.