삽입정렬(Insertion Sort)는 2번째 원소부터 시작해 그 앞(왼쪽)의 원소들과 비교하여 원소를 뒤로 옮기고 지정된 자리에 자료를 "삽입" 하여 정렬하는 알고리즘이다.

#Process (Ascending 오름차순 기준)

1. 정렬은 2번째 위치(index)의 값을 temp에 저장한다.
2. temp와 이전에 있는 원소들과 비교하며 삽입해나간다.
3. '1'번으로 돌아가 다음 위치(index)의 값을 temp에 저장하고, 반복한다.

** 삽입정렬이 유리한 상황**

• 거의 정렬된 데이터를 처리할 때.
• 작은 배열에서 정렬할 때.
• 실시간으로 데이터가 추가될 때 (예: 목록에 새 요소가 추가될 때마다 정렬이 필요할 경우).

. . . 다음은 데이터가 추가 됨 응용하여 내림차순으로 푼 예시다.

BOJ 25305번

2022 연세대학교 미래캠퍼스 슬기로운 코딩생활에 $N$명의 학생들이 응시했다.

이들 중 점수가 가장 높은 $k$명은 상을 받을 것이다. 이 때, 상을 받는 커트라인이 몇 점인지 구하라.

커트라인이란 상을 받는 사람들 중 점수가 가장 가장 낮은 사람의 점수를 말한다.

import java.util.Scanner;

public class Main3 {
    public static void main(String[] args) {

    Scanner sc = new Scanner(System.in);

    int N = sc.nextInt();
    int k = sc.nextInt();
    int[] score = new int[N];

    //입력
    for(int i = 0; i< N; i ++){
        score[i] = sc.nextInt();    
    }

    for(int i = 1; i < N; i++) {
        System.out.println(score[i] + " ");
        }

    //내림차순으로 정렬 
    for(int i = 1; i< N; i++) {
        int temp = score[i];
        int pre = i-1;

        //정렬된 부분과 비교 하여 temp를 적절한 위치에 삽입
        while(pre >= 0 && score[pre] < temp) {
            score[pre + 1] = score[pre];
            pre--;

        }
            score[pre+1] = temp;
    }

     System.out.println(score[k - 1]);

     sc.close();

    }        

}

해당 문제에서 삽입정렬을 쓰는 이유?

삽입 정렬은 정렬 과정 중에서도 현재까지 정렬된 상태를 유지하기 때문에, 원하는 k번째 요소(커트라인)를 정렬이 끝나기 전이라도 알 수 있다.

예를 들어, 상위 k개의 요소가 정렬되었으면, 그때 바로 k번째 요소를 확인할 수 있습니다. 이는 전체 정렬이 완료되기 전에 결과를 얻을 수 있다는 점에서 해당문제에서 효율적인 방식이라고 볼 수 있다. 즉, 정렬 중에 원하는 결과가 나오면 바로 얻을 수 있는 장점.

. CollectionFramework의 구조도 이다.

collection은 데이터를 한곳에 모아 저장및 관리 하는 가변크기의 객체를 담는 컨테이너. 대표적으로 ArrayList, Vector, LinkedList, HashSet, hashMap.

List, ArrayList, Map, Set 의 관계와 특성을 흐린눈으로 대충 때우다가.. 헷갈려서 간단히 정리해보았다.

img: https://www.javatpoint.com/collections-in-java

** Map의 경우 Collection 인터페이스를 상속 받지 않지만 Collection으로 분류한다. . . . 구조와 특징은 이렇다.

일단 그 차이를 알아보기전에 ArrayList 사용 예시를 먼저 보자. 개린이는 처음부터 반복적으로 짚어줘야 기억이 난다..

ArrayList<Integer> numbers = new ArrayList<>();

이 예시는 ArrayList 클래스의 새로운 객체를 생성하여 numbers라는 변수에 할당하는 과정으로 ArrayList가 클래스 이기 때문에 Integer라는 래퍼클래스를 사용하였고, Integer 타입의 객체만을 담을 수 있도록 제한하는 제네릭 타입으로 사용되는 것이다.

여기서는 Integer가 래퍼클래스이자 제네릭 타입으로 들어오는 것이다.

즉, 해당 예시문은 numbers 라는 이름의 변수를 선언하고, 이 변수는 Integer 타입을 요소로 가지는 ArrayList 객체를 참조하는 것 .

List = 인터페이스 ArrayList = 클래스

• Array : 고정된 크기의 요소를 저장할 때 사용

• List : 동적으로 크기가 조정될 수 있는 컬렉션을 사용. 순서가 있고 데이터의 중복을 허용하는 Collection 인터페이스.

• ArrayList : 다양한 데이터 유형을 저장할 때 사용 List 인터페이스를 상속받아 구현되었으며 순서를 유지하고 데이터의 중복을 허용. 데이터 형태로 Object를 지정하기 때문에 모든 형태의 데이터를 저장할 수 있다.

