자바를 배우기 전에 HTML을 잠깐 했었는데, 그 때마다 태그에 관해서 부모와 자식이라는 단어를 많이 사용했었다. 처음엔 이해하기 쉬우라고 예를 들어 설명하는 줄 알았지만 지금까지 배워오니 그 관계를 깨닫는 것이 얼마나 중요한 부분인지를 알게 되었다. 여기서 상속이란, 부모가 자식에게 넘겨주는 그 상속을 일컫는 것이 맞다. 부모가 가지고 있는 기존의 코드나 변수를 그대로 물려줌으로써 불필요한 중복을 피하고, 코드문을 간결하게 만들 수 있다. 여기서 상속을 받는 클래스는 자식 클래스가 되며, 물려주는 클래스는 부모 혹은 조상 클래스가 된다.

클래스를 생성할 때 extends를 사용하여 상속을 할 수 있다. (단, 한 번의 상속만 가능하다. 다중상속 X)
class (자식이 될 클래스 명) extends (부모가 될 클래스 명) {  }

 

 

   Student 클래스와 Teacher 클래스에 exam_40_per 클래스를 상속하자, 메인 함수에서 불러올 때 자식의 참조변수를 통해 불러냈음에도 부모요소가 가지고 있던 함수의 값이 그대로 출력되었다. 부모가 가지고 있는 변수와 함수 모두 자식이 사용할 수 있도록 상속이 일어난 것이다. 하지만 반대의 경우는 호출할 수 없다, 부모는 자식이 가진 함수나 변수를 사용할 수 없다는 의미다. 그렇다면 만약 자식의 클래스에서는 부모의 함수나 변수를 바꿔 출력하고 싶을 경우에는 어떻게 해야할까.

 

 

   생성자를 만들 때, 혹은 중복된 이름의 함수를 작성할 때 오버로딩이 쓰였던 것을 기억하자. 여기서 자식이 부모의 함수를 가져와 새로 작성하는 것오버라이딩이라고 한다. 주로 프로젝트(협업)을 위해 사용되거나 이후에 배울 다향성에 관해서 주로 사용되는 기능이다. 지금 여기서는 부모가 가진 메서드를 자식이 이름만 들고와 다른 기능으로 바꿀 수 있다는 것을 알아두자.

(물론, 자식에서 바꾼 것이기 때문에 부모가 가진 메서드 자체가 바뀌는 것은 아니다)

 

   Leader클래스에서 오버라이딩 한 say() 함수를 살펴보자. 출력문을 바꾼 것과 동시에, super를 사용하여 다시 한 번 같은 함수를 호출하고 있다. this를 기억한다면 이해하기 쉬운데, super는 해당 클래스의 부모 요소를 직접적으로 안내해주는 참조변수와 같다. this는 해당 클래스, super는 해당 클래스의 부모를 가리키는데, 부모의 sya()를 실행하라는 뜻이므로 Leader의 함수 say()를 불러오면 "선생님께 인사" 와 "선생님, 안녕하세요" 가 둘 다 출력되게 된다.

 

   그렇다면 상속받은 부모와 자식 관계에서 생성자에는 변함이 없을까? 만약 부모가 존재하지 않는 상태인데 자식만 존재하는 상태가 될 수 있을까, 정답은 그렇지 않다. 그래서 우리는 상속받은 클래스에 한해서 부모 생성자를 포함시켜주어야 하는데 보통 생략하면 프로그램 내에서 자동으로 추가해주기는 한다. 하지만 정석으로는 super(); 생성자를 자식 클래스 생성자 안에 포함시켜주는게 맞다. 그래야 자식 클래스가 객체화 되었을 때, 부모도 같이 존재하는 상태가 되기 때문이다.

 

 

   그렇다면 이를 응용한 문제를 확인해보자. SportsCar라는 클래스가 Car2를 상속받은 상태가 되었고, 각 클래스에는 필요한 변수와 함수가 나열되어 있다. 여기서 Car2의 생성자는 파라미터를 받을 수 있는 형태로 만들어져 있고, SportsCar 역시 필요한 파라미터를 받아 초기화 할 수 있는 생성자를 만들었다. 하지만 생성할 수 없다며 에러가 떴다. 그 이유는 Car2의 생성자는 color값을 받아 초기화하는 생성자만 있기 때문이었다. 기본적으로 자식 클래스 생성자는 부모 클래스의 기본형태의 생성자가 자동으로 들어간다. 하지만 Car2의 생성자를 보면 기본생성자가 없기 때문에 초기화를 받을 값이 없다며 에러가 뜨는 상태였다. 이를 해결하기 위해선 Car2에 기본 생성자를 만들어주거나, 아니면 부모 생성자 안에 파라미터 값을 입력해주면 에러없이 정상적으로 만들어지는 것을 확인할 수 있다.

 

   하지만 SportCar 생성자에서 드는 의문이 하나 있을 것이다. 바로 color라는 변수를 가지고 있지 않음에도 this를 사용하여 변수의 초기화를 진행하자 아무런 에러가 뜨지 않은 것인데, 이는 부모의 변수도 함께 상속받음으로써 SportsCar 클래스 내에 부모의 변수가 존재하기 때문이다. 그래서 super를 써도 불러올 수 있지만, this로도 불러올 수 있는 것이다.

(니것도 내것 내것도 내것)

 

 

'아이티에듀넷' 카테고리의 다른 글

