$$config title: [ 총정리 ] 앱서버 만들기(+ 명언앱) keywords: - mysql - xampp - codepen - vscode - 리액트 $$ [참고.Express와 MySQL로 간단한 앱서버 만들기](https://slog.gg/p/5814) [참고.리액트 기초](https://slog.gg/p/5950) [참고.DB기초](https://slog.gg/p/6215) [참고.명언앱 구현](https://slog.gg/p/6273) # 0. 설치 [XAMPP 설치(+MariaDB)](https://www.apachefriends.org/index.html) [D2Coding 설치(코딩용)](https://github.com/naver/d2codingfont/releases) [SQLYog](https://github.com/webyog/sqlyog-community/wiki/Downloads) [VS CODE](https://code.visualstudio.com/) [GIT](https://git-scm.com/) [NVM](https://github.com/coreybutler/nvm-windows/releases) [JSON Viewer](https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh?hl=ko) [POSTMAN](https://www.postman.com/downloads/) # 1. 전체적인 흐름 $$uml 설치외 -> DB설계 : 프로그램\n[설치/설정/생성] DB설계 -> VS코드 : [기초정보전달]\n\n
DB설계에서 기본 정보 생성 후\nVS코드에 정보 전달 VS코드 -> 코드펜 : [기초기능전달]\n\n[수정/추가등]의 기능을 생성,\n코드펜에서 fetch를 활용해\nVS코드에 있는 정보 및 기능 가져옴 코드펜 -> 앱 : 앱꾸미기 앱 -> 사용자 : 배포 [> GIT : DB, VS코드에 있는 \n내용 저장(클라우드 기능)] $$ ---------------------- [ 앱서버 ] - 1강 ~ 5강 : 기초 프로그램 설치 및 설정 - 6강 ~ 13강 : MySQL 개념 및 기능 설명 - 14강 ~ 29강 : VS코드 개념 및 기능 설명 - 30강 : VS코드에 MySQL 정보 연결 - 31강 ~ 32강 : VS코드에 MySQL 정보 연결 + POSTMAN 설치 및 사용법 - 33강 : 프로젝트 깃허브 연결 - 34강 ~ 39강 : codepen + fetch + VS코드 연결 + cors - 40강 ~ 42강 : API 이용해 뷰 구성 -- + 명언앱----- [ 내부 ] 1. 깃 리포지터리 생성 후 VS코드와 연결 2. DB설계, 랜덤 단건 API구현 - sql, vscode 3. 랜덤 단건조회 시 조회수 1 증가 + 수정API 구현 - vscode 4. 랜덤 명언 표시 및 다른명언 버튼 추가 - codepen(리액트), vscode 5. 좋아요, 싫어요버튼(연동) - codepen(리액트), vscode, sql [ 외부 ] - codepen(리액트) 1. 외부데이트 받아오기(랜덤으로) 2. 명언앱 꾸미기, 상단바, 하단바 3. 좌우버튼 작동 + 순환기능 4. API에서 받아온 데이터와 연동 5. 배포방법 [문장을 파싱하여 json형태로 변경] - 9강 # 2. 흐름별 설명 ## 설치외 1. 【 XAMPP 】 - 설치 요소 中 MySQL 선택 - config : my.ini에서 "lower_case_table_names = 2" 추가 - start : localhost를 실행시키기 위해 미리 판깔아두는 느낌 - mysql cmd 입력 * 클라이언트로 서버접속 : mysql -u root * sbsst 계정 생성, 비번 설정, 권한부여 : GRANT ALL PRIVILEGES ON \*.\* TO sbsst@\`%\` IDENTIFIED BY 'sbs123414'; * exit or Ctrl + C * sbsst 계정으로 다시 로그인 : mysql -u sbsst -p * exit or Ctrl + C

2. 【 D2Coding 폰트 】 - D2Coding -> D2CodingBold 다운

3. 【 SQLYog 설치 】 - MySQL 상위버전 - 글꼴 : D2Coding - 일반 : 메시지 탭에서 경고 보기 - 탭 : 삽입공간 [크기 - 4]

4. 【 VS CODE 】 - 다운로드 진행 - work / node_projects / VSCODE를 넣을 폴더 생성 - Git Bash Here 오른쪽 클릭 후 'code .'을 입력하여 VSCODE 열 수 있다. - 기본터미널을 git bash로 설정 - npm i express : express 설치 명령어 - npm install -g nodemon : 매번 서버를 재시작하는 수고를 없앰 - npm i mysql2 : mysql2 라이브러리 실행 - 추가설치 * 한국어팩 * Material Icon Theme * Material Theme - 색테마 * Prettier - Code formatter - 기본설정 * Font Family : D2Coding. * Tab Size : 2 * Format On Save : 선택 * 터미널 - Font Size : 25 * Mouse Wheel Zoom : 선택

5. 【 GIT 】 - 다운로드 - 만약 기존에 설치되어 있으면 아래에 있는 명령어를 통해 업데이트 "git update-git-for-windows"

6. 【 NVM 】 - 설치 후 cmd에 nvm입력하여 설치확인을 해야함 - node.js 설치 * nvm install 16.15.0 [ 설치 ] * nvm use 16.15.0 [ 사용 ] * nvm list [ 확인 ]

7. 【 JS VIEWER 】 - 크롬에서 JSON 데이터를 형식에 맞춰 보여줄 수 있게해줌

8. 【 POSTMAN 】 - 서버에 구현하기 전 실험할 수 있음 - 포스트맨 회원가입 -> 설치 -> 실행 -> 로그인 - 워크스페이스 생성, personal [ 이름 : My Workspace ] - 콜렉션 생성 [ 이름 : 프로젝트 명 ] - 리퀘스트 생성 [ 이름 : 할일조회 or 할일단건조회 or 할일수정 or ... ] - METHOD 선택 : GET or POST or ... - Ctrl + Enter 로 리퀘스트 실행 ## DB설계 1. [ [ 5914 ] SQL - 명렁어 기본 형식 ](https://slog.gg/p/5914) 2. [ [ 5915 ] SQL - 데이터베이스 생성/삭제/선택 ](https://slog.gg/p/5915) 3. [ [ 5917 ] SQL 테이블 생성/삭제/제약설정 ](https://slog.gg/p/5917) 4. [ [ 5918 ] SQL 테이블 추가 ](https://slog.gg/p/5918) 5. [ [ 5919 ] SQL 데이터 삭제/부분추가/구조 수정 ](https://slog.gg/p/5919) ## VS코드 1. [ [ 5924 ] VS코드 - 에로우 펑션 ](https://slog.gg/p/5924) 2. [ [ 6370 ] 익명함수실행 ](https://slog.gg/p/6370) 3. [ [ 5922 ] VS코드 - 익스프레스의 기본 라우팅 ](https://slog.gg/p/5922) 4. [ [ 5928 ] VS코드 - 라우팅 개념 ](https://slog.gg/p/5928) 5. [ [ 5927 ] VS 코드 - 외부 모듈 불러오기 ](https://slog.gg/p/5927) 6. [ [ 5926 ] VS코드 - NODEMON ](https://slog.gg/p/5926) 7. [ [ 6070 ] VS코드 - 생성 명령어 순서 ](https://slog.gg/p/6070) 8. [ [ 5929 ] VS코드 - mysql2 라이브러리 이용해서 node.js에서 DB쿼리 실행 ](https://slog.gg/p/5929) 9. [ [ 6075 ] VS코드 - POST MAN ](https://slog.gg/p/6075) 10. [ [ 6072 ] VS코드 - 단건조회 ](https://slog.gg/p/6072) 11. [ [ 6073 ] VS코드 - 수정 ](https://slog.gg/p/6073) 12. [ [ 6074 ] VS코드 - 삭제/생성 ](https://slog.gg/p/6074) 13. [ [ 6076 ]HTTP - 프로토콜 표준(메서드, 응답코드) ](https://slog.gg/p/6076)
* [ [ 7886 ] VS코드 - VS코드 삭제 방법](https://slog.gg/p/7886) ## CODEPEN 1. [ [ 5981 ] 리액트 - 개념 및 특징 ](https://slog.gg/p/5981) 2. [ [ 5982 ] 리액트 - 기본 명령어 ](https://slog.gg/p/5982) 3. [ [ 5983 ] 코드펜 - 리액트 없이 사칙연산 로직 만드는 방법 및 설명 ](https://slog.gg/p/5983) 4. [ [ 5984 ] 리액트 - HTML을 JSX로 교체하는 방법 / 리액트를 활용한 사칙연산 ](https://slog.gg/p/5984) 5. [ [ 5985 ] 리액트 - state변수 / onChange 구현하는 방법 ](https://slog.gg/p/5985) 6. [ [ 6084 ] 리액트 - 숫자리스트 ](https://slog.gg/p/6084) 7. [ [ 6156 ] 리액트, VS코드 - fetch를 이용한 API 호출 ](https://slog.gg/p/6156) 8. [ [ 6157 ] 리액트 - 동기, 비동기 ](https://slog.gg/p/6157) 9. [ [ 6206 ] 리액트 - API에서 받아온 데이터를 이용해서 뷰 구성하기 ](https://slog.gg/p/6206) 10. [ [ 6371 ] 리액트 - fetch 입력 형식 변경(promise -> async/await) ](https://slog.gg/p/6371) ## APP 1. [ [ 6204 ] 명언 랜덤 앱 제작 (처음~조회수) ](https://slog.gg/p/6204) 2. [ [ 6661 ] 명언앱 제작 (외부데이터) ](https://slog.gg/p/6661) 3. [ [ 6264 ] 앱구현 - 기초 설정 ](https://slog.gg/p/6264) 4. [ [ 6265 ] 앱구현 - API 구현(DB내용 localhost를 통한 구현) ](https://slog.gg/p/6265) 5. [ [ 6266 ] 앱구현 - 목록 및 내용 화면에 출력 방법 ](https://slog.gg/p/6266) 6. [ [ 6376 ] 앱구현 - 화면에 작성하는 내용 DB에 반영하는 방법 ](https://slog.gg/p/6376) 7. [ [ 6662 ] 앱구현 - 커스텀 컴포넌트 ](https://slog.gg/p/6662) 8. [ [ 6663 ] 앱구현 - NewTodoForm, TodoList 컴포넌트 ](https://slog.gg/p/6663) 9. [ [ 6664 ] 앱구현 - 할일완료 여부 ](https://slog.gg/p/6664) 10. [ [ 6952 ] 앱구현 - 기능 구현 ](https://slog.gg/p/6952) 11. 배포방법 ```css 1. 배포할 코드팬의 주소 확인 2. 쿼리스트링 제거 : 주소 끝부분에 있는 ?부터 그 뒤까지 3. 주소에서 /pen/ 부분을 /debug/ 로 교체 4. to2.kr에서 주소 줄임 5. 배포 ``` ## [ GIT ] 1. [ [ 6155 ] GIT - git 명령어 종류 및 설명 ](https://slog.gg/p/6155) 2. [ [ 6154 ] GIT - 원격저장소 ](https://slog.gg/p/6154)

게시글 상세