디자인패턴, 디자인패턴 너무나도 많이 들어보았는데, 딱히 사용하고 있지 않은 것 같은 느낌이 들어서 찾아보니, 이미 잘 사용하고 있었다.(django는 MVC디자인패턴을 사용하고 있었다!!. 찾아본 내용에 대해서 정리)

디자인패턴의 개요 

• 서로 여러 사람이 함께 개발하기 때문에, 유지보수 하거나, 새로운 기능을 추가하거나 최적화를 하기에 힘든 구조적 결함이 있다.

• 프로그램등을 개발하는 중에 발생했던 문제점들을 정리 및 특정한 '규약'을 통해 좀 더 쉽고 편리하게 쓸 수 있는 형태로 만든 것

• 한마디로 코딩 방법론이나, 코딩 컨벤션에 가깝다.

MVC 패턴

• Model, View, Controller

• User-View-Controller-Model-Controller-View User의 구조

• 시각적인 부분과 이면의 동작과 제어를 처리하는 부분을 분리하여 서로에 미치는 영향 없이도 응용프로그램을 변경할 수 있도록 한다.

• django도 MVC패턴을 따르며, django에서 model은 model, View는 template, Controller역할은 View가 한다.

• 가장 전형적인 OOP구조로서 가장 단순하며, 보편적으로 많이 사용되는 디자인패턴

