프로젝트 생성하기 2

이전 포스트에서는 프로젝트 설정을 담고 있는 파일만 생성했으나, 이번엔 몇 가지 설정을 알맞게 수정하고 app을 생성할 예정이다.

1. settings.py 수정하기

• myProject 라는 Django 프로젝트를 생성한 뒤 디렉토리 구조를 살펴보면 이와 같다. 여기에서 setting.py에 들어간 뒤 TIME_ZONE을 수정한다. 기본 값으로 UTC가 들어가는데 한국 시간에 맞도록 Asia/Seoul로 수정

2. APP 추가하기

• 프로젝트 설정파일만으로는 부족하기 떄문에 기능을 위한 앱을 추가해야한다.

다음 포스트에는 urls와 views 에 관해 다룰 예정

• 가상 환경을 모르는 경우 지난 게시물 참조

- 가상 환경 실행

- Django 설치 (pip)

- 프로젝트 생성

가상 환경 실행 + Django 설치

• 가상 환경을 실행한다.
• 'pip install django' 입력

Django 프로젝트 생성하기

• workspace 폴더로 이동해 project 파일을 저장할 공간을 생성한다. ( 'mkdir testProjects' 를 입력해 폴더 생성 )
• 생성한 폴더로 이동
• ' django-admin startproject "생성할 프로젝트명" ' 입력

- 프로젝트의 정보와 설정이 담긴 파일 생성

- app 파일 생성은 다음 포스트

• 가상 환경 (virtual environment) 을 이용해 프로젝트마다 특정 버전의 Python을 사용 할 수 있음

• 프로젝트의 유지/보수가 편하고 프로젝트를 독립적으로 관리할 수 있다.

• 가상 환경을 이용하면 특정 패키지가 다른 프로젝트에 영향을 끼치지 않도록 격리할 수 있음 ( 불필요한 충돌 방지 )

• Python 3.3 버전 이후로 venv가 내장되어 있음 ( 별도의 설치 없이 사용 가능 )

2. 가상 환경(venv) 생성하기

1. cmd 실행

2. 각자 가상 환경을 만들 폴더로 이동

• 저는 Python을 설치한 폴더에 workspace라는 폴더를 만들고 그곳에 가상환경을 설치하려고 함.

3. 가상 환경을 생성

• 해당 위치에서 " python -m venv '가상 환경을 만들 폴더 이름' " 을 입력하면 폴더가 생성되고 내부에는 사진과 같은 파일이 들어있음.   1) 가상 환경을 생성하는 명령어 2) 생성한 가상 환경 내부 폴더

3. 생성한 가상 환경(venv) 실행

1. 생성한 가상 환경 폴더 내부 Scripts로 이동
2. 이동 후 activate 입력

3. 결과 - 성공!

#. batch 파일을 통해 편리하게 가상 환경 실행하기

• 추후에 추가 예정

• show( ) / hide( )
• fadeIn( ) / fadeOut( )
• slideDown( ) / slideUp( )

1. show / hide

🐱‍👤 show( )

• 요소를 점점 커지게 하면서 화면에 나타낸다
• 요소에 적용된 display : none 스타일을 제거한다.

  🐱‍👤 hide( )

• 요소를 점점 작아지게하고 결국 화면에서 사라지게 한다.
• 요소에 display : none 스타일을 추가한다.

2. fadeIn / fadeOut

🐱‍👤 fadeIn( )

• 투명한 상태에서 점점 선명해진다.
• opacity 스타일을 변경하여 display : none 스타일을 제거한다.

  🐱‍👤 fadeOut( )

• 요소를 점점 투명하게하고 화면에서 사라지게 한다.
• opacity 스타일을 변경하여 display : none 스타일을 추가한다.

3. slideDown / slideUp

🐱‍👤 slideDown( )

• 위에서 아래로 내려오는 동작 (펼치기)
• height를 변경하여 display : none 스타일을 제거한다.

  🐱‍👤 slideUp( )

• 아래에서 위로 올라가는 동작 (접기)
• height를 변경하여 display : none 스타일을 추가한다.

4. toggle

🐱‍👤 토글 (toggle) 이란?

• 하나의 버튼에 두 가지 상태를 지정하는 것 (스위치)

  🐱‍👤 togle( )

• 요소의 display 상태에 따라서 show( )와 hide( )를 수행한다.

  토글 기능

  $("#toggle-btn").on("click",function(){

    if($("#img1").css("display") == "none"){
        $("#img1").show(1000);
    }else{
        $("#img1").hide(1000);
    }
  });

토글 메서드

$("#toggle-btn2").on("click",function(){
    $("#img1").toggle(1000);
});

DOM(Document Object Model)

• HTML(웹문서, 웹페이지) 문서를 객체 기반으로 표현한 것 -> HTML 문서에 작성된 내용을 트리구조로 나타낼 때, 각각의 태그, TEXT, COMMENT 등을 Node라고 함

  document : { DOCTYPE : html,

   HTML : {
       HEAD : {
               TITLE :
                   STYLE :
                   META : 
                   },
                   BODY : {
                       H1 : { TEXT : "제목", ATTRIBUTE : "속성"},
                           COMMENT : { TEXT : "주석 내용" },
                          DIV : { ... }
                           }
          }
      }

Node

parentNode : 부모 노드
childNodes : 자식 노드 리스트
firstChild : 첫 번째 자식 노드
lastChild : 마지막 자식 노드
childNodes[index] : index번째 자식 노드
previousSibling : 이전 형제 노드
nextSibling : 다음 형제 노드

Node VS Element

Node : 태그(요소 노드), 속성, 주석, 내용 등을 모두 노드라고 표현함. Element : Node의 하위 개념으로 요소 노드만을 지칭한다.

Element만 선택하는 방법 children : 자식 요소만 선택 parentElement : 부모 요소 선택

firstElementChild : 첫 번째 자식 요소를 반환하고 없으면 null을 반환한다. lastElementChild : 마지막 자식 요소 반환

previousElementSibling : 이전 형제 요소 (없으면 null 반환) nextElementSibling : 다음 형제 요소 (없으면 null 반환)

🔹 JS 작성방법 3가지

1. inline

태그에 직접 간단한 코드를 작성하여 실행하는 방법

<button onclick="alert('버튼이 클릭되었습니다.');">경고창(알림창) 출력</button>

<button onclick="console.log('개발자도구 console에 출력');">console에 출력</button>

경고창(알림창) 출력 console에 출력

2. internal

HTML 문서 내부(internal)에 script 태그를 선언하여 작성한다. script 태그는 head, body 태그에 작성 가능하다.

  <!-- 함수 호출 -->
  <button onclick="testFn();">함수 호출 버튼</button>
  <button onclick="add(10,20);">더하기</button>

  <script>
    // 함수( function == 기능(java의 method와 비슷함) )
    // 함수는 선언, 정의, 호출 세 가지로 구분된다. (메서드와 같음)
    // function 함수명( 매개변수 ){ }  -> 함수 선언 기본 형식

    // 함수 선언
    function testFn() {
      // 함수 정의
      for (let i = 0; i < 10; i++) {
        console.log(i);
      }
    };

    // 매개변수가 있는 함수
    function add(num1, num2) {
      alert("두 수의 합 : " + (num1 + num2));
    }
  </script>

함수 호출 버튼 더하기

3. external

외부에 별도로 JS만 작성하는 .js 파일을 생성하여 연결하는 방법

  <button onclick="sample1();">sample1 함수 호출</button>
  <button onclick="sample2();">sample2 함수 호출</button>

  <script src="js/02_JS작성방식.js"></script>