2022 마스터즈 코스(백엔드) 78일차 회고(2022. 4. 27.) - "협업할 상대의 기술 이해하기"

해당 글은 코드스쿼드 2022 마스터즈 코스 "Java 웹 백엔드" 과정을 수강하면서 학습한 내용 등에 대한 회고 글입니다. :)

 

수강 회고

오늘은 처음으로 그동안 피오와 내가 개발했었던 스프링 부트 웹 앱과 프론트 엔드 팀원들께서 개발하셨던 리액트 프로그램을 연동해보는 작업을 해보았다. 연동 작업을 하기에 앞서 OAuth를 어떻게 구현할지 피오와 내가 고민했었는데, 리액트로 구현한 SPA에서 페이지 전환 등이 어떻게 이루어져야 하는지에 대해 고민하는 시간을 많이 가졌었다. 문제는 나와 피오 모두 리액트 기술의 동작 원리에 대해 세부적으로 알지 못했었기에 논의의 결론이 좀처럼 나지 않았었고 결국에는 OAuth를 직접 구현하는 단계에서 고민해보기로 했다.

 

이후 프론트 엔드 팀원들과 함께 리액트 프로그램과 스프링 부트 웹 앱을 연동하는 작업을 시작했다. 이때 앞서 언급했었던 것처럼 리액트에 대한 기본 지식이 없다보니 마찬가지로 연동하는 과정에서 어려움이 많았다. (CORS 이슈는 덤 💦) 저번 팀 프로젝트에서는 단순히 바닐라 자바스크립트 프로그램과 연동했었는데, 이전에 바닐라 자바스크립트를 공부했었던 것이 많은 도움이 되었다. 지난 팀 프로젝트와 이번 팀 프로젝트를 통해 프론트 엔드 팀원들과 협업하면서 가장 강력하게 느끼는 점은 상대(프론트 엔드 등)의 기술에 대해서 '어느 정도' 알아야 원활한 협업이 가능할 것 같다는 생각이 들었다.

 

 

학습 회고

• 반찬 주문 서비스 웹 앱 구현 프로젝트
  
  • 팀원들(백 엔드 2명, 프론트 엔드 2명)과 zoom 회의실에서 학습

 

React(리액트) 왕 기초 명령어

npx create-react-app {app 이름} : 리액트 프로젝트 생성

npx create-react-app . 명령어 사용 시 현재 위치하고 있는 디렉토리의 이름으로 리액트 프로젝트를 생성한다. 참고로 npx를 실행하기 위해서는 별도로 node-js의 설치가 필요하다.

 

※ 리액트 프로젝트 생성 시 기본 구조

.
├── README.md
├── node_modules
├── package.json
├── public
├── src

 

npm (run) start : 리액트 프로젝트 실행 (배포용 X)

리액트 프로젝트를 실행하면 node-js 웹 서버가 실행된다. 이때 기본 3000번 포트를 사용하며, 기존에 3000번 포트를 사용하고 있는 프로그램이 있다면 다른 포트로 설정할 수 있다. 이후 웹 브라우저 주소창에 localhost:3000을 입력해보면 기본 리액트 웹 페이지 화면을 볼 수 있게 되는데, 이는 최초 src 디렉토리에 있는 index.js 파일(메인 프로그램)에 의해 App.js 파일(컴포넌트들을 정의하는 프로그램)이 실행되며 index.html(HTML 템플릿 파일)에 렌더링된 결과물을 출력하는 것으로 볼 수 있다.

 

npm run build : 서비스 배포를 위한 빌드 파일 생성

서비스 배포를 위해 빌드를 하게 되면 리액트 프로젝트 용량이 많이 절감된다.

 

npx serve -s {디렉토리} : 배포를 위해 빌드한 것을 이용하여 node-js 웹 서버 동작

디렉토리 자리에 build를 두면 build라는 디렉토리를 root로 두겠다는 의미이다. 이때 사용자가 어떤 경로(path)로 들어오든 root에 있는 index.html에 접속하게 된다.(Single Page Application)

 

 

학습 참고자료

• 유튜브 생활코딩 '리액트'

 

 

좋았던 점

• 그동안 리액트에 대해 공부해본 적이 없었는데 오늘 연동 작업을 하면서 아주 간소하게나마 알 수 있게 되어 유익했습니다. 👍

 

 

아쉬웠던 점

• 리액트 프로그램과 연동하는 것에 대한 이해도가 다소 부족하다보니 오늘 목표했었던 과업들을 수행하지 못한 점이 아쉬웠습니다. 😂

 

 

이전 보다 개선되었던 점

• 그동안 한 번도 마주하지 못했었던 CORS 이슈를 겪어 보았고 이를 해결하는 과정에서 소소한 웹 관련 지식을 습득할 수 있어 유익했습니다. 또한 리액트 프로그램과 스프링 부트 웹 앱을 연동하는 과정에서 리액트에 대한 아주 기초적인 지식을 배울 수 있어 이전 보다 웹에 대한 이해도가 좀 더 높아진 것 같습니다. 👍