요약 ;

• 레일즈앱 만들기
• 컨트롤러 만들기
• 모델 만들기
• index 뷰파일 만들기
• create 액션만들어서 데이터 저장하기
• show를 만들기
• edit/update action만들기
• delete action 만들기

<에러노트>

Post 모델이 없는 상태에서 Post 데이터를 가져오려고 함.

# 에러발생
에러노트NameError in TestController#index
**uninitialized constant TestController::Post**

# 상황
def index
     @posts = Post.all
end

rake db:migrate 했더니 문제, 이건 migrate에 title과 content가 인식되지 않는 문제

## 에러발생
rake aborted!
StandardError: An error has occurred, this and all later migrations canceled:

undefined method `title' for #<ActiveRecord::ConnectionAdapters::SQLite3::TableDefinition:0x00007f98467619a8> /Users/ohsekwang/codestates/ruby/r_test/db/migrate/20210804065613_create_posts.rb:4:in`block in change'
/Users/ohsekwang/codestates/ruby/r_test/db/migrate/20210804065613_create_posts.rb:3:in `change'

Caused by:
NoMethodError: undefined method `title' for #<ActiveRecord::ConnectionAdapters::SQLite3::TableDefinition:0x00007f98467619a8> /Users/ohsekwang/codestates/ruby/r_test/db/migrate/20210804065613_create_posts.rb:4:in`block in change'
/Users/ohsekwang/codestates/ruby/r_test/db/migrate/20210804065613_create_posts.rb:3:in `change'

# 문제해결
## mirate 파일에서 입력
### 수정 전
t.title :string
t.content :string

### 수정 후 
t.string :title #t.데이터 타입을 쓰고, :params로 넘겨줄 이름을 쓴다.
t.string :content

라우트 에러 : routes.rb에 post로 설정해놓고, new.erb 파일에서 method를 get를 설정해 놓음

# 에러발생
Routing Error
No route matches [GET] "/create"

# 에러해결
## new.erb 파일 수정
<form action="/create" method="get">
=>  <form action="/create" method="post">

토큰 에러이고, 이유는 보안문제이다. 임시적으로 해결방법으로 해결

## 에러발생
# ActionController::InvalidAuthenticityToken in PracticeController#result
**ActionController::InvalidAuthenticityToken**

## application_controller. rb 파일에 다음을 추가해준다.
skip_before_action :verify_authenticity_token, raise: false
skip_before_filter :verify_authenticity_token, :only => :create

버전 업되면서 사라짐 
=> skip_before_action :verify_authenticity_token, :only => :create

객체 Post에서 id=:post_id 찾을 수 없다.

## 에러 발생
ActiveRecord::RecordNotFound in TestController#show
Couldn't find Post with 'id'=:post_id
Extracted source (around line #18):          

## controller에서 show action
  def show
      @post = Post.find(params[:post_id])
  end

문제해결
## index.erb 버튼에서 수정
<% @posts.each do |post| %> # 
  <%= post.title %> **<a href="/show/:post.id">article 보기</a>**
  <%= post.content %> 
<% end %>

## 버튼의 부분을 수정
<a href="/show/:post.id">article 보기</a>
=><a href="/show/<%=post.id %>">article 보기</a>

에러 : 내용에 해당되는 데이터가 저장되지 않는 문제

• 에러 화면 이미지 캡쳐

  

## migrate 파일에서 파일명 확인
t.string :title
t.string **:content**

## new.erb에서 오타 발견
<form action="/create" method="post">
  제목 :<input type="text" name="title" /> <br />
  내용 :<input type="text" **name="centent"** /> <br /> 
  <input type="submit" />
</form>

## 오타 해결
**=> centent => content로**

에러: 토큰 에러, 보안문제, 허용하는 것으로

# 문제발생
## ActionController::InvalidAuthenticityToken in TestController#update

**ActionController::InvalidAuthenticityToken**

## :create 하나만 있었는데, :update도 추가
### 수정전
skip_before_action :verify_authenticity_token, :only => :create
### 수정후
skip_before_action :verify_authenticity_token, :only => :create, **:update**

## 문법오류
SyntaxError
**/Users/ohsekwang/codestates/ruby/r_test/app/controllers/application_controller.rb:2: syntax error, unexpected '\n', expecting =>**
Extracted source (around line **#2**):

## application_controller에서 :update추가
### 수정전
skip_before_action :verify_authenticity_token, :only => **:create, :update**

### 수정후
=>skip_before_action :verify_authenticity_token, :only => **[:create, :update]**

상황별 필기노트 & 에러노트

레일즈앱 만들기

# 터미널 창에서 쓰기 
## 레일즈 앱 처음 만들기
rails new r_test
## r_test 폴더에 들어가기 
cd r_test

컨트롤러 만들기

# 터미널 창에서 test 컨트롤러 만들기
rails g controller test

#VS코드를 실행시키기

## test_controller.rb 파일에서 index 액션 만들기
def index
end

## views의 index.erb 만들기

에러 발생 : Post 모델이 없는 상태에서 Post 데이터를 가져오려고 함.

# 에러발생
에러노트NameError in TestController#index
**uninitialized constant TestController::Post**

# 상황
def index
     @posts = Post.all
end

## 문제해결 모델 만듦

모델 만들기

# 터미널에서 모델 만들기
rails g model Post

## VS코드에서 config폴더에서 migrate 파일를 열고, 데이터 스키마 만들기
t.string :title
t.string :content

#터미널 창에서 DB를 migrate 쓰기
rake db:migrate

에러발생 : rake db:migrate 했더니 문제, 이건 migrate에 title과 content가 인식되지 않는 문제

## 에러발생
rake aborted!
StandardError: An error has occurred, this and all later migrations canceled:

undefined method `title' for #<ActiveRecord::ConnectionAdapters::SQLite3::TableDefinition:0x00007f98467619a8> /Users/ohsekwang/codestates/ruby/r_test/db/migrate/20210804065613_create_posts.rb:4:in`block in change'
/Users/ohsekwang/codestates/ruby/r_test/db/migrate/20210804065613_create_posts.rb:3:in `change'

Caused by:
NoMethodError: undefined method `title' for #<ActiveRecord::ConnectionAdapters::SQLite3::TableDefinition:0x00007f98467619a8> /Users/ohsekwang/codestates/ruby/r_test/db/migrate/20210804065613_create_posts.rb:4:in`block in change'
/Users/ohsekwang/codestates/ruby/r_test/db/migrate/20210804065613_create_posts.rb:3:in `change'

# 문제해결
## mirate 파일에서 입력
### 수정 전
t.title :string
t.content :string

### 수정 후 
t.string :title #t.데이터 타입을 쓰고, :params로 넘겨줄 이름을 쓴다.
t.string :content

index 뷰파일 만들기 중

index 뷰파일 실행 안됨
<% @posts.each do |post| %> # 
  <%= post.title %>
  <%= post.content %> 
<% end %>

## create action을 만들지 않아 데이터 저장이 안됨

create 만들어서 데이터 저장하기

#컨트롤러에서 액션 만들기
def create
      post = Post.new
      post.title = params[:title]
      post.content = params[:content]
      post.save
      redirect_to '/'
end

## routes.rb 추가
post '/create' => 'test#create'

## new.erb 파일 수정
<form action="/" method="get"> 
=>  <form action="/create" method="get">

라우트 에러 : routes.rb에 post로 설정해놓고, new.erb 파일에서 method를 get를 설정해 놓음

# 에러발생
Routing Error
No route matches [GET] "/create"

# 에러해결
## new.erb 파일 수정
<form action="/create" method="get">
=>  <form action="/create" method="post">

에러노트 : 토큰 에러이고, 이유는 보안문제이다. 임시적으로 해결방법으로 해결

## 에러발생
# ActionController::InvalidAuthenticityToken in PracticeController#result
**ActionController::InvalidAuthenticityToken**

## application_controller. rb 파일에 다음을 추가해준다.
skip_before_action :verify_authenticity_token, raise: false
skip_before_filter :verify_authenticity_token, :only => :create

버전 업되면서 사라짐 
=> skip_before_action :verify_authenticity_token, :only => :create

show를 만들기 중

# index에서 show article 버튼 만들기
<a href="/show/:post_id">article 보기</a>

## controller show action
def show
     @post = Post.find(params[:post_id])
end

# routes.rb
get '/show/:post_id' => 'test#show'

## show.erb
주제:<%= @post.title %> <br>
내용:<%= @post.content %> <hr>

에러 : 객체 Post에서 id=:post_id 찾을 수 없다.

## 에러 발생
ActiveRecord::RecordNotFound in TestController#show
Couldn't find Post with 'id'=:post_id
Extracted source (around line #18):          

## controller에서 show action
  def show
      @post = Post.find(params[:post_id])
  end

문제해결
## index.erb 버튼에서 수정
<% @posts.each do |post| %> # 
  <%= post.title %> **<a href="/show/:post.id">article 보기</a>**
  <%= post.content %> 
<% end %>

## 버튼의 부분을 수정
<a href="/show/:post.id">article 보기</a>
=><a href="/show/<%=post.id %>">article 보기</a>

에러 : 내용에 해당되는 데이터가 저장되지 않는 문제

• 에러 화면 이미지 캡쳐

  

## migrate 파일에서 파일명 확인
t.string :title
t.string **:content**

## new.erb에서 오타 발견
<form action="/create" method="post">
  제목 :<input type="text" name="title" /> <br />
  내용 :<input type="text" **name="centent"** /> <br /> 
  <input type="submit" />
</form>

## 오타 해결
**=> centent => content로**

edit 만들기

##index.erb 수정버튼
<a href="/edit/<%=post.id %>">article 수정</a> <br />

## controller edit 액션만들기
def edit
      @post = Post.find(params[:post_id])
end

## edit.erb 파일
<form action="/update/<%=@post.id%>" method="post"> #update액션에 연결되도록
  <input type="text" name="title" value="<%=@post.title%>" />
  <input type="text" name="content" value="<%=@post.title%>" />
  <input type="submit" />
</form>

## controller update 추가
def update
      post = Post.find(params[:post_id])
      post.title = params[:title]
      post.content = params[:content]
      post.save
      redirect_to :back => redirect_back(fallback_location: root_path)
  end

## routes.rb edit와 update url과 action 연결
get '/edit/:post_id' => 'test#edit'
post '/update/:post_id' => 'test#update'

에러: 토큰 에러, 보안문제, 허용하는 것으로

# 문제발생
## ActionController::InvalidAuthenticityToken in TestController#update

**ActionController::InvalidAuthenticityToken**

## :create 하나만 있었는데, :update도 추가
### 수정전
skip_before_action :verify_authenticity_token, :only => :create
### 수정후
skip_before_action :verify_authenticity_token, :only => :create, **:update**

## 문법오류
SyntaxError
**/Users/ohsekwang/codestates/ruby/r_test/app/controllers/application_controller.rb:2: syntax error, unexpected '\n', expecting =>**
Extracted source (around line **#2**):

## application_controller에서 :update추가
### 수정전
skip_before_action :verify_authenticity_token, :only => **:create, :update**

### 수정후
=>skip_before_action :verify_authenticity_token, :only => **[:create, :update]**

delete액션 만들기 중

## controller에서 delete action 만들기
def delete
        Post.destroy(params[:post_id)
        redirect_to '/'
end
## index.erb
<a herf='/delete/<%=post.id %>'>article삭제 </a>

## routes.rb
get '/delete/:post_id' => 'test#delete'

키워드 : 마이그레이션 파일, db:rake, action, method,

요약 :

<모델>

• 모델을 만들기 ⇒ 어떤 데이터 타입으로 저장할 지, 하는 것!
• 뷰 페이지에서, form으로 url, method 설정
• 모델 마이그레이션
  • 실제 데이터를 저장할 때, 데이터 타입, 데이터 이름, 공개 여부 등을 다 설정해줘야 한다.

<데이터의 흐름>

• 모델을 만들어서, 저장할 데이터 타입과 이름을 설정해준다.
• config의 migrate 파일을 수정한다.
• db를 migrate한다.
• 뷰 페이지에서 사용자로부터 입력받은 데이터가 처리되도록 설정해준다.

실습

# 글을 생성하는 페이지와 read 페이지를 만든다. 
## controller에 create action 추가
## view file에 create.erb 추가
## routes.rb URL과 액션 추가

# 우선 모델을 만든다. 
rails g model Post

# form 태그 페이지
<a href="/practice/index">list post</a>

<form action="/practice/create" method="post">
  제목: <input type="text" name="title" /> <br />
  내용 : <input type="text" name="content" /><br />
  <input type="submit" />
</form>

모델 생성

키워드 : each do , create, param

요약 :

• 모델 생성
  • migrate 파일 데이터 타입설정
  • db 마이그레이트
• create
  • views create 정보입력받을 폼 만들기
  • controller action 만들기 create
  • routes.rb url, 액션연결하기
• index
  • 정보 목록 보일 views 파일 수정

필기노트

#  모델 생성
rails g model Post

## DB -> migrate 폴더에 파일 생김
t.string :title
t.text :content

# 모델 쓰기
rake db:migrate

## controller에서 create 액션에 기록 코드 저장
def create
    post = Post.new
    post.title = params[:title]
    post.content = parmas[:content]
    post.save
        redirect_to '/practice/index'
end

## index에 모든 생성된 글을 보여주는 목록을 만든다. 
<%= @posts.each do |post| %> 
  <%= @post.title %> <br>
  <%= @post.content %> <br>
<% end %>

update와 destory 이해

키워드 : redirect_to "url", redirect_to :back , edit, Post.find

요약 :

• edit
  • 컨트롤러에서 edit액션만들기, 특정 글을 선택
  • view 파일은 create와 비슷하게, 다만 form의 action, method 다르게
  • routes.rb 설정, /:post_id
• 수정버튼 만들기
  • a 태그활용
  • view 파일설정
  • routes.rb 설정, /:post_id
• 수정버튼 update 되도록 설정
  • a 태그 액션 바꾸기
• 필기노트

실습

edit

```
# routes.rb edit 추가

