문제 설명


문제

2×n 직사각형을 1×2, 2×1과 2×2 타일로 채우는 방법의 수를 구하는 프로그램을 작성하시오.

아래 그림은 2×17 직사각형을 채운 한가지 예이다.

입력

첫째 줄에 n이 주어진다. (1 ≤ n ≤ 1,000)

출력

첫째 줄에 2×n 크기의 직사각형을 채우는 방법의 수를 10,007로 나눈 나머지를 출력한다.


풀이 과정

  1. 현재 칸에 도달하기 위해서는 이전 타일에서 1x2 타일을 붙이거나
  2. 2칸 이전의 타일에서 2 x 1 타일을 2개 붙이거나 2x2 타일을 1개 붙이는 경우이다.
  3. 따라서, dp[n] = dp[n-1] + dp[n-2] * 2가 된다.
    • x2 해주는 이유는, 2가지 케이스로 도달 가능하므로 경우의 수는 2배가 된다.
  4. 점화식을 통해 아래에서부터 위로 테이블을 채워주면 된다.

소스 코드

import sys

input = sys.stdin.readline
n = int(input().rstrip())
if n == 1:
    print(1)
    sys.exit(0)

dp = [0] * (n+1)
dp[1] = 1
dp[2] = 3
for i in range(3, n+1):
    dp[i] = dp[i-1] + (dp[i-2] * 2)

print(dp[n] % 10007)

문제 설명


문제

수 N개가 주어졌을 때, i번째 수부터 j번째 수까지 합을 구하는 프로그램을 작성하시오.

입력

첫째 줄에 수의 개수 N과 합을 구해야 하는 횟수 M이 주어진다. 둘째 줄에는 N개의 수가 주어진다. 수는 1,000보다 작거나 같은 자연수이다. 셋째 줄부터 M개의 줄에는 합을 구해야 하는 구간 i와 j가 주어진다.

출력

총 M개의 줄에 입력으로 주어진 i번째 수부터 j번째 수까지 합을 출력한다.

제한

  • 1 ≤ N ≤ 100,000
  • 1 ≤ M ≤ 100,000
  • 1 ≤ i ≤ j ≤ N

풀이과정

★ 다른 알고리즘 문제에서도 많이 쓰임!!

  1. DP[n]을 n번째 인덱스까지의 합으로 설정한다.
    • DP[n] = array[0]~[n]까지의 합
  2. 따라서 a 인덱스~b 인덱스까지의 구간합은 DP[b] - DP[a-1]로 정의할 수 있다.
  3. 단, a가 0인 경우에는 그냥 DP[b]를 출력하면 된다.

소스 코드

import sys
n, m = map(int, sys.stdin.readline().rstrip().split())
numbers = list(map(int,sys.stdin.readline().rstrip().split()))

dp = [numbers[0]] + [0] * (n-1)

for i in range(1, n):
    dp[i] = dp[i-1] + numbers[i]

for i in range(m):
    src, dest = map(int, sys.stdin.readline().rstrip().split())
    src = src - 1
    dest = dest - 1
    if src == 0:
        print(dp[dest])
    else:
        print(dp[dest]-dp[src-1])

문제 설명


문제

상근이는 길을 걷다가 신기한 기계를 발견했다. 기계는 매우 매우 큰 화면과 버튼 하나로 이루어져 있다.

기계를 발견했을 때, 화면에는 A만 표시되어져 있었다. 버튼을 누르니 글자가 B로 변했다. 한 번 더 누르니 BA로 바뀌고, 그 다음에는 BAB, 그리고 BABBA로 바뀌었다. 상근이는 화면의 모든 B는 BA로 바뀌고, A는 B로 바뀐다는 사실을 알게되었다.

버튼을 K번 눌렀을 때, 화면에 A와 B의 개수는 몇 개가 될까?

입력

첫째 줄에 K (1 ≤ K ≤ 45)가 주어진다.

출력

첫째 줄에 A의 개수와 B의 개수를 공백으로 구분해 출력한다.


