[나만의 웹사이트를 만들어보자] 5. React 템플릿 내 프로젝트에 적용하기 (Spring Boot + React + PostgreSQL)

안녕하세요 나홀로전세집입니다.

 

지난 시간에는 PostgreSQL을 Spring Boot와 연동해 보았습니다.

 

이번 시간에는 React 오픈 템플릿을 다운로드하여 내 프로젝트에 적용해 보겠습니다. 개인 프로젝트를 혼자 진행하다 보니 디자인을 직접 만들 시간이 부족하여, 오픈 템플릿을 사용하기로 결정했습니다.

 

저는 포트폴리오 웹사이트를 만들 것이기 때문에 포트폴리오 템플릿을 다운로드하겠습니다. 템플릿은 구글이나 깃허브에서 검색하면 많이 찾을 수 있습니다. 그중 마음에 드는 디자인을 선택하면 됩니다.

 

저는 아래의 템플릿을 사용하겠습니다:

https://github.com/soumyajit4419/Portfolio

GitHub - soumyajit4419/Portfolio: My self coded personal website build with React.js

 

이 템플릿은 soumyajit4419개발자가 React.js로 만든 개인 포트폴리오 웹사이트입니다.

 

깃허브에 있는 템플릿을 적용하는 법을 알려드리겠습니다.

먼저 코드를 다운받아보겠습니다.

 

템플릿 페이지에서 Code 버튼을 누르고 Download ZIP을 클릭하여 코드를 다운로드합니다.

 

다운로드한 ZIP 파일의 압축을 풉니다.

 

압축을 푼 폴더 내에서 .gitignore와 README를 제외한 모든 코드를 복사합니다.

 

복사한 코드를 만든 React 프로젝트 안에 있는 src 폴더에 붙여넣습니다.

 

붙여넣기 완료 후 src 폴더 내부

 

 

다음으로, 붙여넣은 React 템플릿에서 사용하는 모듈을 설치해 줍니다.

터미널에서 프로젝트 폴더로 이동한 후(cd nahollo-frontend)

npm install 명령어를 사용하여 필요한 모듈을 자동으로 다운로드합니다.

 

모든 모듈이 다운로드되면 npm start 명령어를 실행하여 프로젝트가 정상적으로 작동하는지 확인합니다.

 

 

정상적으로 실행되면 http://localhost:3000에서 템플릿의 화면이 표시됩니다. 

 

이제 템플릿을 자신의 입맛대로 꾸미면 됩니다.

다음시간에는 페이지를 꾸며보는 시간을 가져보도록 하겠습니다.

 

오늘도 즐코딩 하시고 좋은 하루 되세요~