# controller edit 액션추가

# view edit.erb 추가
create와 동일 하게 만듦

# index.erb에 수정 버튼만들기
```

수정파일 만들기

```
# controller edit action에서 수정
def edit
    @post = Post.find(params[:post_id])
end

## routes.rb 에서 url로 post_id정보를 전달
get '/practice/edit' => 'practice#edit'

## edit.erb 저장

<form action="/practice/create" method="post">
  제목: <input type="text" name="title" /> <br />
  내용 : <input type="text" name="content" /><br />
  <input type="submit" />
</form>
```

수정버튼 만들어서 수정 처리하기

```

# index.erb 파일에 수정버튼 만들기
<a href="/practice/edit"> 글수정</a><br />

# 컨트롤러에서 데이터 베이스에서 데이터 찾아서 채워주기
edit action
@post = Post.find(params[:post_id])

## routes.rb 수정 :post_id 정보 담아서 보내주도록
get '/practice/edit/:post_id' => 'practice#edit'

## index.erb 파일에서 post.id를 가져오도록 설정
<a href="/practice/edit/<%=post.id %>"> 

## edit.erb 파일 수정! 인스턴스변수 post를 가져와서 title,content를 가져온다. 
value="<%=@post.title%>"/> 
value="<%=@post.content%>"/>
```

수정한 내용을 저장한다.

```
# 컨트롤러에서 update 액션만들기
def update
      @post = Post.find(params[:post_id])
      post.title = params[:title]
      post.content = params[:content]
      post.save
      redirect_to '/practice/index'
end

## edit.erb 수정
<form action="/practice/update/<%=@post.id%>" method="post">

## 에러발생
NameError in PracticeController#update
undefined local variable or method `post' for #<PracticeController:0x00000000011af8>

## update에서는 edit action 처럼 @인스턴스 변수를 쓸 필요가 없다. 그 이유는 인스턴스 변수로, view 파일로 넘겨줄필요가 없기 때문이다. 

def update
      post = Post.find(params[:post_id])
      post.title = params[:title]
      post.content = params[:content]
      post.save
      redirect_to '/practice/index'
end
```

삭제하기

```
# 컨트롤러에 delete action 만들기
def delete
    Post.destroy(params[:post_id])
    redirect_to :back
end

# routes.rb에 연결해주기
get '/practice/delete/:post_id' => 'practice#delete'

# index.erb에 삭제버튼 만들기
<a href='/practice/delete/<%= post.id%>'>delete </a>

## redirect_to 대신에
redirect_back fallback_location: 'practice/index'
```

키워드 : get, post, param, request, form, method, action, type, name

요약 :

• get/post로 정보를 전달할 수 있다.
• 레일즈에서의 정보전달 방법
  • form 태그는 정보를 묶어서 보내는 태그
    • method 어떤 방식으로 정보를 전달할지? get/post 등등
    • action 어디로 정보를 전달할지 ? url 주소
  • input 정보를 받는 태그
    • type 어떤 종류의 정보를 받을지? string, float?
    • name 정보의 이름 ? 전화번호? 생년월일?

데이터를 보내는 방법 3가지

<주소창에서 사용>

#URL주소창에서
/?dev=sekwang #dev는 키, sekwang은 실제 데이터

#rails에서는 params라는 메소드를 활용해서만 그 데이터를 쓸 수 있다.

## controller에서는 dev 데이터를 보기 위해서는 params 데이터에 볼 수 있다. 
name = params[:dev] # 이렇게 변수에 담아서 쓸 수 있다.

## 계산기를 만든다고 생각해보면

### routes.rb에서
get '/sum' => 'home#sum'

### controller에서
def sum
     @first = params[:first].to_i
     @second = params[:second].to_i
     @sum = @first+@second
end

### view
<%= @first%> + <%=@second%> = <%=@sum%> 입니다.

### 주소창에서
/sum?first=10&second=20

HTML 태그로 사용 : a태그, form 태그

# a 태그
<a herf='/?dev=sekwang'> 전송 <a/> 

## 버튼 누르면 주소로 이동, 포함되서 요청이 됨 => 쿼리스트링을 지정해서 사용하기 어렵다. 

#form 태그
<form action="/sum">
    <input type="text" name="first">
    <input type="text" name="second">
    <button type="submit">제출</button>
</form>

데이터가 쿼리스트링으로는 데이터 PW, 블로그글 처럼 길 때는 다른 방법 필요.

#form태그 에 method 추가 
## post저장할 데이터, 보안 
## a태그 쿼리 스트링, order, 필터, 개발자가 정해놓은 데이터가 넘겨야 할 때 정해 놓은동작 실행 
### form get 구글 검색기능을 구현할 때 많이 사용
<form action="/sum", **method='post'> ## http 메소드란 서버에 주소를 요청을 보낼 때의 방식을 뜻함/ 기본값 get / post는** 
    <input type="text" name="first">
    <input type="text" name="second">
    <button type="submit">제출</button>
</form>

# routes. rb post 추가!
**post** "sum" => "home#sum"

#application controller 수정 추가
skip_before_action :verify_authenticity_token

route 파라미터, path 파라미터 주소 자체 보내는 데이터를 포함시키는 방법! ⇒ 페이지를 불러오기 위해서 특정 값이 필수 일 때 쓴다.

##routes.rb :id가 path 파라미터
get "home/:id" => "home#show"

## home controller
def show 
    @id = params[:id]
end

## show.html.erb
id는 <%= @id %>

## 주소창에 값에 따라 달라짐 
/home/1 => id는 1
/home/sekwang => id는 sekwang

home 컨트롤러에서 action에 show로 요청을 보내려면

