[Tech Study] 11월 React Team

GDSC Sungshin React Team 입니다.

 

우선 저희 스터디 진행 방식에 대해 다시 한번 간단하게 소개해드리도록 하겠습니다. 

저희는 수캠 중앙 도서관에서 매주 수요일마다 각자 정해진 분량의 강의를 듣고 모였습니다. 

강의 내용 중 이해가 안되거나, 해결이 안 된부분에 대해 서로 이야기하고 도와가며 스터디를 진행했습니다. 

다음과 같이 2가지 강의를 수강하였습니다. React GPT AI Diary 라는 강의를 완강한 이후 인프런에 있는 ‘따라하며 배우는 노드, 리액트 시리즈 영화 사이트 만들기’ 강의를 수강 했습니다. 

5주차에는 Mini project 인 미니 블로그 만들기 실습을 진행하였는데요 실습 진행 전 Styling에 대해 먼저 학습을 했습니다. Styling이란 React 컴포넌트를 어떻게 하면 원하는 모양으로 만들어서 원하는 곳에 배치할 수 있는 지에 대해 것입니다. 스타일링을 위한 일종의 언어인 CSS 속성등 에 대해 배워 화면에 element 배치를 미니 블로그 만드는 프로젝트에 적용하였습니다. 또한 UI 컴포넌트와 LIst 컴포넌트를 구현하여 각 페이지별 경로를 구성하였습니다.

6주차에서는  기본적인 리액트 개발 환경 세팅 및 설치를 하였고, my-gpt-diary라는 새로운 프로젝트 만들어서 실시했습니다.  2번째 사진은 리액트 counter를 구성하고자 하는 화면 구성을 위해 작성한 코드입니다.  App이라는 함수를 정의하여 count라는 값이 변할 때마다 react가 자동으로 html 코드 업데이트 시켜주기 위해서 button이 클릭 되었을 때 +1,-1 하도록 아래 event 변수와 연결 시킬 수 있는 중간 controller 역할인 함수를 정의했습니다. 

7주차에서는 6주차 내용과 이어서 AI 회고록 서비스 프로젝트를 마무리했습니다. GPT 회고록이기 때문에 API key를 발급받기 위해 gpt api에서 key 발급 받았습니다. 그 후 GPT API를 호출하여 프롬프트와 연동을 시켰습니다. API key와 같은 중요한 값은 보안을 위해 따로 env 파일을 생성하여 관리하였고 오른쪽 사진이 완성된 AI 서비스 회고록 웹페이지 입니다. 

8주차에는 영화 사이트 클론 강의를 수강하였습니다.
The Movie DB라는 곳에서 제공하는 API를 이용하여 웹 사이트 제작과 외부에서 제공하는 API를 어떻게 이용하여 사용하는지를 실질적으로 같이 배울 수 있을 것 같아 강의를 선정하였습니다. 화면에 보여질 부분은 React를 사용하고,  회원가입처리 및 로그인 처리는 node.js, 데이터 저장은 몽고 DB를 이용했습니다. 

저희가 웹페이지를 만드는 과정에서 팀원들마다 비슷한 오류가 발생하였습니다. local host 3000번이 접속이 되지 않거나, package.json에서 dependency 다운 시 오류가 발생하는 등 다같이 모여 해결하려고노력 하였으나 강의에서 제공하는 node version과 현 시점의 version 등의 차이로 오류가 지속적으로 발생하여 강의 변경을 결정하게 되었습니다. 

그래서 9주차부터는 남은 스터디 기간동안 유튜브 ‘인브로즈’ 영화 앱 만들기 강의를 들으면서 클론 코딩을 진행할 계획입니다. 

 

 

어느덧 스터디 종료가 한달 앞으로 다가왔습니다. 이때까지 열심히 달려준 팀원들 모두 고생많았고 조금만 더 힘내서 열공 해봐요 💪🏻