2024-09-19 :: 039 함수 정리하기  (0) 2024.09.19
2024-09-13 :: 038 객체의 다형성  (0) 2024.09.13
2024-09-11 :: 036 String에 관하여  (0) 2024.09.11
2024-09-10 :: 035 생성자  (0) 2024.09.10
2024-09-09 :: 034 객체  (0) 2024.09.09
String : java에서 문자열을 담을 때 사용하는 변수, 큰따옴표(" ") 안에 내용을 입력하여 사용한다.

 

   기존에 알고있던 String에 대한 개념이다. int는 정수, float는 실수, char는 문자, boolean은 논리 등 변수를 선언하기 위해 앞에 붙는 데이터 타입처럼 String 또한 문자열에 대한 데이터 타입처럼 취급되어 사용된다. 하지만 실제 이클립스에 입력을 하게 되면 혼자만 데이터 타입이 조금 다르다는 것을 알 수 있다.

 

   이렇듯 입력하게 되면 표시되는 색상이 혼자만 다른데, 이는 바로 String은 객체(클래스)에 속하기 때문이다.

   함축된 표현 방식을 쓰기 전 모양새를 살펴보면 마치 인스턴스를 생성하여 참조변수에 주소값을 담던 방식과 비슷하다. 비슷할 뿐 아니라 실제로도 그렇게 동작하기 때문인데 그렇다면 하나 의문점이 생길 것이다. 바로 참조변수는 해당 객체가 생성될 때 부여받은 주소값을 저장한다는 부분이다. 이를테면 한 클래스를 인스턴스화 시켜 참조변수에 해당 주소값을 담았다 치자. 그리고 그 값을 콘솔창에 불러오게 되면 @표시가 붙은 뒤로 영어와 숫자의 조합으로 이루어진 주소가 나타나게 될 것이다. 즉, 참조변수 자체로는 해당 객체가 가지고 있는 특정 값을 표시한다거나 할 수 없다는 얘기다.

 

   하지만 이렇게 String 변수를 콘솔창에 불러내보면 text라는 변수에는 마치 문자열이 담긴 것 마냥 출력이 되는 것을 확인할 수 있다. 사실 깊게 들어가기에는 아직 배움이 얕아 정확하게 설명을 해낼 순 없지만, 일단 String은 객체가 맞긴 하나 해당 참조변수는 자동적으로 String의 매개변수에 담긴 데이터 값을 참조하여 일반 변수처럼 동작한다는 것이다.

 

   즉, String 타입을 가진 변수는 참조변수라 할 수 있으며 그로 인해 함수를 호출하여 사용할 수 있다. String은 일단 문자열을 파라미터로 받는다. 여기서 charAt이란, 하나의 문자가 여러개 이어져 만들어진 문자열 중에 한 글자를 하나의 인덱스로 보고 해당 위치로 찾아가 반환하는 함수이다. 위에서는 0번째 인덱스를 출력하라 명령했고 그 결과 '안'이라는 글자가 나왔다. length는 배열 객체에서도 자주 사용하다 싶이, 객체가 가진 길이를 뜻한다. charAt으로 한 글자씩 가져오는 것이 가능했다는 것은 글자 하나하나를 인덱스로 볼 수 있다는 의미다. 그래서 "안녕하세요"의 길이 5를 반환한 것이다.

 

   그렇다면 이제 문제의 비교연산자 구문을 확인해보자. 첫번째는 equals() 함수를 사용했고 두번째는 다른 변수의 값을 비교하는 것처럼 비교연산자를 사용하였다. 하지만 같은 문자열을 제시했음에도 두 개의 값이 다른데 그 이유가 바로 String이 일반 변수가 아니라는 뜻이 된다.

 

   Call by value, 일반 변수는 기본적으로 어떤 메서드에 사용되거나 호출이 될 때 변수에 들어있는 값을 그대로 꺼내어 가져오게 된다. 정수, 실수, 논리, 문자가 그러하게 동작하기 때문에 비교연산자를 사용하여 제어문을 쓰거나 반복문을 쓰는 것이 가능한데 String은 그렇지 않다. 일단 객체기 때문이다. 출력할 때 데이터 값을 참조하여 나타내는 참조변수, 즉 해당 변수에 담긴 값은 "안녕하세요" 라는 문자열이 아니라 정확히는 그 문자열이 담긴 주소를 나타내는 것이 된다. 그렇기 때문에 비교연산자로 문자열을 비교하게 되면 주소와 문자열을 비교하는 것이 되기 때문에 대부분의 논리값은 false가 나오게 될 것이다.

(간혹 true가 뜨기도 한다지만 추천하는 방법이 아니다)

 

   그렇다면 문자열을 비교할 방법은 없는 것일까? 그건 아니다. 위에 방법대로 equals 함수를 통해 비교하는 건 가능하다. 이는 해당 객체 안에 존재하는 "안녕하세요" 라는 값을 꺼내어 직접 문자열을 대조하기 때문에 비교가 가능하게 되는 것이다. 그래서 함수를 통해 콘솔창에 불러냈을 때는 true값이 뜨게 되고, 비교연산자를 썼을 경우에는 false가 나오게 된 것이다. 이렇듯 객체 내에서 값을 바꾸거나 참조하는 경우는 Call by reference 라고 한다. 모든 객체가 이러한 방식으로 동작하지만 String은 어딘가 예외인 것처럼 돌아가는 것이 어렵기도 하면서 이해가 되는 것 같기도 하다….

 

   그렇다면 이제 진짜 String의 정체(?)와 사용방법에 대해 알게 되었으니 응용을 해보도록 하자.

'아이티에듀넷' 카테고리의 다른 글

2024-09-13 :: 038 객체의 다형성  (0) 2024.09.13
2024-09-12 :: 037 객체의 상속  (0) 2024.09.12
2024-09-10 :: 035 생성자  (0) 2024.09.10
2024-09-09 :: 034 객체  (0) 2024.09.09
2024-09-06 :: 033 반복문과 배열 변수  (1) 2024.09.06

   어제는 인스턴스를 통해 객체를 생성하고 할당된 주소값을 참조변수에 담아 해당 클래스의 변수의 초기화를 진행하는 방식을 배웠다. 하지만 이런 방식은 번거로운 구조라는 생각이 들었다. 인스턴스 변수에 값을 넣기 위해서 매번 참조변수를 통해 변수를 하나하나 입력해줘야 하는 일이 100개가 되고 1000개가 되면 여간 고생스러운 일이 아닐 수 없기 때문이다. 그래서 오늘은 생성자라는 것을 통해 어떤 식으로 변수 값을 넣어 주는지, 그리고 기존의 방식 또한 어떻게 동작하고 있었는지에 대해 알아보겠다.

<기본 생성자 작성법>
클래스명( ) { }