# get "home/:id" => "home#show" 
무조건 id데이터값이 필요함.

# 애초에 특정한 데이터를 필수적으로 받아야 하는 요청 페이지는

# path 파라미터 데이터 베이스, 모델과 연결지어 사용됨
## 특정데이터를 가져오는 로직으로 만들 것이다. 

get과 post의 차이

참조 : https://www.youtube.com/channel/UCtSgWEneJWFlSTkjHlBZlsA

ruby 언어로 웹 프로그래밍을 빠르게 할 수 있는 프레임 워크이다. 2004년 오픈소스 프로젝트 시작 후 10년후 rails 4.2가 개발 되었고, 계속적으로 업데이트 되고 있다.

Rails 원칙

MVC 패턴

M 모델 비즈니스 로직 데이터와 데이터 베이스 대한 작업하는 역할, V 사용차에 대한 요청 결과물, 화면에 표출되는 로직과 데이터를 다루는 역할 , C 모델과 뷰를 연결, 사용자의 입력을 받아 모델을 조작, 데이터의 흐름을 제어하는 역할로 나눠지고 있다. 이를 통해 서버로부터 데이터를 가져와서 브라우저 이용자에게 그 데이터를 보여주는 것까지의 패턴을 지니고 있다.

CoC(Convention over Configuration, 설정보다 규칙)

최선의 방법으로 빠르게 개발 할 수 있게 rails way를 설정해 놓았다. 즉 개발자의 설정에 대한 고민을 줄이고, rails way로 빠르게 개발할 수 있도록 한 것이다. 이에 대해서는 개발자의 성향에 따라 논쟁이 있다.

