1. React 는 단지 View 일 뿐이다

   • python Django, Ruby, nodejs 등과 함께 사용하기 좋다

2. javascript 기반 (+ html)

   • 다른 프레임 워크에 대한 추가 공부가 필요없다
     (angular, vue js 등 과 다르게 다른 언어를 배울 필요가 없다)
   • function / object / …

3. composition

   • 요소(컴포넌트) 별로 나눠서 작업한다
   • 컴포넌트 란 Nav, Header, Numbers, Grid 등.. 쪼개서 작업한다 다른 곳에 붙이기 쉽다

   •  function Nav(){
          return (
            <nav>
              <ul>
                <li></li>
                ...
              </ul>
            </nav>
          )
      }
      fucntion Header(){
        return (
          <header>
            <img />
            <h1></h1>
            ...
          </header>
        )
      }
     

4. Unidirectional Dataflow

   • angular 의 경우 데이터가 view, model 로 변함
   • Data 의 변경이 곧 UI 의 변경이다 (UI 을 추가로 변경시킬 필요가 없다)
   • UI 가 Data 의 변경없이 바뀔 수 없다

5. 트랜스파일러

   • 리액트 코드를 일반 자바스크립트 코드 로 변환시켜준다

   • 웹팩 webpack.github.io : 모듈번들러

     • 브라우저가 이해할 수 있는 코드로 변경해주는 툴
     • 
     • 
       
     • 여러가지 장점들
       • 이미지 압출 저장, 자동으로 테스트 등 >> 인스타그램 풀스택 강의 수강 추천

   • reate react app : 페이스북에서 만들어준 웹팩 파일 손쉽게 이용하게 하기

     # Quick Overview
     npm install -g create-react-app
     
     create-react-app my-app
     cd my-app/
     npm start
     
     curl "http://localhost:3000"

Git 이란

기본 참고
명령어 참고

1. 프로젝트의 변경을 관리하는 버전관리 소프트웨어

2. 기본 용어

   • 커맨트 라인(Command Line): 깃 명령어를 입력할 때 프롬프트로 알려진 텍스트 기반 명령어를 입력한다.
     • 저장소(Repository): 프로젝트의 디렉토리나 저장 공간.
       • Remote Repository
       • Local Repository
     • 버전관리(Version Control): 프로젝트 히스토리의 모든 시점의 “스냅샷”을 유지
     • 커밋(Commit): 커밋하면, 그 시점의 당신의 저장소의 “스냅샷”을 찍어, 프로젝트를 이전의 어떠한 상태로든 재평가하거나 복원할 수 있는 체크포인트를 가진다
   • publish: Local Repository 에서 Commit 한 스냅샷을 Remote Repository 에 반영한다
     • 브랜치(Branch): 하나의 Repository 에 대한 여러 명이 하나의 프로젝트에서 깃 없이 작업하는 것이 얼마나 혼란스러울 것인가? 일반적으로, 작업자들은 메인 프로젝트의 브랜치를 따와서(branch off), 자신이 변경하고 싶은 자신만의 버전을 만든다. 작업을 끝낸 후, 프로젝트의 메인 디렉토리인 “master”에 브랜치를 다시 “Merge”한다.

3. 기본 동작

   • 튜토리얼

4. 주요 명령어

   • git init:
     • 깃 저장소를 초기화한다
     • 이것을 입력한 후에야 추가적인 깃 명령어들을 줄 수 있다
   • git config: 처음에 깃을 설정할 때 사용

         #Git
         $ git config --global user.name "myid"
         $ git config --global user.email "myemail@mail.com"
     

   • git status:
     • 저장소 상태를 체크.
     • 현재 저장소의 어떤 브랜치에서 작업하고 있는지 등을 볼 수 있다
   • git branch:
     • 프로젝트에 새로운 브랜치를 만든다
     • dafault branch 기준으로 새브랜치를 생성한다 (기준 브랜치 선택이 가능하다)
   • git add:
     • 이 명령이 저장소에 새 파일들을 추가하진 않는다
     • 대신, 깃의 저장소 스냅샷 에 포함된다
   • git commit:
     • 깃의 가장 중요한 명령어
     • 저장소의 스냅샷 을 생성한다
     • git commit -m “Message hear”
   • git push:
     • 로컬 컴퓨터에서 작업하고 당신의 커밋한 내용을 온라인에 적용시킨다.
     • git push [remote name] [localbranch name]: local branch의 내용을 업데이트
     • git push [server] tag [TAG]: server에 tag 전송
     • git push [server] —tags: 변경된 모든 tag 전송
     • git push [server] [L.B]:[R:B]: server 에 local branch 를 Remote branch이름으로저장
   • git checkout:
     • 체크하길 원하는 저장소로 옮겨가게 해주는 탐색 명령이다.
     • master 브랜치를 들여다 보고 싶으면, git checkout master를 사용할 수 있다.
     • git checkout [branch name]: 다른 브랜치로 전환
     • git checkout -b [branch name]: branch 생성
     • git checkout [file or folder]: git repo 기준 마지막 commit 상태로 돌림
     • git checkout [id] [file or folder]: git repo 기준 id에 해당하는 commit 상태로 돌림
     • git checkout -f: 아직 commit 되지 않은 working tree와 -index 수정정사항 모두 사라짐
   • git merge:
     • 브랜치 간 변경사항을 적용하고 싶을 때
     • git merge cats 는 “cats” 브랜치에서 만든 모든 변경사항을 master로 추가한다