- 생성자 메서드(함수)의 이름은 클래스와 동일해야 한다.
- 기본 생성자를 작성하지 않았다면 프로그램이 자동으로 구현해둔다. (단, 하나라도 생성자가 있을 경우 만들지 않음)
- 반환하는 값이 없기 때문에 return타입도 존재하지 않는다. (데이터 타입이 없음)
- 호출되면 클래스가 가지고 있는 변수의 초기화를 진행한다.

 

   먼저 기본 생성자부터 알아보자. 지난 시간에는 new와 참조변수만 있으면 하나의 인스턴스를 만드는 건 쉬웠다. 하지만 그냥 new를 써서 객체를 만드는 것이 그냥 띡 하고 되는 일이 아니었다. 바로 생성자가 있어야만 인스턴스를 만들 수 있었는데, 기존 클래스에 사용자가 기본 생성자를 작성하지 않았더라도 프로그램에서 디폴트 값으로 기본 생성자를 만들어주어 가능했던 것이었다. 여기서 생성자란 인스턴스를 생성할 때 호출되면 클래스가 가진 변수의 값을 자동으로 초기화 시켜주는 메서드의 일종이라고 보면 된다. 다만 void가 붙은 것처럼 return값이 없다는 것도 하나의 특징이라고 할 수 있다.

 

 

   기본 생성자가 메서드라는 것을 알았다. 그렇다면 메서드가 가질 수 있는 매개변수를 통해 실제 인스턴스 변수에 값을 담는 것도 가능하지 않을까? exam_39라는 클래스 안에 세 개의 인스턴스 변수가 있다. 모델은 고정이기 때문에 변수를 선언함과 동시에 초기화를 진행했고, 나머지 두 값은 사용자의 데이터를 받기 위해 초기화를 진행하지 않았다. 그리고 메서드를 작성하는 것 처럼 클래스명을 메서드명으로 정하고 매개변수 값에 받을 데이터 타입과 변수명을 입력해준다.

 

   여기서 매개변수에 있는 변수명과 클래스에 선언되어 있는 변수명이 같지만 서로 다른 지역에 선언되었기 때문에 중복 사용이 가능하다. 기본적으로 함수 내에 작성되는 변수는 지역변수이고, 클래스에 선언된 변수는 전역변수기 때문. 하지만 이름이 같기 때문에 함수 안에서 color를 불러오면 지역변수만 선택할 수 있게 된다. 여기서 파라미터를 받아 올 매개변수의 값을 인스턴스 변수의 값으로 대입하고 싶어 this라는 명령어를 배우게 됐다. this는 자바스크립트에서도 사용했지만 사용하는 위치에 따라 인식하는 범위가 다른데, 이 곳에서는 함수 밖의 전역을 의미한다. 그러니 this.변수명을 입력하게 되면 전역에 있는 변수를 가져올 수 있게 되는 것이다. 이렇게 작성해서 하나의 생성자가 완성되었다, 그렇다면 직접 데이터를 넣어보자.

 

   일반 메서드를 사용하는 것 처럼, new를 붙여 생성한 객체의 괄호 안에 직접 파라미터를 입력하니 참조변수를 통해 넣은 값처럼 똑같이 출력된다. 만들어둔 생성자 덕분에 참조변수를 하나하나 입력하여 수정할 일이 없어진 것이다. 하지만 이렇게 임의로 생성자를 만들어 사용한 뒤, 기존에 생성하던 것 처럼 생성하게 되면 '해당 메서드를 찾을 수 없습니다.' 라는 에러가 뜨게 된다. 기본적으로 만들어 주던 기본 생성자가 사용자가 작성함으로써 이번에는 만들어지지 않았기 때문이다. 만약 파라미터 값을 받아오는 형식이 아니라 직접 입력하고 싶을 때 인스턴스를 생성하고 싶다면 추가적으로 클래스명과 함께 기본생성자 메서드를 작성하면 된다.

 

   하지만 여기서 의문이 들 것이다. 과연 같은 클래스명을 가진 메서드가 둘, 셋... 혹은 그 이상 존재해도 되는걸까?

 

   메서드명이 같다면 당연히 안된다. 하지만 메서드마다 가질 수 있는 매개변수가 서로 다르다면, 혹은 생성자가 아닌 일반 메서드에서 return값을 받아 올 데이터 타입이 다르다면 가능하다.

 

   클래스 함수로 세 개의 메서드를 작성했다. 하지만 세 개의 메서드의 이름은 모두 sum으로 동일하다. 하지만 출력했을 때 에러없이 잘 작동되는 것을 확인할 수 있는데, 바로 세 개의 메서드가 가진 매개변수와 return의 데이터 타입이 다르기 때문이다. 첫 번째 sum 함수는 매개변수를 두 개를 가지고 있고, 두 번째와 세번째는 세 개의 매개변수를 가지고 있다. 그리고 두 번째는 정수로, 세 번째는 실수로 데이터 타입을 정하고 함수를 사용할 때 해당하는 값을 넣어주면 메서드에 입력된 기능이 제대로 동작하는 것을 볼 수 있었다. 이렇듯 구조와 타입은 다르지만 이름이 같은 메서드를 여러개 정의하는 것을 오버로딩라고 부른다. 다만 함수를 사용할 때는 입력될 값의 데이터 형식을 알아야 사용할 수 있다는 것이 옥에 티이긴 하나, ctrl을 누른 채 함수를 클릭하면 해당 메서드의 구조를 보여주니까 참고하도록 하자.

   어떠한 제품을 만들기 위해서는 그 제품에 맞는 설계도가 필요하다. 앞으로 Java에서 만들 프로젝트를 위해서도 이 설계도가 필요한데 이를 여기서는 클래스(class)라고 부른다. 즉, 프로젝트를 만들기 위한 설계도로 클래스를 생성해야 하며 클래스 안에는 각 객체가 프로젝트 내에서 동작할 수 있는 고유한 속성(변수) 기능(함수)을 포함시킬 수 있다. 그렇다면 이 설계도를 바탕으로 실제 객체를 생성하여 사용하기 위해서는 어떻게 해야할까.

 

   여기 두 개의 클래스가 있다. 하나는 객체에 필요한 속성과 기능을 만들어 두었고(왼쪽), 하나는 main() 함수로 영역에 포함된 기능들을 실행시키기 위해 작성(오른쪽)되었다. 클래스에 작성된 모든 속성과 기능은 기본적으로 동작하지 않는다. static(미리 준비된 상태)을 가지지 못한 변수와 함수들은 프로젝트의 기능이 구현 될 ram메모리에 사실상 존재하지 않기 때문인데, 이를 객체화시켜 ram 메모리에 클래스를 구현해내는 것을 '인스턴스' 라고 부른다. 인스턴스(객체)가 생성된 클래스는 그 때부터 가지고 있는 모든 속성과 기능을 꺼내어 초기화를 할 수도 있고, 함수를 실행시킬 수도 있다.

 

<인스턴스 생성 방법>
   클래스 이름(데이터 타입) 참조변수명;
   참조변수명 = new 클래스 이름( ); //new로 생성된 객체가 부여받은 주소를 참조변수에 저장
   ex) exam_31 mycar = new exam_31( );

 

   여기서 새로운 변수가 나오게 되는데 바로 참조변수이다. 참조변수란, 인스턴스가 생성됨과 동시에 할당 받는 주소값을 저장하는 공간이다. new로 생성된 인스턴스는 하나가 아니라 여러개 존재할 수 있는데, 모양이 같을 뿐 각자 고유한 기능과 속성을 가진 다른 객체기 때문에 생성될 때마다 고유한 주소값을 받는다. 이를 언제든 호출하기 위해서 변수에 담아야 하는데 이 주소를 받는 변수가 바로 참조변수인 것이다. (변수에 담지 않으면 사용이 되지 않으므로)

<인스턴스 접근 방법>
   인스턴스 변수에 접근할 때 : 참조변수.변수명
   인스턴스 함수에 접근할 때 : 참조변수.함수명( )

 

   이런 식으로 주소를 가진 참조변수가 해당 클래스에 찾아 들어가 가지고 있는 변수와 함수를 꺼내어 활용할 수 있도록 도와준다. 즉, 참조변수는 클래스(객체)를 대신하는 것과 비슷하다 볼 수 있다.

   new 객체 생성으로 같은 클래스를 들고왔지만 mycar1과 mycar2는 서로 다른 객체이다. 각자 고유의 속성을 가질 수 있어 색상을 다르게 지정할 수도 있고, 고유한 기능을 함으로써 속도도 다르게 지정할 수 있다. 하지만 이 클래스가 자동차의 설계도라고 가정해보면 다른 자동차여도 똑같이 변하지 않는 값이 있을 것이다. 바로 바퀴가 네 개라는 점은 어느 자동차든 변하지 않는 사실이니까 말이다. 그렇다면 이런 부분을 각 참조변수를 불러와서 하나하나 바퀴가 4개라고 입력을 해주어야 할까? 이런 편의성을 고려해서 그런지 클래스가 가질 수 있는 변수는 인스턴스 변수 외에 클래스 변수라는 것이 존재한다.

