⭐Back-end

Java

자바 언어에 포함된 컬렉션 프레임워크

• 자바는 다양한 형태의 컬렉션을 제공한다.

• 위: ArrayList
  • 데이터 삽입 및 삭제 시 전 항목이 이동할 수 있도록 이동 명령을 내려야 한다.
  • 그래서 속도가 느리다.
• 아래: LinkedList
  • 데이터 삽입 및 삭제 시 특별한 이동이 필요 없다.
  • 특정 위치의 데이터가 가리키는 참조가 다음 데이터를 가리키게 하면 된다.

-> 이처럼 똑같은 기능을 가지는 컬렉션이더라도, 내부적으로 데이터를 활용하는 방법이 다르기 때문에 여러 형태의 컬렉션이 존재하게 된다.

Object 형식

• 자바에서의 최상위 추상 클래스는 Object이다.
• Object는 모든 객체를 다룰 수 있는 범용적인 자료형이다.
• NewlecExam은 자기 자신, Exam, Object 형식을 모두 참조할 수 있다.

• 하지만, 참조 형식이 아닌 기본 형식 데이터도 Object 형식으로 참조할 수 있을까? -> Yes!
• 내부적으로 진행되는 Boxing과 Unboxing을 통해 Object가 기본 형식 데이터도 참조할 수 있게 된다.

Boxing, Unboxing

Object obj = 3;

• obj가 3을 참조하기 위해서는 3 자신이 공간을 가지고 있도록 바뀌어야 한다.
• 3 자신이 공간이 될 수 있도록 값을 감싸는 동작 필요
• 감쌀 때 사용될 수 있는 클래스가 존재 -> Wrapper 클래스
• Wrapper 클래스 사용 시 Object obj = 3; 해당 코드가 내부적으로 다음 코드와 같이 바뀌게 된다.

Object obj = new Integer(3);

• 이처럼 Object 형식이 참조할 수 있도록 박스로 감싸는 작업을 Boxing이라고 한다.
• 기본 형식 데이터를 참조하는 obj에 Unboxing 과정을 거쳐 다음과 같이 사용 가능하다.

int x = (int)obj; // box에 담겨진 값을 unboxing해서 x라는 값 변수에 담기
System.out.println(x);

• 기본형을 boxing 하기 위해 기본형의 수만큼 boxing을 위한 wrapper 클래스가 존재

Generic

• 이처럼 자료 형식을 비워둔 상태의 템플릿을 만들고, 템플릿을 완성하는 것은 컴파일러에게 위임할 수 있다.
• 어떤 형식의 자료형이든 모두 다룰 수 있는 것: Generic

예제) Generic으로 Member 사용자 정의 자료형을 사용해 화면에 출력할 jsp 페이지를 완성해보자.

<%
	MemberService memberService = new MemberService();
	List<Member> list = memberService.getList(); // Generic 사용해 Member 자료형의 list 가변길이 배열 가져오기
%>

<tbody>
	<% for(Member m : list) {%>
      <tr>
          <td class="w-1"><%=m.getId()%></td> // 가변길이 배열을 사용해 데이터 출력하기
          <td class="truncate text-align-left"><a href=""><%=m.getNickName()%></a></td>
          <td class="w-2">newlec</td>
          <td class="w-2">2020-12-12</td>
          <td class="w-1">1351</td>
      </tr>
    <% }%>
</tbody>

---

⭐Front-end

CSS, JavaScript

기본 행위 막기

• preventDefault()

menuButton.onclick = function(e) {
    e.preventDefault();  // a 태그 클릭 시 페이지가 새로고침되는 기본 행위를 막기
    console.log("test");
}

예제) 햄버거 버튼 클릭 시 전체를 가리는 스크린 나타나게 하기

window.addEventListener("load", function() {
    var header = document.querySelector("#header");
    var menuButton = header.querySelector(".icon-menu");

    menuButton.onclick = function(e) { // 햄버거 버튼 클릭

        // 1. div 태그를 생성해 전체를 가리는 스크린을 만든다.
        var screen = document.createElement("div");
        screen.style.position = "fixed"; /*absolute가 아닌 fixed로 변경*/
        screen.style.left = "0px";
        screen.style.top = "0px";

        screen.style.width = "100%";
        screen.style.height = "100%";
        screen.style.backgroundColor = "black";
        screen.style.opacity = 0;
        screen.style.transition = "2s"; /*2초 동안 바뀜*/

        setTimeout(function() { /*setTimeout을 하지 않았을 때는 opacity = 0 다음에 opacity = 0.7이 덮어씌워져서 적용됨*/
                                /*opacity = 0과 opacity = 0.7이 동시에 적용되지 않게 하기*/           
            screen.style.opacity = 0.7;
        }, 0);
        
        document.body.append(screen);
      
    }
});

