🐷전동준(Jeon DongJun)

Go with the flow

[web]JavaScript 정리3

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!


JavaScript 정리 3️⃣

하.. 뭔가 자바스크립트 공부한 것을 정리해서 남기려고 하면 HTML, CSS, JS 코드 모두 다르게 적용시켜야하고 이미지까지 캡쳐해서 올리려니깐 어렵고 시간이 너무많이 소모된다.. 뭔가 다른 방법을 필히 찾아봐야겠다. 구글링을 하다보면 코드펜 이런게 있던데 지킬에 적용할 수 있는지 찾아봐야겠다.

배열(Array)

  • 자바스크립트에는 배열 객체를 생성하는 Array() 생성자가 존재한다.

  • Array()생성자의 괄호 안에 인수(숫자) 한 개만 적으면 그 수 만큼의 공백 값을 가진 배열이 생성된다.

    • Array(5) : [,,,,] : 타입은 object

    • var arrayObj02 = new Array(5);

    • image

    • image

    • 배열 안의 값들은 각각의 변수라고 생각하면 되는데(변수의 집합), 그래서 Null값이 아닌 undefined라고 타입이 나온다.

    • alert(arrayObj02[0]);
    • image

  • 또한 배열 생성자 안에 2개 이상의 인수를 넣어주면 적은 값을 포함한 배열을 생성한다. 이 또한 타입은 객체다.

    • var arrayObj03 = new Array(1,2,3,4,5);
    • image

  • 또한 배열 안에 배열을 만드는 다차원 배열도 가능하다.

    • function multiArr(){
           var len = 3;
           var arr = new Array(len); // 공백 3개를 포함한 배열  2차원 배열 3개 생성
      
           for (var i = 0; i < arr.length; i++){ // 배열의 길이만큼 반복
               arr[i] = new Array(len); // arr배열 안에 공백의 값을 갖고 있는 배열 생성
           }
      
           arr[0][0] = '수박';
           arr[0][1] = '딸기';
      
           arr[1][0] = 1;
           arr[1][1] = 2;
           arr[1][2] = 3;
      
           arr[2][0] = ['lol','wow'];
           arr[2][1] = ['python','numpy','pandas']
           arr[2][2] = ['javascript',['function']]
      
           arr[1][2] = 9;
    • image

  • 문자열(string)에서 join을 사용한 것 처럼 배열에서도 join이 사용 가능하다.

    • function joinTest(){
            var nums = ['1','2',3,4,'5']
            var res = nums.join('+');
            alert(res);
        }

    • 배열 안의 값들 사이에 join으로 +를 넣어서 res 변수에 저장하고 출력해봤다.

    • image

    • 문자열과 동일하게 배열 안의 값들이 숫자형이나 문자형이어도 사이에 +가 들어간 상태로 출력되는 것을 확인할 수 있다.

    • 여기서 eval을 사용하면 +와 같은 연산자들이 그대로 수행된다.

    • alert(eval(res));

    • image

    • 1,2,3,4,5 가 더해진 15가 출력되는 것을 확인할 수 있다.

    • 여기서 주의. sort 함수를 사용하면 원본이 수정된다.

  • 배열 안의 값들을 정렬할 수도 있다. .sort()메소드를 사용하면 배열이 오름차순으로 정렬된다.

    • function sortTest01(){
            var arr = ['a','d','b','c'];
            alert(arr); // 정렬 되기 전
            arr.sort();
            alert(arr); // 정렬 된 후
        }

    • 정렬 되기 전

      image

    • 정렬 된 후

      image

  • 이번엔 숫자형 값을 가진 배열을 정렬해보자.

    • function sortTest02(){
            var arr = [1,2,6,11,3,65,21]; 
            arr.sort();
            alert(arr);
        }

    • image

    • 오잉? [1,2,3,6,11,21,65] 와 같이 정렬이 될 줄 알았는데 그게 아니다.

    • 이것은 배열을 정렬할 때.sort()메서드 안에 파라미터를 입력하지 않아서 ASCII코드 의 순서에 따라서 정렬하기 때문이다.

    • 그래서 sort메서드 안에 들어갈 파라미터. 즉, 원소의 값을 비교해주는 함수를 만들어야한다.

    • sort 함수 파라미터 안에 들어가는 return 값에 따라 정렬이 다르게 된다.

      • 양수 : 오름차순
      • 0 : 배열 정렬 그대로
      • 음수 : 내림차순

    • 비교해주는 함수를 만들어보자.

      • function compareNum(a, b){
            return a - b;
      • 함수에 인수 두개를 받아 원소를 두개씩 비교하며 정렬해준다.
    • function sortTest02(){
            var arr = [1,2,6,11,3,65,21]; 
            arr.sort(compareNum);
            alert(arr);

    • 이렇게 다시 sort에 파라미터를 넣어서 재실행해보면,

      image

    • 원래 원하던 대로 오름차순으로 잘 정리되는 것을 확인할 수 있다.

  • 기존의 배열 상태에서 역순으로 정렬해주는 함수도 있다. 그것은 바로 .reverse() 메소드.

    • function reverseTest(){
            var arr = [19,2,3,6,22,100];
            arr.reverse();
            alert(arr);
        }

    • image

    • 기존 [19,2,3,6,22,100]에서 [100,22,6,3,2,19] 로 거꾸로 잘 정렬되어 있는 것을 확인할 수 있다.

    • 아까 배운 sort를 활용해 원소들을 크기 순서로 정렬 한 뒤에 reverse를 사용해 내림차순으로 정렬할 수 도 있다.

    • function reverseTest(){
            var arr = [19,2,3,6,22,100];
            arr.sort(function(a,b){return a-b}); // 이렇게 따로 함수를 정의하지 않고 아예 파라미터 안에 함수를 정의해서 실행시켜버리자!
            arr.reverse();
            alert(arr);
        }
    • image

​

  • 배열 객체의 기능 메소드 중에서는 스택과 큐 자료구조를 사용하기 위한 메소드들도 있다.

    • .push() : 배열 안에 원소를 넣어줌
    • .shift() : 배열 안에 가장 먼저 위치한 값을 추출해줌
    • .pop() : 배열의 마지막 원소를 추출해줌

  • 어떻게 작동하는지 확인해보자. pushAndShift라는 함수를 만들어봤다.

    • function pushAndShift(){
            var queue = new Array(); // queue라는 이름의 배열 객체 생성
    
            queue.push('first'); // 'first' 원소 삽입
            queue.push('second'); // 'second' 원소 삽입
            queue.push('third'); // 'third' 원소 삽입
            alert(queue);

    • image

    • 이렇게 먼저 넣은 순서대로 원소가 배열에 잘 들어가 있는 것을 확인할 수 있다.

    • 이제 shift를 사용해 값을 빼본다.

    • var a = queue.shift();
            alert(a);  // 추출한 값
            alert(queue); // 추출하고 남은 배열의 원소들

    • image

    • image

    • 가장 먼저 들어간 'first'가 추출된다. 이것으로 shift 메서드는 먼저들어간 원소가 먼저 나오게 하는 메서드라는 것을 알 수 있다.(선입선출)

    • 이번에는 pop 메서드를 사용하기 위해 배열에 원소하나를 추가해보자

    • queue.push('4th');
alert(queue);

    • image

    • push한 '4th'가 잘 들어갔다. 이제 pop을 사용해 원소를 추출해보자.

    • var b = queue.pop();
            alert(b);
            alert(queue);

    • image

    • image

    • 가장 최근에 삽입한 원소가 빠지는 것을 확인할 수 있다. 즉, pop() 메서드는 가장 나중에 들어온 원소를 추출하는 함수다.(후입선출)

  • 배열은 또 문자열과 같이 슬라이싱(Slicing)이 가능하다.

    • 배열을 하나 생성해보자.

    • function sliceTest(){
    var arr01 = new Array(1,2,3,4,5,6,7);
    var slice01 = arr01.slice(1,3);
    alert(slice01);
}

    • 함수 내에서 arr01이라는 배열을 생성해 줬다. 이 배열은 [1,2,3,4,5,6,7] 라고 생각하자. 이때 slice01이라는 변수에 .slice메소드를 사용해 슬라이싱 해줬다. 메소드안에 들어가는 파라미터는 이렇다.

    • .slice(x, y) : x는 자르기 시작할 위치, y는 자르기를 마칠 위치에 + 1

    • 따라서 위 코드의 arr01.slice(1,3);은 arr01 배열의 1번 위치에 존재한 원소부터 2번 위치에 존재한 원소까지 자른다는 뜻이다. alert로 확인해보자.

    • image

    • 잘 슬라이싱되어 [2,3] 을 출력하는 것을 확인할 수 있다.

  • 슬라이싱한 배열 내의 값을 바꿔주면 원래 배열의 값은 어떻게 될까?

    • var arr02 = new Array(4);
arr02[0] = new Array(1,2);
arr02[1] = new Array(3,4);
arr02[2] = new Array(5,6);
arr02[3] = new Array(7,8);
    
var slice02 = arr02.slice(1,3);

    • 새로운 배열 객체 arr02를 생성해 줬다. 4개의 공백을 가진 배열이다.

    • 각 원소 안에 인덱스를 활용해 새로운 배열들을 생성해 줬다. 이차원 배열이 만들어진다.

    • [[1,2],[3,4],[5,6],[7,8]] 이런 배열이 완성되고 slice02에 슬라이싱을 해주자

    • image

    • arr02의 [1]과 [2]에 있던 값들이 잘 출력되었다.

    • 이때 슬라이싱 한 slice02의 값을 바꿔줘보자.

    • slice02[0][0] = 33;

    • 첫번째에 위치한 원소에서 또 첫번째에 위치한 값을 33으로 바꿔준다.

    • 그러면 [[33,4],[5,6]] 이런 형태가 될 것이라는건 머리속으로 잘 알고 있다.

    • 그런데 이때 슬라싱을 해온 arr02을 확인해보자.

    • image

    • 어라, 기존의 arr02의 원소 3이 33으로 바뀌어 있다.

    • 이것은 슬라이싱은 얕은 복사(shallow) 이기 때문이다. 그래서 원본에도 변화의 영향을 끼치는 것이다.

    • 슬라이싱은 원본을 복사해 새로운 원본을 만드는 깊은 복사(Deep)가 아니라는 점을 다시 정리하게 되었다.


팝업창(Popup)

  • 자바스크립트에서는 widow 함수를 통해서 팝업창을 띄울 수 있다.

  • 그 중 특정한 경로(URL)을 띄우는 open() 함수가 있다.

  • window.open('url','팝업name','팝업 옵션(팝업창의 크기 width=???px 등)')

  • 실제 예시를 통해 구현해보자.

    • 새로운 HTML 파일을 만들어 <head> 태그 부분에 스크립트를 만들어준다.

    • <script type='text/javascript'>
   function popupTest(){
       window.open('js12-popup-res.html','','width=300px, height=300px');
}
</script>

    • 팝업창을 띄우게 하는 함수를 만들어준다. window.open의 파라미터 값을 순서대로 보면

      • 'js12-popup-res.html'이라는 HTML을 창에 띄울 것이고
      • 팝업 이름은 없으며
      • 너비 높이 300px 씩

    • 그리고 body부분에는 만든 함수를 클릭으로 실행되게 해주는 버튼을 만들어준다.

    • <body>
    <button onclick='popupTest();'>팝업창</button>
</body>

    • 그리고 위에 open()의 경로 파라미터에 적은 HTML 파일을 만들어 바디부분에 아무렇게나 작성해준다.

    • 그리고 버튼을 눌러 실행해보면

    • image

    • 정해준 옵션 값을 따르는 팝업창이 띄워지게 된다!

    • image

​


경로(Location)

  • Location 객체를 통해 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용할 수 있다.

  • 속성?메소드?

    • location.href='경로' : 앵커 태그의 href처럼 경로를 지정해 해당 경로의 문서를 불러온다.
    • location.assign('경로') : 현재 창에 지정된 경로에 존재하는 문서를 불러온다.
    • location.replace('경로') : 현재 창에 지정된 경로에 존재하는 문서를 불러오는 것은 assign과 같으나, 현재의 문서를 브라우저의 히스토리에서 제거한다.
    • location.reload() : 브라우저 창에 현재 문서를 다시 불러온다. 새로고침이라고 이해하면 될 것 같다.

  • html 문서를 만들어 body태그에 경로 연습이라는 버튼을 만들어서 실습을 해봤다.

    • <body>
    <button onclick='locTest();'>경로 연습</button>
</body>

    • 스크립트에 버튼을 클릭했을 경우 동작할 함수 locTest()를 만들어준다.

    • <script>
   function locTest(){
   location.href='http://www.naver.com';     
     }
</script>

    • 처음으로는 location.href인데 경로에 네이버의 주소를 작성했다. 버튼을 누르면 네이버로 잘 연결된다.

    • location.assign('http://www.google.com');

    • location.assign을 사용해서 경로를 구글 주소로 작성했다. 버튼을 누르면 구글 홈페이지가 잘 나올 것이다.

    • location.replace('http://google.com');
    • 이번에는 location.replace() 를 사용했다. 동일하게 구글 홈페이지가 나오지만 뒤로가기 버튼이 나오지 않을 것이다. 그말은 즉슨, 버튼이 존재한 문서를 히스토리에서 지워버린다는 말이다!


체크박스(CheckBox)

  • 체크박스는 input태그의 타입 중 하나다. 주로 클라이언트에게 선택할 항목들을 먼저 제시한 뒤에 요청할 요소들을 재량껏 선택하게 해줄 때 사용하는 것 같다.

  • 실습을 통해 연습해보았다.

  • 우선 HTML의 내용부터 만들어주자. <body> 태그에 들어간 내용들이다.

    • <body>
        
    <div id='colorbox'>
        <div id='red'>red</div>
        <div id='green'>green</div>
        <div id='blue'>blue</div>
        <div id='magenta'>magenta</div>
    
    </div>
    
    <div id='base'>
        <form>
            <input type='checkbox' name='all' onclick='allCheck(this.checked);'/>전체 선택<br>
    
            <input type='checkbox' name='chk' value='red'/>빨강<br>
            <input type='checkbox' name='chk' value='green'/>초록<br>
            <input type='checkbox' name='chk' value='blue'/>파랑<br>
            <input type='checkbox' name='chk' value='magenta'/>진홍<br>
    
            <input type='button' value='선택' onclick='selectColor();' />
            <input type='button' value='취소' onclick='clearDiv();' />
    
        </form>
    </div>
    
</body>

  • 스타일 영역이다. <header> 태그 안에 <style> 태그를 넣어 스타일을 입혀주자.

    • <head>
	<style>
        #colorbox{
            width: 320px;
            height: 320px;
            position: relative;
        }
        #red, #green, #blue, #magenta{
            width: 150px;
            height: 150px;
            border: 1px solid black;
            position: absolute;
    
        }
        #green{
            left: 160px;
    
        }
        #blue{
            top:160px;
    
        }
        #magenta{
            left: 160px;
            top: 160px;
        }