풀이 과정

  1. K가 1일때부터 쭉 나열해 본다.

    K
    0 A
    1 B
    2 BA
    3 BAB
    4 BABBA
    5 BABBABAB
    6 BABBABABBABBA
  2. 나열해 보면.. K가 n일때는 n-1일때의 값과 n-2일때의 값을 합쳐주었다는 것을 볼 수 있다.

  3. 따라서, a의 개수를 세는 dp_a, b의 개수를 세는 dp_b를 선언해 두고,

    • dp_a[n] = dp_a[n-1] + dp_a[n-2]
    • dp_b[n] = dp_b[n-1] + dp_b[n-2]
    • dp_a[0~1] = [1, 0]
    • dp_b[0~1] = [0, 1]
  4. 각각의 dp[n]을 리턴해주면 된다.


소스 코드

import sys
n = int(sys.stdin.readline().rstrip())

dp_a = [0] * (n+1)
dp_b = [0] * (n+1)

dp_a[0] = 1
dp_b[0] = 0
dp_a[1] = 0
dp_b[1] = 1

for i in range(2, n+1):
    dp_a[i] = dp_a[i-1] + dp_a[i-2]
    dp_b[i] = dp_b[i-1] + dp_b[i-2]

print(dp_a[n], dp_b[n])

숫자 정렬

  • 자바스크립트의 경우, 정렬 시 아스키코드 순 정렬되어 숫자 두자리 이상인경우 정렬이 잘 안되는 문제
  • 이러한 점을 해결하기 위해, 비교함수 지정
      statues.sort(function(a, b){
          return a - b;
      })

'Language > JavaScript' 카테고리의 다른 글

[ JavaScript ] 함수, 표기법, 예외 처리  (0) 2021.07.29
[ JavaScript ] 데이터 타입  (0) 2021.07.29
[JavaScript] 이벤트 처리  (0) 2021.07.26
[JavaScript] 배열  (0) 2021.07.25
[JavaScript] 객체  (0) 2021.07.25

이벤트 핸들러


  1. HTML에서 onclick으로 등록 ⇒ 잘 사용하지 않음
  2. onclick 등록
btn.onclick = function() {
    하는것
};
  • onclick은 여러번 쓰면 이전것이 없어지는 문제가 있음.
  1. addEventListener / removeEventListener
  • 가장 권장하는 방법
  • 하나의 요소에 여러개의 이벤트 등록할 수 있음.
  • removeEventListener → addEventListener에서 등록한 대로 그대로 써주어야 함.
  • removeEventListener은 addEventListener으로 등록한 이벤트만 삭제 가능
  • 두번째 인자는 함수명!! 함수()로 써주면 리턴값이 들어가게 됨.
btn.addEventListener(이벤트, 핸들러);

function event() {
    console.log('hello world');
}
function event2() {
    console.log('world hello');
}

btn.addEventListener('click', event); // event 등록
btn.addEventListener('click', event2); // event 등록 (이전것과 현재것 같이 실행)
btn.removeEventListener('click', event); // event 삭제, 
// 삭제 시 두번째 인자 등록했을 때의 핸들러 그대로

이벤트


  1. 마우스 이벤트
    1. mousedown → 마우스 버튼 누를때
    2. mouseup → 마우스 버튼 눌렀다가 뗄때
    3. click → 왼쪽 버튼 클릭
    4. dblclick → 왼쪽 버튼 더블클릭
    5. contextmenu → 오른쪽 버튼
    6. mousemove → 마우스 움직이는 순간
    7. mouseover → 마우스 포인터가 올라온 순간
    8. mouseout → 마우스 포인터가 요소에서 벗어난 순간
    9. mouseenter → 마우스 포인터가 요소 위로 올라온 순간(버블링 x)
    10. mouseleave → 마우스 포인터가 요소에서 벗어난 순간(버블링 x)
  2. 키보드 이벤트
    1. keydown → 키보드 누르는 순간
    2. keypress → 키보드 버튼 누르는 순간 (출력되는 키에서만 동작, insert, shift같은건 동작 X)
    3. keyup → 키보드의 버튼을 눌렀다 떼는 순간
  3. 포커스 이벤트
    1. focusin : 요소에 포커스 되는 순간
    2. focusout → 요소로부터 포커스가 빠져나가는 순간
    3. focus : 요소에 포커스가 되는 순간(버블링 x)
    4. blur : 요소로부터 포커스가 빠져나가는 순간(버블링 x)
  4. 입력 이벤트
    1. change → 입력된 값이 바뀌는 순간
    2. input → 값 입력되는 순간
    3. select → 입력 양식의 하나가 선택되는 순간
    4. submit → 폼 전송하는 순간
  5. 스크롤 이벤트
    1. scroll → 스크롤 바 움직일 때
  6. 윈도우 창
    1. resize → 윈도우 사이즈 움직일 때

