[1주차 과제 해결] 실용적이고 간단한 방안

**1주차 과제**
1.  복습(웹 서버 이해)
2.  간이 로그인 페이지 만들기(DB연결X)  
    admin, admin1234라고 입력했을 때 로그인을 시켜주는 페이지 만들어보기
3.  로그인 페이지 이쁘게 만들기.(CSS / BootStrap)  

 

⚙️ 기술 선택 이유와 나만의 개발 환경 구성 정리

말틱님이 강의로 가이드 준 방식 그대로 따라가기보다는,
내가 만들고 싶은 서비스의 목적과 개발 환경의 효율성을 고려해서
몇 가지 핵심 기술을 변경하거나 대체해서 사용하기로 결정했다.
말틱님의 컨펌?도 있었으니 크게 우려하진 말자.

---

1. Client : PHP → React (TypeScript)

🔹 APM 방식: PHP

• 서버에서 HTML을 직접 렌더링하는 방식 (전통적인 MPA)
• 비즈니스 로직도 PHP 안에서 처리됨
• 웹서버와 PHP가 서버 사이드 렌더링 구조로 밀접하게 통합

✅ 내가 선택한 기술: React (TypeScript)

• SPA(Single Page Application) 구조로, 사용자 경험이 더 부드럽고 빠름
• 컴포넌트 기반 UI로 유지보수가 용이
• 타입스크립트를 통해 코드 안정성을 확보
• 화면 개발을 더 빠르고 유연하게 할 수 있음

---

2. 웹서버 : Apache → Nginx

🔹 APM 방식: Apache

• 전통적인 웹서버
• .php 요청을 받아서 PHP 인터프리터와 연동
• .html, .css, .js 같은 정적 파일도 서빙 가능

✅ 내가 선택한 기술: Nginx

• 정적 파일 서빙에 최적화된 경량 웹서버
• 프록시 역할, 로드밸런싱 등 현대적인 서비스 아키텍처에 더 적합
• React 앱의 정적 파일을 서빙하거나, API 요청을 프록시 처리할 때 매우 유용
• 실무에서도 Apache보다 Nginx를 더 많이 사용함

---

3. 가상서버 : VM → Docker

🔹 가상머신 (VMware)

• 전체 운영체제를 가상화해서 실습
• 리소스를 많이 차지하고, 설정이 복잡함 (포트 포워딩, 파일 공유 등)
• 시스템 수준에서는 실제 서버와 비슷하지만, 개발 속도가 느림

✅ 내가 선택한 기술: Docker

• 가볍고 빠르게 컨테이너로 개발 환경 구성 가능
• Dockerfile과 docker-compose.yml로 개발 환경을 코드로 관리
• 배포 환경(AWS, 클라우드)과 거의 동일한 방식으로 운영 가능
• 프론트/백엔드/DB 등을 컨테이너 단위로 독립 실행, 확장성에 매우 유리

---

추가 적용) UI 퀄리티 향상을 위한 선택 : Stitches

✅ Stitches (CSS-in-JS)

• 빠르고 유연한 스타일 구성 가능
• TypeScript와 강력하게 통합되어 디자인 시스템 구성과 유지보수에 유리
• 전통적인 CSS/SASS보다 컴포넌트 중심 UI 개발에 적합

---

1. 리엑트 개발 환경 세팅

npm create vite@latest my-project --template react-ts	//프로젝트 생성
	◇  Select a framework:
	  React
	◇  Select a variant:
	  TypeScript + SWC

cd my-project		//만들어진 디렉토리 접근
npm install			//npm 설치
npm install react-router-dom 	//라우팅을 위한 라이브러리 설치
npm install @stitches/react	//(선택사항) custome ui를 위한 라이브러리 설치
npm run dev			//개발자 모드로 실행

• 위에서 my-project를 본인이 진행할 프로젝트 명으로 바꾸면 된다!
• stitches를 어떻게 쓰는지는 여기선 넘어가고 늘 그렇듯이 공식문서를 참고하거나 구글링을 하자.
• 나는 stitches를 사용하니까 필요 없는 App.css와 index.css는 삭제하고 global.ts를 만들어서 Stitches를 설정해주었다.

 

2. 로그인, 홈화면 개발

const handleSubmit = (e: React.FormEvent) => {
	e.preventDefault();
    setError('');
    if (loginId === 'admin' && password === 'admin1234') {
		navigate('/home');
    } else {
		setError('잘못된 사용자 이름 또는 비밀번호입니다.');
    }
};

 

• DB 없이 간단하게 Id와 Password를 비교하는거니 로직만 적어주었다.
• 틀린 정보를 입력할 경우 error값에 따라서 경고문구를 보일 수 있게 설정했다.
• 로그인에 성공하면 home화면으로 리디렉션된다.
• 로그인의 랜더링 화면을 그리고 홈화면의 간단한 랜더링을 그리면 된다.

3. APP 라우팅 적용

const App: React.FC = () => {
  return (
    <Router>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/home" element={<Home />} />
        <Route path="/*" element={<Navigate to="/login" replace />} />
      </Routes>
    </Router>
  )
}

 

• 기본적으로 index.html, mian.tsx, App.tsx, 순서로 접근한다.
• App.tsx에서 path에 따라서 랜더링할 컴포넌트를 지정해준다.
• 이렇게 되면 localhost:5173/login으로 접속하면 Login 컴포넌트를, localhost:5173/home으로 접속하면 Home 컴포넌트를 랜더링하게 된다. 그리고 별도로 어떤 링크로 접속하든 Login으로 가게 해두었다.

 

5. docker, nginx 서버 배포

• 다음주부터는 어차피 DB를 연결할 예정이기 때문에 그냥 웹서버와 Client 서버를 분리했다. 
• 클라이언트용 Dockerfile을 만들고, nginx용 nginx.conf와 Dockerfile을 만들고 docker-compose.yml을 통해서 최종 배포 설정을 해주었다.

 

6. 결과 확인