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

1일차 

react와 DB 연동을 테스트 하기 위해서 우선은 개인 계정에 RDS 인스턴스를 생성해서 테이블을 설계를 시작했다. 나온 디자인을 토대로 필요한 데이터가 무엇인지 생각해보고 조금씩 해나갔다. UI작업을 이어갔는데 도애체 화면에서 왜 짤려서 나오는지를 알 수가 없어서 UI 하는데 종일 보냈던 듯 하다. DB에서 더미 데이터를 넣어서 console로 데이터를 확인하는 부분까지 진행하고 마무리. useEffect에 대한 이해가 없어서 조금 어려웠다. 

 

2일차

Redux에 대해서 알아보고 테스트를 해보았던 것을 이제 react 안에서 전역으로 쓸 수 있도록 적용해 나가기 시작했고 동시에 DB 작업도 이어나갔다. 여기서 좀 애 먹었던 것이 DB값이 UI에 반영하려는데 이때 DB값이 빈값이라는 것이었다. DB에서 값을 받아오는 속도보다 UI 그리는 속도가 빠르다는 의미였는데. 이 부분을 어떻게 해결해야할지 계속 알아봤었다. 그리고 나서 아 렌더링을 할 때 조건값을 주면 된다는 것을 알고 적용. DB값이 있을 때 렌더링을 해라! 라는 조건을 넣고 나서 해결이 됐다. 

그리고 또 애 먹었던 부분은 DB에서 가져온 값에서 특정 배열 값을 어떻게 빼내오는지에 대한 것이었다. 컬럼 데이터 타입으로 JSON이 있는데 여기서 파싱을 어떻게 해야하나. 이게 정말 값이 오기는 하나? 싶어서 console로 다 찍어서 확인했다.

그렇게 UI 작업과 DB에서 받아온 데이터를 UI에 반영하기 시작 

 

3일차 

기존에 만든 컴포넌트 로직을 다시 변경했다. 

리액트가 싱글페이지 어플리케이션이기에 각 파일에 페이지를 컴포넌트 형태로 집어넣고 보여주기도 하고 할 수 있는게 새롭기도했고 어렵기도 했다. 참고 코드에서도 어쩐 특정 조건에서 페이지를 보이기도 보이지 않게도 처리하는 걸 볼 수 있었는데 이 부분에 대한 이해를 해나나기 시작했고 

이미지 양이 많아서 S3를 쓰기로 결정하고 개인 계정에 만들어진 버킷으로 이미지를 업로드해서 S3에 있는 이미지를  UI에 띄우는 작업을 해보았다. 

그리고 특정 시간이 지나서 다른 페이지로 전환하는 부분을 어떻게 해야할지를 고민하고 애먹었던 날이었다. 정신없이 개발하느라 이부분은 따로 정리를 해두지 않아서 잊어버리기 전에 정리를 해두어야 겠다. Redirect를 적용했는데 지금의 기억으로는 이 부분이 버전이 업데이트되면서 사용법이 바뀌어서 새로운 방법으로 적용을 해야했다. 

MySQL 테이블 컬럼 수정하고, 컬럼명이나 테이블 명도 수정했다. MySQL에 쓰는 적합한 명명법등을 알아보면서 

버킷에 있는 이미지를 불러와서 UI에 적용

 

4일차 

버튼 하단 고정 하는 것을 알아보았다. 이 부분도 개발하느라 정리를 못했다 ㅠㅠ 3주차는 정말 개발하느라 정신이 없었다. 이 주 부터 감을 조금 잡아서 개발하는 시점이지 않았나 싶다. 하지만 UI부분은...지금도 애먹는 중인데 지금 생각하면 UI에 깊게 쓸 시간이 아깝다는 생각이 들었던 거 같다. 덕분에 더 시간을 많이 썼지만! 

4주차는 거의 UI만 손봤다. 

암튼. 이 즈음에 필요한 UI를 구현이 끝나가는 듯(착각)했다. 그리고 반응형을 위해서 mediaQuery에 대해서 조금씩 알아보기 시작 

 

5일차 

AWS  실서버를 구축하기 시작했다. 팀원들과 공유하고 앞으로 웹에서 나오는 페이지가 모바일에서 어떻게 보이는지를 알아보아야하기 때문에 지금 개발한 코드를 서버에 올리는 것을 마무리고 이 주 작업을 끝내고 싶었다. 

EC2 생성 법을 다시 보고 탄력적 IP라고 해서 내 개인 서버에서 해보았던 것을 적용해보고 

생성한 서버의 개발 환경을 구축해 나가는 날이었다. 

node.js를 설치하는데 좀 시간이 걸렸다. 권한 문제였는데 여러 시도 끝에 결국 root에서 해결했다. root에서 다시 node를 설치하고 npm install같은 부분도 root에서만 할 수 있는 상태. 권한 부분은 다른 일을 하느라 손을 못댔는데 조만간 권한  설정해야할 것이다. 그렇게 환경 구축을 하고 

git에 있는 코드를 서버에 클론해서 실서버에 react 프로젝트를 올렸다.