React 처음 했을 때 정리해보자 - 1주차 -

 

최근에 React를 바로 학습해서 프로젝트를 만들어야하는 상황이 왔다. 모든게 처음이었다. Javascript도 써본 적 없고 css는 말할 것도 없다. html? head, body정도? 프톤트 자체를 거의 해본 적이 없는 상태였다.

엄청 겁이 나거나 그런 건 아닌데 시작하기 전에는 좀 막막했던 거 같다. 물어볼 사람도 없고 혼자 알아서 공부해야하는 상황. 거의 맨땅에 헤딩 수준이다. 2022년 10월 17일에 시작했는데 21일에 디자인이 나왔을 때는 내가 이걸 만들 수 있을까란 걱정이 앞섰다. 

 

 

시작은 그러했지만 4주차에 접어든 현재는 AWS서버를 구축했고 UI와 어느정도의 인터랙션을 구현해서 React 프로젝트를 팀원들과 같이 볼 수 있는 상태로는 만들었다. 사이트 내의 기능 구현과 반응형 작업이 남았는데 갈길이 멀구나 ^ _ㅜ 

처음 뭔가를 배울 때의 과정을 잊어버리기 전에 정리할 필요가 있다는 생각에 적어본다. (1주차가 엊그제 같은데 가물가물하다;;)

 

내가 가장 먼저 했던 건 리액트 프로젝트를 어떻게 생성하느냐부터였다. 나는 당장 만들어야하는 상황이고 느긋하게 개념 공부를 할 시간 따위는 없었다. 그렇다고 개념을 던졌다 이건 아니고 그때 그때 필요한 개념만 빠르게 이해하고 넘어갔다. 

 

찾아서 개념을 접하는 것도 시간이 걸리기 때문에 빠르게 개념에 접근하기위해 기초적 개념이 담긴 책을 2권정도 샀다. 그저 개념 키워드 접근용도 실질적인 기술과 코드는 거의 구글링을 통해서 진행했다. 

 

1~2일차

먼저 리액트를 시작하기 위한 환경 설정과 리액트 앱을 생성하는 것 부터가 첫번째였다. 예제를 찾는데 모든 예제가 VSCode로 되어 있었다. 그래서 나도 처음에는 VSCode를 써서 진행했다. 그런데 도통 적응이 되질 않았다. 아무래도 안드로이드 개발을 하면서 jetbrains계열의 IDE가 익숙하다보니 그랬던 거 같다. (이건 2주차쯤 되어서 WebStorm으로 갈아탔다.)

 

앱을 생성하고나서 아, 아제 여러 페이지를 어떻게 만들지? 이 시점에서 컴포넌트라는 단어를 보게 된 듯하다. 이 때 당시는 코드를 봐도 뭐가 뭔지 알 수가 없었다. 여러 페이지도 페이지 인데 내가 만들 거는 서버와 통신을 하는 앱이었다. 서버 통신 하는데에 필요한 것들을 찾아 구글링을하며 관련 예제가 있는 책을 병행하며 봤다. (정말 뒤죽 박죽이었다)

계속 컴포넌트라는 단어가 나와서 중간중간 컴포넌트에 대한 이해를 해나가다가 라우터와 express란 단어가 나왔다. 

express를 설치하고 라우터로는 화면전환을 할 수 있다는데 봐도 뭐라는지 알 수가 없었다. 그저 어떻게든 해야하기에 코드를 따라치고 움직이는지 확인하는 작업의 연속 

 

그렇게 하루 동안 앱 정도 만들어보고 지지부진한 상태에 이대로는 안되겠다 싶어서 리액트 강의를 찾았다. 

리액트 강의 올려주신 모든 분들 정말 감사합니다

 

한눈에도 나에게 필요하다는 생각의 제목이 있어서 클릭했다 '한시간 만에 끝내는 React.js 입문'

이게 도움이 많이 됐다. 이때 대략적인 React 앱을 이해할 수 있었다. 이때도 아직 막막하기는 했다. 정말 기초적인 부분만 머리속에 넣은거라 코드도 익숙하지 않고 그저 이런게 있고 이런걸 할 수 있다 정도. 

 

라우터로 화면 전환이 가능하고 데이터 관리는 useState로 할 수 있고 화면을 그리는 부분이 어떤 부분이고 컴포넌트가 무엇이고 어떻게 사용할 수 있는지. 함수형 컴포넌트가 많이 쓰인다. props라는 게 있고 값을 넘길 수 있다 정도. 적어도 화면에 뭔가를 집어 넣을 수는 있게 되었다. 

 

그리고 화면에 뭔가를 넣으면서 자연스레 CSS쪽으로 시선이 갔다.  css코드를 보고 있자니 내가 쳐서 쓸 수는 있을까란 생각이 들었다. 그래도 전에 php로 사이트를 만들어 본 경험은 있어서 부트스트랩을 사용해 본 적은 있다. 탬플릿만 가져다 쓴 정도지만. 그 경험으로 React쪽에도 뭔가 부트스트랩처럼 가져다 쓸 수 있는 UI 라이브러리 같은게 있지 않을까 해서 뒤져보다가 MUI와 styped-components라는 것을 알게된다. MUI가 좀 더 가져다 쓰기 쉬워서 이것부터 써봤다. 버튼도 넣어보고 사각형도 그려보고 글씨를 넣으면 어떻게 나오는지도 보고.

 

이제 화면을 여러개 만들고 전환도 가능하다는 걸 알았다. 

 

서버는 어떻게하지? 

3~5일차

express를 설치하고 서버 작업은 어떻게 하는지 알아보았다. express는 Node.js를 이용해 백엔드를 구성할 수 있게 해주는 웹 프레임워크이다. React 서버 연동, React + Node.js 등등의 관련 키워드들은 다 쳐본 거 같다. 그렇게 하면서 내가 만들 React 앱이 클라이언트 부분 express를 적용하면서 server 단을 구성할 수 있음을 이해했다. 처음에 이것도 잘 이해가 안됐다. 프레임 워크 사용도 처음이고 php로 개발해봤던 터라 프론트와 server를 나눈다는 개념 자체도 탑재되어 있는 상태도 아니었고. 최대한 내가 당장 만들어야하는 프로젝트와 유사한 예제를 찾아서 따라하면서 만들었다. 

client와 server 폴더를 따로 만들어서 나누고 express를 이용해서 프록시 설정(여기서도 삽질) 및 노드 연결. 그리고 여기서 또다른 걸 알게 되는데  nodemon과 concurrently, axios였다.

 

각각의 개념을 공부하면서 nodemon과 concurrently를 적용하려는데 여기서 삽질이 좀 있었다. git도 적용해서 코드 관리도 해야했기에 git도 병행했는데 디렉토리 구성이 이정도면 됐다 하고 push하면 뭔가 잘못 된 게 있고 에러가 나고 이러니까 repository를 지우고 만들고를 반복했다. 그 예로  npm start가 안되는 이유를 보니 디렉토리 구성이 잘못된 것이 있었다든지 .git 파일이 두개....

다행히도 디텍토리와 관련된 예제 발견해서 해결할 수 있었다

앱 생성 전에 디렉토리를 하나 만들어서 그 안에서 먼저 express, nodemon, concurrently를 설치 그리고 git init, gitignore작성도 해야한다. 그리고 그 안에서 React앱을 생성. React 앱 생성을 하면 자동으로 앱에 git이 연결된 상태가 되는데 이렇게 하면 git 연결이 안된 상태에서 앱 생성 가능. 

 

이후  axios를 보기 시작했다. 서버 통신을 하려면 알아야했다. 

이해가 잘 되지 않았지만 예제와 개념을 따라치면서 그때 그때 어떻게 움직이는지 확인하며 해보는 수밖에 없었다. 그러면서 console 이용법도 조금씩 알게 되었다. (아직 개발자 도구를 자유자재로 쓰지는 못한다. 공부가 더 필요)

 

그러면서 겨우 React와 Node.js, axios가 어떤식으로 움직이는지 정리할 수 있게되었다. 

컴포넌트에서 axios를 이용해서 api를 호출한다 (get/post/put/delete) express로 연결해 놓은 server 폴더 쪽에는 이 호출을 받으면 응답할 코드를 적어둔다. 그리고 호출되면 보낼 값이 컴포넌트 쪽으로 전달 된다. 이는 Router(화면 전환시에 쓰이는react-router-dom)와는 별개로 움직인다. 

 

이렇게 어느정도 흐름을 파악하고 redux에 대해서 알아보기 시작했다. 

 

여기까지가 1주차에 한 작업이고 그리고 21일에 디자인이 나왔다. 

그때만 생각하면 아직도 그때 느꼈던 초조함이 되살아난다; 

 

 

1주차가 지나고 나서 정리한 글이 좀 있어서 붙여넣기 한다

• 하고나서 기억했으면 하는 것
  • 전체적인 틀을 볼 수 있는 영상을 찾는게 중요
  • 그리고 병행해서 문서자료도 제대로 볼 것. 마음이 급해서 제대로 읽지를 못함
  • 바보같을 수 있지만 내가 만들고자 하는거 혹시 모르니까 검색해서 찾아보기. 괜찮은 예제가 나올 수 있음. 실제로 나왔다!

삽질 끝에 위에서 만든 프로젝트(앱)는 프론트로 하고 Express를 이용해서 백엔드를 개발할 수 있다는 형태를 이해했다.

그리고 이 둘을 동시 실행(cocurrently)도 해야하고 둘 사이에 데이터를 주고 받을 수 있게(http-proxy-middleware) 해야한다.

그리고 이 프로젝트를 github에 업로드를 해야하는데  Create React App(CRA)로 앱을 생성하면 git이 바로 적용되다보니

RootprojectFolder -client(reactapp)

                              -server -server.js

이 형태로 github에 업로드하는 부분에서 애먹었다. 10번 가까이 프로젝트를 생성하고 지우고를 반복하다가 겨우 정리가 됐다.