이벤트 객체


  • 이벤트 발생 시 이벤트 객체가 만들어진 후, 이벤트 핸들러의 첫번째 파라메터에 전달

      function print(event) {
        console.log(event);
      }
    
      element.addEventListener('keydown', print);

이벤트 객체 프로퍼티

  • 공통 프로퍼티
    1. type → 이벤트 이름
    2. target → 이벤트가 발생한 요소
    3. currentTarget → 이벤트 핸들러가 등록된 요소
    4. timeStamp → 이벤트 발생 시간
    5. bubbles → 버블링 단계인지 판단
  • 마우스
    1. button → 누른 마우스 버튼 (0 : 왼쪽, 1 : 휠, 2 : 오른쪽)
    2. clientX, clientY → 브라우저 표시 영역에서의 마우스 위치
    3. pageX, pageY → 문서 영역에서의 마우스 위치
    4. offsetX, offsetY → 이벤트 발생한 요소에서의 마우스 위치
    5. screenX, screenY → 모니터 화면 영역에서의 마우스 위치
    6. altKey → alt를 눌렀는지
    7. ctrlKey → ctrl을 눌렀는지
    8. shiftKey → shift키를 눌렀는지
    9. metaKey → meta키를 눌렀는지 (window키 or cmd키)
  • 키보드
    1. key → 누른 키가 가지고있는 값
    2. code → 누른 키의 물리적 위치
    3. altKey → alt키 눌렀는지
    4. ctrlKey → ctrl키 눌렀는지
    5. shiftKey → shift키를 눌렀는지
    6. metaKey → meta키를 눌렀는지 (window키 or cmd키)

이벤트 버블링


  • 같은 이벤트에 대해서 부모 요소의 핸들러도 같이 발생하는 현상(document, window까지)
  • target 프로퍼티 : 처음 발생한 이벤트로 고정
  • currenttarget : 이벤트 핸들러가 동작하는 요소 출력
  • e.stopPropagation() → 버블링 멈출 수 있음, 권장하지는 않음.

캡처링


  • 캡처링 : 같은 이벤트가 자식 요소로 전파되는 단계
  • 버블링 : 이벤트가 상위 요소로 전파되는 단계
  • 타깃 : 이벤트가 실제 타깃 요소에 전달되는 단계
  • 캡처링을 사용하기 위해서는 addEventListener의 세번째 프로퍼티
    • true 또는 { capture : true }

이벤트 위임


  • 버블링을 활용

    • 부모 요소에 이벤트 등록 핸들러를 등록 ⇒ 새로운 요소가 들어오더라도 이벤트 등록 가능

      // 이벤트 위임 (Event Delegation)
      
      const list = document.querySelector('#list');
      // 부모에 EventListener 등록 
      list.addEventListener('click', function(e) {
        // 자식 요소의 클릭 -> 부모 요소의 이벤트 핸들러 호출
        // 클릭한 자식 요소에 대해 이벤트 등록/제거/토글
        if (e.target.classList.contains('item')) {
            e.target.classList.toggle('done');
        }
      });
    • 단 .. 클릭하기 전까지는 이벤트 등록 안되있으니 두번은 클릭해주어야 함,,

브라우저의 기본 동작


  • 브라우저의 기본 동작이란?

    • 웹페이지에서 우클릭하면 메뉴가 나온다던지 , ....
  • event.preventDefault → 브라우저의 기본 동작 제한

    • HTML의 고유역할/의미 훼손할수도 있으니 잘 생각해보고 써야 함.
  • 우클릭 제한 예시

      document.addEventListener('contextmenu', function(e) {
          e.preventDefault();
          alert('마우스 오른쪽 클릭은 사용할 수 없습니다.');
      });

마우스 버튼 이벤트


  • MouseEvent.button
    • 0: 왼쪽, 1: 휠, 2: 오른쪽 버튼
  • MouseEvent.type
    • click: 왼쪽
    • contextmenu : 오른쪽 버튼
    • dblclick : 동일 위치에서 빠르게 두번
      • click 이벤트도 두번 발생
    • mousedown : 버튼 누른 순간
    • mouseup : 버튼 눌렀다 뗀 순간
  • mousedown→click→mouseup 같이 이벤트 발생 순서를 잘 확인하여야 함.