5. GitHub Desktop

   • Git 의 GUI 툴
   • 다운로드 주소
   • 계정 연동: GitHub Desktop > Preferences > Accounts

Django 앱 만들기

참고

1. 시작하기 전에

   • 프로젝트 vs. 앱
     • 프로젝트는 다양한 앱을 포함
     • 앱은 웹 어플리케이션의 기능 (e.g., 웹 블로그시스템,공공 기록의 데이터베이스 또는 간단한 투표 앱)

   • virtualenv: 개발환경에서 독립된 개발환경을 제공해주는 프로그램

         # 패키지 설치
         $ sudo pip install virtualenv
     
         # 프로젝트 생성
         $ virtualenv venv_projat
         New python executable in /naver/venv/venv_projat/bin/python
         Installing setuptools, pip, wheel...done.
     
         # 가상환경 실행
         $ source ./venv_projat/bin/activate
     
         # 가상환경 에서 사용하는 python moduel 확인
         $ pip list
         Django (1.11.3)
         pip (9.0.1)
         pytz (2017.2)
         setuptools (36.2.5)
         wheel (0.29.0)
     
         # 가상환경 종료
         $ deactivate
     

Django 의 구조

• MVT 모델
  • 좋은 참고자료
  • 모델 Model:
    • DB 구조를 설정하는 컴포넌트, ORM 방식을 사용하여 SQL 문을 직접 사용하지 않고 파이썬 객체로 접근
    • 하나의 class 가 하나의 table 을 의미한다
  • 뷰 View: (== MVC 모델의 Controller)
    • 데이터를 입력받거나 표시하는 컴포넌트
  • 템플릿 Templates: (== MVC 모델의 View)
    • 사용자의 입력과 이벤트에 반응하여 Model 과 View 를 업데이트
    • 디자인 영역의 분리 및 재사용서을 높이기 위해 HTML 구조만 따로 모아놓은 것
    • {{변수}}, {{% 태그 %}}
흐름도
• 
• 
  

2. Django 프로젝트

   • 생성

       # django-admin.py {{실행 파라미터}} {{프로젝트명}}
       $ django-admin.py startproject djangoproject
     

   • 프로젝트 구조

       djangoproject/
           ㄴ manage.py # 초기화, 마이그레이션, 실행 등을 수행하는 파일
           ㄴ djangoproject/
                   ㄴ __init__.py
                   ㄴ settings.py # 웹사이트 설정이 있는 파일
                               - ALLOWED_HOSTS: 접근 가능 호스트 정리
                               - DATABASES: 사용할 DB 정보
                                   - ENGINE:
                                       'django.db.backends.sqlite3'
                                       'django.db.backends.postgresql_psycopg2'
                                       'django.db.backends.mysql'
                                       'django.db.backends.oracle'
                               - INSTALLED_APPS:
                                   - django.contrib.auth – 인증시스템
                                   - django.contrib.contenttypes – 컨텐츠타입 프레임워크.
                                   - django.contrib.sessions – 세션프레임워크
                                   - django.contrib.sites – 한번의 Django설치로 여러 사이트 관리를 위한 프레임워크.
                                   - django.contrib.messages – 메시징 프레임워크
                                   - django.contrib.staticfiles – 정적파일을 관리하기 위한 프레임워크.
                                   - **신규 생성할 앱을  프로젝트에 추가한다.**                                
                   ㄴ urls.py # urlresolver 가 사용하는 패턴 목록을 포함
                   ㄴ wsgi.py # wsgi 호환 서버에서 서비스를 하기 위한 진입점
     

     • wsgi.py how to use

3. Django 앱

   • 생성

     $ python manage.py startapp django1stapp
     

4. 실행

        $ python manage.py makemigrations
        # model 의 변화 사항을 migration 폴더에 python 파일로 저장함.
        # 위에서는 ./migrations/  폴더내에 0001_initial.py 파일이 새로 생김
        # 아직 database 에 model table 생성된것은 아님
   

        $ python manage.py migrate
        # db table 생성
   

        $ python manage.py runserver ip:port
        # django project run