즉, List 인터페이스 안에 ArrayList 클래스가 있는 것이다. 도형으로 비유를 하자면 List<> Dohyung = new ArrayList<>(); 도형<> Dohyung = new 직사각형<>();

. . . ArrayList를 생각이 나서 그냥 썼는데 차이점을 좀 더 알고 써야겠다..

래퍼(Wrapper) 클래스란? 기본 타입의 데이터를 객체로 표현해야 하는 경우가 종종 있는데 이럴 때에 기본 자료타입(원시타입)(primitive type)을 객체로 다루기 위해서 사용하는 클래스. (기본자료들을 클래스화 한것이라고 보면 된다. char, int 제외한 나머지 타입이름의 첫글자를 대문자로 생성하면 래퍼클래스가 된다.

래퍼클래스를 사용하는 이유는? ** 1.형변환 2.비교연산**

래퍼 클래스의 종류 ** 기본타입(primitive type) -> **래퍼클래스(wrapper class) byte -> Byte char -> Character int -> Integer float -> Float double -> Double boolean -> Boolean long -> Long short -> Short

• 박싱 : 원시타입의 변수를 래퍼클래스의 객체로 변환함
• 언박싱 : 래퍼클래스의 객체를 원시타입의 값으로 변환

컴파일러가 컴파일을 진행하다가 원시타입을 객체로 써야될 때는 자동 박싱을 하여 객체로 변환하여 사용하고 래퍼클래스의 객체를 원시타입으로 사용해야 될 경우에는 원시타입으로 자동 언박싱을 해서 사용한다.

. .

하단의 자주사용하는 메소드 예시를 보고 까먹었던 개념을 좀더 익숙해지도록. 해야겠죠? 조용히 집중해서 읽어봅시다..

. . . 메소드 예시

• 래퍼클래스.valueOf(매개변수) : 매개변수 값을 래퍼클래스의 객체로 변환. 변환된 객체를 리턴.

    ex) Integer intObj = Integer.valueOf(100);
    // int 값 100을 Integer 객체로 변환

• 래퍼클래스.parse원시타입(매개변수) : 매개변수 값을 원시타입으로 변환해서 리턴. 매개변수로는 String이나 CharacterSequence를 받는다.

    ex) int intValue = Integer.parseInt("100"); 
      // 문자열 "100"을 int형으로 변환

• 래퍼클래스의 객체.toString() : 객체에 담겨있는 값을 String형태로 변환해서 리턴.

    ex)Integer intObj = Integer.valueOf(100);
        String intStr = intObj.toString(); 
    // Integer 객체를 String으로 변환, "100" 리턴

justify: 가로 align : 세로 라고 생각하면 편하겠다.

flexbox 정렬 및 공백

1.justify-content : 주축(수평방향)을 중심으로 정렬

2-1. align-items : 컨테이너 내의 모든 아이템들을 교차축 방향으로 정렬 flexbox와 grid 레이아웃에서 사용

.container {
    display: flex;
    align-items: center; /* 모든 아이템을 교차 축 방향으로 중앙에 정렬 */
}

2-2. align-content : 교차축(수직방향)을 중심으로 정렬 여러행 또는 열이 있는 경우, 컨테이너 내의 행 또는 열들을 교차 축 방향으로 정렬. flexbox와 grid 레이아웃에서 여러줄 , 여러 열일때 효과적

.container {
    display: flex;
    flex-wrap: wrap; /* 여러 줄로 나뉨 */
    align-content: space-between; /* 여러 줄을 수직 방향으로 공간을 동일하게 분포 */
}

2-3. align-self : 특정 아이템만 교차축 방향으로 정렬 (부모의 'align-items'설정을 덮어 쓰는 기능)

.container {
    display: flex;
    align-items: center; /* 기본적으로 모든 아이템을 중앙에 정렬 */
}

.item {
    align-self: flex-end; /* 특정 아이템을 교차 축 방향으로 끝에 정렬 */
}

tr : 표에 행(row)을 추가 해줌 th : 행의 제목(head) td : 행의 내용이되는 태그 , th,td는 tr의 자식태그

• caption 표 중앙에 표시되는 테이블 제목 (table 태그 바로 뒤에 사용)
• clospan : 지정한 셀의 개수만큼 가로로 병합(컬럼끼리 병합)
• rowspan : 지정한 셀의 개수만큼 세로로 병합(행끼리 병합)
• colgroup : 컬럼들의 그룹을 생성 , 주로 컬럼의 길이를 설정하는데 많이 씀. caption 태그가 존재하는경우, caption 뒤에 쓴다. 그 외 테이블의 모든 태그 앞에 위치
• col : 열에 속하는 칸에 공통된 의미를 부여 할 때 사용 clogroup의 하위(자식)태그