인스턴스 변수
- 인스턴스마다 가지는 고유한 변수, 고유한 저장 공간을 가진다.

- 인스턴스 변수 선언 방식은 기존 변수 선언 방식과 동일하다.

클래스 변수
- 모든 인스턴스가 공통된 값을 공유하는 변수, 저장 공간은 하나 뿐이다.

- 인스턴스를 생성하지 않아도 메모리에 존재하는 변수이다. (static으로 생성)

- 참조변수 없이 불러올 수 있지만 참조변수로 불러올 수 없는 건 아니다.
  (그러나 굳이 참조변수를 생성하여 불러 올 필요가 없다)

 

   위와 같은 설명과 마찬가지로 클래스 변수는 어떤 인스턴스라도 같은 값을 가지는 공통된 변수를 말한다. 생성할 때 일반 변수와 똑같이 생성하되, 앞에 static을 붙여 언제든 사용할 수 있는 상태로 만들어 두어 별도의 객체 생성 과정이 없어도 바로 바로 호출이 가능하도록 설정한다. 이렇게 되면 각 인스턴스가 가질 값이 공통된 하나의 저장소로 줄어드니 리소스 또한 절약할 수 있다는 장점이 있다.

   자동차의 속도는(speed) 각 인스턴스의 고유의 값을 가져야 하기 때문에 인스턴스 변수로 선언했고, 바퀴는 어느 인스턴스든 4개로 동일하기 때문에 static을 붙여 선언과 동시에 초기화를 했다. 이를 콘솔창에 나타내기 위해 가져오기 위해서 고유의 값을 가진 speed 변수는 인스턴스를 생성하여 불러와야 하지만, wheel 값은 이미 생성되어 메모리에 기록된 상태기 때문에 클래스명과 함께 변수를 불러오면 4라는 숫자가 콘솔창에 뜨게 된다. 물론 참조변수 내에서 불러오는 것도 불가능하지 않다. mycar2로 참조변수를 만들어 똑같이 불러내면 별 다른 오류 없이 작동하는 걸 확인할 수 있다. (어쨌든 해당 클래스에 부여된 속성이기 때문에 어느 인스턴스에서 호출해도 나오게 된다. 하지만 굳이 번거롭게 할 필요가 없기 때문에 클래스명으로 호출하는 것이 정석이다.)

 

   다만 저장 공간은 하나기 때문에 참조변수를 통해서 값을 바꾸어도 모든 인스턴스에서 해당 변수값은 바뀌어 출력되게 된다.

 

   이렇게 변수를 불러오는 방법을 알아봤으니 이제 함수에 대해서 조금 더 알아보자. 메서드라고 부르는 이 함수는 특정한 작업을 실행하는 코드를 가지고 있어 사용자가 넣은 값을 해당 기능에 대입하고 나온 값을 반환(return)하는 역할을 한다. 변수처럼 저장되어 언제든 쓸 수 있는 메서드는 클래스를 구성하는 요소에 있어 매우 중요하다.

(void - 반환하지 않음) 반환(return)타입 메서드명(함수이름) ( 매개변수 ) { return 값; }

 

   메서드의 생성 방법은 변수와 똑같이 데이터 타입을 결정해주어야 하는데, 이 값은 기능에서 반환받을 값의 데이터 형식을 정하는 것이다. 매개변수는 해당 메서드가 호출되며 입력받은 파라미터(값)을 담을 변수를 뜻한다. 여기서 매개변수의 데이터 타입을 정수로 받고 반환하는 값의 데이터 타입을 실수로 한다면 사용자는 정수를 입력했지만 출력될 값은 소숫점이 붙은 실수로 출력된다는 것이다. 여기서 매개변수의 괄호 부분은 받을 재료값이 필요하지 않으면 비워놔도 되지만 해당 메서드를 호출 할 경우에는 꼭 괄호를 이어 붙여줘야 한다. 그리고 메서드가 실행되면 return값을 사용자에게 전달해주기 때문에 해당 값을 변수에 저장하고 사용하거나, 혹은 값만 화면에 출력하고 끝내버리는 등 다양한 활용이 가능하다.

 

   여기서 메서드 또한 클래스의 자식으로써 기능하기 때문에 어느 위치에 있느냐에 따라 인스턴스 메서드가 될 수도 있고, 클래스 메서드가 될 수도 있다. 선언되는 방식은 위에서 말한 변수와 동일하다. 특이하게 void라는 명령어를 타입 앞에 선언할 수 있는데 이건 return값을 주지 않겠다는 의미라고 한다. 물론 함수를 호출하게 되면 내부에 작성된 코드는 실행되지만 return값을 강제하지 않는다는 의미로 보면 편할 것 같다.

 

   그렇다면 이제 인스턴스와 클래스에 대해 배운것을 종합적으로 정리해보겠다. 인스턴스 변수(혹은 함수)는 사용자가 new를 사용해 객체를 생성하기 전까지는 메모리에 존재하지 않기 때문에 static으로 선언된 함수에서 인스턴스 변수를 불러오면 에러가 뜬다. 이미 메모리에서 동작할 준비를 마친 함수 안에 선언되지 못한 인스턴스 변수는 존재할 수 없기 때문이다. 하지만 반대로 인스턴스 함수 안에 인스턴스 변수를 사용하는 건 가능하다. 어차피 둘 모두 new로 객체 생성을 선언하면 메모리에 같이 쓰여지기 때문이다. 이렇듯 둘 사이의 구조를 이해하는 것에 초점을 맞춘다면 변수에 관해서는 헷갈릴 일은 없을 듯 하다.

   변수는 보통 단일 자료를 담을 수 있지만 여러 자료를 담아야 할 경우에는 어떻게 해야 할까? 그럴 때는 배열변수를 사용해야 한다. 데이터 타입에 배열을 지정하면 같은 타입의 자료를 모아 하나의 변수에 저장하는 것이 가능한데 이렇게 저장된 배열변수의 값을 꺼내오고 활용하기 위해서는 반복문이 필요하다. 마치 어제 배운 제어문(조건문)의 조건식에  boolean(참과 거짓)값을 넣기 위해 연산자를 활용하는 것처럼.

  배열의 길이를 지정한 경우 배열의 길이를 지정하지 않은 경우
