점핏(개발자 전용 hr 사이트) 백앤드 클론 코딩 개발 환경을 구성
일단 구성을 살펴 보자(윈도우 기준)
!!주의!! 링크로 application을 직접 다운 받은 이후 아래 부제목에 가상환경 설정 부터 환경설정을 따라하세요.!!!!!!!!
리액트 구성 프론트 프레임워크 소스-
git 설치
https://git-scm.com/downloads
java 설치
https://www.java.com/download/ie_manual.jsp
node 설치
https://nodejs.org/ko/download
리액트 설치 설명
https://choseongho93.tistory.com/251
코드를 보관할 디렉토리(폴더)를 생성후 그 경로 안에서 설치
-npm 구성-
npm update [패키지명] // 패키지 업데이트
npm -v 를 입력 후 버전을 확인
npx create-react-app [작성할 프로젝트명]
npm start로 코드 실행
npm install react-router-dom(UI 연결 라우터 기능설치)
sudo apt-get install npm (설치가 안될경우 "sudo apt-get"을 앞에 붙임)
node version manger 설치
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
nvm install lts/erbium
(가장 최신 다운)
Node.js api 구성 -
-js의 포트 구성-
가장 상단에 .gitignore 라는 이름의 파일을 생성(npm install로 리액트 구성 후 파일 생성)
파일 생성 후 아래 사이트로 접속
https://www.toptal.com/developers/gitignore
위 그림과 같이 입력하여 생성
생성된 코드는 .gitignore에 입력 (깃헙에 코드의 교란을 예방하기 위해 사용)
npm install dotenv (이것을 설치 하면 dotenv가 설치됨)
.env라는 이름의 파일을 생성 (db 연결시 활용)
형식은 아래를 준수하기를 바람
DATABASE_URL="mysql서버이름(처음엔 보통 root로 자동 선정됨)://db이름:비밀번호@127.0.0.1:3306/db이름"
DB_HOST=localhost
DB_PORT=3306
DB_USERNAME=root
DB_PASSWORD=로컬
DB_DATABASE=db이름
ALGORITHM=HS256
JWT_SECRET=jumpit-secure (특정 명칭)
JWT_EXPIRES_IN= 9d
PORT=3000
-부가적으로 node의 필요한 구성-
npm install cors(보안관련)
npm install nodemon (디렉토리으 현재위치에 설치)
npm install -g nodemon (실시간 서버 관리시 설치 필요)
위에 두개중 하나 선택
npm install nodemon # local dependency install
npm install -g nodemon # global install
수동으로 서버 종료 없이 재시작하는 방법은 아래와 같이 실행중인 터미널 창에 rs 를 입력하는 것 입니다.
지는 global로 설치합니다. 따라서 nodemon 설치는 global 설치가 권장되는 편입니다.
npm install morgan (통신로그 추적 및 기록)
db 구성 -
-db에 필요 툴 환경 설정-
npm install dbmate (디비 업로드 및 통합을 위한 구성)
dbmate 설치 후 package.json을 확인 버젼 체크
npm install typeorm (typeorm 설치 명령어, db활용 도구)
postman 설치 (데이터 송수신 응답 확인을 위한 툴)
https://www.postman.com/downloads/
-mysql 환경 설정-
sudo apt update (!!!코드 설치가 안먹히면 sudo를 업데이트)
sudo apt upgrade
sudo apt install -y mysql-server(mysql db 설치)
sudo service mysql status
sudo service mysql start
sudo mysql_secure_installation (서버 초기화)
sudo service mysql stop (서버를 중지, sudo service mysql start는 서버 켜짐. db 업데이트나 서버 재설정시 stop후 활용)
sudo mysql_secure_installation
mysql설정 모두 완료 db 생성시 아래 링크 참조
https://omty.tistory.com/26
새로운 sql 파일 백업 및 활용시
mysql -u 사용자 이름 -p 백업될 db이름 또는 새이름 < 새로넣을 파일의 위치 파일이름.sql
위와 같이 선정하면 질문이 나올텐데 y 또는 n으로 대답하면 된다.
가상환경 -
wsl2 설치 및 설정 ubuntu 설치
https://gaesae.com/161
우분투 실행을 위한 설정 및 오류 예방
https://velog.io/@wnguswn7/%EC%9A%B0%EB%B6%84%ED%88%AC-%EC%84%A4%EC%B9%98-%EC%A4%91-%EB%A7%8C%EB%82%9C-2%EA%B0%80%EC%A7%80-%EC%97%90%EB%9F%AC
-리눅스 zsh 설치(WSL2 안에 아래코드 입력)-
sudo apt install zsh (zshell설치 BASH보다 기능 더많음)
vi ~/.zshrc 입력 (ZSH의 내부에 추가적인 코드를 편집하기 위한 커멘드)
i를 누룬후 아래코드를 복사 붙여 넣기 후 esc 입력 다음 qw!:를 입력
export NVM_DIR="NVM_DIR/nvm.sh" ] && . "NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && . "NVM_DIR/bash_completion" # This loads nvm bash_completion
source ~/.zshrc(ZSH을 구동하기위해 작동)
!!!! ZSH 환경은 "나의 디렉토리 컴터이름 % 입력란" 으로 변경됨.
bash는 "나의 디렉토리 컴터이름 $ 입력란"이다. 가능한 zsh을 사용 bash는 "나의 디렉토리 컴터이름 $ zsh"이라 치면 앞으로 zsh환경에서 우분투 사용
다음으로 위에 리액트 구성메뉴로 넘어가기
-마지막으로 레이어드 패턴 구성-
api 폴더 안에 controller, routes, services, models, utils
db 폴더를 생성 (db 툴이 인식할수 있도록 생성, db 보관함)
요약과 순서 : 가상환경 -> 리액트 -> node.js api 구성 -> mysql db
체계적으로 이런 것들을 정리하니 환경구성이 왜 필요한지 깨닫게 되었다. 여기서 여러 방법론과 환경 설정에 필요한 순서를 깨닫게 되었다. 이 구성으로 많은 개발자 및 학생들에게 도움이 되었으면 한다.