마우스 이동

  • mousemove → 마우스 포인터 이동
    • clientX, clientY → 창(브라우저)기준 마우스 포인터 위치
    • pageX, pageY → 웹문서 전체 기준 마우스 포인터 위치
    • offsetX, offsetY → 요소 기준 마우스 포인터 위치
  • mouseover → 마우스 포인터가 요소 밖에서 안으로 들어갈때
  • mouseout → 마우스 포인터가 요소 안에서 밖으로 나갈때
    • target → 이벤트가 발생한 요소
    • relatedTarget → 이벤트가 발생하기 직전(over)/직후(out) 마우스가 가리키는 요소
  • mouseenter / mouseleave = mouseover / mouseout
    • 버블링 일어나지 않음
    • 자식 요소의 영역 계산하지 않음

키보드 이벤트


KeyboardEvent.type

  • keydown : 키보드 버튼을 누른 순간 ★ 권장
  • keypress : 키보드 버튼을 누른 순간 ★ 권장 X
  • keyup : 키보드 버튼을 눌렀다 뗀 순간
  • key → 이벤트가 발생한 버튼의 값
  • code → 버튼의 키보드에서 물리적 위치

Input 태그


  • text, password, button, checkbox 등등

  • 이벤트

    • focusin : 요소에 포커스가 되었을 때 (클릭되었을 때)
    • focusout : 요소에 포커스가 빠져나갈 때 (다른거 클릭되었을 때)
    • focus → 버블링이 되지 않는 focusin
    • blur → 버블링이 되지 않는 focusout
    • input → 사용자가 입력할 때
    • change → 요소의 값이 변할 때(값이 변하고 focus 이동시 or enter)
  • 속성값을 querySelector로

    • document.querySelector('[속성명=속성값]');

Scroll 이벤트


  • 웹문서가 스크롤될때 발생(주로 window 객체에 이벤트 핸들러 등록)
  • windows.scrollY 값을 기준값 기준으로 비교하면서 이벤트 처리 가능

'Language > JavaScript' 카테고리의 다른 글

[ JavaScript ] 함수, 표기법, 예외 처리  (0) 2021.07.29
[ JavaScript ] 데이터 타입  (0) 2021.07.29
[JavaScript] 몰랐던 문법  (0) 2021.07.26
[JavaScript] 배열  (0) 2021.07.25
[JavaScript] 객체  (0) 2021.07.25

풀이 과정

  1. 현재 자리수가 맨 앞자리라고 할때, 뒷자리 가능한 경우의 수는 (n-1)!이다.
    • 따라서, 맨 앞자리가 1일때는 0(n-1)!, 맨 앞자리가 2일때는 (n-1)!(n-2)!, ... 의 범위를 갖게 된다.
  2. 따라서, 맨 앞자리부터 범위를 구한다.
    • 해당 범위라면, 현재 남아있는 경우의 수에서
      1. 범위의 최솟값을 빼주고
      2. 사용 가능한 숫자 리스트에서 제거
      3. 범위 조정
    • 범위를 조정하는 방식은 (n-1)!에서 (n-1)을 나누어주어 (n-2)!로 만들어 준다.
    • 해당 범위가 아니라면, 범위를 조정해가면서 검사한다.
  3. 매 순간 범위에 해당하는 경우를 answer에 넣어주면 된다.

소스 코드


def solution(n, k):
    answer = []
    candidate = list(i+1 for i in range(n))
    # 맨 앞자리가 고정되었을때 뒷자리 가능한 경우의 수
    p = factorial(n-1) 
    div = n-1

    while div >= 0:
        fr = 0
        to = p
        for idx in range(len(candidate)):
            if fr <= k and k <= to: 
                # 현재 범위 내에 들어가는 경우
                answer.append(candidate[idx])
                # 현재 범위의 최솟값을 빼줌
                k = k - fr
                if div != 0:
                    # 맨 앞자리가 무엇이 나오는지 알음. 
                    # 따라서 다음 자리를 구해야 하므로 n-1자리를 검사했다면
                    # factorial의 결괏값에 n-1을 나누어주면 n-2!이 나옴.
                    p = p // div 
                # 자리수 조정
                div -= 1 
                del candidate[idx] # 현재 사용된 숫자는 지워줌.
                break
            else: 
                # 현재 범위 내에 들어가지 않으면 다음 범위
                fr = fr + p
                to = to + p

    return answer