선언 데이터타입[ ] 변수명 = new 데이터타입 [길이]
(ex. int[ ] array = new int[5];)
데이터타입[ ] 변수명 = {값,값,값...}
선언과 초기화를 동시에 진행할 수 있다.
(ex. int[ ] array = {10,20,30};)
초기화 변수명[인덱스(주소)] = 값;
(ex. array[2] = 10;)

 

   배열에 길이를 지정해두고 인덱스값을 참조하여 초기화하거나, 애초 선언과 동시에 중괄호를 활용하여 값을 순서대로 넣을 수 있다. 단, 길이를 지정했을경우 변수로 값이 바뀌지 않는 이상 그 배열에서 더 늘어날 수 없다. 이를테면 int[5]로 5개의 배열을 만들겠다 선언한 뒤 인덱스로 array[5]의 값을 넣게 되어도 출력할 때 인덱스의 범위를 초과했다는 에러창이 뜨게 된다. 자바스크립트에서는 길이를 지정한 뒤 초과해도 큰 문제가 없었지만 자바는 이 점에서 조금 차이가 있는 것 같다.

 

   배열 변수에 담긴 값을 함수에 불러오거나 활용하려면 각 값이 담겨있는 주소, 즉 인덱스를 변수명 뒤에 대괄호를 붙여 호출할 수 있다. 하지만 적은 수의 배열의 값을 꺼내올 때는 [1], [2]... 하나씩 입력하는 것이 쉬울 수 있어도 만약 100개, 1000개, 혹은 그 이상의 값이 들어가 있다면 어떻게 하나하나 호출할 수 있을까.

 

   그래서 오늘은 반복문을 배우게 됐다. 반복문의 종류도 몇 가지가 있다지만 말에서 알 수 있듯 특정 작업을 반복하기 위해 사용하는 명령어다. 이 반복문을 활용하면 배열변수에 있는 값을 꺼내어 활용하는 것은 정말 쉬워진다.

   일단 for문의 기본적인 이용 방법이다. for문은 초기화와 조건식을 통해 참과 거짓을 가려내는 과정을 한번 거치게 된다. 만약 여기서 참이 나오면 중괄호 영역에 쓰인 구문이 실행되고 증감식으로 돌아가 변수의 값을 증가시키거나 혹은 감소시키게 된다. 그러고는 다시 조건식으로 넘어가 증감식을 거친 변수의 값에 따라 참과 거짓을 가려내고 다시 참일 경우 실행, 증감, 조건식 비교, 이 과정을 거짓이 나올 때까지 반복한다. 그래서 반복문이라고 불리는 것이다. 그렇다면 조건식 비교문에 배열이 가진 주소길이 만큼 지정할 수 있다면 활용하는 게 가능하지 않을까?

   개발에서 0은 의미 없는 숫자가 아니다. 0과 1 사이에도 수가 존재하기 때문이다. 그렇기에 배열이 가진 인덱스도 0부터 시작하는데, 이를 활용하기 위해서 늘 초기값을 0으로 주는 습관을 들여야 한다. 그리고 반복할 횟수를 조건식으로 정해야 하는데 직접 3이라고 쓸 수도 있지만 만약 배열의 길이를 모르는 상태라면 .length를 통해 해당 배열변수의 길이를 자동으로 식에 대입할 수 있게 된다. 이렇게만 하면 반복문을 통해 배열변수의 값을 가져오는 것이 가능하다.

(물론 i의 값이 인덱스를 대신하기 때문에 배열변수를 부르는 방식으로 대괄호 안에 i를 넣어주어야 정삭 작동이 된다.)

 

   하지만 반복할 구문이 있다는 것 외에, 이런 배열을 불러오기 위한 for문은 쓰다보면 번거롭지 않을 수가 없다. 그래서 이를 보완하고자 나온 기능이 바로 foreach문이다. foreach문은 기본적으로 for문과 같이 동작하지만 식을 적는 부분에 있어 좀 더 간편화되어 있다.

   자바스크립트에서는 forEach문이라고 따로 썼는데 자바에서는 for문과 똑같이 적어주면 된다. 다만 식이 다를 뿐인데, 먼저 받아 올 데이터의 타입을 적고 임의 변수를 선언한다(꼭 i가 아니어도 된다! for문도 그렇다). 그런다음 콜론을 찍고 배열 변수명을 적어주면 알아서 변수 안에 들어있는 값이 foreach에서 선언한 변수에 담기며 구문을 실행하게 된다. 언제까지? 변수가 가지고 있는 값을 모두 쓸 때까지. 따로 조건식을 쓰지 않아도 알아서 배열변수의 길이만큼 스스로 동작하는 것이다. 이렇게 기능을 돌리면 첫 번째 foreach문에서는 Java Hello Programming 이라는 글자가 공백마다 줄이 바뀐 채 출력되고 두 번째 foreach문에서는 변수에 담긴 모든 값이 더해진 15가 화면에 출력된다.

 

   이런 반복문에는 for문만 있냐면 그건 아니다, while문이 있는데 for문은 반복할 횟수를 정해서 돌리는 것이라면 while문은 정해진 반복횟수가 없다는 것이 특징이다. 물론 while문을 for문처럼 동작하는 것도 가능하지만 일단 기본적인 활용은 그렇다는 것. while문은 조건식에 담긴 값이 true면 무조건 반복하기 때문에 따로 false가 나올 수 있는 환경을 만들어 주어야 한다.

 

   여기서 for문과 while문의 공통점이 보일 것이다, 바로 true와 false값에 따라 작동 여부가 갈린다는 것이다. 이는 if도 마찬가지로 모두 조건식에 비교 연산자를 대입하여 참과 거짓을 받아오거나 boolean값을 직접 입력하는 것으로 문장을 실행시킨다. 그러니 조건식의 자리엔 근본적으로 true와 false를 받는 공간이 되겠다. 위에서 말한대로 while문은 true를 받으면 무한 반복하게 된다, 여기서 빠져나오기 위해 이 true값을 false로 바꿔주는 작업이 필요한데 그것이 여의치 않다면 break를 쓰는 방법이 있다.

