[Tech Study] 12월 React Team

안녕하세요 GDSC Sungshin React Team 입니다.

우선 저희는 11월 정기세션 이후에 총 3번의 스터디를 더 진행하였습니다. 관련 내용을 소개한 후, 스터디 때 발생했던 오류들을 어떻게 해결하였는지와 스터디 후기에 대해 말씀드리겠습니다.

11월 29일 수요일에는 유튜브 강의로 리액트의 기본 개념인 컴포넌트, jsx, 프롭스를 활용하여 영화 앱을 만들어보았습니다.

터미널에 npx create-react-app react-basic-demo를 입력하여 react basic demo 프로젝트를 생성해주고 npm start를 터미널에 입력하면 화면에 있는 사진과 같이 프로젝트가 잘 생성된 것을 알 수 있습니다.

또한 현재 한국에서 상영하고 있는 영화에 대한 데이터를 받아오기 위해 APIKey를 발급받고, 이를 크롬에서 호출하면 화면에 있는 사진처럼 나오는데요, 이를 더미데이터로 사용해주기 위해 

vs code에서 movieDummy.js 파일을 생성하여 dummy를 export 시켜주었습니다.

그리고 영화의 실제 값을 넘겨주기 위해 필요한 파일들을 만들어주었는데요, 영화 포스터와 영화 제목, 평균평점을 나타내주기 위해 movie.jsx 파일을 생성했고,

이를 app.js를 통해 웹으로 나타내게 해주었습니다.

그렇게 코딩하면 이렇게 화면이 출력되는데요, 자세히 보시면 영화 포스터와 제목, 평균평점이 출력되어 있는 것을 볼 수 있습니다.

이를 보기 좋고 예쁘게 꾸미기 위해 index.css 파일을 생성해 다시 결과를 보면

보기 편하게 현재 상영중인 영화의 목록들이 영화포스터, 제목, 평균평점 순으로 출력되어 있는 것을 볼 수 있습니다.

12월 6일과 12월 22일에는 두 주에 걸쳐 리액트 라우팅을 활용하여 영화 앱을 만들어보았습니다.

 라우팅을 사용하기 위해 프로젝트 생성 후 터미널에 npm i react-router-dom을 입력해 설치합니다. 잘 깔렸는지 확인하기 위해 package.json에 들어가 오른쪽 사진처럼 react-router-dom이 있는지 확인해줍니다.

각 네비게이션 바를 클릭하면 해당 화면으로 넘어가도록 App.js를 화면처럼 수정해주고

기존에 사용했던 movieDummy.js파일을 사용해 현재 상영하고 있는 영화에 대한 정보를 받아옵니다.

원하는 헤더 구성을 위해 reset.css를 생성해주고

헤더를 구성하는 header.jsx파일을 생성해줍니다.

화면에 표시된 부분이 tmdb 로고를 의미하고 있습니다.

또 홈화면을 표시하는 home.jsx와 영화 관련 파일인 movie.jsx, movies.jsx를 생성해주고

인물관련 파일 celebrity.jsx와 tv프로그램 관련 파일 tv.jsx를 생성해줍니다.

사용자가 잘못된 경로로 들어갔을 경우 해당 페이지를 찾지 못했다는 오류 메세지와 홈 화면으로 이동할 수 있는 링크가 있는 NotFound.jsx와 영화에 대한 상세 설명이 있는 movieDetail.jsx파일,

마지막으로 페이지를 꾸미는 index.css파일까지 생성해주면

이렇게 영화 앱을 만들 수 있습니다.

스터디를 진행하면서 다른 스터디 팀원분들은 잘 실행이 됐지만 저만 화면과 같은 오류가 났었는데요, 스터디 전까지 3번 정도 파일을 삭제했다가 다시 생성하고 했지만 해결이 되지 않아 스터디 때 물어보았습니다. 원래 잘 설치가 되야하는 파일들이 파일은 있지만 못찾는 등의 오류 때문의 약 30가지의 오류가 났었습니다. 그렇게 오류를 하나씩 해결하기 위해 1시간 넘게 같이 머리를 싸매고 고민해보았는데, 

 한 스터디 팀원이 "파일 경로가 너무 복잡해서 파일들이 서로 꼬여서 충돌 일어난 거 아니야?" 라고 말해줘서 파일 경로를 사진과 같이 최대한 짧게 해서 다시 프로젝트를 생성하였더니 오류 없이 잘 작동되었습니다.

 이번 스터디를 통해 저희 스터디 팀원분들이 느꼈던 후기입니다. 

한학기 동안 학교수업과 병행하기 힘들었을텐데 모두가 열정적으로 참여해주어서 많은 성과를 낼 수 있었습니다.

다시한번 팀원들께 감사하다는 말씀 드리며 gdsc 스터디원 모두 고생 많으셨습니다 !!