출처: 프로그래머스 코딩 테스트 연습, https://programmers.co.kr/learn/challenges

'알고리즘[Python] > 프로그래머스' 카테고리의 다른 글

[ Lv 2 ] 후보키  (0) 2021.08.13
[ Lv 3 ] [ DFS ] 여행경로  (0) 2021.08.13
[ Lv 3 ] 최고의 집합  (0) 2021.07.26
[ Lv 3 ] 야근 지수  (0) 2021.07.25
[ Lv 3 ] 기지국 설치  (0) 2021.07.24

풀이 과정

  1. 곱이 최대가 되려면 집합의 모든 수가 비슷한 값을 가질때가 최대이다
    • 예시) n = 3, s = 9라면, (3, 3, 3)이 최대값
  2. 따라서.. s를 n으로 나눈 값들을 넣어 주고, 나머지값은 n+1을 넣어서 채워준다.
    • 즉, s//n을 (n - (s % n))개 넣어주고, (s//n)+1을 (s % n)개 넣어주면 된다.
  3. 결과값을 오름차순으로 정렬해준다.

소스 코드

def solution(n, s):
    answer = []
    temp = s // n
    p = s

    if temp == 0:
        return [-1]

    if s % n == 0:
        answer = [temp] * n
    else:
        answer = [temp + 1] * (s % n) + [temp] * (n - (s % n))

    answer.sort()
    return answer

출처: 프로그래머스 코딩 테스트 연습, https://programmers.co.kr/learn/challenges

'알고리즘[Python] > 프로그래머스' 카테고리의 다른 글

[ Lv 3 ] [ DFS ] 여행경로  (0) 2021.08.13
[ Lv 3 ] 줄 서는 방법  (0) 2021.07.26
[ Lv 3 ] 야근 지수  (0) 2021.07.25
[ Lv 3 ] 기지국 설치  (0) 2021.07.24
[ Lv 3 ] 길 찾기 게임  (0) 2021.07.24

1. 추가 설치

pip install djangorestframework

2. serializer 생성

from rest_framework import serializers
from .models import InterestCompany

class InterestCompanySerializer(serializers.ModelSerializer):
    class Meta:
        model = InterestCompany
        fields = "__all__" # Tuple 형식으로 나열해주어도 된다.

3. ViewSet 생성

  • CRUD를 1개의 View로 구현
    • [GET] api/{pk}/ : detail
    • [PUT] api/{pk}/ : 수정
    • [DELETE] api/{pk}/ : 삭제
    • [GET] api/ : 전체 리스트
    • [POST] api/ : 추가
  • permission_classes 등록이나 생성 시 save 처리 필요(perform_create)
from .serializer import InterestCompanySerializer
from rest_framework import viewsets

class InterestCompanyViewSet(viewsets.ModelViewSet):
    queryset = InterestCompany.objects.all()
    serializer_class = InterestCompanySerializer

4. URL 설정

  • 앱의 urls.py에 다음과 같이 작성
IC_list = InterestCompanyViewSet.as_view({
    'post': 'create',
    'get': 'list'
})

IC_detail = InterestCompanyViewSet.as_view({
    'get': 'retrieve',
    'put': 'update',
    'patch': 'partial_update',
    'delete': 'destroy'
})

path('interest/api/', IC_list, name="api-company-list"),
path('interest/api/<int:pk>/', IC_detail, name="api-company-detail"),

⇒ 보았을 때.. 해당 url로 접근하였을 때, post/get/put/patch/delete 등 접근 방식에 따라 취하는 행동 정의하는 거 같음.

5. 테스트

  • TemplateDoesNotExist(rest_framework/api.html) 에러 등장
    • 구글링 결과 .. INSTALLED_APPS에 등록을 안함.

image

  • Settings.py → INSTALLED_APPS → rest_framework 등록
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework'
    'Interest'
]

Ajax 설정


  • jquery load
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  • Ajax Script 작성
<!--버튼-->
<a class="btn btn-success" id="success" onclick="clickevent(this);" name="{{forloop.counter0}}">관심 기업 등록</a>
<!-- 자기 자신 전달하기 위해선 this로 넘겨주면 된다. -->