break 문 반복문 안에서 사용할 시 반복을 멈추고 해당 코드를 끝낸다.
contiune 문 반복을 일시적으로 멈춘다, 해당 반복문만 멈추고 다시 증감식으로 돌아가 반복을 진행한다.

 

   아직 배운 것이 부족해 더 세세한 사항을 배우지는 못하고 추후에 다시 이 포스터를 확인해야 할 일이 생길 것 같다.

 

   이렇듯 배열에 접근하는 방법을 반복문과 함께 알아 보았는데 단순 늘어놓는 것만 했던 배열변수는 대괄호를 추가하면 다차원의 배열로 만들 수도 있었다. 다차원은 대괄호를 추가한 만큼 2차원, 3차원... 계속 늘어나는 것 같지만 실제로 그렇게 많이 쓰이지는 않고 3차원 이상은 잘 쓰는 경우가 없다고 한다.

 

   그렇다면 2차원 배열의 사용법은 어떻게 될까, 처음에는 긴가민가 했지만 우리가 늘 친숙하게 사용하는 엑셀을 예로 들면 의외로 간단했다. 첫 번째 배열을 엑셀의 열이라 생각하고 두 번째 배열을 행으로 두면 계산하기 편했다. 아래는 그렇게 이미지 메이킹을 하고 작성하여 출력까지 해 본 구문이다.

   배열의 크기를 미리 주는 방법도 있겠지만 일단 초기화를 동시에 해주는 방향으로 작성해보았다. 스스로 4열 3행을 쓴다 생각하고 모든 값을 화면에 출력하는 반복문도 작성했는데 이해한 것이 맞았는지 출력하는 데 문제가 없었다. 일단 기본적으로 배열의 길이는 1차원일 때의 기준인 가로, 즉 열을 기준으로 잡는다. 나는 4열을 기준으로 작성하였으니 길이는 4, 행은 3으로 잡았기 때문에 해당 배열의 길이에서 -1한 값을 두번째 for문의 조건으로 삼았다. 이렇게 쓰는 for문을 중첩 for문이라고도 한다.

   연산자란 특정한 연산을 수행하기 위해 사용하는 기호로 기본적으로 숫자 데이터에서 작동된다. 연산자는 사용 목적에 따라 다양한 종류가 있는데 주로 쓰이는 것은 산술 연산자, 그리고 비교/논리 연산자가 있다. 이와 관련된 것은 자바스크립트를 정리할 때 훑어본 적이 있으니 정리는 넘어가도록 하겠다.

 

   지난 시간에 데이터 타입이 가지고 있는 용량과 사용 목적에 대해 간략히 정리했었는데, 작은 용량에서 큰 용량의 타입으로 넘어가는 것은 문제없이 형변환이 이루어진다고 했다. 이는 연산자를 활용한 변수 대입도 비슷하게 이루어지는데 만약 같은 데이터 타입끼리의 사칙연산의 결과 값을 똑같은 데이터 타입에 담게되는 것은 가능할까? 또, 다른 타입끼리의 사칙연산을 담아낼 데이터 타입은 어떤 것을 써야할까?

데이터 타입 결과 설명
byte + byte = byte
short + short = short
X 작은 범위를 지닌 타입이기 때문에 변수값에 사칙연산이 들어가게 되면 보다 윗 단계 타입에 해당 값을 저장해야 한다 (최소 int 이상)
int + int = int O int부터는 허용할 수 있는 값이 많기 때문에 제약이 없다.
int + long = long O int와 long 중 가장 용량이 큰 데이터 타입을 기준으로 정해주어야 한다. 

 

   위에서 기술하지 않은 연산자 중에 '단항 연산자'가 있다. 단항 연산자는 항이 하나일 때 쓰는 연산자로 기본적으로 단일로 쓰는 경우보다는 조건문이나 반복문 같이 특정한 상황에서만 쓰기 때문에 단독으로 쓰여지는 일은 잘 없지만 이 중에서 우선순위의 개념을 알아볼 수 있었다.

   a의 초기값은 1이다. 출력 이후 후위 증가 연산자를 통해 1의 값을 증가 시켰다. 여기서 증가 연산자가 변수 뒤에 붙었으므로 처리가 맨 마지막에 되어야 하지만 단일로 쓰였기 때문에 실행을 했을 때 눈에 띄는 변화는 없을 것이다. 출력하기 시작하면 얘기가 달라지는데 먼저 ++a로 출력했을 경우, 변수의 값을 먼저 증가시킨 후 출력문이 실행된다. 즉 출력되는 값은 3이 된다. 하지만 a++로 변수 뒤에 증가 연산자를 붙이면 이 또한 출력 값은 3이 된다. 먼저 출력한 이후에 1의 값을 증가시키기 때문이다. 그렇게 마지막에 다시 변수를 출력하면 이후에 증가된 값이 포함되어 4가 나오게 된다.

 

   연산자 중에서도 단연 많이 쓰인다고 할 수 있는 비교 연산자를 알아보자. 비교 연산자는 양변을 비교하여 맞으면 참(True) 틀리면 거짓(False)을 반환해주게 되는데 주로 조건문이나 제어식에서 많이 쓰이니 알아두도록 할 것. 기본적인 사용은 자바스크립트 때 많이 배웠으니 익숙한데 특이한 경우도 있었다.

   int 타입 변수 A에 65라는 정수를 담았고, char 타입 변수 B에는 문자와 함께 연산을 통해 값을 증가시켜주었다. 그렇게 두 변을 비교했더니 변수 A의 값은 B보다 크다 라는 항목에서 아니라는 뜻으로 false가 출력되었다. 문자임에도 알아서 형변환을 통해 두 변의 값을 비교하여 참과 거짓을 가려낸 것이다. B의 항목의 값은 무엇일까, 궁금하여 출력해보면 B에서 1의 값이 증가된 C가 출력되었고, 추가로 B에 산술을 더하자 이 때는 또 68이라는 값이 출력되었다. 알아서 연산자가 들어가면 형변환이 일어나 값을 더하거나 비교할 수 있게 된 것이다. (연산자는 숫자에서만 동작하는 것)

 

   이렇게 두 값을 비교할 수 있는 연산자의 조건을 여러개 할당하고 싶으면 어떻게 해야 할까, 그것을 가능하게 해주는 것이 논리 연산자이다. 논리 연산자는 여러가지 조건을 동시에 검사할 때 사용되며 두 항의 값이 Boolean(true or false)값이 경우에 사용할 수 있다.

   말로 풀어서 설명하면 복잡해 보여도 실제 동작되는 구조를 보면 크게 어렵지 않다. 일단 AND(&&)연산자는 두 항의 조건이 모두 true여야 true를 반환한다. OR(||)연산자는 두 항의 조건 중, 하나의 조건이라도 true가 나오면 true를 반환한다. 이를 곱셈과 덧셈으로 나누어 생각하면 그 원리는 간단하다. 기본적으로 false의 값은 0, true는 1의 값을 가지고 있다. 그렇기 때문에 AND(*)연산자는 하나라도 0이 나오게 되면 이후에 나오는 값에 아무리 1을 곱해주어도 0(false)이 출력될 수 밖에 없다. 반면에 OR(+)는 앞의 조건문에서 계속 0이 나와도 마지막 조건문에서 1이 나온다면 그 조건식은 1(true)가 될 수 있는 것이다.

(물론 순서의 차이도 있다)

 

   그 외에도 기타 연산자에 속하는 삼항 연산자를 살펴보자. 삼항연산자는 항이 세 개인 연산자인데 첫번째 항은 조건식, 그리고 이 조건식이 참과 거짓일 때 각 각 실행해야 하는 구문을 나머지 두 항에 작성하는 연산자를 말한다.

조건문 ? 실행 항목1(조건문이 참일 경우 실행) : 실행 항목2(조건문이 거짓일 경우 실행)

 

   쓰임에 따라 활용할 수 있겠지만 이것은 마치 제어문에서 배우게 될 조건문, if else와 유사한 방식이라 익숙한 느낌이었다. 이 뒤에 배운 대입 연산자 또한 자바스크립트에서의 활용을 마쳤으므로 정리를 생략하도록 하겠다.

 

   이제 위에서도 언급했던 if문을 간략하게 정리하며 후술해보도록 하겠다.

