[목표]
알고리즘 문제를 풀어봅니다.
스프링으로 로그인, TODO 기능을 구현합니다.
React를 구현해봅니다.
10:00 ~ 12:00
늦게 퇴근해서 30분정도는 졸았습니다. 어제 풀지 못한 367 알고리즘 문제를 풀어보았습니다. 생각보다 sqrt 를 사용하지 않고 완전제곱근을 구하려니 어려웠습니다.
12:00 ~ 13:00
식사를하고 쉬었습니다.
13:00 ~ 16:00
어제 간이 로그인 시스템을 만드는데 이어서 Spring과 React로 본격적인 로그인 시스템 및 TODO리스트를 만들어 보겠습니다. 우선적으로는 React 환경을 구성해보겠습니다. (VS code)
앞으로 꼭 중요한 환경 설정과 같은 내용 외에는 TIL에 적지 않겠습니다. 정리하는데 시간이 걸려서 정리하기보다 프로젝트 완성에 집중하겠습니다.
프로젝트 스택
- Front-end: React Framework (Modern JS)
- Backend REST API: Spring Boot
- Database: H2 → MySQL
- 인증: Spring Security (Basic → JWT)
먼저 React를 쓰기 위한 Node.js(npm)을 설치했다. Node.js와 npm은 최신버전을 사용해도 좋다. 설치를 완료하고 윈도우기준 cmd에서 다음과 같이 출력된다. npm도 마찬가지이다.
npm은 왜 설치하는가?
→ javaScript를 사용하기 위한 패키지 매니저이다. Spring에서의 Maven이나 Gradle과 비슷하다.
React 실행해보기 (npm 사용)
- React를 실행하길 원하는 폴더를 만들고 cmd(관리자권한)로 이동합니다.
npx create-react-app todo-app으로 리엑트 앱을 만듭니다. y를 누르고 패키지를 설치하고 파일을 만듭니다.- ‘Happy hacking!’ 문구가 출력되면,
cd todo-app,npm start(개발모드)로 실행시킵니다. - 브라우저로 리다이렉션되고, React가 실행된 것을 확인할 수 있습니다. 만약, 프로젝트 파일(index.html)을 수정하면 바로 반영됩니다.
npm test 로 실행하면 감시 모드로 실행가능합니다.
npm 명령어 리스트
npm start: 개발 모드로 React를 실행합니다.
npm test: 감시 모드로 React를 실행합니다.
npm run build: React의 컴포넌트 패키지들을 다운로드 해준다.
npm install —save react-router-dom: 프로젝트에 종속성을 설치합니다.
React 폴더 구조
package.json: 종속성 정의(Maven pom.xml과 유사)
node_modules: 모든 종속성이 다운로드되는 폴더
- React 초기화
public/index.html: 루트 div 포함src/index.js: React App을 초기화합니다. App 구성 요소를 로드합니다.src/index.css- 전체 애플리케이션 스타일링
src/App.js: App 구성 요소 코드src/App.css- App 구성 요소 스타일링src/App.test.js- App 구성 요소 단위 테스트
(단위 테스트는 프로덕션 코드와 함께 실행됩니다(Java 방식과 다름))
주의: 구문이 다소 복잡해 보일 수 있습니다. 일반적인 Java 코드(import 등)와 다릅니다. 나중에 자세히 설명하겠습니다.
리액트는 각 컴포넌트(로그인, 헤더, 풋터, 메뉴 등)를 통해 모듈화를 시킨다. 또한 파트별로 컴포넌트가 다르다.
- View (JSX 또는 JavaScript)
- Logic (JavaScript)
- Styling (CSS)
- State (Internal Data Store)
- Props (Pass Data)
React 컴포넌트 추가하기
App.js에서 다음과 같은 코드를 추가하면 됩니다.
function FirstComponent() {
return(
<div className="FirstComponent">FirstComponent</div>
)
}이후 상단의 function App() 부분에 위의 컴포넌트를 선언해줍니다.
function App() {
return (
<div className="App">
My Todo Application Updated
<FirstComponent></FirstComponent>
</div>
);
}끝!
또는 class로 컴포넌트를 추가할 수 있다. 형태는 살짝 다르다.
class ThirdComponent extends Component{
render() {
return (
<div className="ThirdComponent">ThirdComponent</div>
)
}
}class는 최상단에 import를 해줘야한다. App에 선언하는건 같다.
import {Component} from 'react';
function App() {
return (
<div className="App">
My Todo Application Updated
<FirstComponent></FirstComponent>
<ThirdComponent></ThirdComponent>
</div>
);
}리엑트에선 function과 class 두가지의 컴포넌트 유형이 있다. 차이를 알아보자. 근데 보통 function을 사용한다.
| 항목 | 함수형 컴포넌트 (Function) | 클래스형 컴포넌트 (Class) |
|---|---|---|
| 기본 문법 | function 또는 ()=>{} | class extends React.Component |
| 상태 관리(State) | useState() 훅 사용 | this.state, this.setState() |
| 생명주기(Lifecycle) | useEffect() 훅 사용 | componentDidMount() 등 메서드 |
| 코드 간결성 | ✅ 매우 간결 | ❌ 코드가 길고 복잡할 수 있음 |
| 최신 권장 방식 | ✅ 권장됨 | ⚠️ 레거시, 유지보수용으로 사용 |
| this 키워드 | ❌ 없음 | ✅ 필수 (this.state, this.setState) |
16:00 ~ 18:00
어느정도의 환경설정과 React에 대해서 알게되었으니 시간관계상 본격적으로 로그인이 접목된 Todo 리스트 사이트를 만들어 보겠다.
구현 과정은 다음과 같다.
- LoginComponent
LoginComponent 제어 가능
폼 필드와 상태 연결
하드코딩된 인증 구현
조건부 렌더링 구현 - WelcomeComponent
라우팅 구현 - ErrorComponent
- ListTodosComponent
- Bootstrap 추가 및 페이지 스타일 지정
- HeaderComponent
- FooterComponent
- LogoutComponent
18:00 ~ 19:00
식사를 했습니다.
19:00 ~21:30
위의 내용을 하다보니, DB가 필요하여 추가로 강의를 들었습니다.
스프링 부트에서의 JPA와 Hibernate를 시작하여 H2에서 DB 삽입, 생성, 삭제 등 활용방법을 알아보았습니다.
로그인을 위한 Spring Security를 사용
강의 보면서 Spring + React + JWT + MySQL(H2)을 구현하기 위해 시도하고 있다. 누더기 코드가 되어 가고 있는 것 같다.
21:30 ~ 22:30
팀원 순위를 생각해보았다.
22:30 ~ 23:00
인증 시스템인 JWT 구현중
23:00 ~ 24:00
의재재네형 생일로 야식(족발/보쌈)을 먹었습니다.
00:00 ~ 02:00
JWT 구현을 완료했습니다. 올바른 유저명과 패스워드로 생성된 인증 토큰이 없으면, Todo에 접근할 수 없습니다.
02:00 ~ 02:40
팀원 순위를 대강 확정지어봤다. 정하고, 제출을 완료했다.
02:40 ~ 04:30
이제 H2 서버를 구축하고 My SQL에 연동해보겠다. → 못했다.
벨로그에 글을 적었다.