</head>

  • 본문과 스타일을 지정해주면 문서가 이렇게 구현될 것이다.

    • image

  • 이제 스크립트를 적용해 색상의 이름이 적힌 체크박스를 눌러서 선택했을 때 해당 영역의 박스의 색깔이 변하는 함수를 구현해보자.

    • function selectColor(){
    var chks = document.getElementsByName('chk');
                
    for (var i = 0; i < chks.length; i++) {
    	if (chks[i].checked) {
    		document.getElementById(chks[i].value).style.backgroundColor = chks[i].value;
        } else {
        	document.getElementById(chks[i].value).style.backgroundColor = '';
		}
		}
	}

    • selectColor함수를 설명하자면 이렇다.

    • <body> 태그에 있는 문서 내용 중 name이 'chk'인 요소들을 불러와 chks라는 변수에 노드리스트로 저장한다.

    • 반복문을 0부터 chks노드리스트의 길이만큼 1씩 늘려가며 반복해준다.

    • 이때 불러온 노드리스트의 각 노드들은 <input> 태그의 체크박스들을 의미한다. 체크박스의 속성인 checked는 체크박스에 체크가 되어있다면 true를, 비어있다면 false를 반환한다.

    • 그래서 각 노드들의 체크 여부를 판단해 값이 true라면 각 체크박스가 가지고 있는 value 값(첫번째 노드(체크박스)는 value=’red’)과 같은 id(id가 ‘red’인 요소)를 찾아서 배경색을 그 값(‘red)’으로 적용시켜준다.

    • 만약에 false(체크박스가 체크되지 않고 비어있다면) 배경색을 해제해준다.(backgroundColor = ‘’;)

    • 선택 버튼을 누르면 해당 함수가 실행된다. 빨강과 진홍을 체크하고 선택을 눌러보면

    • image

    • 이렇게 잘 적용되는 것을 확인할 수 있다.

  • 다음은 전체 선택이라는 체크박스를 체크하면 나머지 박스들이 모두 체크가 되게만드는 함수다.

    • function allCheck(bool){
    var chks = document.getElementsByName('chk');
    
    for (var i = 0; i < chks.length; i++) {
    	chks[i].checked = bool;
    }
}

    • name이 'chk'인 요소들을 불러와 노드리스트로 만들어 chks 라는 변수에 저장해준다.

    • 노드리스트의 길이만큼 반복해 각 노드(체크박스들)의 체크 상태를 값을 입력받는 파라미터의 값에 맞게 적용시켜준다.

    • 전체 선택 체크박스를 누르면 allCheck()함수가 적용되게 만들어준다.

    • <input type='checkbox' name='all' onclick='allCheck(this.checked);'/>전체 선택<br>

    • 여기서 파라미터로 들어간 this.checked는 전체선택 체크박스가 체크된 상태라면 True를, 안된 상태라면 False를 반환해준다.

    • 그래서 전체선택박스가 선택되면 True 값을 반환해 다른 체크박스들의 checked 속성도 true가 되어 체크가 된 상태로 변하고, 그 반대의 경우도 나오는 것이다.

    • image

    • 전체 선택박스를 체크 했다 풀었다 해보면 밑의 체크박스들도 똑같이 동작하는 것을 확인할 수 있다.

  • 이제 마지막으로 체크 상태를 초기화하고 컬러박스들의 배경값도 모두 초기화 시키는 함수만 남았다.

    • function clearDiv(){
    allCheck(false);
    var colorbox = document.querySelectorAll('#colorbox > div');
    for (var i = 0; i < colorbox.length; i++) {
        colorbox[i].style.backgroundColor = '';
    }
}

    • 위에서 생성한 allCheck()함수의 파라미터 값에 false를 넣어서 모든 체크박스를 선택 안됌 상태로 만들어 준다.

    • 선택자를 이용해 아이디가 colorbox이며 그 자식이 div 태그인 것들을 선택해서 colorbox라는 변수에 저장해준다.

    • colorbox의 길이만큼 반복문을 반복하는데, 요소들이 순차적으로 배경색이 없음으로 적용되게 만든다.

    • 문서로 돌아가 취소버튼을 누르면 체크가 풀리며 배경색이 모두 없음으로 변경되는 것을 확인할 수 있다.