if 문 if(조건식) { 조건식이 참일 경우 실행 }
조건식이 거짓일 경우 무시
true 일 때만 출력
if-else 문 if(조건식) { 조건식이 참일 경우 실행 }
else { 조건식이 거짓일 경우 실행 }
true / false 일 때 둘 중 하나를 출력
if-else if 문 if(조건식1) { 조건식1이 참일 경우 실행 }
else if(조건식2) {
 조건식1이 거짓이며 조건식2는 참일 경우 실행
} else if(...반복){ }
else { 끝내기 }
여러가지의 경우 중
하나를 출력
중첩 if문 if(조건식1){
  if(조건식2){
    조건식1이 참이고 조건식2가 참일 경우 실행
  } else {
    조건식1이 참이나, 조건식2가 거짓일 경우 실행
  }
} else { 조건식1이 거짓일 경우 실행 }
if문의 실행 부분에
다시 if문을 중첩하여 실행 후
조건에 맞는 구문을 출력

 

   기본적으로 자바스크립트와 다른 점이 없어 사용하는데 큰 지장은 없었다.

 

   if문과 비슷하지만 다른 제어문인 switch문도 있다. switch는 if와 다르게 조건문 안에 값이 들어와야 정상적인 사용이 가능하다. 기본적인 흐름이 if-else if와 똑같기 때문에 switch문을 쓰기 보단 if문을 쓰는게 더 편리하다는 게 옥의 티다.

   값의 부분과 일치하는 case를 실행하는 식인데, 여기서 유의할 점은 case가 끝나면 꼭 break를 걸어주어야 한다는 점이다. 위와 같이 break를 쓰지 않게 되면 위의 출력은 case0에서부터 default까지 모든 구문이 출력되게 된다. 꼭 break를 달아주도록 하자. (default : else와 같은 쓰임으로 어느 곳에도 해당하지 않은 값일 경우 출력된다. break문은 쓰지 않아도 된다.)

   JS(자바 스크립트)를 끝내고 Java에 들어갔다. 기초적인 것은 대부분 자바스크립트와 비슷한 양상을 띄는데 한 번 스스로 정리해보는 시간을 가지고 앞으로 다룰 프로그램의 기본적인 생성 방법을 후술하도록 하겠다.


 

   1. 변수                       

   변수란 프로그램 처리 과정에 필요한 데이터를 담아둘 수 있는 저장공간을 말한다. 하나의 값만 저장이 가능하나 언제든 그 값이 변할 수 있다. 변수에 저장된 값은 언제든지 꺼내어 사용이 가능하다. (물론 영역 안에서 선언되어야 한다.)

변경된 값은 덮어쓰기 방식으로 기존의 값이 바뀌는 것이며 기본적으로 누적되는 형식이 아니다.

 

   2. 변수의 선언           

   선언이란 변수를 새로 생성하다, 혹은 정의하다 라는 의미와 똑같다. 말 그대로 변수를 생성해야 데이터를 담을 수 있기 때문에 먼저 선언을 해야한다. 선언을 하는 방법은 데이터를 담을 타입을 정하고 변수명을 입력하면 된다.

 

   3. 변수의 초기화       

   초기화는 선언된 변수에 처음 값을 담을 때를 말한다. 한 번 선언된 변수는 이후에도 값을 바꿀 수 있기 때문에 그런 경우에는 초기화라 하지 않는다. 초기화는 초기 값을 설정할 때만 일컫는 단어이다. 대입연산자(=)를 통해 변수에 값을 담을 수 있다.

 

   4. 변수 이름의 규칙   

   데이터를 담을 변수의 이름은 사용자가 임의로 정할 수 있는데 몇 가지 제약이 있다. 숫자로 시작해서는 안되며, 달러표기($)와 언더바(_)를 제외한 특수문자가 앞에 와서도 안된다. 숫자가 앞에 오면 안되는 이유는 문자열은 따옴표(" ")로 변수와 문자의 구분이 가능하지만 숫자는 별도의 표기가 없기 때문에 혼동될 수 있는 위험이 있기 때문. 그 외에도 변수는 대소문자를 구분하기 때문에 같은 알파벳이라도 대소문자에 따라 전혀 다른 변수가 되니 주의하자.

 

   5. 데이터 타입           

   앞서 변수를 선언하기 위해 데이터 타입을 정해야 한다 했는데, 데이터 타입이란 정수/실수/문자/논리(참과 거짓) 의 종류를 말한다. 이를 담아낼 데이터 타입을 미리 변수 앞에 표시하여 어떤 데이터 유형인지 추측이 가능하게 하는 것이다.

그리고 위의 4개의 타입인 기본 변수 외에도 '참조 변수'가 존재한다. 이는 어떤 객체가 만들어질 때 부여받는 주소를 저장하기 위해 나온 변수로 흔히 문자열을 담을 수 있는 String 또한 참조변수이다.

 

정수형 데이터

byte 1Byte 8 bit -128 ~ 127
short 2Byte 16 bit -32,768 ~ 32,767
int 4Byte 32 bit -2,147,483,648 ~ 2,147,483,647
long 8Byte 64 bit -2⁶³ ~ 2⁶³ -1

 

실수형 데이터

float 4Byte 32 bit 1.4×10⁻  ~ 3.4×10³⁸
double 8Byte 64 bit 4.9×10⁻³²⁴ ~ 1.8×10³⁰⁸

 

문자형 데이터

char 2Byte 16 bit 0 ~ 2¹⁶ -1 (유니코드 ~65535)

 

 

   6. 형변환                    

   생성 때 지정된 데이터 타입을 이후에 바꿀 수도 있는데 이를 형변환이라고 한다. 형변환의 종류에는 자동 형변환과 명시적 형변환이 있는데, 자동 형변환은 일단 기본적으로 변수가 가지고 있는 데이터 값이 변하면 안된다. 그래서 기본적인 제약이 있는데 명시적 형변환은 이를 가능토록 강제로 변환시키는 것을 말한다. 타입을 강제로 바꾸기 때문에 명시적 형변환을 사용하게 되면 변수의 값이 바뀐다는 점이 있다.

 

   데이터 타입이 수용할 수 있는 각 데이터의 크기가 다른데 당연히 데이터 크기가 큰 타입을 보다 작은 타입에 담으려고 하면 에러가 뜬다. 하지만 이럴 때 괄호를 붙여 강제로 데이터 타입을 바꾸면 처리과정을 거쳐 그 데이터 크기에 맞는 값으로 바뀌게 된다. 위와 같이 강제형변환을 한 test_1 변수의 값은 -127로 출력 될 것이다. byte가 담을 수 있는 범위의 한계를 벗어났기 때문에 다시 음수에서부터 시작되어 숫자를 세어가기 때문이다.

   반대로 데이터 타입의 크기가 작은 변수는 보다 큰 타입의 변수에 담는 것이 가능한데, 수용할 수 있는 범위가 넓어 변수에 담긴 값이 변하지 않기 때문이다.

   실수가 담긴 변수를 데이터 타입이 정수인 곳에 담으려 하자 에러가 뜬다. 이는 정수를 표현하는 곳에서 실수(소숫점)를 지원하지 않기 때문인데 이를 강제로 변환하여 출력하게 된다면 소숫점을 없앤 정수만 화면에 출력된다. 하지만 반대로 정수를 실수로 변환하는 것은 가능하다. 숫자 10과 10.0은 같은 수기 때문에 오류없이 잘 작동되는 것을 확인할 수 있다.

   이번에는 문자형에 정수를 담아보았지만 역시 되지 않았다. 하지만 반대로 문자를 정수형에 담아내자 에러 없이 잘 작동되었는데 이는 문자는 애초부터 할당되어 있는 고유의 숫자를 가지고 있기 때문이다.

 


 

 

