10/20 - 프로젝트 시작(프론트엔드)

내가 다니는 학원인 '광주 스마트 인재개발원'에서 2차 프로젝트를 시작하였다.

1차 프로젝트는 자바로만 구현을 하여 '야구게임'을 만들었다.

 

그런데 이번에는 작성할 산출문서도 많다.

---

이번 핵심 프로젝트 주제는 "SNS"기반 리버스 엔지리어링 이다.

그래서 트위터+렛플을 결합하여 웹 사이트를 만들 것 입니다.

 

팀은 4명으로 구성되어있고

나 = 프론트엔드 / 팀원3명 = 백엔드 이다.

풀스택으로 공부중이라 프론트엔드가 어디부터 어디까지 인지 몰랐는데 선생님께 여쭤보니까

화면구성, 값을 받아오고, 값을 넘겨주는것 까지 프론트엔드 이다

 

한마디로 눈에 보이는 화면을 구성하고 데이터 베이스를 연결해야 한다.

---

우리팀에는 디자이너가 없으므로 무료 템플릿을 뜯어서 고칠것이다.

템플릿 없기는 멘땅에 해딩이기 때문에..

https://www.creative-tim.com/templates/react-free 

28+ React Free Themes And Templates @ Creative Tim

나는 이사이트의 템플릿을 이용할 예정이다.

 

저는 이것을 가져와서 사용할 것 입니다.

---

Visual Studio Code에서 파일을 열 것입니다.

 

무료 템플릿을 여는 방법은

PS C:\Users\hyewon\Desktop\material-dashboard-react-main> npm install
PS C:\Users\hyewon\Desktop\material-dashboard-react-main> npm start

 

---

내가 가져온 리액트 화면 구성이다.

• node_modules : CPA를 설치하면 기본적으로 babel, webpack등 여러 패키지가 자동으로 설치 된다. 이러한 패키지를 모아둔 곳이 node_modules이다. 
• public: React 프로젝트의 정적(Static)파일들이 저장된 폴더이다. 
• src : *리액트를 작업할 폴더*

 

---

<Public>

• favicon.icon: 웹사이트의 상단에 위치하는 '파비콘' 이미지입니다.(파비콘이란? 웹 사이트 또는 웹 페이지를 대표하기 위해 웹 브라우저에서 사용되는 16*16 픽셀의 작은 이미지 입니다. 즐겨찾기 아이콘(favorite icon)의 줄임말로 주로 웹 브라우저 상단에 있는 탭에 표시 되는데요. 그 외에도 브라우저의 북마크바나 방문기록, 검색 결과에서 페이지 url과 함께 표시되기도 합니다.)

https://wizlogo.com/ko/favicon-generator

무료 로고 메이커 및 개인 디자이너 - Wizlogo

피버콘 무료로 만드는 사이트이다.

---

• apple-icon: 말그대로 los 어플 아이콘이다.
• idex.html: 가상 DOM을 위한 html 파일입니다.(빈 껍데기 파일)/ public 폴더에 있다. 메인 프로그램인 index.js에 대응되는 것으로, HTML 템플릿 파일이다. 이 파일이 직접 표시되는 것은 아니고, index.js에 의해 렌더링된 결과가 표시된다.

It브라우저 위에 존재하는 아콘 옆 이름은 idex.html<title>태그에서 수정가능하다

---

• mainfest.json: 웹 앱 매니페스트란 앱에 대한 정보를 담고 JSON 파일이다. 배경색은 어떠한 색인지, 앱의 이름은 무엇인지, 홈스크린 화면에 추가할 때 아이콘은 어떤 것인지 등의 정보를 담고 있다. 웹앱 매니페스트는 mainfest.json 파일명을 대부분 사용한다.

{
  "short_name": "Material Dashboard",
  "name": "Material Dashboard 2 React",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/PNG"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#1A73E8",
  "background_color": "#ffffff"
}

• short_name: 사용자 홈 화면에서 아이콘 이름으로 사용
• name: 웹 앱 설치 배너에 사용
• icons: 홈 화면에 추가할때 사용할 이미지
• start_url : 웹앱 실행시 시작되는 URL 주소
• display: 디스플레이 유형(fullscreen, standalone, browser 중 설정)
• theme_color: 상단 툴바의 색상
• background_color: 스플래시 화면 배경 색상
• orientation: 특정 방향을 강제로 지정 (landscape, portraint 중 설정)

---

• robots.txt: 

robots.txt는 웹사이트에서 크롤링하며 정보를 수집하는 검색엔진 크롤러(또는 검색 로봇)가 액세스 하거나 정보수집을 해도 되는 페이지가 무엇인지, 해서는 안 되는 페이지가 무엇인지 알려주는 역할을 하는 .txt (텍스트) 파일입니다. robots.txt 파일은 검색엔진 크롤러가 웹사이트에 접속하여 정보 수집을 하며 보내는 요청(request)으로 인해 사이트 과부하되는 것을 방지하기 위해 사용됩니다.

비유를 들어 조금 쉽게 설명하자면 robots.txt 파일은 도로에 있는 교통 표지판과 비슷한 역할을 한다고 이해할 수 있습니다. 가령 어떤 도로에 진입이 불가하다는 표지판이 있을 경우 진입하지 말아야 하는 것처럼, 검색엔진 크롤러 또한 robots.txt 에서 액세스가 허용되지 않은 디렉토리를 발견한다면 원칙적으로는 크롤링하지 않습니다.

---

• .eslintrc.json :  린트(lint)는 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운 구조체에 표시(flag)를 달아놓기 위한 도구들을 말한다. 따라서, ESLint는 Javascript 문법에서 에러를 표시해주는 도구다. ESLint를 사용하게 되면 의도치 않은 실수뿐만 아니라 전반적인 코딩 스타일을 표준화한다 => 협업 시 균일화된 스타일을 유지할 수 있다
• .gittignore:
• Prettier: 정해놓은 규칙에 따라 자동으로 코드를 정렬해 준다 Formatting ESLint에도 Formatting 기능이 있기 때문 에 ESLint의 기능은 종료해 둬야 한다.
• CHANGELOG.md:
• ISSUE_TEMPLATE.md:
• jsconfig.json:
• LICENSE.md:
• package-lock.json:
• package.json:
• README.md:

• assets: 우리가 프로젝트에 쓸 font, image 등이 담겨 있다.

이미지와, 테마, 다크모드 테마가 담겨 있다

• components:

 - 리액트로 만들어진 앱을 이루는 최소한의 단위

 - 기존의 웹 프레임워크는 MVC방식으로 분리하여 관리하여 각 요소의 의존성이 높아 재활용이 어렵다는 단점이 있었다. 반면 컴포넌트는 MVC의 뷰를 독립적으로 구성하여 재사용을 할 수 있고 이를 통해 새로운 컴포넌트를 쉽게 만들 수 있다.
 - 컴포넌트는 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node를 출력하는 함수.
 - 컴포넌트 이름은 항상 대문자로 시작하도록 한다. 
   (리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 취급하기 때문이다.

 - UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩한다.

 - “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.

 

• context:
• examples
• layouts
• App.js: 
• index.js:
• routes.js: