✅ REST API
- REST 원칙을 따르는 API
- 프론트 - 백엔드가 데이터를 주고 받는 통로
- URL 조합으로 사용
- 자원(Resource)은 명사로 표현
- 모바일, 웹, 서버 등 어디서든 사용 가능
- JSON 형식을 기본으로 사용
HTTP 상태코드 (오류)
200 : 성공
201 : 생성
400 : 잘못된 요청
401 : 인증 실패
403 : 권한 없음
404 : 자원 없음
500 : 서버 오류
프로젝트 등을 진행하면서 api 명세서 만들기는 필수!
✅ 스프링 스케줄러
정해진 시간마다 자동으로 작업을 실행
@Scheduled을 사용하여 구현한다.
방법
-
config 설정
@Configuration
@EnableScheduling
두 어노테이션 사용 -
스케줄 작업 클래스 작성
@Component
@Scheduled(fixedRate = 3000)
두 어노테이션을 사용하고, 작업할 메소드를 작성한다.
실행 간격 지정
fixedRate : 이전 작업 완료 여부 상관없이 정해진 간격으로 실행
fixedDelay : 이전 작업이 끝난 뒤 지연 시간 후 실행
cron : 복잡한 시간 조건을 지정할 수 있는 표현식
✅ 리액트 프로젝트 준비
예전, 프론트 수업은 react-create-app으로 프로젝트를 구성했는데 용량도 크고 느려 권장하지 않는다고 한다. 따라서 vite로 프로젝트를 구성할 것이다.
달라진 점은 npm run start -> npm run dev 로 시작한다는 것.
cf. vite, next js
🔵 Next.js: 프로덕션 중심의 풀스택 프레임워크로 많이 사용
🔴 Vite: 프론트엔드 중심의 빠르고 가벼운 개발도구로 많이 사용
타임리프 -> 리액트로 바꾸기
리액트는 컴포넌트로 이루어져 있기 때문에 각각의 요소를 컴포넌트로 바꾸는 작업을 해야한다.
예를 들어,
타임리프에서 각각의 태그로 이루어진 것을
const Signup = () => {
return (
<div class="container mt-5">
...
</div>
);
};
export default Signup;이런식으로 jsx 파일을 만들고, app으로 가서 <Signup /> 이런식으로 추가하면 된다.
라우터 돔 사용하기
감싸는 순서
browerRouter → routes→ route
이때, route는 렌더링 될 페이지만 감싼다.
<BrowserRouter>
<Header />
<Nav />
<Footer />
<Routes>
<Route path="/" element={<Index />} />
<Route path="/signup" element={<Signup />} />
</Routes>
</BrowserRouter>여기서 예를 들어, /board/list를 표현하려면
<Route path="/board" element={<Board />} >
<Route path="list" element={<List />} />
</Route>이런 식으로 Route 밑에 Route를 쓰는 형식으로 표현한다.
오늘로써 두어달 간의 프론트, 백엔드 수업을 마무리 했다. 내일부터는 강의 대신
미니 팀 프로젝트가 예정되어있다. 길다면 길고 짧다면 짧은 여정이었다. 물론 중간 중간
힘든 부분도 있었지만 열심히 따라가려고 노력했던 것 같다. 팀프로젝트를 통해
배웠던 것을 총 정리하고 스스로 발전할 수 있기를 바라면서.. 오늘 포스팅 끝. 