function clickevent(self) {
        var idx = $(self).attr('name')
        var name = $('#name'+idx).attr('name')
        var title = $('#title'+idx).attr('name')
        console.log(idx+"//"+name+"//"+title);
        $.ajax({
            type: "POST",
            url: "{% url 'api-company-list' %}",
            data: {
                "company_name" : name,
                "intern_title" : title,
                "duration" : "1900-01-01T12:00"
            },
            dataType: "json",
            success: function(response) {
                window.location.reload()
            },
            error: function(request, status, error) {
                console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+error);

            }
        });
    }
  • Django CSRF 에러시 해결법

    • 인증을 아직 도입하지 않았을 때, 필요 없는경우

      from rest_framework.authentication import SessionAuthentication, BasicAuthentication
      
      class CsrfExemptSessionAuthentication(SessionAuthentication):
        def enforce_csrf(self, request):
            return  # To not perform the csrf check previously happening
      
      #ModelViewSet 맨 윗줄에 추가
      authentication_classes = (CsrfExemptSessionAuthentication, BasicAuthentication)
    • https://stackoverflow.com/questions/30871033/django-rest-framework-remove-csrf

'프레임워크 > Django' 카테고리의 다른 글

[ Django ] MySQL 연동  (0) 2021.09.14
[ Django ] 게시판에 Summernote 에디터 적용  (0) 2021.09.07
[Django] Django 설치  (0) 2021.07.16
[Django] pyenv  (0) 2021.07.16
[Django] 환경 설정  (0) 2021.07.16

배열


  • [ ] 안에 요소 나열
  • 배열이름[index]로 접근, index는 0부터 시작
  • in으로 for문 진행 시 index가 나타남(key)
  • 배열도 객체임.
let courseRanking = [
    '국어', '수학', '과학', '영어'
];

console.log(typeof courseRanking) --> object

배열의 메소드


let arrays = ['a']
a.length // 배열 요소의 수 (members['length'] == a.length)
members[2] // undefined

배열의 길이


  • array.length == array['length']

배열의 삭제


  • array.splice(index)

    • 인덱스 이외의 모든 요소 삭제
  • array.splice(startindex, deleteCount)

    • index에서부터 삭제할 요소의 개수도 같이 설정
  • array.splice(startindex, deleteCount, item)

    • startindex에서부터 삭제할 요소의 개수만큼 삭제 후 item 추가

      arrays.splice(1, 1, 'hello', 'world') // 1번 인덱스 삭제 후 그자리에 hello, world
      arrays.splice(1, 0, 'hello', 'world') // 삭제하지는 않고 그냥 넣음
  • array.shift() → 배열의 첫 요소 삭제

  • array.pop() → 배열의 마지막 요소 삭제

  • array.unshift(value) → 첫 요소로 값 추가

  • array.push(value) → 배열의 마지막 요소로 값 추가

배열에서 특정 값 찾기


  • array.indexOf(item) → 처음부터 시작해서 처음 발견한 인덱스 리턴
  • array.lastindexOf(item) → 마지막에서부터 시작해서 역순으로 처음으로 발견한 인덱스 리턴
  • 요소가 없으면 -1 리턴
  • array.includes(item) → 요소 있으면 true, 없으면 false

배열 뒤집기


  • array.reverse()

for .. of


  • for (변수 of 배열)

      for (let 변수 of 배열) {
          // 변수에 각각의 배열의 요소들이 할당된다.
      }
  • for (let 변수 in 배열) ⇒ 배열[변수]로 사용할수도 있으나 .. 사용하지 않는것을 권장

다차원 배열


let array = [
    [1, 2, 3, 4, 5],
    [6, 7, 8, 9, 10],
]

유의사항


  • 배열을 순서대로 채워주지 않으면 가운데가 empty가 됨
    • [1, 2]일때 [5]에 4 넣어주면 [1, 2, empty, empty, empty, 4]
  • 배열의 요소 삭제 → delete는 empty로 남아있음. 배열의 메소드 사용

'Language > JavaScript' 카테고리의 다른 글

[ JavaScript ] 함수, 표기법, 예외 처리  (0) 2021.07.29
[ JavaScript ] 데이터 타입  (0) 2021.07.29
[JavaScript] 몰랐던 문법  (0) 2021.07.26
[JavaScript] 이벤트 처리  (0) 2021.07.26
[JavaScript] 객체  (0) 2021.07.25