DRY(Don't Repeat Yourself, 같은 코드 반복 하지 말자)

같은 코드를 반복하지 않도록 디자인하였다.

MVC 패턴 이해하기

키워드 : 모델, 뷰, 컨트롤러

요약 :

• 모델 : 어플리케이션의 정보, 데이터를 다루는 규칙

• 뷰 : 데이터 표현을 관련하는 html,css 파일 관리

• 컨트롤러 : 모델과 뷰를 연결하고, url과 메소드 연결

• 필기노트 : MVC 패턴 이해, 모델과 뷰, 컨트롤러 각각의 역할 이해,

브라우저에서 요청이 들어왔을 때 처리과정

• routes.rb : 요청확인 → 회원정보 보여줘! ⇒ 브라우저가 보낸 URL과 controller에 액션을 연결
• controller : 브라우저 요청 확인 → 모델과 연결 -> 정보를 확인하고 view에 연결

레일즈 동작원리 이해하기

키워드 : 서버작동 , 컨트롤러 생성 , 루비코드 작성(erb 파일에서)

요약

• 동적인 웹 이해하기
• 레일즈의 RCV 동작원리 이해하기

간단한 로직

• 주소로 요청 분석(routes)
• 요청에 맞는 처리(컨트롤러 액션)
• 처리에 맞는 응답(view)

동적인 요청과 응답사이에 RCV가 있어야 한다. 동적인 웹 페이지 html만들어진다.

브라우저와 rails의 상호작용

1. 레일즈에서 컨트롤러를 만들기
2. controller파일에서 실행할 액션을 정의한다.
3. 브라우저의 url주소 대응하는 컨트롤러 액션을 연결 ⇒ config 폴더의 routes.rb 파일에서 변경해준다.
4. 컨트롤러 액션과 같은 이름의 view 파일이 생성하여, 브라우저의 보여줄 데이터를 css,html, 루비코드로 작성한다.

참조 : https://www.youtube.com/channel/UC_jdHCSOKZ66kQBwPp2CAgg

나는 페더러 선수를 좋아한다. 많은 사람들이 테니스 역사에서 최고의 선수라고 극찬한다. 그 이유는 바라보는 사람에 따라 다양할 것이다. 그 중 내 관점에서는 그가 가장 상황에 적확한 샷을 하기 때문에 좋아한다. 그는 자신의 샷을 선택할 때, 경기흐름과 상황을 파악하고, 상대방의 마음을 읽고, 그리고 자신이 가진 많은 샷과 패턴 중에서 공격포인트를 따기 좋은 것을 선택한다. 그 선택이 탁월하다. 그래서 상대선수로 예상하지 못하고, 해설자들도 감탄하는 샷을 날린다. 그의 경기를 볼 때면, 정말 상황에 적합한 샷을 구사한다는 생각이 든다. 어려운 샷이 아닌 어찌보면 쉽고 단순하지만 그 상황에서 득점포인트로 이어질 수 있는 최적의 샷을 계속하여 연구하고 만들어간다. 그것이 그의 테니스가 예술의 경지에 올랐다고 표현되는 이유일 것이다. 참조 영상 : https://www.youtube.com/watch?v=8LefyKfXUtg

"기술에 압도 당하기 보다 이 기술이 어떤 문제를 해결할 수 있을까?"

"데이터를 기술로 보지 말고, 문제해결의 수단으로 생각하라"라는 메세지는 굉장히 강렬했다. 배우기에 생소하고 어렵다고 느끼는 기술을 그 어려움에 압도당하지 않고, 어떤 문제를 해결할 수 있는 문제해결의 수단으로 어떻게 활용할 지 생각하며 대하려 노력했다. 그렇게 버티며 꾸준히 해 나가다 보니, 기능 하나 하나 구현하며 재미를 느꼈고, 에러 메세지를 만났을 때 일종의 선물 보따리를 하나씩 꺼내서 받는 느낌으로 변해 갔다. 그렇게 문제를 해결하기 위해 기술을 어떻게 사용할 지 고민해 나갔다. 참조영상 : https://www.youtube.com/watch?v=4BhmpyDK5j8

"테니스 실력을 객관적으로 나타내기 위해 지금 무엇부터 해야할까?"

앞의 2개의 블로그 글에서 언급한 것처럼 테니스의 실력을 '감'의 영역에서 '데이터' 영역으로 바꾸기 위해 고민했고 여러가지를 참조하였다. 그 과정에서 가장 중요한 것은 실력의 판단기준이 될 수 있는 데이터를 먼저 쌓는 것이었다. 실력을 가늠할 수 있는 데이터를 선택하고 그 데이터를 지속적으로 쌓아나가는 것이 먼저 필요했다. 매달 열리는 월례회 데이터를 쌓고, 그 데이터를 등록하고, 조회하고, 그 데이터에 일정 포인트를 도입해서 랭킹 포인트를 부여하는 방식으로 생각해 나갔다. 즉, 실력을 입증할 수 있는 데이터를 꾸준히 쌓고, 그 데이터를 조회할 수 있고, 그 데이터에 일정한 랭킹을 부여하기 위해서 랭킹 포인트를 부여하는 방식을 채택해 보았다.

플라스크를 활용하여 간단한 웹앱을 만들기

참조 : https://flask.palletsprojects.com/en/1.1.x/

플라스크(flask)는 무엇인가?

플라스크는 마이크로 웹 프레임워크이다. 웹 프레임워크는 웹 앱을 개발하는데, 필요한 작업들을 세부적인 작업들을 처리해줘서 웹을 개발하는데, 수월하게 도와준다. 플라스크는 파이썬의 다른 웹 프레임워크인 장고에 비해 패키지가 가볍고, 설정해야하는 것들이 상대적으로 적어서 빠르고 가볍게 웹을 만들 수 있는 장점이 있다. 파이썬의 또 다른 프레임 워크인장고와 비슷한 루비 온 레일즈 프레임워크와 써 봤을 때, MVC 패턴으로 DB, Controller, View파일을 관리하고, 그 구조로 이해해서 개발하는 것이 익숙했던 나에게는 flask가 처음에는 좀 생소하게 다가왔다. 그래서 그 구조를 이해하는데 좀 시간이 걸렸던 것 같다. 하지만, 직접 써봤을 때 미리 사전에 많은 컨벤션(convention)을 알고, 내부적으로 작동하는 원리를 이해하기 전까지 구조를 파악하기 어려운 장고와 같은 프레임워크에 비해, 플라스크가 짧은 시간 안에 이해하고, 개발하기에 용이했다. 플라스크 SQL알카미(Flask-SQLAlchemy)를 활용하다 웹 앱을 개발할 때, 플라스크 SQL알카미 활용하였다. 웹앱을 개발할 때 데이터 베이스(DB)와 상호작용하기 위해서는 SQL쿼리문을 활용해야 한다(SQL 데이터 베이스일 경우). 이 쿼리문으로 데이터베이스에 저장된 데이터를 조회하고, 저장하고, 삭제하고, 업데이트 등 다양한 것들을 실행시킨다. 그런데 파이썬 언어를 활용하여 개발을 진행하다가 SQL쿼리문을 써야하는 불편함을 겪에 된다. 이 때 파이썬 언어로 SQL쿼리문을 실행할 수 있는 SQL알카미를 활용할 수 있다. Flask-SQLAlchemy는 ORM(Object Relational Mapper) 중 하나이다. ORM은 데이터베이스와 상호작용할 때, 파이썬과 같은 언어로 개발할 때 친숙한 클래스와 메소드 등을 활용하여 데이터베이스를 제어할 수 있게 해주는 것이다. 즉, 자신이 개발하고 있는 언어를 활용하여 따로 SQL쿼리문을 활용하지 않고, 개발언어 자체로 데이터베이스를 제어할 수 있도록 도와주는 것이다. 이렇게 하면 개발과정이 조금 더 수월해진다. 그리고 클래스와 메소드를 이용하여 코드를 관리하기도 편리해지는 장점이 있다.

플라스크 SQL알카미(Flask-SQLAlchemy)를 활용하다

웹 앱을 개발할 때, 플라스크 SQL알카미 활용하였다. 웹앱을 개발할 때 데이터 베이스(DB)와 상호작용하기 위해서는 SQL쿼리문을 활용해야 한다(SQL 데이터 베이스일 경우). 이 쿼리문으로 데이터베이스에 저장된 데이터를 조회하고, 저장하고, 삭제하고, 업데이트 등 다양한 것들을 실행시킨다. 그런데 파이썬 언어를 활용하여 개발을 진행하다가 SQL쿼리문을 써야하는 불편함을 겪에 된다. 이 때 파이썬 언어로 SQL쿼리문을 실행할 수 있는 SQL알카미를 활용할 수 있다.

Flask-SQLAlchemy는 ORM(Object Relational Mapper) 중 하나이다. ORM은 데이터베이스와 상호작용할 때, 파이썬과 같은 언어로 개발할 때 친숙한 클래스와 메소드 등을 활용하여 데이터베이스를 제어할 수 있게 해주는 것이다. 즉, 자신이 개발하고 있는 언어를 활용하여 따로 SQL쿼리문을 활용하지 않고, 개발언어 자체로 데이터베이스를 제어할 수 있도록 도와주는 것이다. 이렇게 하면 개발과정이 조금 더 수월해진다. 그리고 클래스와 메소드를 이용하여 코드를 관리하기도 편리해지는 장점이 있다.

데이터를 저장, 조회, 삭제, 수정, 랭킹포인트를 부여할 수 있는 웹앱

위의 그림과 같이 routes폴더와 templates 폴더를 만들어서 관리한다. routes폴더는 실제 사용자가 입력하는 URL주소와 model파일, view 파일간의 상호작용할 수 있도록 일종의 가이드 역할을 해준다. 아래의 그림과 같이, 각 URL 주소에 따라 서로 다른 페이지를 보여준다. 그리고 그 페이지에서 입력되거나 처리된 파일들을 DB와 상호작용하여 저장하고, 삭제하고, 조회하도록 컨트롤 한다. 그 일련의 과정을 어떻게 해야할 지 이 폴더의 파일들을 관리한다. templates 폴더에서는 각각의 웹 페이지에서 사용자에게 보여줄 화면을 어떻게 구성할지 코드로 구현해 놓은 파일들을 모아 둔다. 사용자가 URL주소를 입력하면, 그에 해당하는 view파일을 불러와서, 사용자에게 그 화면을 보여준다. 즉routes의 파일들과 URL를 통해 상호작용할 때 사용자에게 보여줄 view파일을 관리한다.

화면구성

실제 웹앱의 기능

우선 메인 페이지에는 실제 경기한 기록들이 나타난다. 대회 종류, 월례회 일정, 이긴 선수들, 진 선수들, 획득한 게임수 등을 나타내준다.

다음으로 이런 월례회 결과를 입력할 수 있는 페이지가 있다. 대회 종류, 월례회 일정, 이긴 선수들, 진 선수들, 획득한 게임수를 입력하여 저장할 수 있다.

그리고 이렇게 입력한 정보들 중 자신의 결과를 알아보고 싶으면 조회할 수 있다. 아래와 같이 자신의 이름을 입력한 후 GET 버튼을 누르면, 자신의 경기 결과만 조회해볼 수 있다.

그런데 만약 입력한 결과 값이 실수로 인해 다르게 입력되었을 경우, 수정할 수 있다. 예를 들어 위에 3번째 경기의 winner2의 이름과 loser1의 이름 그리고 Num of loser game이 수정해야할 경우 아래와 같이 수정할 수 있다.

그리고 각 경기에 대한 결과를 바탕으로 랭킹 포인트를 부여하여, 자신의 이름을 입력하면 랭킹 포인트를 확인할 수 있다.

에러의 대한 두려움이 많이 사라지다

참조영상 : https://www.youtube.com/watch?v=xBG4xGX6D_Q

이번 프로젝트를 통해서 가장 크게 느낀 것은 에러에 대한 두려움이 많이 사라졌다는 것이다. 새로운 기능을 추가할 때 만나는 에러를 조금 더 담담하게, 그리고 일종의 선물을 받는 것처럼 느끼려고 노력했던 시간이었다. 그리고 작은 기능하나가 구현되었을 때 느끼는 희열감도 느낄 수 있었다. 에러가 발생하는 것이 문제가 아니라 그 에러를 두려워하는 나의 마음의 문제임을 느꼈던 시간이었다. 매 공마다 최선을 다하는 흙신 라파엘 나달의 말처럼, 에러에 두려워하는 나의 마음을 다 잡을 수 있었던 시간이었다.

왜 관계형 데이터 베이스를 배워야 하는가?

스프레드 시트와 비교 (데이터가 중복된다면 중복을 제거하여 사용가능)

참조 : 생활코딩 데이터베이스

저자들의 정보를 따로 뺌.

topic정보 author_id를 부여하여 중복이 사라짐.

author_id로 식별가능해진다.

장점이 생겼지만, 단점이 생긴 부분

하나의 테이블은 한눈에 직관적으로 판단가능. 하지만 중복을 제거 못함.

테이블을 두개로 쪼갰을 때, 비교해서 표를 확인해야하는 문제가 생김.

별도의 테이블로 보관하여 중복이 없으면서도, 하나의 표로 확인하고 싶어진다.

에러노트 : AUTO_INCREMENT를 사용한 columns은

## 에러 발생 코드
CREATE TABLE author(
        id INT NOT NULL AUTO_ICREMENT, 
        name VARCHAR(100) NOT NULL, 
        profile TEXT NULL);

## AUTO_ICREMENT를 설정한 columns은 PRIMARY KEY로 설정해야한다.

## 해결코드
CREATE TABLE author(
        id INT NOT NULL AUTO_ICREMENT, 
        name VARCHAR(100) NOT NULL, 
        profile TEXT NULL,
        PRIMARY KEY(id));

AUTO_ICREMENT를 설정한 columns은 PRIMARY KEY로 설정해야한다.

에러노트 : 작은 따옴표 하지 않았을 때

## 에러 발생 코드
INSERT INTO author (name, profile) VALUES(michael, data sciendtist); 

## 따옴표 추가
INSERT INTO author (name, profile) VALUES('michael', 'data sciendtist'); 

테이블에 칼럼추가

ALTER TABLE topic ADD author_id INT;

UPDATE topic SET author_id=2 WHERE id=3;

테이블을 합쳐서 보기

## topic과 author 테이블을 합치는데, 기준은 topic의 author_id와 author의 id로 합친다.
SELECT * FROM topic LEFT JOIN author ON topic.author_id = author.id

테이블 분리

테이블 네임 바꾸기!

## 새로운 이름 하기! 
RENAME TABLES topic TO topic_backup

JOIN

topic 테이블의 author_id의 값과 author 테이블의 id값을 붙여봐

# topic 테이블 확인
SELECT * FROM topic;

#author 테이블 확인
SELECT * FROM author;

# topic 테이블의 author_id와 author 테이블의 id를 기준으로 테이블을 합쳐서 보여줘
SELECT * FROM topic LEFT JOIN author ON topic.author_id = author.id

에러노트3

중복된 걸 없애주고 보이도록 한다.

에러 발생: 애매 모호 하다ㅏ. 왜냐하면 topic id와 author id가 중복되기 때문이다.

## 에러 발생코드
SELECT id,title,description,created,name,profile  FROM topic LEFT JOIN author ON topic.author_id = author.id;

## 에러 해결 코드
SELECT topic.id,title,description,created,name,profile  FROM topic LEFT JOIN author ON topic.author_id = author.id;

## id의 값을 topic_id라는 값으로 변환하여 보여주기
SELECT topic.id AS topic_id,title,description,created,name,profile  FROM topic LEFT JOIN author ON topic.author_id = author.id;

중복은 없앤다는 것이 중요한 의미!

위에 테이블처럼 짜놓으면, 다 바꾸어야 함.

그런데 아래 테이블 처럼 분리한다면 유기적으로 연결되기 때문에, 자동으로 변화될 것이다.

Join을 통해 관계 가능.

comment 테이블 만들기

create table comment (
    -> id int(11) not null auto_increment,
    -> description varchar(130) null,
    -> author_id int(11) null,
    -> primary key (id)
    -> );

comment를 쓴 사람이 누구인지 보고싶다.

## 코멘트 확인
SELECT * FROM comment'

## author 확인
SELECT * FROM author;

## comment와 author를 결합하여 확인
SELECT * FROM comment LEFT JOIN author ON comment.author_id = author.id;

## 정렬하여 확인
SELECT comment.id AS comment_id, description, name, profile FROM comment LEFT JOIN author ON comment.author_id = author.id;

File에서 벗어나 전문적인 소프트웨어 개발 1960년대부터

1970년 IBM 관계형 데이터 베이스를 만들었다.

데이터를 표의 형태로 검색을 빠르고 편리하고 안전하게 가능하다.

My SQL

오픈 소스

웹이 폭발적으로 성장하면서, 데이터 베이스 찾게 됨.

자연스럽게 mySQL를 사용하면서 동반성장을 하게 됨.

2. 데이터 베이스의 목적

스프레드 시트와 데이터 베이스의 차이

스프레스 시트에서 필터로 정렬가능하다.

데이터 베이스는 컴퓨터 언어를 통해서 제어가 가능하다.

토픽에서 author 라는 행에서 sekwang이라는 것만 찾아줘 
SELECT * FROM topic WHERE author = 'sekwang';

id가 큰 수부터 해줘! 
SELECT * FROM topic WHERE author = 'sekwang' ORDER BY id DESC;

왜 컴퓨터 언어를 통해서 데이터를 제어할 수 있는 것이 중요한가?

데이터 베이스를 통해 저장된 것, 웹, 앱으로 공유가능, 인공지능으로 분석 가능하다.

3. MySQL 설치

데이터 베이스의 구조

연관된 표들을 고통

표에 저장이 된다.

연관된 데이터를 그룹핑하는 것 ⇒ 스키마

이미지참조: 생활코딩

데이터 베이스의 효용

1. 자체적인 보안체계, 데이터 안전하게 보관 가능
2. 권한기능, 여러 사람을 등록하여, 데어터 접근 권한을 차등적으로 줄 수 있다.

4. 스키마

데이터 베이스 생성

# 데이터 베이스 생성
CREATE DATABASE '데이터베이스명';

# 데이버 베이스 삭제
DROP DATABASE '데이터베이스명';

# 데이버 베이스 확인
SHOW DATABASES;

# 데이터 베이스 사용하기
USE '데이터베이스명';
## 핵심은 검색해서 하나씩 찾으면 된다.

5. SQL과 테이블

SQL

Structured, 정리정돈

Query, 요청한다, 질의한다.

Language, 공통의 약속, 언어

SQL 쉽고 중요하다.

1. 어떤 컴퓨터 언어보다도 쉽다. html,sql
2. 중요하다.

용어정리

table

수평 : row, record 행 ⇒ 데이터 자체

수직 : columns, 열 ⇒ 데이터의 구조

참조: 생활코딩

table 생성

create table in mysql cheat sheet

https://devhints.io/mysql

입력값을 규제한다.

id 값은 숫자로 결정해 놓는다.

## 테이블 만들기 id 생성 칼럼이름, 데이터 타입, 보여줄것
CREATE TABLE topic(
    -> id INT(11) NOT NULL AUTO_INCREMENT, # 값이 없는 걸 허용하지 않겠다. / 자동으로 ID값 생성
    -> title VARCHAR(100) NOT NULL,
        -> description TEXT NULL,
    -> created DATATIME NOT NULL,
    -> author VARCHAR(30) NULL,
    -> profile VARCHAR(100) NULL,
    -> PRIMARY KEY(id)

PRIMARY KEY는 고유한 값을 가지는 것! 

에러 노트

첫번째 에러

두번째 에러

두 철자 에러가 발생하여 에러가 발생했다.

CREATE TABLE topic(
id INT(11) NOT NULL **AUTO INCREMENT**, 
title VARCHAR(100) NOT NULL, 
description TEXT NULL, 
created **DATATIME** NOT NULL, 
author VARCHAR(30) NULL, 
profile VARCHAR(100) NULL, 
PRIMARY KEY(id));

두개를 수정해주고 정상적으로 작동하였다. 
**AUTO INCREMENT => AUTO_INCREMENT**
**DATATIME => DATETIME**

새로운 비밀번호를 입력할 때

SET PASSWORD = PASSWORD('변경할 비밀번호')

7. CRUD

INSERT(생성)

# mysql 접속
./mysql -uroot -p

# 데이터 베이스를 보기
SHOW DATABASES;

# 데이터 베이스를 사용하기
USE '데이터베이스명'

# 데이터 베이스의 테이블 보기
SHOW TABLES;

# 테이블의 구조 확인
DESC '테이블명';
DESC topic

# 데이터 베이스의 테이블에 값을 추가한다. 
INSERT INTO '테이블명' (title,description,created,author,profile) VALUES('MySQL','MySQL is ....',NOW(),'michael','Data Scientist')

# 현재시간 작성됨
NOW()

SELECT(선택) : mysql select syntax

# 추가된 데이터 베이스 보기
SELECT * FROM topic;

# 각각 칼럼들을 확인
SELECT title, id, description, created, author, profile FROM topic;

# 필요한 데이터가 가져오고 싶을 때
WHERE author = '작가명'

# 정렬하기 
ORDER BY id DESC;

# 제한을 걸어서 몇개 볼지 생각
LIMIT 2;

UPDATE

# topic 테이블에서 title 칼럼에서 'oracle'인 데이터를 id 순서 대로, 2개만 가져와라!
SELECT * FROM topic WHERE title='oracle' ORDER BY id DESC LIMIT 2;

# UPDATE하기 
## topic 테이블의 id=3에서 title 칼럼을 'MySQL'로 수정하고, description 칼럼은 'MySQL is ...'으로 수정한다.
UPDATE topic SET title='MySQL', description='MySQL is ...' WHERE id=3;

DELECT

# DELETE FROM topic WHERE 

## topic 테이블의 title이 oracle인 것 삭제
DELETE FROM topic WHERE title='oracle';

• 안전하고, 편리하고, 빠르게 사용 가능
• 다양한 DB가 있음

데이터 베이스의 본질

어떻게 입력하고 출력하는지를 아는 것이 중요하다.

데이터 베이스의 핵심적인 작업

• 데이터 입력 : Create, Update, Delete
• 데이터 출력 : Read

File vs Database

파일의 한계점

작성자, 날짜, 본문 등 정렬을 할 수 없다.

스프레드 시트로 해결

• 하지만 구조를 먼저 작성한다.
• 제목, 본문, 작성일, 저자, 소개
• 저자별로, 필터로 확인할 수 있다.
• 구조적으로 데이터를 입력하니 훨씬 편함

데이터 베이스로 가면

• 프로그래밍적으로, 컴퓨터 언어로 데이터를 추가하고, 수정,삭제, 읽을 수 있다.
• 하지만 전문적인 DB 소프트웨어들은 가지고 자동화할 수 있다.
• 이것이 스프레트 시트와의 차이이다.

#test.html 파일에서

## 컨테이너를 만들어서 버튼을 만든다.
<div class="container card" style="...">
  <div class="row justify-content-center container">
    <div class="content">
      <h1>csv 파일을 넣어주세요!</h1>
      **<form method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        <input type="file" name="document" id="document" required="required" />
        <button id="submit" class="btn-primary">Upload</button>
      </form>**
    </div>
  </div>

## 파일을 업로드 할 수 있도록 버튼을 만든다. 
<form method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="file" name="document" id="document" required="required" />
    <button id="submit" class="btn-primary">Upload</button>
</form>

views.py에서 함수를 만든다.

# views.py

## test 함수를 정의한다.
def test(request):

    context={}     

    if request.method == 'POST': ## 제출했을 때 method가 작동
          uploaded_file = request.FILES**['document']** ## test.html의 id_name이름을 넣는다.

            **print(uploaded_file) ## 업로드 파일의 이름 보여줌.**

    return render(request, 'test.html')

atp_tennis_1998to2021.csv파일을 보여줌.

# views.py 파일
## 파일을 추가해주기 

from django.core.files.storage import FileSystemStorage ## 라이브러리를 가져오고

## csv 파일을 가져오고, save한다. 
if uploaded_file.name.endswith('.csv'):
        #save to file in chartdata folder
        savefile = FileSystemStorage() ## 가져옴

                name = savefile.save(uploaded_file.name, uploaded_file) ## 이름과 파일

# views.py 파일
## 파일을 추가해주기 

#파일이 어디 있는지 안다.
      # courrent diretory of the project
        d = os.getcwd() 
        print(d)
        file_directory = d+'\chartdata\\'+name

        readfile(file_directory)

        return redirect(results)

      else: 
          messages.warning(request, '파일이 제대로 업로드 되지 않았습니다!')


    return render(request, 'test.html')

파일을 넣어주고, 리다이렉션 해준다.

main forms.py를 추가해준다.

## forms.py

from django import forms

class UploadFileForm(forms.Form):
  title = forms.CharField(Max_length=50)
  file = forms.FileForm

result.html 파일을 만든다.

from django.contrib import admin
from django.urls import path
from main.views import test,results,index

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', index),
    **path('test/', test),
    path('results/', results)**
]

urls.py파일에 추가해준다.

# views.py

from django.contrib import messages #메세지

## test 함수를 정의한다.
def test(request):

    context={}

    if request.method == 'POST':
      uploaded_file = request.FILES['document']

      print(uploaded_file)

      if uploaded_file.name.endswith('.csv'):
        #save to file in chartdata folder
        savefile = FileSystemStorage()

        name = savefile.save(uploaded_file.name, uploaded_file) 


      #파일이 어디 있는지 안다.
      # courrent diretory of the project
        d = os.getcwd() 
        print(d)
        file_directory = d+'\chartdata\\'+name

        readfile(file_directory)

        **return redirect(results)

      else: 
          messages.warning(request, '파일이 제대로 업로드 되지 않았습니다!')


    return render(request, 'test.html')**

판다스를 활용하여 파일 읽어오기!

# import pandas as pd 
## readfile 함수 만들기

def readfile(filename):

    my_file = pd.read_csv(filename, sep='[:;,|_]', engine = 'python')

    data = pd.DataFrame(data=my_file, index=None)

    print(data)

마이그레이션에서 에러 발생

## 오타문제

class UploadFileForm(forms.Form):
  title = forms.CharField**(max_length=50)**
  file = forms.FileForm

새로운 에러 발생

## **오타 문제**

from django import forms

class UploadFileForm(forms.Form):
  title = forms.CharField(max_length=50)
  **file = forms.FileField**

db파일 migrateion 제거 부터 다양한 에러 해결해보았지만, 해결되지 않음.

어떻게 해야할 지 고민

에러메세지 : file을 찾을 수 없다는 에러 메세지가 떴다.

에러발생

진행하면서 깨달은 점

데이터 베이스에 대한 개념을 이해하고 있지 못하다는 것을 깨달았다. 그래서 데이터 베이스에 대한 개념을 이해하고 해결해야함을 느꼈다.

데이터 사이언스를 공부하기 위한 기초 개념들 정리해본다.

• CSV
• pandas
• EDA
• 특성 공학(Feature Engineering)
• 데이터 조작(Data manipulation)
• 시각화란?

질문과 => 검색키워드 정리

• 어떻게 하면 폴더 안에 파일을 한꺼번에 가져올 수 있을까? ⇒ os.listdir
• 어떻게 하면 csv 파일만 가져올 수 있을까? ⇒file.endswith
• 어떻게하면 하나의 데이터 프레임으로 만들 수 있을까? ⇒ concat, list comprehesion
• 인덱스 정리 ⇒ reset_index
• 소수점 자리수 정리 ⇒ round
• 데이터를 어떻게 합칠까? ⇒ concat
• 어떻게 시각화 할 수 있을까? ⇒matplotlib
• 어떻게하면 둥그런 형태로 차트를 그릴 수 있을까?⇒ pie chart
• 어떻게하면 각 연도별 횟수를 시각화할 수 있을까? ⇒ bar plot

페더러 경기 데이터를 가져오기

테니스 데이터를 바탕으로 내가 배워나간 개념들을 하나씩 정리해 나간다.

우선, 테니스 데이터를 가져온다. 테니스 데이터를 구하기 위해 여러가지 검색을 하였는데, 테니스 데이터를 오픈 소스로 제공하는 분의 githube를 찾았다(자원봉사 형태로 자료를 모으고, CSV 형태로 자료를 제공한다). 그 자료를 바탕으로 테니스 데이터를 분석하였다.

판다스로 페더러 데뷔년도부터 데이터 가져오기

# 경로설정
path = './페더러데뷔년도'
# 경로에 있는 모든 파일을 가져옴
file_list = os.listdir(path)
# 경로에 있는 csv 파일만 가져옴
file_list_py = [file for file in file_list if file.endswith('.csv')]

위와 같이 csv파일만을 가져오는 list를 만든다.

# 데이터 프레임을 만들기
df_tennis = pd.DataFrame()

# file_list의 csv파일을 반복적으로 concat 시켜서 하나의 데이터 프레임으로 합친다.
for i in file_list:
    data = pd.read_csv(i) ## csv 파일을 불러온다.
    df_tennis = pd.concat([df_tennis, data]) ## 불러온 csv 파일을 하나로 합친다.

<질문 ⇒ 검색키워드, velog에 구현방법 있음>

• 어떻게 하면 폴더 안에 파일을 한꺼번에 가져올 수 있을까? ⇒ os.listdir
• 어떻게 하면 csv 파일만 가져올 수 있을까? ⇒file.endswith
• 어떻게하면 하나의 데이터 프레임으로 만들 수 있을까? ⇒ concat, list comprehesion

페더러의 기본 정보 확인하기

EDA(Exploratory Data Analysis)란?

탐색적 분석, “복잡한 모델링이나 수식을 쓰지 않고, 데이터를 탐색하는 것 “이다. 데이터를 탐색하는 것이 주 목적이다.

ATP 테니스 데이터

오픈 소스 파일에 간단한 데이터 사전(data dictionary)를 제공하고 있었다.

# 필요한 특성들
##tourney_id : 투어 종류
##tourney_level : 그랜드슬램급 - G, 마스터즈급- M, 등등
##tourney_date : 경기 날짜
##winner_name : 이긴 선수 이름
##loser_name : 진 선수 이름 등

내가 원하는 정보를 찾기 위해서 어떤 특성들을 알아야 하는지 살펴 보았다.

그 선수의 경기를 찾기 위해서는 상대방이 있는 단식게임이기 때문에, ‘winner_name’과 ‘loser-name’에 특정 선수 이름을 넣고 검색하면 그 선수의 경기 정보를 찾을 수 있다. 그리고 참가한 대회의 종류가 있어서, ‘tourney_level’ 특성에서 원하는 대회를 선택하여 정보를 찾을 수 있다.

# 1998년부터 2021년까지 가장 많은 승리를 가진 선수
df_tennis['winner_name'].value_counts()
## 실행하면!
Roger Federer         1251
Rafael Nadal          1030
Novak Djokovic         962
David Ferrer           740
Andy Murray            686

# 페더러 기록만 가져오기
## 페더러가 이긴 경기
df_federer_win = df_tennis[df_tennis['winner_name'] == 'Roger Federer']
...

## 페더러가 진 경기
df_federer_lose = df_tennis[df_tennis['loser_name'] == 'Roger Federer']
...

위와 같이, 데이터의 특성과 정보를 어떤 모델링을 쓰거나 수학적인 공식을 쓰지 않고 데이터 자체를 탐색하는 것을 EDA, 탐색적 분석이라고 부른다.

페더러의 승리, 패배 알아보기

특성 공학(Feature Engineering)이란?

“해당 분야에 대한 지식이나 창의성을 활용하여 데이터 셋 안에 항목들을 재조합, 새로운 데이터 만드는 것”이다. 예를 들어 전체의 경기 수, 테니스에서는 승리한 경기 수, 패배한 경기 수, ATP 경기 중 승률 등을 구하는 것이 해당한다.

페더러의 기본 경기 정보

페더러의 정보(전체 경기수/승리/패배/승률 등)를 확인해본다.

#승리한 경기수
df_federer_win = df_tennis[df_tennis['winner_name'] == 'Roger Federer']
df_federer_win= df_federer.reset_index(drop=True) ## index 정리
#진 경기수
df_federer_lose = df_tennis[df_tennis['loser_name'] == 'Roger Federer']
df_federer_lose = df_federer_lose.reset_index(drop=True)## index 정리

#전체 경기수 
## 이긴 경기와 진 경기를 합쳐서 전체 경기수를 구한다.
df_federer_total = pd.concat(['df_federer_lose, df_federer_win'])

# 전체 경기수 / 승리수/ 패배 수/ 승률
total_num = len(df_federer_total)
win_num = len(df_federer_win) 
lose_num = len(df_federer_lose)
승률 :win_rate= win_num /total_num * 100
패배율 : lose_rate= lose_num /total_num * 100

## 전체경기/승리/패배
print('전체 경기 : ',len(df_federer_total))
print('승리 :',len(df_federer_win))
print('패배 :',len(df_federer_lose))

## 소수자리수 정리
print('페더러 승률:', round(win_rate,2),'%')
print('페더러 패배율:', round(lose_rate,2),'%')
전체 경기 :  1528
승리 : 1251
패배 : 277
페더러 승률: 81.87 %
페더러 패배율: 18.13 %

페더러의 기본 정보들을 가지고, 전체 경기수/승리/패배/승률 등을 만들어 낼 수 있다. 기존의 승리한 경기, 패배한 경기 데이터를 바탕으로 두 데이터를 조합하여 전체 경기의 데이터(df_federer_total)를 구하고, 그에 따라 승리수 or 패배수/전체 경기수를 구하여 승률과 패배율을 구하였다. 이와 같은 방식으로 기존의 데이터로 도메인지식이나 창의성을 활용하여 항목들을 재조합하여 새로운 데이터를 만들것을 '특성공학', 'Feature Engineering'이라고 한다.

<질문 & 키워드>

• 인덱스 정리 ⇒ reset_index
• 소수점 자리수 정리 ⇒ round
• 데이터를 어떻게 합칠까? ⇒ concat

페더러는 ATP 그랜드 슬램 대회에서 20회 우승한 것이 맞을까?

Data manipulation?

‘여러 개로 쪼개진 데이터를 하나의 데이터로 만들기도 하고 하나의 데이터셋에서 필요한 feature를 뽑아서 조합하는 것’을 의미한다.

여기서 전체 경기의 데이터를 만드는 과정에서 concat를 사용하여 데이터를 만들었는데, Data manipulation의 일종이라고 이야기 할 수 있다.

그랜드 슬램 정보 가져오기

로저 페더러가 그랜드 슬램에 참여한 경기를 확인하고, 그곳에서 얼마나 우승하였는지 확인해 본다.

# 페더러 전 경기 중, 그랜드 슬램 경기 뽑아내기
df_federer_grandslam = df_federer_total[df_federer_total['tourney_level'] == 'G'] ## 'tourney_level'에서 'G' 는 그랜드 슬램을 의미한다.

## 경기수
len(df_federer_grandslam) : 425

## 그랜드 슬램 라운드 확인
df_federer_grandslam['round'].value_counts()

## 그랜드 슬램 결승전 진출 확인
df_federer_grandslam_final = df_federer_grandslam[df_federer_grandslam['round'] == 'F'] ## ['round'] == 'F'] 결승진출을 이야기

## 그랜드 슬램 결승 진출 우승 확인
df_federer_grandslam_final_win = df_federer_grandslam_final[df_federer_grandslam_final['winner_name'] == 'Roger Federer' ] ## 결승 진출 후 우승하였는지 체크

### 각 그랜드 슬램별 횟수
print('그랜드 슬램 우승횟수:', len(df_federer_grandslam_final_win))
그랜드 슬램 우승횟수: 20

### 결승진출 시 승률 계산 & 소수점 2번째 자리까지!
print("페더러 결승 진출시 우승확률:", round(len(df_federer_grandslam_final_win)/len(df_federer_grandslam_final),2),'%')

페더러 결승 진출시 우승확률: 0.65 %

# 각 그랜드 슬램 우승 횟수
# 호주 오픈 우승횟수
print('호주 오픈 우승횟수 : ',len(df_federer_australian_open_win))

# 프랑스 오픈 우승횟수

print('롤랑가로스 우승횟수 : ',len(df_federer_roland_garros_win))

# 윔블던 우승횟수

print('윔블던 우승횟수 : ',len(df_federer_wimbledon_win))

# U.S오픈 우승횟수
print('U.S오픈' 우승횟수 : ',len(df_federer_U.Sopen_win))

호주 오픈 우승횟수 :  6
롤랑가로스 우승횟수 :  1
윔블던 우승횟수 :  8
U.S오픈 우승횟수 :  5

논리적으로 순차적으로 필요한 정보를 뽑아내 봤다.

1. 페더러의 전체 데이터 중에 그랜드 슬램에 경기 데이터를 뽑아낸다.
2. 페더러가 그랜드 슬램 중 결승전에 진출한 경기를 뽑아낸다.
3. 페더러가 결승전에서 이긴 경기를 뽑아낸다.
4. 페더러의 그랜드 슬램 결승전 승률을 구하기 위해 결승전 이긴 수/결승전 진출 수를 구한다.
5. 각 그랜드 슬램 별 우승 횟수를 확인한다.

어떻게 하면 각 연도별 그랜드 슬램 우승 횟수를 보여줄 수 있을까?

그랜드 슬램 우승횟수를 확인하고, 더 궁금한 점이 있었다. 각 연도별 몇 번 우승했는지 궁금했다. 그래서 어떻게 자료를 만들어야 할지 고민했다.

우선 각 연도별로 나누기로 했다.

날짜 데이터 다루기!

df_federer_grandslam_final_win['tourney_date'] = pd.to_datetime(df_federer_grandslam_final_win['tourney_date'], format='%Y%m%d')
## 년도별로 정리
df_federer_grandslam_final_win['tourney_date'] = df_federer_grandslam_final_win['tourney_date'].dt.year
df_federer_grandslam_final_win

pandas에서 datetime을 다룰 수 있다. 그래서 년/월/일로 나누어서 이용할 수 있도록 바꾸고, 년도별로 구분하여 진행했다.

## 각각의 연도 자동으로 횟수 정리/ 데이터 프레임으로 만들기
df_federer_grandslam_count = pd.DataFrame(df_federer_grandslam_final_win['tourney_date'].value_counts())
df_federer_grandslam_count

     tourney_date
2004    3
2006    3
2007    3
2017    2
2005    2
2009    2
2018    1
2003    1
2008    1
2010    1
2012

새롭게 데이터 프레임을 만들어서 각 연도별 횟수를 확인했다.

잘 눈에 안들어오는 정보 어떻게 쉽게 보여줄까?

함께 테니스를 치는 지인에게 이런 정보들을 찾을 수 있다고 이야기 했다. 그런데 눈에 안들어온다고 하였다. 한 눈에 들어올 방법이 없을까 고민했다.

시각화란?

“데이터를 한 눈에 알아볼 수 있도록 변경하는 것” 의미한다.

페더러의 구했던 정보 시각화(파이차트)

## 전체 게임 수 중에
fig = plt.figure(figsize=(5,5))

plt.title('No. Roger Federer wins and losses throughout his careers')
plt.pie([df_federer_win.count()[0], df_federer_lose.count()[0]], labels=[f'{df_federer_win.count()[0]} matches win', f'{df_federer_lose.count()[0]} matches lose'], textprops={'fontsize':20})

## 승률
fig = plt.figure(figsize=(5,5))
plt.title('Rate. Roger Federer wins and losses throughout his careers')
plt.pie([win_rate, lose_rate], labels=[f'{win_rate}% win_rate', f'{lose_rate} % lose_rate'], textprops={'fontsize':20})

페더러는 연도별로 몇 번 그랜드 슬램을 우승하였나?

## 우승횟수 정리
plt.title('No. Grandslam Championships')
plt.yticks([1,2,3,4])

plt.bar(df_federer_grandslam_count.index, df_federer_grandslam_count['tourney_date'])

<질문 & 키워드>

• 어떻게 시각화 할 수 있을까? ⇒matplotlib
• 어떻게하면 둥그런 형태로 차트를 그릴 수 있을까?⇒ pie chart
• 어떻게하면 각 연도별 횟수를 시각화할 수 있을까? ⇒ bar plot

앞으로 더 살펴볼 수 있는 것들

• 마스터즈 급 우승
• 투어급 우승
• 연속 주간 세계랭킹 1위 지속기간
• 각 선수별 통계자료 확인, 함수, 클래스화
• 이형택, 권순우 국내 선수들 기록 확인

데이터 사이언스로서 앞으로 진행해 나갈 것

“로저 페더러는 정말 그랜드 슬램을 20회 우승했을까?”라는 질문으로 실제 테니스 데이터를 다뤄보았다. 이를 통해 데이터 분석에서 필요한 4가지 개념을 정리했다. EDA, Feature Engineering, Data Mainpulation, 시각화를 개념정리하고 실제 어떤 것들인지 살펴보았다. 9개월간 데이터 사이언스를 배운 시점에서 하루하루 배웠던 개념들을, 내가 가장 익숙하고 관심있는 데이터들을 활용하여 하나씩 정리해 나갈 것이다. 그 첫번째 시작이다.

마치며.

로저 페더러를 고트(GOAT, Greatest Of All Time : 역대 최고의 선수)라고 부르는지 그 이유의 첫번째 근거인 그랜드 슬램 20회 우승을 실제로 그런지 알아보았다. 방송국 혹은 위키피디아에서 제공하는 데이터를 확인하는 것이 아니라 실제 ‘날 것 데이터’(low data)에서 확인해보는 과정을 거쳤다. 이렇게 실제 내가 알고 있는 것들에 대해서 로우 레벨에 데이터에서 실제 시각화까지 하는 과정을 하나씩 정리해 나갈 것이다. 그 과정에서 내가 배우고 알고 있는 데이터 사이언스의 개념들을 차근차근 정리해 나갈 것이다.

에러노트

에러 발생

df_federer_grandslam_final_win['tourney_date'] = df_federer_grandslam_final_win['tourney_id'].dt.year

에러 메세지 : AttributeError: Can only use .dt accessor with datetimelike values

에러가 발생했다. 그런데 처음에 이해가 되지 않았다. datatime 에러는 처음 보는 것이었다.

그래서 차근차근 문제를 접근해봤다.

1. dtype으로 확인했다. 그런데 dtype이 object였다.
2. 다른 데이터를 확인해보니 dtype이 datatime이었다.
3. 코드에 문제가 있는 것으로 확인하여 다시 보았다.

df_federer_grandslam_final_win['tourney_id'].dt.year
=> df_federer_grandslam_final_win['tourney_date'].dt.year

## 착각하여 tourney_id로 잘못입력한 것

코드를 확인하고 다시 진행해보니, 제대로 작동하였다.

우선 chart.js와 부트스트랩을 가져온다.

구글에서 'chart.js'를 검색하고, '부트스트랩'을 검색하여, 편리하게 화면을 구성할 수 있도록 활용한다.

https://cdnjs.com/libraries/Chart.js

https://getbootstrap.kr/docs/5.0/getting-started/introduction/

# chart.js를 불러올 수 있게 코드를 추가한다. 
## html 파일 head태그 부분에 코드를 추가한다.
<script src=https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.min.js></script>

# 개발을 편하게 하기 위해서 부트스트랩 css코드를 추가한다.
## html 파일 head태그 부분에 코드를 추가한다.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

### 예시
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    **<script src=https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.min.js></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">**
  </head>
  <body>
  </body>
</html>

container를 활용하여, chart.js를 id를 설정해준다.

# body 태그에 div class로 화면 안에 들어갈 차트의 container 생성한다.
## canvas id로 내용을 담을 때 선택할 수 있도록 한다.
**<div class="container">
  <div class="row">
    <div class="col-md-6">
      <canvas id="myChartOne"></canvas>
    </div>
  </div>
</div>**

## 예시
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    **<script src=https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.min.js></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">**
  </head>
  <body>
    **<div class="container">
      <div class="row">
        <div class="col-md-6">
          <canvas id="myChartOne"></canvas>
        </div>
      </div>
    </div>**
    <h1>hello world!!</h1>
  </body>
</html>

script 태그로 변수를 설정하여, 차트를 그려본다.

페더러 그랜드 슬램 우승 횟수 chart.js로 나타내기

#화면을 구성하는 html 파일에 코드를 추가한다. 
## script 태그에 chart.js 코드를 추가한다. 

<script>
    let myChartOne = document.getElementById('myChartOne').getContext('2d');

    let barChart = new Chart(myChartOne, {
      type : 'bar', //pie, line, doughnut, polarArea
      data : {
        labels : ['호주 오픈','롤랑 가로스', '윔블던', 'U.S 오픈'],
        datasets : [{
          label : '페더러 그랜드 슬램 우승횟수',
          data : [
            5,
            1,
            8,
            5
          ]
        }]
      }
    });
  </script>

다음과 같이 출력된다.

그런데 차트가 뜨지 않는 현상이 생겼다.

에러메세지

# 에러메세지
Uncaught SyntaxError: Identifier 'tennisChartOne' has already been declared

## 이유 변수를 똑같이 설정했다. 
**let tennisChartOne = document.getElementById('tennisChartOne').getContext('2d');
let tennisChartOne = new Chart(tennisChartOne, {**
      type: 'pie',
      data : {
        labels : ['승률', '패배율'],
        datasets : [{
          labels : '승패율'
          data : [
          '81,87%',
          '18.13%'
          ]
        }]
      }
    })

# 에러 다시 한번발생
Uncaught SyntaxError: Unexpected identifier

## 문제는 콤마 하나를 안 찍었다. 

### 기존

let pieChartOne = new Chart(tennisChartOne, {
      type: 'pie',
      data : {
        labels : ['승률', '패배율'],
        datasets : [{
          labels : '승패율'
          data : [
          '81,87%',
          '18.13%'
          ]
        }]
      }
    });

### 변경후
let pieChartOne = new Chart(tennisChartOne, {
      type: 'pie',
      data : {
        labels : ['승률', '패배율'],
        datasets : [{
          labels : '승패율'**,**
          data : [
          '81,87%',
          '18.13%'
          ]
        }]
      }
    });

그런데도 파이차트 나오지 않음.

datasets에서 data에 들어가는 타입 변경 후 실행되었다.

# 차트 데이터에는 숫자 타입이 들어가야 한다.

##변경전
let pieChartOne = new Chart(tennisChartOne, {
      type: 'pie',
      data : {
        labels : ['승률', '패배율'],
        datasets : [{
          labels : '승패율'**,**
          data : [
          **'81,87%',
          '18.13%'**
          ]
        }]
      }
    });

## 변경후
let pieChartOne = new Chart(tennisChartOne, {
      type: 'pie',
      data : {
        labels : ['승률', '패배율'],
        datasets : [{
          labels : '승패율'**,**
          data : [
          **81,87,
          18.13**
          ]
        }]
      }
    });

이유는 data 안에 문자 타입이 아닌 숫자타입이 들어가야 실행되었다.

앞으로 진행할 부분

이제 chart.js로 어떻게 화면에 띄워야 할 지, 최소한 부분을 배웠다. 앞으로는 이 테니스 데이터의 csv 파일을 어떻게 DB에 저장하고, 그 DB에 저장된 데이터를 가져와서 웹 화면에 보여줄 지 추가적으로 공부하여야 한다. 그리고 쥬피터 노트북으로 분석했던 데이터를 어떻게 실제 웹사이트에서 연동되도록 하여야 할 지 방법을 찾아보면서 진행해야 한다.

장고의 기본 구조를 이해해 나간다.

오늘은 post/redirect, 화면이 띄우기 위해서 여러 에러에 마주하다.

request.post를 입력하러 에러 발생

# views.py

def index(request):
    print(request.post)

# 에러 메세지
에러 메세지 : AttributeError: 'WSGIRequest' object has no attribute 'post'

post라는 attribute는 없다는 에러 메세지가 발생했다. request는 대문자 POST라는 메서드만 존재

redirect에러

#test.py
def test(request):
    return redirect('/')

## 에러 메세지
NameError: name 'redirect' is not defined

## 문제해결
from django.shortcuts import render, redirect

import에 redirect를 추가 시켜주지 않아서 에러가 발생했었다.

이미지 파일 추가하는 법

#index.html 파일
## load static을 추가해준다.
{% load static %} ## 추가해준다.

  <img src="{% static 'tennis_bg.jpg' %}" width="200px" alt="" />
  <form action="/" method="POST">
    {% csrf_token %}
    <input type="text" name="id" /><br />
    <input type="password" name="pw" /><br />
    <input type="submit" value="로그인" />
  </form>

main어플에서 static 폴더를 만들고 그 안에 이미지 파일을 추가한다.

setting에서 URL을 설정해준다.

# setting.py에서

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    BASE_DIR / 'static',
]

STATICFILES_DIRS 변수를 만들어서 경로를 설정해준다.

환경변수 설정

##manage.py
import os
import sys

## 에러 메세지
NameError: name 'dotenv' is not defined

## 해결
import dotenv 추가

환경변수를 설정해 준다.

해킹을 방지하기 위해서 장고에서 key를 제공하는데, 그 키를 github에 그냥 올릴 경우 보안상에 문제가 발생한다. 그것을 방지 하기 위해서 환경변수를 설정해준다.

## .env 
SECRET_KEY="my_key" # 해서 쓰고

##setting.py
SECRET_KEY = os.environ.get['SECRET_KEY']

## 에러 발생
TypeError: 'method' object is not subscriptable

## 문제해결
SECRET_KEY = os.environ['SECRET_KEY']

이용자에게 보여지는 templete확인

# base.html
## 이미지파일을 하기 위해서 static 로드
**{% load static %}**
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <h1>hello world!!</h1>
    {% block body%}  ## body블록 시작
    {% endblock body%} ## body블록 끝

    {% block footer%} ## footer 블록 시작
    {% endblock footer%} ## footer 블록 끝

    <p>footer</p>
  </body>
</html>

# index.html
{% extends 'main/base.html' %} ## base.html에 파일을 상속해 온다.
{% block body %} ## 바디 블록 시작

  <img src="{% static 'tennis_bg.jpg' %}" width="200px" alt="" />
  <form action="/" method="POST">
    # {% csrf_token %}
    <input type="text" name="id" /><br />
    <input type="password" name="pw" /><br />
    <input type="submit" value="로그인" />
  </form>

{% endblock body %} ## 바디 블록 끝

에러 발생

에러 메세지 :{% load static %} 위치가 잘못 되었을 때

# 문제해결
base.html에서 index.html로 
{% load static %} 옮김

# 위치 바꿈

# base.html
## 이미지파일을 하기 위해서 static 로드
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <h1>hello world!!</h1>
    {% block body%}  ## body블록 시작
    {% endblock body%} ## body블록 끝

    {% block footer%} ## footer 블록 시작
    {% endblock footer%} ## footer 블록 끝

    <p>footer</p>
  </body>
</html>

# index.html
**{% load static %}**
**{% extends 'main/base.html' %} ## base.html에 파일을 상속해 온다.**
{% block body %} ## 바디 블록 시작

  <img src="{% static 'tennis_bg.jpg' %}" width="200px" alt="" />
  <form action="/" method="POST">
    # {% csrf_token %}
    <input type="text" name="id" /><br />
    <input type="password" name="pw" /><br />
    <input type="submit" value="로그인" />
  </form>

{% endblock body %} ## 바디 블록 끝

경로의 문제

에러 메세지 : {% extends 'main/base.html' %}

# index.html
**{% load static %}**
**{% extends 'base.html' %} ## main 제거**
{% block body %} ## 바디 블록 시작

  <img src="{% static 'tennis_bg.jpg' %}" width="200px" alt="" />
  <form action="/" method="POST">
    # {% csrf_token %}
    <input type="text" name="id" /><br />
    <input type="password" name="pw" /><br />
    <input type="submit" value="로그인" />
  </form>

{% endblock body %} ## 바디 블록 끝

순서의 문제

# index.html
**{% extends 'base.html' %}** ## 가장 앞부분에 나오고
**{% load static %} ## 그 다음 load static이 나와야 한다.**
{% block body %} ## 바디 블록 시작

  <img src="{% static 'tennis_bg.jpg' %}" width="200px" alt="" />
  <form action="/" method="POST">
    # {% csrf_token %}
    <input type="text" name="id" /><br />
    <input type="password" name="pw" /><br />
    <input type="submit" value="로그인" />
  </form>

{% endblock body %} ## 바디 블록 끝

% 파이썬 문법 오류

**{% block body% }  => {% block body%} # 띄어쓰기 없이 해야 함.**
{% endblock body%}

마치며

장고의 기본적인 화면을 띄우기 위해서 에러들과 함께 했다. 앞으로 계속 에러와 함께 할 것이다.

자신이 좋아하는 선수들의 테니스 통계 데이터를 차트화하여 볼 수 있는 페이지와 새롭게 열릴 경기에서 재미있을 만한 경기를 추천해주는 모델을 만들어 보려고 한다.

가상환경 세팅하기

우선 가상환경을 설정한다. 자신이 원하는 환경을 구축하기 위해 필요한 모듈을 모은 바구니라고 할 수 있다. 같은 모듈이라도 버전이 따라 다르고, 에러가 발생하고, 배포시 문제가 발생할 수 있기 때문에, 가상환경을 설정하여 개발하는 것이 효과적이다.

• key-word : conda environment
• https://conda.io/projects/conda/en/latest/user-guide/tasks/manage-environments.html

콘다로 가상환경 세팅

#콘다 버전확인
% conda --version

#콘다 가상환경 확인
% conda info --envs

#콘다로 새로운 가상환경 만들기 
% conda create --name 'new'

#콘다로 새로운 가상환경, 파이썬 함께 설치
% conda create --name 'new' pyhton=3.8

#콘다 가상환경 활성화하기
% conda activate new

#콘다 가상환경 비활성화
% conda deativate 

#콘다 가상환경 지우기
% conda env remove --name 'new'

콘다를 이용하여, 가상환경을 구축하고 지우는 내용을 정리했다.

장고(Django )설치

장고는 파이썬의 풀스택 프레임워크이다. 사용자에게 보여지는 웹페이지부터 DB까지 한 번에 빠르게 개발할 수 있도록 고안된 프레임워크다.

설치하기

#콘다 버전확인
% conda --version

#콘다 가상환경 확인
% conda info --envs

#콘다로 새로운 가상환경, 파이썬 함께 설치
% conda create --name tennisapp pyhton=3.8

#콘다 가상환경 활성화하기
% conda activate tennisapp

## 가상환경 실행 후 장고 설치
% pip install django

## 그 다음 장고 프로젝트 시작
% django-admin startproject tennisapp

가상환경을 세팅한 후, 가상환경에서 장고를 설치 한다. 이후 장고 프로젝트를 시작한다.

django 서버 구동 안되었을 때

#터미널 입력 메세지
## 서버를 구동시키는 명령어
python manage.py runserver

## 에러메세지
  File "manage.py", line 17
    ) from exc
         ^