윈도우(Window)

  • 윈도우 객체에 대해 배우며 실습한 것들을 토대로 작성을 하려다가.. 이건 글로 정리하면 너무 오래걸리고 다른 공부를 할 수 없을 것 같아서 혼자 한번 더 생각하면서 코드를 보며 이해를 하려고 한다.
  • 실습 내용은 내 깃허브에 있다. https://github.com/GoodJeon/FullStack/tree/main/Mulcam/web/web03-js
  • 여기에 적는 내용들은 실습을 진행하며 다시 한번 기억해야할만한 스타일, 스크립트의 메소드나 속성이나 그런 것들 위주다.
  • 윈도우 객체 프로퍼티와 메소드를 정리해놓은 사이트:
  • <tag>
    • <iframe> : 문서 안에 또 다른 프레임을 만든다. 즉, 웹페이지 안에 또다른 웹페이지를 삽입하는 것을 의미. inline frame의 약자. 속성으로는 삽입하려는 주소인 src와 웹 브라우저에게 어떤 iframe인지 알리는 title이 있다.
    • <pre> : 태그 안에 내용을 작성하면 내용을 형식 그대로 반영되게 만들어주는 태그.
  • <style>
    • position: absolute; : position: static 속성을 가지고 있지 않은 조상을 기준으로 위치. 만약에 조상 중 position이 relative, absolute, fixed,인 태그가 없다면 가장 위의 태그(<body>)가 기준이 된다.
    • display: none; : 요소를 보이지 않게 하는 속성. 다만, UI적으로 볼 때 화면 상 어떤 영역을 차지하지 않고 완전히 삭제된 것처럼 만듦. 쉽게 얘기하면 문서에서 시각적으로 공간을 차지하지 않는다!
    • visibility: hidden; : display: none과 같이 요소를 보이지 않게 하는 속성. 하지만 visibility : hidden은 해당 요소가 보이지 않지만 존재하는 영역은 확실하게 보인다(비어있는 것 처럼). 쉽게 얘기하면 문서에서 시각적인 공간을 차지하고 있으며 내용만 보이지 않는 것!
    • <input readonly='readonly'> : 인풋 태그 안의 속성으로, 읽기전용이다. 해당 내용을 복사하거나하는 것은 되지만 내용을 변경할 수는 없게 만들어준다.
    • colspan=? : 행 합치기.
    • .disabled = '' : 기능을 활성화 시킨다.
    • .disabled = 'disabled'; : 기능을 비활성화 시킨다.(예를들어 버튼이 있으면 버튼을 사용할 수 없게 만듦)
  • <script>
    • window.open(url, name, prop) : url에 적힌 주소(링크나 문서)를 새로운 창을 열어 불러와준다. 이때 prop 에 크기와 같은 속성들을 설정해줄 수 있다. 실습 때 알게 된 것은, <iframe> 태그의 name 속성과 name을 똑같이 설정해주면 iframe의 자리에 새 문서를 띄워준다. 그래서 동일 문서에서 2개의 웹 페이지를 볼 수도 있다.
    • document.getElement(s)By~~ : 내가 생각하기엔 자바스크립트의 꽃 같다. 계~~~ 속 사용된다. 요소에 따라 value, innerHTML 등 다양한 속성이 존재하니깐 까먹지말자구~
    • opener :open을 이용해 새 창을 띄우면 새로 띄운 창은 자식창이 된다. 그 자식창에서 부모창을 가리키는 것이 opener 객체다. 부모창의 요소들의 값을 가져오거나 그곳에 뭔가를 적용하거나 하고싶을 때 사용할 수 있다. 혹은 위에 적어둔 경로(Location) 객체를 사용해 자식창에서 부모창에 지정한 문서나 페이지를 열게 만들 수 도 있다. 리모콘같은 느낌?..음
    • close() : 현재 창을 닫는다. self.close()로도 가능하다. 허나 같은 문서에 <iframe> 태그에 창을 띄워 놓았을 때는 self.close()가 먹히질 않는데, 이건 말그대로 iframe이 다른 웹페이지로 작동되기 때문이다.

기타

  • DOM을 이용해 여러 실습을 해보았다.

    1. 화살표 이미지와 기타 이미지들을 이용해서 이미지를 눌러 다음 사진, 이전 사진이 나오게하는 실습

    2. 부모와 자식을 탐색하는 함수를 만들어 문서 객체 모델들이 어떻게 구조화가 되어있는지 감을 또 잡을 수 있게 되었다.

      • .parentNode : 부모 노드를 호출

      • .childNodes : 자식 노드리스트를 호출

      • .nodeName : 노드 명

2022

[web]jQuery 복습 3

2 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]jQuery 복습 2

11 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]jQuery 복습 1

16 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리4

6 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리3

10 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리2

7 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리1

8 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]CSS 기초 정리

11 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]HTML 기초 정리

8 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[Pandas]pandas 연습

3 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

맨 위로 이동 ↑

2021

[Python기초]module

1 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

맨 위로 이동 ↑