MongoDB & React 복습

0929

1. MongoDB 서버 배포하기

이전에 했던 내용이지만 DB를 MySQL에서 MongoDB로 바꾸어서 배포 진행

1) AWS 에서 EC2 인스턴스 만들고 탄력적 IP주소 발급 받기

2) putty를 이용하여 Ubuntu 터미널 실행

3) 패키지 설치하기

- node js 최신버전을 받아야한다

- sudo apt-get update

- 노드 js 설치 : sudo apt-get install nodejs
   => curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash - 로 노드 버전 최신화! (MongoDB는 구버전과 호환이 잘 안된다고한다)
   
- 노드 js 설치하면 npm 자동으로 설치되지만 다시 설치 : sudo apt-get install npm

4) Filezila 를 이용하여 VScode에서 작성한 파일 ubuntu 폴더로 복사

5) ubuntu 터미널에서 파일 확인

6) PM2 설치

npm install –g pm2

7) 기존에 포트번호 3000번으로 리다이랙팅 하는 코드

sudo iptables -A PREROUTING -t nat -i eth0 -p tcp --dport 80 -j REDIRECT —to-port 3000 

위의 코드 사용 대신 nginx 사용

- sudo apt-get install nginx

- sudo vi /etc/nginx/sites-available/default

- location 부분 주석처리 후

proxy_pass http://localhost:3000;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $http_host; 복붙
            
- sudo service nginx start 

진행 완료하면 pm2 로 서버 배포 완료

8) 무료 도메인 사이트에서 도메인 주소를 받기

9) AWS 의 Route 5S 를 이용하여 해당 도메인 주소로 연결

2. React 구축

회원가입과 로그인을 기능을 수행하는 홈페이지를 React로 구축

1) 기본 설정

npx create-react-app mongodb_react

yarn add styled-components axios

yarn add react-router-dom   ==> 새로고침 없이 이동. link같은 기능

yarn add styled-reset

yarn add react-icons

2) React 구조 설계

• src 폴더에 containers / components / pages 폴더 생성 후 해당 폴더에 세분화 시킬 예정

• 시각적인 부분은 component, 기능 부분은 container

• component 폴더 내에 container는 그냥 단순히 뷰를 담는 곳을의미 (containers 와 container 구분)

• 해당 폴더내에 파일 생성 후 rfce 로 파일 export 하는 구조 자동 생성

• src 폴더에 GlobalStyles.js 파일 생성 후 css 초기화

const GlobalStyles = createGlobalStyle`
 ${reset};
 html {
     font-size: 10px;
 }
`;

• containers와 components 안에 common 폴더, navbar 폴더 생성 (careerly 페이지와 똑같이 만들 계획이기 때문에 해당 페이지에 맞게 구조 설정)

• icon은 react icons 홈페이지에서 import
  => 이미지 형태보다 icon을 받아오는것이 사용하기에는 훨씬 쉬움 but 디자인의 한계..

3. Styled Component

• 기존 돔을 만드는 방식인 css 파일을 밖에 두고, 태그나 id, class이름으로 가져와 쓰지 않고, 동일한 컴포넌트에서 컴포넌트 이름을 쓰듯 스타일을 지정 하는 것

• signin 의 css 중 인풋이나 버튼은 회원가입시에도 동일하게 재사용가능하므로 component화

=> components폴더의 common 폴더 내에 input과 button폴더 생성
input폴더에 RoundedInput.js
button폴더에 RoundedButton.js

=> common 폴더내에 css 용도별로 component로 만들어 폴더 새로 만들어 저장

• 재사용 할 수록 사이트의 통일감! 확장성 좋음!