SyntaxError: invalid syntax

어떤 문제인지 잘 몰랐다가, stackoverflow를 확인해보니, python3 manage.py runserver를 입력하면 실행되었다.

문제해결 key-word : "manage.py" SyntaxError: invalid syntax

sever 구동 안되는 경우

## main 못찾는 경우

File "/Users/ohsekwang/codestates/수료후 테니스 프로젝트/django(테니스웹어플)/tennisapp/urls.py", line 7, in <module>
    path('', main),
NameError: name 'main' is not defined

setting.py, urls.py, views.py를 잘 체크하여 문제없이 실행해야 한다.

#urls.py에서
from main.views import index,test

#setting.py에서
INSTALLED_APPS = [
    'main','test',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

## manage.py
if __name__ == '__main__':
    main()

개발한 내용 github에 commit 하기

로컬 환경에서 개발한 것 github에 올리기

#개발이 진행중인 해당 폴더에 간다.
% cd tennisapp

# git을 연결해준다.
% git init

# git에 추가할 내용을 정한다.
## 모든 개발 내용을 추가한다.
git add .

# 개발한 내용이 무엇인지 적어준다.
% git commit -m "tennis app start"

# github에 새로 만든 레파지토리와 로컬과 연결한다.
git remote add origin git@github.com:sekwangoh/tennisapp.git

# github에 올린다.
git push origin master

개발한 내용을 github에 올렸다.

기본적인 가상환경 세팅, 장고 설치, 장고 서버 구동, github 커밋까지 시도해봤다.