--colgroup 태그 사용 예시--

 <table>
        <caption>
            <b style="color: red;">Frontent Framework</b>
            <p>요새 자주 사용되는 SPA Framework</p>
        </caption>
        <!--colgroup: caption 태그 뒤, tr 태그 위에 선언
                      컬럼들을 묶어주는 역할
        -->
        <colgroup>
            <!--col: colgroup태그 안에서 선언가능한 태그
                     컬럼마다 스타일을 다르게 줄 수 있는 태그
                     col 태그의 개수는 최대 테이블에 존재하는 컬럼의 개수
                     닫는 태그가 없다. 오로지 셀에 관련된 스타일만 적용가능하다.
                    -->
            <col style="background-color: yellow;">
            <col style="background-color: aqua;">
            <col style="background-color: lightgreen; width: 1000px;">
        </colgroup>
        <tr>
            <th>언어</th>
            <th>개발회사</th>
            <th>배포년도</th>
        </tr>
        <tr>
            <td>React</td>
            <td>메타(구 페이스북)</td>
            <td>2013</td>
        </tr>
        <tr>
            <td>Vue</td>
            <td>MIT</td>
            <td>2012</td>
        </tr>
    </table>

백엔드나 다른 페이지에 정보, 요청을 보낼 수 있는 기능을 가진 태그. form안의 데이터들을 요청과 함께 전송할 수 있는데, 예를 들면 회원가입 페이지, 로그인 페이지, 주문 페이지 등 . 우리가 설문조사, 정보 취합 때 자주 쓰는 naver form , google form의 기능을 생각하면 이해가 쉽다.

다음 예시코드를 보자.

<body>
    <!--action: 요청을 보낼 url 지정. form을 submit하게 되면 지정된 url로 요청을 보내게 되는데
                form태그안에 있는 데이터들도 함께 전송된다.-->
    <!--method: 요청을 보내는 방식 지정, get과 post중 하나를 선택해서 지정한다.-->
    <form action="/board/search" method="post">
        <input type="text" name="searchKeyword" placeholder="검색어를 입력하세요.">
        <input type="submit" value="검색">
    </form>
</body>

action은 form에 입력받은 데이터를 전송할 서버 스크립트의 경로를 지정하고 method는 get post방식 중 하나를 택하여 지정한다.

• get방식 : 사용자가 입력한 검색결과를 브라우저에 노출, 보안 취약 쿠키와 같은 작은 데이터 전송 할때 쓰이며 사용자가 입력한 정보가 노출되어도 괜찮을 때 사용된다.

• post 방식 : 데이터 추가, 수정, 삭제 사용자가 입력한 정보가 노출되지 않아야할 때(로그인 등)

• name : 하나의 웹 문서안에 여러 개의 폼이 있을 수 있으므로 폼을 식별하기위해 폼의 이름을 임의로 지정한다.

• fieldset : 태그의 영역들을 그룹화 시키기 위해 외곽선을 그려주는 역할을 한다. 하나의 폼에서 여러 구역을 나눠서 표시할 때 사용. 예를들면 쇼핑몰 사이트 주문서 폼에서 사용자 정보와 배송 정보, 주문 정보를 분리해서 표시할 때 주로 사용할 수 있다.

-legend : 는 fiedlset안에 제목을 붙여주는 역할로 , 디자인에 따라 외곽선이 필요 없을 시 fieldset에 스타일을 주지 않고 외곽선이 안보이게 제목으로 사용 가능하다.

-label : 입력창(input 태그)옆에 아이디나 비밀번호같은 텍스트를 붙여주는 태그

<lable 태그로 iput태그를 감싸는 방식>

  <label>아이디
      <input type="text">
  </label>

input 태그의 아이디를 label 태그의 for 속성으로 지정하는 방식

  <label for="userId">아이디</label>
  <input id="userId" type="text">

form 태그를 활용한 예시

<body>
    <form action="">
        <!--fieldset: form태그 안의 태그들의 영역을 지정. 외곽선을 그려주는 태그-->
        <fieldset>
            <!--legend: 영역으로 구분된 fieldset에 제목을 붙여주는 태그-->
            <legend>주문자 정보</legend>
            <ul>
                <li>
                    <label for="name">이름</label>
                    <input type="text" id="name" value="홍길동">
                </li>
                <li>
                    <label for="tel">연락처</label>
                    <input type="text" id="tel">
                </li>
            </ul>
        </fieldset>
        <fieldset>
            <legend>배송지 정보</legend>
            <ul>
                <li>
                    <label for="receiveName">받는 사람 이름</label>
                    <input type="text" id="receiveName">
                </li>
                <li>
                    <label for="address">주소</label>
                    <input type="text" id="address">
                </li>
            </ul>
        </fieldset>
    </form>
</body>

위 코드로 출력된 화면 이미지는 다음과 같다.