객체


  1. 블록 내에 property name : property value (key : value)
  2. property name
    • 따옴표 생략 가능
    • 첫글자 문자, 밑줄, 달러, 띄어쓰기 금지, 하이픈(-) 금지
    • 정 써주어야 한다면 따옴표로 표기하면 된다
  3. property value
    • 모든 자료형 가능, 객체도 들어갈 수 있음
  4. 각각의 키와 값은 ,(콤마)로 구분
    let object = {
     Name: 'Lee',
     Year: 2021,
     MyStatus: true,
     currentCourse: null,
     bestCourse: {
         title: '자바스크립트',
         language: 'javascript'
     },
     "is happy": true
    }
    console.log(object)

접근법


  1. 객체명.프로퍼티명으로 접근
    • 단, 띄어쓰기나 숫자로 시작하는 프로퍼티명 불가능
  2. 객체명["프로퍼티명"] 으로 접근
    • 위에서 안되는 띄어쓰기, 숫자 시작 가능
  3. 만약 존재하지 않는 프로퍼티명을 접근한다면?
    • null 반환

console.log(object.Name)
console.log(object["is happy"])

property 추가/변경/삭제


  1. 객체의 property 값 수정
  • 객체의 프로퍼티에 접근 후 값을 대입해주면 된다.
    object.Name = 'Kim'; // Name은 이미 있는 property
    console.log(object.Name);
  1. 객체의 property 값 추가
  • 그냥 있는것처럼 접근 후 값 대입해주면 된다.
    object.job = 'soldier';
    console.log(object.job);
  1. 객체의 property 값 제거
  • delete 객체.프로퍼티명
    console.log(object.job) // job 값 출력
    delete object.job
    console.log(object.job) // undefined

객체 내부 property 존재여부 확인


  • '프로퍼티명' in 객체
  • 직접적으로 undefined 비교할수도 있지만 초기에 undefined 할당할수도 있기 때문에 in이 나음.
    if ("is happy" in object) {
      console.log("있어요.");
    } else {
      console.log("없어요.");
    }

객체 내부 메소드 생성


  • 프로퍼티 만들듯이 하면 된다.
    let calculator = {
      add: function(a, b) {
          return a + b;
      }, 
      minus: function(a, b) {
          return a - b;
      },
      multiply: function(a, b) {
          return a * b;
      }
    }
    console.log(calculator.add(3, 5));

for .. in 반복문


  • 객체의 프로퍼티 이름들을 반복
    • 객체의 key값들을 하나씩 가져옴.
  • 프로퍼티 이름이 숫자인 경우 오름차순 정렬, 나머지 프로퍼티명들은 추가한 순서대로
for (변수 in 객체) {
    동작부분
}

for (let key in object) {
    /* 키/값 출력 */
    console.log(key)
    console.log(object[key])
}

Date 객체


let mydate = new Date();
let mydate = new Date(1000); // 1970년 기준 1000밀리초 지남
let mydate = new Date("2021-07-24") 
let mydate = new Date("2021-07-24T19:06:00")
let mydate = new Date(YYYY, MM, DD, HH, mm, ss, ms); // Month는 0부터 시작!!

mydate.getTime() //-> 1970/1/1 00:00:00부터 몇 밀리초 지났는지 => Time Stamp
mydate.getDate() //-> 일자
mydate.getDay() //-> 요일

/* 날짜 차이 구할수 있음 */
let myDate1 = new Date(2017, 4, 18);
let myDate2 = new Date(2017, 4, 19);

/* 날짜에 정수 연산 가능 */
let timeDiff = myDate2 - myDate1;
console.log(timeDiff); // 86400000 (ms)
console.log(timeDiff / 1000); // 86400 (sec)
console.log(timeDiff / 1000 / 60) // 1440 (min)
console.log(timeDiff / 1000 / 60 / 60) // 24 (hour)
console.log(timeDiff / 1000 / 60 / 60 / 24) // 1 (date)

'Language > JavaScript' 카테고리의 다른 글

[ JavaScript ] 함수, 표기법, 예외 처리  (0) 2021.07.29
[ JavaScript ] 데이터 타입  (0) 2021.07.29
[JavaScript] 몰랐던 문법  (0) 2021.07.26
[JavaScript] 이벤트 처리  (0) 2021.07.26
[JavaScript] 배열  (0) 2021.07.25

+ Recent posts