• OOP참고 [[번역] OOP를 빨리 잊을 수록 여러분과 여러분의 소프트웨어에 좋습니다 | rinae's devlog](https://rinae.dev/posts/the-faster-you-unlearn-oop-the-better-for-you-and-your-software-kr)

MVP 패턴

• Model. View. Presenter

• MVC와 다르게 컨트롤러 대신에 Presenter가 View와 Model 사이를 중계해주고 있다. 따라서 Model과 View는 서로를 알 필요가 전혀 없이 Presenter만 가리키게 된다. 따라서 View와 Model의 의존성은 사라지게 된다.

• 모델은 위 MVC패턴과 동일하며 뷰와 프리젠터에서 구성 요소의 변화가 있다.

• V(View) 기본적으로는 MVC와 같이 화면에 보여지는 요소를 맡는 것은 동일하나 Controller가 사라짐에 따라서 이제 사용자의 입력을 받는 역할을 겸하게 된다. MVC에서 Controller의 역할의 일부를 얻게 되었다고 이해하면 좋다.

• P(Presenter) View에서 요청한 정보로 Model을 가공하여 View에 전달해주는 부분이다. 본질적으로는 MVC의 컨트롤러와 같지만 뷰에 연결되는 것이 아니라 그냥 인터페이스라는 점이 다르다.

MVP패턴의 장/단점

• 장점 MVC와 달리 View와 Model의 의존성이 사라졌다.

• 단점 View와 Model 사이의 의존성은 해결되었지만 대신에 View와 Presenter 사이에 높은 의존성을 가지게 되었다. 이는 MVC와 마찬가지로 어플리케이션이 복잡해질수록 View와 Presenter 사이의 의존성이 더욱 강해지고 복잡해진다.

MVVM 패턴

• Model , View, ViewModel

• VM(ViewModel) 뷰에 필요한 데이터를 준비하고 모델에 필요한 이벤트를 전달한다. 그러면서도 뷰에 종속되지 않는 뷰만을 위한 모델이라고 할 수 있다.

• 어떻게 뷰와 뷰모델, 뷰모델과 모델간에 의존성이 사라지게 되느냐. 그것은 바로 Command패턴과 Data Binding 덕분인데, 이 패턴과 라이브러리로 인해서 의존성이 완전히 사라지게 된다.

• Command패턴과 Data Binding은 각각 또 하나의 문서를 할애해서 설명이 필요할 만큼이나 긴 설명이 필요해서 해당 포스팅의 목적과 엇나갈 수 있으므로 간략하게만 짚고 넘어가자.

• Command패턴은 앞서 설명한 여러가지 디자인 패턴들 중에 하나이며 요청을 객체의 형태로 캡슐화하여 저장, 로깅, 취소를 할 수 있는 패턴이다.

• Data Binding은 XML에 만든 View들을 자동으로 알아서 만들어주는 안드로이드 라이브러리이다.

• 요약하자면 여전히 MVP패턴처럼 View를 통해 사용자의 입력이 들어오게 되면 Command패턴으로 ViewModel에 요청한다. ViewModel은 Model에게 필요한 데이터를 요청하고 Model은 응답한뒤 ViewModel에서 다시 가공해서 저장한다. 여기서 View로 다시 안돌려주냐고 할 수 있는데, View는 Data Binding을 통해 자동으로 갱신하게 된다.

MVVM 패턴의 장/단점

• 장점

1. Command 패턴과 Data Binding을 사용하여 View와 Model, 심지어 View와 View Model 사이의 의존성 또한 없앴다.

2. 테스트와 모듈화가 쉽다

3. 뷰와 모델을 연결하기 위해 사용해야 하는 연결 코드를 줄일 수 있다.

• 단점

1. View Model의 설계가 쉽지 않다.

2. 뷰가 변수와 표현식 모두에 바인딩될 수 있어서 시간이 지남에 따라 관계없는 프리젠테이션 로직이 늘어나 유지 관리하기 번거롭다.

참고 : [신입 개발자 면접 질문 시리즈](https://www.notion.so/54d624628a634c879cc93d94f54cd2d1#0c4b1ec1ee49475ebebbf3897e5d7818)

상황 : 

특정 통신을 하는 부분에서 평소에는 잘 일어나지 않지만, 특정 케이스로 통신하는데 10초 이상 걸려 걸려 있던 lock이 풀리는 케이스가 생겨버렸다. 해당 경우 통신하는 함수에 timeout을 걸어, 특정 시간 이상 회신이 오지 않게 되면 다시 retry를 하여서 넘어가도록 하였다.

그를 위해서 python function timeout을 찾아보게 되었다.

처음 고민은 파이썬은 한 줄씩 실행되는데, 이게 오래 끌고 있는지 어떻게 확인하지였다.

보통은 함수 시작 전에 print 문으로 시간을 적어주고 함수가 실행 이후에 print문을 찍어주어 시간을 측정할 수 있지만, 이번 케이스는 함수가 실행 도중에 시간을 넘게 되면 retry해주는 것을 체크해줘야 하므로, 당황 스러웠다.

생각나는 것은 파이썬의 thread를 같이 돌리거나 해야 할 것 같은데 매우 비효율적으로 보였다.

그러던 중에 signal이라는 것을 알게 되었다.

사용법은 간단하였다.

직접 만들어서 쓸수도 있지만 나는 앞으로도 쓸 것 같아 데코레이터를 만드는 방법을 택했다.

직접 만들고 보니 신기하다.

from functools import wraps
import errno
import os
import signal

class TimeoutError(Exception):
    pass

def timeout(seconds=10, error_message=os.strerror(errno.ETIME)):
    def decorator(func):
        def _handle_timeout(signum, frame):
            raise TimeoutError(error_message)

        def wrapper(*args, **kwargs):
            signal.signal(signal.SIGALRM, _handle_timeout)
            signal.setitimer(signal.ITIMER_REAL,seconds) #used timer instead of alarm
            try:
                result = func(*args, **kwargs)
            finally:
                signal.alarm(0)
            return result
        return wraps(func)(wrapper)
    return decorator


# 여기서 부턴 개인적인 testing함수
@timeout(2)
def testing():
    import time
    count = 0
    while count < 3:
        print('helloworld', count)
        count += 1
        time.sleep(1)
    return count

위에 나온 부분이 어디서든 검색해보면 볼 수 있는 timeout decorator를 만드는 방법이다.

나는 testing이라는 특정함수를 2초 안에 실행되지 못하면 5회 다시 시도할 것이고,

그래도 안되면 이후 모션들을 취할 예정이다.

count = 0

while count < 5:
    try:
        testing()
        break
    except Exception as e:
        print('timeout occur', str(e))
        count += 1

실행 결과
helloworld 0
helloworld 1
time out occur Timer expired
helloworld 0
helloworld 1
time out occur Timer expired
helloworld 0
helloworld 1
time out occur Timer expired
helloworld 0
helloworld 1
time out occur Timer expired
helloworld 0
helloworld 1
time out occur Timer expired

# testing 함수가 끝나기 위해서는 3초가 필요한데,
# timeout은 2초를 걸어줘서 이런 증상이 발생한다.

testing 함수가 끝나기 위해서는 3초가 필요한데, timeout은 2초를 걸어줘서 이런 증상이 발생한다

이를 위해 만약 timeout 시간을 5초 이렇게 설정해주면

@timeout(5)
def testing():
    import time
    count = 0
    while count < 3:
        print('helloworld', count)
        count += 1
        time.sleep(1)
    return count

# 하고 다시 실행시켜주면

helloworld 0
helloworld 1
helloworld 2

나오고 끝나게 된다. => 5초 exception이 일어나기 전에 해당 함수가 끝나고 곧바로 break함수를 타고 빠져나오게 됨

참고 사이트 :

[[PYTHON] 파이썬에서 함수를 타임 아웃하는 방법, 타임 아웃이 1 초 미만입니다. 복붙노트](https://cnpnote.tistory.com/entry/PYTHON-%ED%8C%8C%EC%9D%B4%EC%8D%AC%EC%97%90%EC%84%9C-%ED%95%A8%EC%88%98%EB%A5%BC-%ED%83%80%EC%9E%84-%EC%95%84%EC%9B%83%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95-%ED%83%80%EC%9E%84-%EC%95%84%EC%9B%83%EC%9D%B4-1-%EC%B4%88-%EB%AF%B8%EB%A7%8C%EC%9E%85%EB%8B%88%EB%8B%A4)

[[Python] 함수(스크립트) 자동 타임아웃 설정 : 네이버 블로그](https://m.blog.naver.com/PostView.nhn?blogId=stop2y&logNo=221370575532&proxyReferer=https%3A%2F%2Fwww.google.co.kr%2F)

[python - 함수가 완료되는데에 너무 오래 걸릴 때, timeout시키기 | Hashcode](https://hashcode.co.kr/questions/2203/%ED%95%A8%EC%88%98%EA%B0%80-%EC%99%84%EB%A3%8C%EB%90%98%EB%8A%94%EB%8D%B0%EC%97%90-%EB%84%88%EB%AC%B4-%EC%98%A4%EB%9E%98-%EA%B1%B8%EB%A6%B4-%EB%95%8C-timeout%EC%8B%9C%ED%82%A4%EA%B8%B0)

알아두면 좋은 migrations 명령어

1. python manage.py showmigrations => 현재 migrations이 어떻게 진행되었는지 눈으로 바로 보여준다. 

2. python manage.py migrate libs [특정 번호] => 특정 번호로 migration을 roll back해준다. 
-> 여기서 libs는 app 이름이다.

3. python manage.py makemigrations => migrations 파일을 만들어준다.

4. python manage.py migrate => migrations 파일을 직접 DB에 적용시켜준다.

최근에 migrations까지 적용한 이후에 적용되었던 테이블을 지운 경우가 있었다.

그래서 내가 원했던 것은 이 테이블을 다시 생성해주기 위해서 다시 migrate를 해주는 것이었다.

근데 migrate를 해보면 migrate를 할게 없다고 나온다. => python manage.py showmigrations으로 보아도 적용이 된 것으로 나온다.

( 아니 나는 테이블이 없다고 ㅠㅠ)

그래서 시도한 방법은 libs를 통해서 되돌리는 것이다.

그래서 libs로 그 이전 migrations으로 되돌려보니 근데 이것도 미치는게.... 이런 상황일 경우 이미 지워진 테이블이라 Unknown 테이블이라고 하면서 돌리지도 못한다. ㅠㅠ

하 그래서 해당 migrations 파일을 지우고 다시 생성했다. python manage.py makemigrations

오 그러니깐 migrations 파일이 다시 생성되었고 다시 python manage.py migrate를 돌려주었다.

이런 경우 아무리 해당 migrations 파일을 지우고 makemigrations으로 생성해봐도 이미 migration이 적용되었다고 나오고, migrate를 돌려도 no change deteched라고 나온다. ㅠㅠ 

이미 시간을 많이 사용했고 혼도 났다 .... 흑흑 ...

결론적으로 알게 된 것은  django 모델 테이블 안에  django_migrations이라는 폴더가 있다

해당 폴더는 현재 db에서 migrations이 어디까지 진행 되었는지 기록되어 있다.

python manage.py showmigrations 할 때 나오는 것도 여기를 바탕으로 보여준다.

위와 같이 미치는 상황에 이럴 때 활용해야 되는게 django_migrations이라는 폴더이다. 

여기에서 기록을 지워주면 바로 마이그레이션 적용되었던 것이 없어진다. python manage.py showmigrations을 해봐도 기존에 적용되었던 부분이 없어진 것을 확인할 수 있다.

이것만 지우고 다시 migrate하면 끝... ㅠㅠ 

하 너무 돌고 돌았다. 슬프다.

WEB + FTP + EMAIL : 인터넷

http: 통신 규약이다. (인터넷 위에서 동작하는 웹이라는 서비스를 이용하기 위해서 준수해야 하는 통신규약) 즉 클라이언트가 서버에 어떻게 요청하고 어떻게 응답해야 하는지에 대한 규칙

그 통신 규약을 지켜서 작동하는 Server를 HTTP Server 다른 말로 web server라고 한다.

Web Server : 가장 대표적인게 apache이다. nginx 역시 web server 중의 한개이다.

NGINX: 차세대 웹서버로 불린다. 더 적은 자원으로 더 빠르게 데이터를 서비스 할 수 있다.

=> 기존에 apach가 client에서 요청이 많이 들어오면 여러개의 process를 만들어서 처리하거나 스레드를 이용하여 처리했다면 nginx는 비동기 방식으로 효율적으로 작업을 처리하여 process 또는 thread 생성 비용이 존재하지 않는다.

추가 질문

그럼 web server와 web application 서버의 차이점은 무엇일까?

해당 내용은 다음 번에 추가 공부!

2019.04.30 HTML을 통한 간단한 서버 구축하기2(POST)

# 질문에 답하기

1. CGI

   Common Gateway interface
   CGI 단점 : 요청이 있을 때마다 프로세스(응용프로그램)을 새로 실행
   CGI 장점: 특별한 추가 프로그램 없이도 여러 언어의 스크립트 실행 가능

• 특정 위치에 있는 것을 가지고 와야 할 때 쓰면 된다.

권한주기 (해당 파일마다 적용해줘야한다.)

• chomod ugo+x cgi/test.py
• #!를 써서 파이썬 경로를 써줘야한다.
• which python3

구현

• 해당 경로를 지정해줘야한다.
• 해당 경로 파일에는 #!/usr/local/bin/python3이라는 python 경로를 지정해줘야한다.

test.py

• 이렇게 한 뒤에 서버에 접속해보면 test.py의 자료를 가지고 온다.

POST

• GET의 폼을 톨해 받은 자료를 POST로 받아와 해석하기
• 폼을 통해 키와 몸무게를 받아 BMI 지수 출력해주기

구현

• form_html에서 받은 자료를 method='POST'로 하여 POST로 보내고 포스트에서 해당 내용을 받아서 처리해준다.
• 포스트에 담겨서 오는 내용은 주소창에 있는 자료를 해석하는게 아니므로 보안이 철저하지만 그만큼 해석하는게 쉽지 않다.
• self.rfile.read 및 parse_qs를 사용한다.

2019.04.30 HTML을 통한 간단한 서버 구축하기1(get)

# 질문에 답하기

1. HTTP Server

출처 : jQuery Ajax & JSON | PoiemaWeb

1. 브라우저를 통해 사용자가 HTTP Rrequest message를 보내면
2. 서버는 그 Message를 해석하고 Response Message로 응답한다.
   1. 어느 페이지로 접속하였느냐?
   2. Query string은 어떤 데이터를 가지고 있느냐?
   3. 특정 스크립트 요청이 있느냐?
   4. 최종 응답을 HTML, 다운로드는 파일로 할 것이냐?

HTTP Response만 하는 서버

• Handler 필요 : 요청이 들어오면 어느 객체가 요청을 해석하고 처리할 것이냐?

• 주소에 붙여서 보내면 이것을 읽어서 해석하는데 이를 쿼리스트링이라고 하고 파싱을 통해 주소내 특정 값들을 분리한다.

• def run와 with handler는 같은 것이다.

• 네이버 메인 페이지는 get방식 회원가입 할 때는 POST방식이다.
  근데 장고 같은 프레임워크는 한 페이지에서 접속 Method에 따라 기능을 분기한다.
  예) 회원가입 페이지 domain.com/singup/

• Get방식으로 접속하면 회원가입 양식 보여주기

• Post방식으로 하면 전달받은 데이터를 처리해서 회원가입 진행하기, 데이터베이스에 저장하기

• 한 주소로 고정되어 있어서 회원 가입에 오류가 있으면 회원가입으로 돌아가서 다시 메시지를 띄어야 한다. 우리가 쳤던 정보 내용들이 남아 있어야 한다. 한 페이지에서 돌아가기 때문에 비밀번호와 같은 것을 잘못 입력해도 그대로 남아 있다.

do_GET 예시 코드

• Handler 클래스를 만들고 그 아래에 GET과 POST를 두어서 2가지에 대해서 어떻게 처리할지에 대한 내용이 들어간다.

do_GET을 통해 주소창에 들어간 내용 해석하기

• 주소창에 들어간 http://127.0.0.1:8000/?height=181&weight=77와 같은 내용 해석하기

from urllib.parse import parse_qs, urlparse

PORT = 8000

class Handler(BaseHTTPRequestHandler):
    def do_GET(self):
        self.send_response(200)
        self.send_header('Content-type', 'text/html')
        self.end_headers()
        query_text = urlparse(self.paht).query
        print(query_text)
        query_vars = parse_qs(query_text)
        print(query_vars)

        if 'weight' in query_vars and 'height' in query_vars:
            height1 = float(query_vars['height'][0])
            weight1 = float(query_vars['weight'][0])
            BMI = weight1/((height1/100)**2)
            message = "Your BMI is " + str(BMI)

        self.wfile.write(bytes(message, 'utf-8'))
        return

    def do_POST(self):
        pass

def run():
    server_address = ('127.0.0.1', PORT)
    httpd = HTTPServer(server_address, Handler)
    print("serving at PORT", PORT)
    httpd.serve_forever()

run()

결과값

• 주소에 http://127.0.0.1:8000/?height=181&weight=77 임의로 넣고 실행
• print창에
  • height=181&weight=77
  • {'height': ['181'], 'weight': ['77']}
• http 창에
  • your BMI is 23.503556057507403 출력

2019.04.16 Python and Django Full Stack Web Developer Bootcamp - Bootstrap

(스스로 이해한 것을 바탕으로 정리한 것으로 오류가 있을 수 있습니다)

# 질문에 답하기

1. clone coding 다시해보기

문제

main page

login page

해답

main page

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Project</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Welcome</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-item nav-link active" href="signin.html">Sign in <span class="sr-only">(current)</span></a>
        </div>
      </div>
    </nav>
    <div class="container">
      <div class="jumbotron jumbotron-fluid">
        <div class="container">
          <h1 class="display-4">Coffee Lover Project</h1>
          <p class="lead">Welcome to your Bootstrap Project: Coffee Lover</p>
          <p class="lead">You will recreate this webpage and an additional Form Page</p>
          <p class="lead">Just follow the instruction steps here to re-create these webpages!</p>
          <ol>
            <li>Create a general landing page with a JumboTron</li>
            <li>Next create a NavBar on the Page that links to another html file</li>
            <li>Add two paragrahs of lorem-ipsum below the jumbotron</li>
            <li>Next use the Grid system to add in thumbnail pictures of coffee. Source: https://stocksnap.io/search/coffee You will need to use the thumbnail class for this. Here are the image links:</li>
            <ul>
              <li><a href="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/04LDEYRW59.jpg">One</a></li>
              <li><a href="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/90V03Q5Y60.jpg">Two</a></li>
              <li><a href="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O83SF2RB6D.jpg">Three</a></li>
              <li><a href="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/5JVPSVP7EI.jpg">Four</a></li>
              <li><a href="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/C5Y10KIIHA.jpg">Five</a></li>
              <li><a href="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/YSSFRY5B25.jpg">Six</a></li>
            </ul>
            <li>Next make sure that at the largest settings you have 3 columns of pictures. On the smallest screen settings you should have 2 columns. Its up to you where you want to change.</li>
            <li>Next create another html file for the sign up page.</li>
            <li>Create a Form on this Sign Up page with Email, Password, and a Check Box</li>
          </ol>
          <p>That's it. Feel free to play around with this project and style it more to your liking. The main focuses of this project are the uses of NavBar, Jumbotron, Form, Container, and the Grid System.</p>
        </div>

      </div>
    </div>
    <div class="container">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>
    <div class="container">
      <h2>Pictures of Coffee</h2>
      <div class="row">
        <div class="col-lg-4 col-xs-6 px-0"><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/04LDEYRW59.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 px-0"><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/90V03Q5Y60.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 px-0"><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O83SF2RB6D.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 px-0"><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/5JVPSVP7EI.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 px-0"><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/C5Y10KIIHA.jpg" alt=""></div>
        <div class="col-lg-4 col-xs-6 px-0"><img class="img-thumbnail img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/YSSFRY5B25.jpg" alt=""></div>
      </div>
    </div><!-- /.container -->
  </body>
</html>

login page

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
    <div class="jumbotron">
      <div class="container">
        <h1>Log In</h1>
        <p>Enter your email and password below to log in to Coffee Lover</p>
      </div>
    </div>
    <form>
      <div class="container">
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
          <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group form-check">
          <input type="checkbox" class="form-check-input" id="exampleCheck1">
          <label class="form-check-label" for="exampleCheck1">Check me out</label>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </div>
    </form>
  </body>
</html>

• 후 쉽지 않은 TEST였다. ㅠㅠ
• 영어로 수업을 하니 시간이 2배는 더 걸리는 것 같다.

2019.04.15 Python and Django Full Stack Web Developer Bootcamp

(스스로 이해한 것을 바탕으로 정리한 것으로 오류가 있을 수 있습니다)

# 질문에 답하기

1. html에서 테이블 만드는 tag

form

1. class : by css 연결고리
2. action : 특정 사이트를 링크 해놓으면 submit을 하였을 때 해당 링크로 이동
3. method : javascript와 결합하여 행동
4. form은 입력된 데이터를 한번에 서버로 전송한다.
5. 따라서 함께 input 받아서 전송할 데이터들은 form으로 묶는다.

input (무언가를 쓸 수 있게 해준다.)

1. type : text / email / password / submit / color / radio
   1. 이메일타임은 @ 혹은 .com을 쓸 수 있다.
   2. 자동적으로 이메일 타입인지 확인할 수 있다.
   3. password는 자동적으로 별표처리가 된다.
   4. submit은 보낼 수 있게 해준다.
   5. text를 해서 쓰는 것만큼 크기를
   6. radio는 동그라미 버튼이 나온다.
      1. radio에서도 value값을 넣어줘야지 이게 값이 나중에 전달되어 쓸 수 있다.
      2. loc 라고 해놓으면 radio 박스에서 하나만 선택할 수 있게 해준다
      3. 단 name에 같은 loc 라고 해주어야지 서로 인식할 수 있다.
2. name : 딱히 표현은 되지 않으나 나중에 name을 value와 함께 전달한다.
   1. 나중에 참조할 때 쓸 수 있다.
3. value : 초기값
   1. 자동적으로 처음에 값을 넣어준다.
   2. 사용자가 값을 바꿀 수 있다.
   3. placeholder로 투명하게 보이게 할 수도 있다.
4. required를 통해 꼭 넣어야 하는 것을 설정해줄 수 있다.
5. 정말 잘 정리해놓은 자료: HTML : 폼(form) 이해

label tag

1. input에 email을 넣고 submit을 누르면 주소창이

   1. file:///Users/bu-k/Desktop/Django2.0-Python-Full-Stack-Web-Developer-NEWMaster/02-HTML_Level_Two/input_practice.html?useremail=gang0406%40naver.com 이렇게 변한다.

2. input에 text를 넣고 submit을 하면

   1. file:///Users/bu-k/Desktop/Django2.0-Python-Full-Stack-Web-Developer-NEWMaster/02-HTML_Level_Two/input_practice.html?userinput=mystuff 제일 마지막이 이렇게 변한다.

3. submit버튼을 눌렀을 때 무언가 엑션을 주고 싶을 때

   1. form action = " 주소 " method = "get" 근데 딱히 method는 적지 않아도 가긴하네?
   2. https://fabl1106.github.io/?userinput=HELLO+WORLD
   3. 다른 페이지로 가면서 내가 입력한 것을 가지고 있다.

4. label

   1. 텍스트와 문구를 한개로 라벨 해준다.
   2. 텍스트박스와 문구가 한줄에 같이 생기게 해준다.
   3. label for = "특정 문구" 를 해놓으면 input에서 id를 통해 연결 시킬 수 있다.
   4. 활용 방법
      • <label for ="hello"> 이메일을 입력해주세요</label>
      • <input id = "hello" type = "email" name="" placeholder="@gmail.com" required>

5. select

   1. 무언가를 순차적으로 고르게 하는 것을 만들 수 있다.
   2. option와 함께 사용

6. textarea

   1. 문장으로 된 feedback을 적을 수 있도록 해준다.

Test 03

구현

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Assessment Test HTML LEVEL</title>
  </head>
  <body>
    <h1>Course Sign Up Page</h1>
    <p>please Note : Frist, Last Name, Password, and Email are required</p>
    <form class="" action="/Users/bu-k/Desktop/Django2.0-Python-Full-Stack-Web-Developer-NEWMaster/02-HTML_Level_Two/thankyou.html" method="get">
      <label for="First">First Name:</label>
      <input id="First" type="text" name="" placeholder="First Name" required>
      <label for="Last">Last Name:</label>
      <input id="Last" type="text" name="" placeholder="Last Name" required>
      <p>
        <label for="Email">Email:</label>
        <input id ="Email" type="email" name="" placeholder="name@email.com" required>
        <label for="Password">Password</label>
        <input id = "Password" type="password" name="" value="" required>
      </p>
      <p>Are you over the age of 18?</p>
      <label for="Yes">Yes:</label>
      <input id = "Yes" type="radio" name="loc" value="Yes">
      <label for="No">No:</label>
      <input id = "No" type="radio" name="loc" value="No">
      <p>Do you have a Credit Card or PayPal?</p>
      <select class="" name="">
        <option value="Credit">Credit Card</option>
        <option value="PayPal">PayPal</option>
      </select>
      <p>Do you have any Feedback?</p>
      <textarea name="name" rows="8" cols="80"></textarea>
      <p><input type="submit" name="" value="Submit Feedback"></p>
    </form>

  </body>
</html>

• 위에서는 아직 채워넣지 않았지만 각각의 tag에 대해 name 부분과 value 부분은 중요하다. name과 value가 합쳐져서 데이터베이스로 넘어간다.

2019.04.15 Python and Django Full Stack Web Developer Bootcamp

(스스로 이해한 것을 바탕으로 정리한 것으로 오류가 있을 수 있습니다)

# 질문에 답하기

1. html에서 테이블 만드는 tag

html leve 2

1. table border = "1" : 테이블을 생성하겠다는 명령어(테두리 굵기 설정)
   1. thead : 테이블 행 제목 생성
      1. th 테이블 행 제목 입력
      2. 없어도 되나 굵게 표시되어 보기가 좋다.
   2. tr : 테이블 행 생성 명령어
      1. td 테이블 열 적기
      2. tr을 계속 추가해줘서 열 계속 만들어주기

html leve 2 test

구현

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <table border = "1">
      <thead>
        <th>Country Name</th>
        <th>Country Flag</th>
        <th>GDP(MIllions of USE)</th>
      </thead>
      <tr>
        <td>USA</td>
        <td><<img src="https://upload.wikimedia.org/wikipedia/en/thumb/a/a4/Flag_of_the_United_States.svg/190px-Flag_of_the_United_States.svg.png" alt=""></td>
        <td>18,561,930</td>
      </tr>
      <tr>
        <td>India</td>
        <td><img src="https://upload.wikimedia.org/wikipedia/en/thumb/4/41/Flag_of_India.svg/150px-Flag_of_India.svg.png" alt=""></td>
        <td>2,250,990</td>
      </tr>
      <tr>
        <td>United Kingdom</td>
        <td><img src="https://upload.wikimedia.org/wikipedia/en/thumb/a/ae/Flag_of_the_United_Kingdom.svg/200px-Flag_of_the_United_Kingdom.svg.png" alt=""></td>
        <td>2,649,890</td>
      </tr>
    </table>

  </body>
</html>

2019.04.15 Python and Django Full Stack Web Developer Bootcamp

(스스로 이해한 것을 바탕으로 정리한 것으로 오류가 있을 수 있습니다)

# 질문에 답하기

1. What is web?

우리가 사이트 주소를 입력했을 때 일어나는 일들

1. 사이트 주소를 입력한다.(www.google.com)
2. 우리 컴퓨터가 packet에 ip를 포함하여 요청을 보낸다.
3. 이러한 요청은 선을 통해서 혹은 위성을 통해서 이동한다.(by ISP)
4. ISP에 의해 reroute 되어 정확한 서버주소로 찾아간다.
5. 그렇지만 server에서 한번에 모든 데이터를 보내기에는 너무 크다.
6. 따라서 웹사이트는 나누어져 packet으로 전송된다.
7. 이러한 나누어진 패킷들은 여러 방향으로 나누어져서 들어오고 오직 목적지만이 중요하다.
8. 패킷들은 가장 빠르게 목적지에 도달하는게 제일 중요하다.(by home ip address)
9. 패킷이 도착하면 그들은 reassemble 하여 페이지를 보여준다.

• 수업 중에 알려준 것을 적었는데 내가 배운 것보다 더 간단하게 알려주었다.
• 내가 다시 한번 이 부분에 대해 정리를 해야겠다.

웹사이트의 구성

1. front - end
   1. 색상 및 눈에 보여지는 부분들
   2. html
   3. css - cascading style sheets ( colors, fonts, border 등)
   4. javascript - 프로그래밍 로직으로 activity하게 만들어준다.
   5. jquery - html css javascript를 활용한다.
2. back - end
   1. language
      1. php. node.js, ruby, java, python
   2. Framework
      1. python - django
      2. Node js
      3. java
   3. database

html

1. hypertext markup language

html(head, body)

1. head
   1. meta data 포함
   2. 자바스크립트, css에 대한 정보 포함
   3. title : 텝 부분에 무엇이 보이는지 알려준다.
2. body
   1. actual content
   2. <!-- comment --> (주석처리 방법)
3. html 공부사이트
   1. w3s
   2. mozilla

html tag

1. <h1> <h2> <h3> ~ <h6> heading의 사이즈들
   1. 기본적으로 heading 들이기 때문에 간격이 떨어져서 배치된다.
2. <p> paragraph
   1. 문단을 나누어 준다.
3. <b>, <strong>글자를 굵게 만든다. (bold/strong)
4. <i> <em>글자를 옆으로 기울게 만든다. (이텔리 tag/ emphasis)
5. List 관련
   1. ol(ordered list) + li (list)
   2. ul(unordered list)
   3. 하위로 내려가야 할 때는 다시 li자리에 ul 혹은 ol을 해줘야 한다.
6. Divs and span tage
   1. div(divide)
      1. 특정 부분을 나누어서 css를 적용할 수 있게 된다.
   2. span
      1. 전체를 묶는게 아닌 한줄에 적용해줄 수 있다.
   3. BooGi's tory :: id 와 class 차이 & div 와 span 차이점
7. attributes
   1. add more information to html tags
   2. <img scr=" " alt = "">
      1. src 이미지의 경로에 대해서 적어준다.
      2. alt(alternate): img가 나오지 않을 시 대신해서 적어줄 말을 적어준다.
      3. 알아서 paragraph를 나눈다.
   3. a : anchor 특정 웹사이트링크를 연결해줄 때 쓴다.
      1. <a href ="https://fabl1106.github.io">Daegu Owl</a>

test 01.

구현

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>EXERCISE TITLE</title>
  </head>
  <body>
    <h1>Welcome to my Website!</h1>
    <p>I'm excited to eventually learn Django</p>
    <p><a href = "https://www.djangoproject.com/"> Here is a linke to the official Django Website</a></p>
    <p>Here is a picture of the python logo</p>
    <img src = "https://www.python.org/static/community_logos/python-logo-master-v3-TM.png">
    <p>Here are three reasons Django is cool<p>
    <ol>
      <li>Ridiculously Fast</li>
      <li>Reassuringly Secure</li>
      <li>Exceedingly Scalable</li>
    </ol>
    <h2>Bonus: Optional Extra Credit</h2>
    <p>Can you figure out how to make a picture a link?</p>
    <p><a href = "https://www.djangoproject.com/"><img src ="django.png"></a></p>
  </body>
</html>

2019.05.18 jquery & ajax를 활용하여 댓글 구현하기입니다.

• 패스트캠퍼스 웹 프로그래밍 스쿨 수업 정리 내용

목표

• 댓글을 달 때 ajax가 작동하여 새롭게 페이지가 리로드 되지 않게 하기
• ajax를 통해 단 댓글을 해당 DB에 저장하고
• 그 댓글만을 가지고와서 댓글창의 가장 상단에 끼워넣기

로직

• 먼저 해당 댓글 입렴 폼의 태그를 확인한다.
• 그리고 그 폼의 submit을 눌렀을 때 해당 변화가 없도록 막고
  • submit의 경우 return false를 활용한다.
• url을 지정하고 serialize를 통해 현재 폼에 담겨져 있는 값들을 가지고 온다.
• ajax를 통해 url이 작동하도록 하고 해당 url을 views로 연결하여
• 해당 views.py(댓글 구현 뷰)에서 처리할 수 있도록 한다.
• 해당 뷰에서 처리 이후에 해당 채워넣을 부분의 html을 반환해줄 수 있도록 comment_single.html을 구현한다.
• 그리고 뷰에서 그 html파일을 JsonResponse를 통해 반환해준다.
• 다시 해당 템플릿에서 .done 부분에 prepend(가장 상단에 넣어주기)를 통해 해당 파일을 넣는다.

1. 해당 댓글 입력폼의 태그 확인하기

<form action="{ % url "board:comment" object.id % }" method="POST" id="comment_form">
{ % csrf_token % }
<input type="hidden" name="is_ajax" value="">
    {{comment_form.as_p}}
    <input type="submit" value="Comment" class="btn btn-outline-primary">

</form>

<table class="table table-striped" id="comment_list">
    <tbody>
    { % for comment in comments % }
   <tr>
        <td>{{ comment.text }}</td>
        <td>{{ comment.author.username}}</td>
        <td>{{ comment.created }}</td>
        <td><a href="{ % url 'board:comment_delete' comment.id % }">삭제하기</a></td>
        <td><a href="{ % url 'board:comment_update' comment.id % }">수정하기</a></td>
    </tr>
    { % endfor % }
    </tbody>
</table>

2. 그 폼의 submit을 눌렀을 때 해당 변화가 없도록 막는다.

{ % block extra_script % }
<script type="text/javascript">
    $(function () {
        $('#comment_form').submit(function(e){
            alert('댓글쓰기 완료');
            return false;   //이게 없으면 다시 리로드 되서 다녀온다.
        });
    });

</script>
{ % endblock % }

3. url을 지정하고 serialize를 통해 현재 폼에 담겨져 있는 값들을 가지고 온다.

• url의 경우 기존에 연결되어 있는 url을 활용한다.
• serialize를 통해 현재 폼에 담겨져 있는 값들을 가지고 온다.

4. views.py 완성하기

def comment(request, document_id):
    is_ajax = request.POST.get('is_ajax')

    document = get_object_or_404(Document, pk=document_id)

    comment_form = CommentForm(request.POST)
    comment_form.instance.author_id = request.user.id
    comment_form.instance.document_id = document_id
    if comment_form.is_valid():
        comment = comment_form.save()

    if is_ajax:
        html = render_to_string('board/comment/comment_single.html',
                                {'comment':comment})
        return JsonResponse({'html':html})

    return redirect(document)

• is_ajax를 POST를 통해 is_ajax를 받는다. html의 jquery가 제대로 작동했다면 1을 가지고 있다.
• 해당 새롭게 생긴 댓글을 넣어주기 위한 간단한 html을 새롭게 제작한다.
  • 만약 is_ajax가 있다면 html은 single.html을 rendering하고 위에 comment와 함께 넘겨줄 수 있도록 한다.
  • JsonResponse를 통해 html을 넘겨준다.

comment/comment_single.html

    <tr class="comment_row">
        <td class="comment_text">{{ comment.text }}</td>
        <td>{{ comment.author.username}}</td>
        <td>{{ comment.created }}</td>
        <td><a href="{ % url 'board:comment_delete' comment.id % }" class="btn_comment_delete">삭제하기</a></td>
        <td><a href="{ % url 'board:comment_update' comment.id % }" class="btn_comment_update">수정하기</a></td>
    </tr>

• 해당 페이지를 통해 가장 위에 끼워 넣을 댓글을 만들어낸다.

5. jquery 완성하기

{ % block extra_script % }
<script type="text/javascript">
    $(function () {
        $('#comment_form').submit(function(e){
            $('input[name="is_ajax"]').val("1")
            // alert('댓글쓰기 완료');
            url = $(this).attr('action'); //원래 다녀와야하는 url
            params = $(this).serialize(); //현재 폼에 담겨있는 값들을 가지고 올 수 있게 해준다.
            $.ajax({
                url:url,
                method : "POST",
                data: params,

            }).done(function(data){
                $('#id_text').val("");
                $('#comment_list tbody').prepend(data.html); //tbody 시작지점에 요소 끼워넣기
                //$('comment_list tbody').append(tr); //tbody 끝 지점에 요소 끼워넣기
                // is_ajax 값 초기화
                $('input[name="is_ajax"]').val("");
            });

            return false;   //이게 없으면 다시 리로드 되서 다녀온다.
        });
</script>
{ % endblock % }

• 해석하기
  • comment_form이라는 id를 가진 곳에서 submit을 누르면 막는다.(e, return false)
  • is_ajax라는 이름에 1의 값을 부여해준다.
  • url은 원래 이동하는 url로 설정한다.
  • params는 serialize()를 통해 현재 폼에 담겨 있는 값들을 가지고 올 수 있게 한다.
  • ajax를 url 요청이 위에 정의해놓은 url로 왔을 때 그리고 method는 POST방식으로 왔을 때 작동한다.
  • data는 params를 받는다.
  • 위의 ajax를 통해 URLConf를 통해 views.py를 다녀오고 JsonResponse를 통해 해당 데이터를 반환 받는다.
  • params도 views.py를 통해 data : params로 넣어서 보내준다.
  • 야는 왜 id_text 값을 어디에서도 설정해주지 않았는데 적었던 데이터가 사라지는 것일까?
    • 폼 형태로 끼워넣으면 알아서 id_text가 설정된다.

댓글달기 전체 과정보기

• submit이 일어나면 is_ajax를 1로 바꾼다.
• url 은 댓글남기기 페이지 주소를 가지고 온다.
• params = serialize를 통해 폼에 있는 데이터들을 하나로 붙인다.
• 리 다이렉션이 안되고 데이터를 추가로 가지고 오고 싶퍼서 is_ajax를 설정한 것이다.
• 뷰에서 is_ajax이 있으면 return Jsonresponse를 하고
• 아니면 redirect를 하도록 한다.

2019.05.17 jquery & ajax 기본 문법

• 패스트캠퍼스 웹 프로그래밍 스쿨 수업 정리 내용

jquery & ajax 기본 문법

<script type = "text/javascript">
    $(function(){
        $('특정 테그').특정모션(function(e){
            e.preventDefault(); //일어날 행동을 일단 막고
            url = $(this).attr('href')
            data = #정의 할 데이터가 있을 때 정의
            $.ajax({
                url : url
                data : data #넘겨줄 데이터가 있을 때 적는다.
            }).done(funtion(data){
                ajax실행 뒤에 일어날 행동 정의(html 단에서)
    });
}};
</script>

• 특정한 테그 혹은 class혹은 id에 어떤 모션이 일어났을 때(click, submit 등)
• 원래 일어나는 행동을 막고
• 이후에 필요로 쓰게될 특정 데이터 혹은 url에 대해 정의 해준 다음에
• ajax를 실행시켜 ajax가 설정된 url을 통해 view를 실행시켜 해당 뷰가 db를 정리 한뒤에 필요한 것은 JsonResponse로 반환해주고 그 반환 값을 ajax에서는 받아와
• .done뒤에 일어날 행동들을 설정해서 html 단에서 일어나는 행동들을 정의시켜준다.

ajax 기본 연습하기 (간단한 데이터 삽입해보기)

python views.py 만들기

• 바꿔 끼울 데이터를 딕셔너리 형태로 입력해준다.
• 일반적인 경우 데이터를 전송하기 위해 json형태로 데이터를 보낸다.
• 따라서 jsonResponse를 활용한다.
• json은 딕셔너리 형태로 데이터를 전송한다.

from django.http import JsonResponse

def get_data_ajax(request):
    data = {
        "name":'jake',
        "age":100,
        "blood":"O",
    }
    return JsonResponse(data)

해당 url을 연결시켜준다.

path('ajax/get_data/', get_data_ajax, name='get_data_ajax')

템플릿에 데이터 들어갈 곳 및 버튼 추가하기

<div class = "data_area">
    데이터 입력될 곳
</div>

<a href="{ % url 'board:get_data_ajax' % }" class="btn_get_data btn btn-primary">데이터 가져오기</a>

템플릿에 jquery 추가하기

1. 먼저 url을 연결해준다.
2. 다음으로 버튼을 눌렀을 때 이동하지 않도록 한다.
3. 다음으로 데이터를 가지고 와야 한다.
4. base.html에 script아래 extra_script를 추가해준다.
   1. jquery 다운로드 사이트에 접속하여 jquery를 가지고 온다.
   3. base.html에 있는 slim jquery를 바꾸어 줘야 한다.
5. script type을 추가해준다.

{ % block extra_script % }
<script type="text/javascript">
    $(function(){
        $('.btn_get_data').click(function (e) {
            e.preventDefault(); //버튼이 클릭하면 이동못하게 기본 기능 취소
            alert('clicked'); //확인을 위해 알림창 띄우기
            url = $(this).attr('href');   //this는 이벤트 대상(btn_get_data)
            $.ajax({
                // ajax 호출시 사용할 매개변수
                url:url
            }).done(function(data){
                // 호출이 끝나면 받은 데이터를 처리하는 부분
                alert(data.name);
                // 새로운 데이터를 추가해주고 싶을 때

                name = data.name;
                age = data.age;
                bloodtype = data.bloodtype;
                html = "<ul><li>"+name+"</li><li>"+age+"</li><li>"+bloodtype+"</li></ul>"
                $('.data_area').html(html)
            });
        });
    });

</script>
{ % endblock % }

• 해당 동작이 일어날 페이지 아래에 위의 내용을 끼워넣는다. block extra_script의 경우 base.html에서 미리 지정해놓는다.
• 해석하기
  • .btn_get_data 클래스가 지정된 것을 찾아 만약에 클릭이 되면
  • 일단 일어날 일을 막고
  • clicked가 된 알람창을 띄어줘라
  • 그리고 이후에 사용하게 될 것들을 지정해주는데
  • url은 그 이벤트가 일어난 것에 연결된 링크를 연결해서 사용한다.
    • 아마 보통 어떤 형태가 일어나기 위해서는 링크가 연결되어야 하기 때문에 대부분 링크가 있을 것이다.
  • ajax를 실행하고
  • ajax가 실행될 때 url은 위에서 설정된 url을 바탕으로 URLSConf를 바탕으로 해당 views.py로 찾아가고
  • views.py에서 넣어놓은 data를 JsonResponse로 넘겨서 받아온다.
  • 그 받아온 데이터를 done(function(data)를 통해 가지고 오고
  • name와 age/ bloodtype에 넣어서 그 값들을 html 태그 속에 넣는다.
  • 그리고 지정된 class="data_area" 위치를 찾아가서 해당 html을 채워넣고 화면에 보여준다.

2019.02.03 javascript 스코프

Scope

Var greeting = “Hello”

Function greetSomeone(){
  var firstName = “josh”;

 return greeting + “ “ + firstName;
 }

greetsomeone();  // —> Hello josh

firstName;  // —> ReferenceError (firstName is not defined ——> 선언된 적이 없다)

Local scope에서 Global scope는 찾을 수 있으나
Global scope에서 Local scope을 찾을 수 없다.

껍질 이라고 생각하자. 안쪽 껍질에서는 바깥 쪽 껍질을
찾을 수 있으나, 바깥 쪽 껍질에서는 안쪽 껍질은 찾을 수 없다.

javascript에서 Scope는 함수가 선언되는 동시에 자신만의 scope를 가진다.

Lexical scope vs Dynamic scope

Scope의 룰

Local Scope(지역 변수) vs Global Scope(전역 변수)

0. Local Scope - 함수 안에서 적용

1. Global Scope는 어디에서든 접근 가능

2. 하위 스코프는 상위 스코프에서 접근 불가

3. 지역변수는 함수 내에서 전역변수보다 높은 우선순위(자바스크립트는 기본적으로 function level의 scoping 규칙을 따름

4. debugger를 통해 디버거 확인 가능

Ex)

var name = “Richard”;



function showName(){
  var name = “jack”;

 console.log(name);
 }

console.log(name); // Richard

showName(); // jack

console.log(name); // Richard

Ex)

Var name = “Richard”;

if(name){
  name = “Jack”;

 console.log(name); // Jack

}
 console.log(name); //Jack

Ex)

for(var I=0; I<5; I ++){
  console.log(I);  // I = 0부터 조건 확인하고 콘솔 배출하고 ++해준다.
 }



for(let I = 0; I<5; I++){
  console.log(I)
 }

Console.log(I) // ReferenceError

var와 let, const keyword

0. let은 블록 단위라서 블록을 벗어나면 접근 불가능

1. let과 const는 var로 정의된 변수를 재정의할 수 없음

2. const는 한번 값을 설정해 놓으면 바꿀 수 없음

3. 실제로는 let과 const가 안정하기 때문에 더 많이 쓰는 추세

전역 변수와 window 객체

(선언 없이 초기화된 변수는 전역 변수)

함수 외부에서 선언된 변수는 모두 전역 변수
전역변수는 모두 window에 연결되어 있다.

키워드 없이 변수 선언을 하면 전부 전역변수에 붙게 된다. 따라서
항상 변수 선언을 해줘야 한다. 가급적 전역 범위의 번수를 많이 설정하지 말자.

Hoisting (var만 해당)

변수 선언은 범위에 따라 선언과 할당으로 분리됨

Javascript 엔진이 내부적으로 변수 선언을 scope의 상단으로 끌어 올린다.

할당은 제 자리에 있음

Ex)

a = 2;

Var a;

console.log(a); //2

함수 선언식은 항상 상단으로 // 통째로

Var fun = function(){}

함수 표현식은 할당된 변수만 상단으로

Function fun(){}

2019.01.29 javascript 콜백함수, 객체 지향

• 생활 코딩을 바탕으로 공부하였습니다.

객체

javascript에서는 함수도 객체다. = 값이다.
함수 자체가 값이 될 수 있다.

Function a(){} === var a = function(){}

값으로서의 함수는 변수안에만 담길 수 있는 것이 아니라
A = { b : function(){} } 처럼 값이기 때문에 객체 안에도 담길 수 있다.

객체에서 b는 key로서 그릇이며 변수와 같은 역할을 한다.
객체 안에서 변수의 역할을 한다는 것을 속성 , property라고 한다.
속성 값으로 담긴 함수를 메소드(method)라고 부른다.

()는 함수를 호출한다는 의미이다.
함수는 값이기 때문에 다른 함수의 인자로도 전달 될 수 있고
리턴값(반환값)으로도 저장될 수 있다.
배열 값으로도 가능하다.
함수는 값이기 때문에 값을 저장하는 컨테이너인 배열에도 저장 될 수 있다.

함수는 값이기 때문에
변수, 매개변수, 리턴 값, 배열 값 등에 쓰일 수 있다.
====> first - class citizen(object, value)

콜백 함수

값으로서의 함수와 밀접하게 연관된다.
어떠한 함수가 수신하는 인자가 함수인 경우 배열도 객체이다.

자바스크립트가 가지고 있으면서 쓰게 되는 메소드는 내장 객체, 메소드
우리가 만든 함수는 우리가 만든 것이기 때문에 사용자 정의 객체라고 한다.

우리가 만든 함수를 통해서 (값으로서 함수를 쓸 수 있기 때문에) 오리지널 함수의 사용방법을 완전히 바꿀 수 있다 ====> 콜백 이것이 가능한 것은 자바스크립트의 함수가 값이기 때문이다.

콜백 함수를 잘 이해해야지 나중에 좀 더 쉬운 코드들을 지속적으로 작성 할 수 있게 된다.

잘 몰라도 누군가가 물어본게 잘 몰라도 된다. 그냥 모르면 모르는대로 이해할려고 노력하면 된다.

비동기 처리 — 이해가 안되었다. ㅠㅠ (나중에 꼭 다시 봐야겠다)
동기적 처리 : 순서대로 쭉 처리 했다
비동기적 처리 : 오래걸리는 작업이 있을 때 이 작업이 완료된 후에 처리해야 할 일들로 지정 후 처리

클로저

내부함수가 외부함수의 맥랙에 접근할 수 있는 것.
함수 안에 함수를 선언하면 그 함수안에서만 작용하는 함수이므로 안정적이다.
내부함수에서 외부함수의 지역변수에 접근 할 수 있다.—> 이건 항상 쓰던건데??
외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 외부함수의 변수에 접근 할 수 있다.

ex)

function outter(){

    var title = 'coding everybody';  

    return function(){        

        alert(title);

    }

} ——> return 이 나옴으로서 function이 생을 마감했는데 

inner = outter();

inner(); ———> 변수에 접근 가능하게 됨

Private variable 가 왜 필요한가?

소프트웨어가 커지게 되면 많은 사람들이 코드를 작성하게 된다. 미래의 자기자신 과 과거의 자기 자신도 포함.

title을 설정해놓고 set_title을 이용해서 title을 바꾸고 get_title로 title을 가지고 오고 / 따라서 title을 막 수정 못하게 만듬

arguments

배열과 비슷하나 배열은 아니다.

함수에 매개변수를 정의하지 않다고 하더라도, 인자의 수를 마음대로 지정하더라도 문제가 나지 않는다.

arguments안에는 사용자가 전달한 인자가 들어가 있다.

a+=1; => a=a+1

Arguments.length —> 어떤 함수에 들어온 인자가 몇개인지 파악

ex)

function one(arg1){

    console.log(

        'one.length', one.length,    //1

        'arguments', arguments.length  //2

    );

}



one('val1', 'val2');  // one.length 1 arguments 2 

함수의 호출

객체는 속성을 가지고 있고 속성의 값이 저장되어 있다면 property라고 한다.

가장 기본적인 방법 function func();

객체 지향

객체지향 프로그래밍은 크고 견고한 프로그램을 만들기 위한 노력의 산물이다. 객체지향이라는 큰 흐름은 현대적 프로그래밍 언어들을 지배하고 있는 가장 중요한 맥락이라고 할 수 있다. 하지만 자바스크립트의 객체지향은 다른 언어들의 객체지향과 사뭇 다르다. 특히 Java나 C++과 같은 주류 객체지향 언어에 익숙한 독자라면 극심한 혼란을 경험할 수도 있다. 바로 이러한 특성 때문에 웃으면서 들어갔다가 울면서 나오게 된다.

Object Oriented Programming

객체 - 변수와 메소드를 그룹핑한 것 이렇게 그룹핑 하고 나면 다른 사이트에도 또 이용 가능(재활용성에 객체가 기여한 것)

1. 하나의 객체 안에는 그 객체가 가지고 있는 취지에 따라 객체라는 껍질안에 넣어둔 것.

2. 그 사이에서 여러 가지 문제들이 나타나는데 그 문제들을 해결 하기 위한 것이 지금 우리가 마주하고 있는 객체지향의 여러가지 기능들이다.(ex. This. Prototype)

객체 지향 프로그래밍 - 객체를 만들어가는 것

객체 지향 공부 방법

문법 : 객체지향을 편하게 할 수 있도록 언어가 제공하는 기능을 익히는 것.

객체를 만든다는 것은 부품화 시키는 것이다.

메소드를 사용하는 기본 취지는 연관되어 있는 로직들을 결합하여 메소드라는 완제품을 만드는 것.

은닉화 캡슐화 - 제대로 된 부품이라면 어떻게 만들어지는지 몰라도 모르는 사람도 사용 할 수 있도록 하는 것.

내부의 동작 방법을 다양한 케이스 안(객체)으로 숨기고 그 부품의 사용 방법(메소드)만을 알려준다.

인터페이스 - 부품과 부품을 서로 교환 할 수 있도록 한다. 따라서 표준이 필요하다. 그 표준에 맞추어 연결점을 인터페이스 이다. 이질적인 것들을 미리 막을 수 있도록 한다.

설계 : 좋은 객체를 만드는 것 / 현실이 훨씬 복잡하다.

오늘 배운 것 내 스스로 정리해보기

1, 객체 지향의 전체적인 그림

• 객체 지향은 큰 프로그램을 만들기 위한 노력의 산물이다. 객체란 큰 프로그램 내에 연관되어 있는 것들을 묶어서 하나의 틀안에 넣어 놓는 것이고, 객체 지향이란 그런 객체들을 만들어가는 과정들이다. 이런 것들은 코드의 재사용성을 높여주는데 다른 곳에 재사용하면서 여러가지 문제점들이 나타난다. 이러한 문제점들을 해결해 주기 위해 객체에는 여러가지 기능들이 존재한다. 예를 들면 this. prototype 같은 것들은 객체의 재사용 과정에 생기는 문제점들을 해결.

2. function 과 콜백함수

   • function은 하나의 객체이면서 값이다. 따라서 값이기 때문에 매개변수에 들어갈 수도 있고, 인자로도 들어갈 수 있으며, 배열 속에도 오브젝트 속에도 들어갈 수 있다. (오브젝트의 value로 쓰일 때는 메소드라고 부른다.)

   • 콜백함수는 조금 더 정의를 익히기 위해 노력해야겠다. 코드를 통해 명시적으로 호출하는 함수가 아니라 특정시점에 도달하였을 때 시스템에서 호출되는 함수.????.....

2019.01.16 javascript 변수, 조건문, 반복문, 함수, 객체, 배열

자바스크립트 기본 문법들에 대해서 배웠던 것들에 대해 다시 한번 정리하고자 한다.

변수

1. 왜 써야 하나?

컴퓨터 프로그래밍은 컴퓨터에게 어떠한 작업내용(코딩)들을 줘서 실행할 수 있도록 만드는 것이다.(나 스스로 생각...)

그 과정에서 굉장히 긴 단어(예를 들어 ㅠ=3.141592...)들을 반족해서 적어야 하는 과정들이 충분히 생길 수 있다. 심지어는 [2, 3, 4] 이렇게 여러개의 정보들을 입력해야 된다든지 그런 경우들이 충분히 생길 수 있다.

이런 경우 변수를 설정하여 간단하게 해결 할 수 있다. 따라서 변수는 굉장히 중요하다고 갑자기 적는 도중 느껴졌다.

2. 어떻게 쓰냐?

변수를 선언한다는 표현을 쓰던데
var ㅠ = 3.141592... 이라고 ㅠ를 3.141592라고 선언한 것이다.
이제 앞으로 ㅠ를 쓰게 되면 3.141592를 입력하게 된 것이고
ㅠ*10 = 31.41592가 된다. 한번 변수를 선언한 이후에는 굳이 var를 쓰지 않아도
ㅠ = 3.14 이렇게 하여서 바꿀 수 있다.

3. 추가사항

값 없이 변수 설정도 가능하다.(당장 정해지지 않았다면)
var x; 이렇게 하면 undefined로 설정이 된 것이다.
또한 원시타입이라는 것이 있는데
이 부분에 대해서는 좀 더 추가적인 공부가 필요할 것 같다.

var a = 20;

var b = a;

a = 10; 으로 했을 때 b 의 값은?

또한 변수에서는 local scope와 global scope 2가지로 나누어서 생각해야 한다.

local scope에서 적용된 변수는 global scope에서는 적용되지 않는다.

조건문

1.왜 써야 하나?

어떤 상황에서 10보다 크면 이것을 출력하고, 5보다 크면 이것을 출력하고 컴퓨터에게 어떤 작업을 하도록 시킬 때 각 상황에 대한 조건을 줘야 할 때가 많다. 그렇기 떄문에 조건문이 정말 중요하다

2.어떻게 쓰냐?

if(조건1){

조건 1이 성립될 때 실행될 코드

} else if(조건2){

조건 2가 성립될 때 실행될 코드

} else{

위에 조건들이 성립하지 않을 때 실행될 코드

}

3.추가사항

|| (or) - or와 and에서 기본은 true 이다.

&& (and)

!(not)

위에 추가사항들을 활용하여

if(조건 1 || 조건2){

조건 1과 2 중 하나가 성립될 때 실행할 코드

} else if(조건1 && 조건2){

조건 1과 2 2개가 함께 성립될 때 실행할 코드

}

반복문

1.왜 써야 하나?

예를 들면 1부터 100까지 정수들을 더하는 코드를 짠다고 할 때
var a = 1+2+3+4+5+......+100 이런씩으로 지속적으로 어떤 규칙들을 반복해야 할 때가 많다.

이러한 규칙들을 반복문을 통해서 쉽게 해결할 수 있다.

프로그래밍의 가장 큰 장점 중에 한개는 인간이 지속적으로 반복해야 하는 일들을 해결 해줄 수 있다는 측면에서 반복문은 굉장히 중요하다.

2.어떻게 쓰냐?

반복문에는 for와 while 2가지가 있다.
for은 여러가지 조건들을 한번에 담아서 좀 더 쉽게 쓰게 해준다.
위의 식을 for 구문으로 만들어보면

var result = 0

for(i=1; i<=100; i += 1;){

 result = result + i;

}

i는 1부터 시작하고 i가 100이하면 1씩 더한다.
while은 여러가지 조건들을 나열해줘야한다.

var result = 0   
var i = 0   
while(i<=100){

result = result + i
i += 1;

}

3.추가사항

i++ 와 ++i의 차이점( 좀 더 자세히 알 필요 있음)

var result = 0

var i = 0

for(i=1; i<=100; i++){

result = result + i

}


var result = 0

var i = 1

for(i=1; i<=100; ++i){

result = result + i

}

함수

1.왜 써야 하나?

함수(function)란 하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여준다.??
반복문도 어떤 코드를 한자리에서 연속적으로 반복시켜주지만
함수는 내가 필요한 여기저기 맥락안에서 언제든지 쓸 수 있음.
따라서 좋은 부품을 만드는 것.
이 함수를 사용하는 여러곳에서 처음 기본이 되는 함수를 수정하면 이 함수를 이용하는 모든 곳에서 수정, 개선 할 수 있음(이를 유지보수가 용이하다고 한다)
가독성이 좋아 질 수 있다.

재사용성, 유지보수, 가독성은 굉장히 중요하고 그 부분에서 함수는 굉장히 중요하다

2.어떻게 쓰냐?

function 함수이름(인자, 인자){
    코드

    return 반환값

} 

이렇게 function을 설정해놓으면 함수이름을 통해서 언제든지든지 코드와 return 반환값을 불러올 수 있다.

단, return은 결과값을 불러옴과 동시에 함수를 종료시켜서 return 뒤에 나오는 것은 출력시키지 않는다.

여기서 인자는 input과 관련되며 매개변수 (parameter)라고 하며
다시 수정을 해보면

function 함수이름(매개변수){
    코드

    return 반환 값;

} 

alert(함수이름(인자));

alert해서 함수를 호출할 때 들어가는 수가 인자이고 / 위에 function을 정의하는데 들어가는 것은 매개변수이다.

3.추가사항

함수 정의 방법

numbering = function(){

    코드

    return 반환 값;

}

• 익명 함수(이름이 필요없고 바로 실행할 때)

배열 & 객체

1.왜 써야 하나?

그릇을 담는다

배열 => 순서가 있는 값들의 모임 [a, b, c]

객체 => 각각의 정보에 대한 값들이 있는 것들을 나열 할때 {name :byeonguk, age :29, weight : 80}

배열과 객체의 가시적인 차이점은
배열은 인덱스가 자동 지정되지만 객체는 우리가 인덱스를 설정해서 지정해 줄 수 있음.
배열은 저장된 데이터들이 순서를 가지고 있음. but 객체는 key와 value 만 있음

2.어떻게 쓰냐?

• 배열의 선언

  • var number = [1, 2, 3, 4]

• 특히 배열은 각자의 index 위치가 있음 0부터 시작

  • num[2]; // 3

• 각 위치에 있는 값 바꾸기

  • num[2] = 15;

  • num[]; // [1, 2, 15, 4]

• 길이 확인하기

  • number.length;

• 값 추가하기

  • number,push(28);

  • number[]; // [1, 2, 15, 4. 28]

• 제일 마지막 값 제거하기 ( 배열 원본을 변화시킵니다)

  • number.pop();

• 제일 첫번째 값 제거하기 / 제일 첫번째 값 추가하기 (배열 원본을 변화시킵니다)

  • number.shift(); / number.unshift(8)

객체

• 객체 선언하기(object)

var user = {

    name = "byeonguk"

    age = 29

    weight = 80 

}

name = key

byeonguk = value



var grades = {};

grades['egoing'] = 10;

grades['k8805'] = 6;

grades['sorialgi'] = 80;

배열,객체 값 사용하기/ 추가하기/ 바꾸기

Dot notation (함수에서 쓸 수 없다?)

user.name; // byeonguk

user.age;// 29

Bracket Notation

user['name']; // byeonguk

user['age'];// 29

• 객체 값 추가하기

var user = {

    name = "byeonguk"

    age = 29

    weight = 80 

    height = 181

}

• 객체값 삭제하기

delete obj["age"]

3.추가사항

객체 속성 : object property

• 배열에 저장된 값 불러오기

    function getNthElement(array, n) {

      if(array, n){

        return array[n]; }

객체에 저장된 값 불러오기

1. key 값 불러오기

    for 문은 in 뒤에 따라오는 배열의 key 값을 in 앞의 변수 name에 담아서 반복문을 실행한다

    for(var key in grades){

console.log(key)

객체 안에 함수도 저장 될 수 있다.

2. value 값 불러오기

for(var = key in grades){

console.log(grades(key))

this : 함수가 가르키고 있는 객체

객체지향프로그래밍 : 서로 연관되어 있는 값과 연관되어 있는 처리를 하나의 그릇안에 모아 그룹핑 해놓은 것

배열과 객체 문제는 완전히 다르다.

서로 지정하는 것과 불러오는 것 추가하는 것 모두 다름.

객체에 배열 형식을 쓰면 안된다.