결과 화면

JavaScript

노드 객체 선택하기

Node 객체는 Node 간의 관계 정보를 담고 있는 일련의 API를 가지고 있다.

• parentNode: 부모 노드
• firstChild: 첫번째 자식노드
• lastChild: 마지막 자식노드
• nextSibling: 다음 형제 노드
• previousSibling: 이전 형제 노드

-> 위 노드 관계 API는 각 노드 사이의 빈 공백, 주석, 텍스트 등이 모두 노드로 인식된다.

• parentElement: 부모 엘리먼트
• firstElementChild: 첫번째 자식 엘리먼트
• lastElementChild: 마지막 자식 엘리먼트
• nextElementSibling: 다음 형제 엘리먼트
• previousElementSibling: 이전 형제 엘리먼트

-> 위 API는 엘리먼트만을 대상으로 인식된다.

예제 1) accordion

HTML

<section id="ex7">
        <style>
            .d-none {
                display: none;
            }

            #ex7 .item>div:first-child {
                border: 1px solid #e9e9e9;
                padding: 5px 10px;
                font-weight: bold;
            }

            #ex7 .item>div:last-child {
                min-height: 100px;
            }
        </style>
		<h1>아코디언 예제 - 노드 순회하기</h1>
        <div class="accordion">
            <div class="item">
                <div class="title">title1</div>
                <div class="d-none">content1</div>
            </div>
            <div class="item">
                <div class="title">title2</div>
                <div class="d-none">content2</div>
            </div>
            <div class="item">
                <div class="title">title3</div>
                <div class="d-none">content3</div>
            </div>
        </div>
</section>

JavaScript

window.addEventListener("load", function() {
    var section = document.querySelector("#ex7");
    
    var accordion = section.querySelector(".accordion");
    accordion.onclick = function(e) { // 이벤트 버블링
        // 1. title이 아니면 return
        if(!e.target.classList.contains("title")) // title을 선택하지 않으면 아무런 동작이 실행되지 않음
            return;

        // 2. target 동생의 d-none toggle
        selected = e.target;
        selected.nextElementSibling.classList.toggle("d-none"); // 선택한 element 다음 형제의 classList 중 "d-none"이 toggle 되게 하기
    }
});

예제 2) 상품목록 관리 프로그램

HTML

<section id="ex8">
        <style>
            #ex8 .product {
                box-shadow: 3px 5px 6px #000000;
                padding: 10px;
            }

            #ex8 .item {
                height: 30px;
            }
        </style>
	<h1>상품목록 관리 - 노드 순회하기</h1>
        <div class="product">
            <div class="item">
                <span>상품명1</span>
                <input type="text" value="0">
                <button class="up">위</button>
                <button class="down">아래</button>
                <button class="current">선택</button>
            </div>
            <div class="item">
                <span>상품명2</span>
                <input type="text" value="0">
                <button class="up">위</button>
                <button class="down">아래</button>
                <button class="current">선택</button>
            </div>
            <div class="item">
                <span>상품명3</span>
                <input type="text" value="0">
                <button class="up">위</button>
                <button class="down">아래</button>
                <button class="current">선택</button>
            </div>
            <div class="item">
                <span>상품명4</span>
                <input type="text" value="0">
                <button class="up">위</button>
                <button class="down">아래</button>
                <button class="current">선택</button>
            </div>
        </div>
</section>

JavaScript

window.addEventListener("load", function() {
    var section = document.querySelector("#ex8");
    
    var product = section.querySelector(".product");
    var count = 0;
    product.onclick = function(e) {
        var item = e.target;
        if(!item.classList.contains("up") && // 위, 아래, 선택 버튼을 제외한 부분이 클릭되면 아무런 동작이 실행되지 않음
        !item.classList.contains("down") && 
        !item.classList.contains("current"))
            return;

        if(item.classList.contains("up")) {
            var input = item.parentNode.querySelector("input");
            input.value = parseInt(input.value) + 1; // 위 버튼 클릭 시 input.value 숫자가 +1 됨
        } else if(item.classList.contains("down")) {
            var input = item.parentNode.querySelector("input");
            input.value = parseInt(input.value) - 1; // 아래 버튼 클릭 시 input.value 숫자가 -1 됨
        } else if(item.classList.contains("current")) {
            item.parentElement.style.borderStyle = "dotted"; // 선택 버튼 클릭 시 선택 버튼이 위치하는 부모 엘리먼트 상자의 border가 점섬으로 변경됨
        }
    }
});