이번 시간에는 지난번에 만들었던 여행 준비물 체크 리스트에서 '드래그 앤 드롭' 기능을 추가 구현해보았다.

 

 

2024-08-22 :: 022 Java Script 활용 ①

자바 스크립트를 이용하여 나만의 여행 준비물 리스트 목록을 만들어 보았다.생각보다 막히는 부분이 많아서 고생을 좀 했지만...아래는 자바스크립트만 해석하고 기록해보겠다. (CSS는 사용자

hcl-yeon.tistory.com


 

   캡처에는 드래그 부분이 나오지 않지만 준비완료 체크 박스에 아이템이 담긴 것을 확인할 수 있다.

지난시간에 입력하고 추가하는 부분은 작성해두었으니 오늘은 드래그 앤 드롭 부분만 가져와 기록하려고 한다.

 


let dropList = [];
//드롭된 요소들이 담길 배열변수를 선언.
let dropZone = document.querySelector('#drop_box')
//드롭한 아이템들이 담길 div 태그를 들고왔다.

function showList() {
  let list = "<ul id='itemUl' >"
  //기존의 showList 기능으로 만들었던 ul태그를 선택하기 쉽도록 아이디를 붙여주었다.

  for (let i = 0; i < itemList.length; i++) {
    list += `<li>${itemList[i]}<span class='close' id=${i}> X <span></li>`
  }
  list += "</ul>"

  document.querySelector('#itemList').innerHTML = list;

  let itemUl = document.querySelector('#itemUl')
  //변수에 해당 ul태그를 담아두었다.

  //반복문을 사용해 ul태그 안에 생겨날 자식들에게 드래그 효과를 지정해주었다.
  //자식의 인덱스도 0부터 시작하는 것에 유의하자.

  for (let i = 0; i < itemUl.children.length; i++) {
    itemUl.children[i].setAttribute("draggable", "true");
    //드래그가 가능한 상태가 되도록 속성을 추가하는 작업이다.

    itemUl.children[i].addEventListener('dragstart', dragStart)
    //드래그가 시작될 때 이벤트가 발생한다.

    itemUl.children[i].addEventListener('dragend', dragEnd)
    //드래그가 끝날 때 이벤트가 발생한다.
  }

  removeEvent()
}


function dragStart() {
  this.classList.add('dragging');
  //드래그 이벤트가 발생한 요소에 dragging 이라는 클래스를 추가한다.
}

function dragEnd() {
  this.classList.remove('dragging');
  //드래그 이벤트가 끝난 요소에 dragging 이라는 클래스를 삭제한다.
}


// e : 이벤트(event)가 발생한 객체
dropZone.addEventListener('dragover', function (e) {
  e.preventDefault();
  //기본 동작 방지, 폼 제출 방지, 링크 클릭 시 페이지 이동 방지 등... 드래그 앤 드롭을 위한 기본 설정이다.

  dropZone.classList.add('hovered');
  //드래그 한 상태로 해당 div 요소에 오버되면 hovered 라는 클래스를 추가한다.

});

dropZone.addEventListener('dragleave', function () {
  dropZone.classList.remove('hovered');
  //드래그 한 상태로 해당 div 요소를 떠나면 hovered 라는 클래스를 삭제한다.

});

dropZone.addEventListener('drop', function (e) {
  e.preventDefault();
  dropZone.classList.remove('hovered');
  //드래그 한 상태로 해당 div 요소 안에서 드롭되면 hovered 라는 클래스를 삭제한다.

  let item = document.querySelector('.dragging');
  //앞서 드래그 이벤트가 시작되면 추가되는 클래스 속성을 가진 요소를 지역변수에 담는다.


  dropZone.appendChild(item)
  //해당 요소를 div 태그의 자식으로 붙여넣는다.


  let text item.textContent;
  //들고 온 요소의 텍스트만 지역변수에 담는다.

  //span으로 삭제 버튼을 만들어 두었기 때문에 그 요소까지 나타난다.

  let index_str = text.slice(0,text.length-3)
  //span 부분을 삭제하기 위해 3글자를 빼주었다.

  let index = itemList.indexOf(index_str)
  //itemList(input값을 담은 장소)에 담겨있는 글자들과 대조해서 일치하는 값 = 해당 배열의 인덱스가 반환된다.

  if(index != -1){
    itemList.splice(index,1)
    //찾아낸 인덱스 값에서 부터 하나의 요소를 제거한다.

  }

  dropList = this.children
  //드롭이 일어난 요소의 자식들을 해당 배열변수에 담는다. (덮어쓰기)

  for(let i=0; i<dropList.length; i++){
    dropList[i].children[0].id = `drop${i}`
    //배열변수의 첫번째 자식들의 아이디를 초기화한다. (기존 input 태그로 생성한 아이디가 그대로 옮겨오기 때문)

  }

    showList()
  removeEvent()
  //드롭된 이후, itemList들이 가진 id를 재할당하기 위해 기능을 리로드 시킨다.
  //드롭된 부분의 리무브 이벤트를 재할당하기 위해 기능을 리로드 시킨다.


});


function removeEvent() {
  let delBut = document.querySelectorAll('.close')
  for (let i = 0; i < delBut.length; i++) {
    delBut[i].addEventListener("click", delList);
  }

  //기존 리무브 이벤트에서 드롭된 아이템들에 한해 삭제 이벤트를 재설정 해준다.
  for(let i=0; i<dropList.length; i++){
    dropList[i].children[0].removeEventListener("click", delList)
    //먼저 선언되어 있던 기능을 삭제한다.
    dropList[i].children[0].addEventListener("click", delDrop)
    //새로운 삭제 이벤트를 추가한다.
  }
}

function delDrop(){
  dropZone.removeChild(this.parentNode)
  //해당 div의 자식 요소를 삭제하는데, 선택한 요소의 부모를 삭제함으로써 HTML에서 완전히 삭제가 된다.
  //부모 = 드롭장소인 div태그, 자식 = 드롭된 li 태그, 선택한 요소(this) = span 태그
}

+ Recent posts