유경쓰 개발일기

[Programmers/Java]프로그래머스 2018 카카오 블라인드 채용 - n진수 게임

유경(shin-6-0) — Fri, 20 Oct 2023 10:09:30 +0900

문제링크

https://school.programmers.co.kr/learn/courses/30/lessons/17687

프로그래머스

코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.

programmers.co.kr

문제조건

문제 설명

N진수 게임

튜브가 활동하는 코딩 동아리에서는 전통적으로 해오는 게임이 있다. 이 게임은 여러 사람이 둥글게 앉아서 숫자를 하나씩 차례대로 말하는 게임인데, 규칙은 다음과 같다.

숫자를 0부터 시작해서 차례대로 말한다. 첫 번째 사람은 0, 두 번째 사람은 1, … 열 번째 사람은 9를 말한다.
10 이상의 숫자부터는 한 자리씩 끊어서 말한다. 즉 열한 번째 사람은 10의 첫 자리인 1, 열두 번째 사람은 둘째 자리인 0을 말한다.

이렇게 게임을 진행할 경우,

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 0, 1, 1, 1, 2, 1, 3, 1, 4, …

순으로 숫자를 말하면 된다.

한편 코딩 동아리 일원들은 컴퓨터를 다루는 사람답게 이진수로 이 게임을 진행하기도 하는데, 이 경우에는

0, 1, 1, 0, 1, 1, 1, 0, 0, 1, 0, 1, 1, 1, 0, 1, 1, 1, …

순으로 숫자를 말하면 된다.

이진수로 진행하는 게임에 익숙해져 질려가던 사람들은 좀 더 난이도를 높이기 위해 이진법에서 십육진법까지 모든 진법으로 게임을 진행해보기로 했다. 숫자 게임이 익숙하지 않은 튜브는 게임에 져서 벌칙을 받는 굴욕을 피하기 위해, 자신이 말해야 하는 숫자를 스마트폰에 미리 출력해주는 프로그램을 만들려고 한다. 튜브의 프로그램을 구현하라.

입력 형식

진법 n, 미리 구할 숫자의 갯수 t, 게임에 참가하는 인원 m, 튜브의 순서 p 가 주어진다.

2 ≦ n ≦ 16
0 ＜ t ≦ 1000
2 ≦ m ≦ 100
1 ≦ p ≦ m

출력 형식

튜브가 말해야 하는 숫자 t개를 공백 없이 차례대로 나타낸 문자열. 단, 10~15는 각각 대문자 A~F로 출력한다.

입출력 예제

n t m p result

2	4	2	1	"0111"
16	16	2	1	"02468ACE11111111"
16	16	2	2	"13579BDF01234567"

풀이(성공)

최대 반복문 횟수는 t (튜브가 말해야 할 갯수) * m (인원수) 이다.

for문을 돌리면서 i값은 Integer.toString(숫자, 진법)을 사용해서 convert에 저장한다.

작성코드(성공)

import java.util.*;


class Solution {
    public static ArrayList<Integer> solution(String msg) {
        ArrayList<Integer> ans = new ArrayList<Integer>();
        int index = 1;
        int w=0,c=1;
        HashMap<String, Integer> dictionary = new HashMap<String,Integer>();
        for(char i='A';i<='Z';i++){
            dictionary.put(String.valueOf(i),index++);
        }
        while(true){
            if(c==msg.length()){
                String word=msg.substring(w,c);
                int value=dictionary.get(word);
                ans.add(value);//사전 색인 번호 등록
                break;
            } else{
                //System.out.print(w+":"+c);
                String wWord=msg.substring(w,c);
                String cWord=msg.substring(c,c+1);
                int wValue=dictionary.get(msg.substring(w,c));
                int cValue=dictionary.get(msg.substring(c,c+1));
                //System.out.println("        |w인덱스 = "+wValue+", w단어 =  "+wWord+", c인덱스 = "+cValue+" c단어 = "+cWord);
                String chkWord=msg.substring(w,c+1);
                if(dictionary.containsKey(chkWord)){//현재글자+다음글자가 사전에 있음
                    c++;
                }else{//현재글자+다음글자가 사전에 없음
                    //System.out.println("["+chkWord+":"+index+"] << 사전에 등록");
                    dictionary.put(chkWord,index);
                    ans.add(wValue);//사전 색인 번호 등록
                    w=c;
                    c++;
                    index++;
                }
            }
        }
        return ans;
    }
}

[Programmers/Java]프로그래머스 2018 카카오 블라인드 채용 - 압축

유경(shin-6-0) — Thu, 19 Oct 2023 17:38:16 +0900

문제링크

https://school.programmers.co.kr/learn/courses/30/lessons/17684

프로그래머스

programmers.co.kr

문제조건

문제 설명

압축

신입사원 어피치는 카카오톡으로 전송되는 메시지를 압축하여 전송 효율을 높이는 업무를 맡게 되었다. 메시지를 압축하더라도 전달되는 정보가 바뀌어서는 안 되므로, 압축 전의 정보를 완벽하게 복원 가능한 무손실 압축 알고리즘을 구현하기로 했다.

어피치는 여러 압축 알고리즘 중에서 성능이 좋고 구현이 간단한 LZW(Lempel–Ziv–Welch) 압축을 구현하기로 했다. LZW 압축은 1983년 발표된 알고리즘으로, 이미지 파일 포맷인 GIF 등 다양한 응용에서 사용되었다.

LZW 압축은 다음 과정을 거친다.

길이가 1인 모든 단어를 포함하도록 사전을 초기화한다.
사전에서 현재 입력과 일치하는 가장 긴 문자열 w를 찾는다.
w에 해당하는 사전의 색인 번호를 출력하고, 입력에서 w를 제거한다.
입력에서 처리되지 않은 다음 글자가 남아있다면(c), w+c에 해당하는 단어를 사전에 등록한다.
단계 2로 돌아간다.

압축 알고리즘이 영문 대문자만 처리한다고 할 때, 사전은 다음과 같이 초기화된다. 사전의 색인 번호는 정수값으로 주어지며, 1부터 시작한다고 하자.

색인 번호 1 2 3 ... 24 25 26

단어

...

예를 들어 입력으로 KAKAO가 들어온다고 하자.

현재 사전에는 KAKAO의 첫 글자 K는 등록되어 있으나, 두 번째 글자까지인 KA는 없으므로, 첫 글자 K에 해당하는 색인 번호 11을 출력하고, 다음 글자인 A를 포함한 KA를 사전에 27 번째로 등록한다.
두 번째 글자 A는 사전에 있으나, 세 번째 글자까지인 AK는 사전에 없으므로, A의 색인 번호 1을 출력하고, AK를 사전에 28 번째로 등록한다.
세 번째 글자에서 시작하는 KA가 사전에 있으므로, KA에 해당하는 색인 번호 27을 출력하고, 다음 글자 O를 포함한 KAO를 29 번째로 등록한다.
마지막으로 처리되지 않은 글자 O에 해당하는 색인 번호 15를 출력한다.

현재 입력(w) 다음 글자(c) 출력 사전 추가(w+c)

K	A	11	27: KA
A	K	1	28: AK
KA	O	27	29: KAO
O		15

이 과정을 거쳐 다섯 글자의 문장 KAKAO가 4개의 색인 번호 [11, 1, 27, 15]로 압축된다.

입력으로 TOBEORNOTTOBEORTOBEORNOT가 들어오면 다음과 같이 압축이 진행된다.

현재 입력(w) 다음 글자(c) 출력 사전 추가(w+c)

T	O	20	27: TO
O	B	15	28: OB
B	E	2	29: BE
E	O	5	30: EO
O	R	15	31: OR
R	N	18	32: RN
N	O	14	33: NO
O	T	15	34: OT
T	T	20	35: TT
TO	B	27	36: TOB
BE	O	29	37: BEO
OR	T	31	38: ORT
TOB	E	36	39: TOBE
EO	R	30	40: EOR
RN	O	32	41: RNO
OT		34

입력 형식

입력으로 영문 대문자로만 이뤄진 문자열 msg가 주어진다. msg의 길이는 1 글자 이상, 1000 글자 이하이다.

출력 형식

주어진 문자열을 압축한 후의 사전 색인 번호를 배열로 출력하라.

입출력 예제

msg answer

KAKAO	[11, 1, 27, 15]
TOBEORNOTTOBEORTOBEORNOT	[20, 15, 2, 5, 15, 18, 14, 15, 20, 27, 29, 31, 36, 30, 32, 34]
ABABABABABABABAB	[1, 2, 27, 29, 28, 31, 30]

풀이1(성공)

카카오 문제는 항상 깔끔한데 문제 이해가 어려운 것 같다..ㅎㅎ

가장 중요하게 생각한 부분은 '사전 등록 방법'이다.

경우를 두가지로 나눌 수 있는데, 현재 문자와 관련된 msg의 인덱스를 w, 다음 문자를 c로 할 때

c인덱스를 가진 문자 (cWord)가 사전에 없으면 > w인덱스문자(wWord) + c인덱스문자(cWord)를 사전에 등록하고 w는 c가되고, c는 +1을 해준다.

c인덱스를 가진 문자 (cWord)가 사전에 있으면 > c값만 하나 늘린다.

위와 같은 방법으로 진행하고, 등록은 현재 문자 (wWord) 에 해당하는 사전의 인덱스 값을 저장하면 된다.

문제상에서는 기본으로 int배열을 사용했는데, int배열은 사이즈 조절이 어려우므로 ArrayList자료형을 사용했다.

작성코드1(성공)

import java.util.*;


class Solution {
    public static ArrayList<Integer> solution(String msg) {
        ArrayList<Integer> ans = new ArrayList<Integer>();
        int index = 1;
        int w=0,c=1;
        HashMap<String, Integer> dictionary = new HashMap<String,Integer>();
        for(char i='A';i<='Z';i++){
            dictionary.put(String.valueOf(i),index++);
        }
        while(true){
            if(c==msg.length()){
                String word=msg.substring(w,c);
                int value=dictionary.get(word);
                ans.add(value);//사전 색인 번호 등록
                break;
            } else{
                //System.out.print(w+":"+c);
                String wWord=msg.substring(w,c);
                String cWord=msg.substring(c,c+1);
                int wValue=dictionary.get(msg.substring(w,c));
                int cValue=dictionary.get(msg.substring(c,c+1));
                //System.out.println("        |w인덱스 = "+wValue+", w단어 =  "+wWord+", c인덱스 = "+cValue+" c단어 = "+cWord);
                String chkWord=msg.substring(w,c+1);
                if(dictionary.containsKey(chkWord)){//현재글자+다음글자가 사전에 있음
                    c++;
                }else{//현재글자+다음글자가 사전에 없음
                    //System.out.println("["+chkWord+":"+index+"] << 사전에 등록");
                    dictionary.put(chkWord,index);
                    ans.add(wValue);//사전 색인 번호 등록
                    w=c;
                    c++;
                    index++;
                }
            }
        }
        return ans;
    }
}

[Programmers/Java]프로그래머스 2022 카카오 블라인드 채용 - k진수에서 소수 개수 구하기

유경(shin-6-0) — Mon, 16 Oct 2023 19:06:56 +0900

문제링크

https://school.programmers.co.kr/learn/courses/30/lessons/92335

프로그래머스

programmers.co.kr

문제조건

문제 설명

양의 정수 n이 주어집니다. 이 숫자를 k진수로 바꿨을 때, 변환된 수 안에 아래 조건에 맞는 소수(Prime number)가 몇 개인지 알아보려 합니다.

0P0처럼 소수 양쪽에 0이 있는 경우
P0처럼 소수 오른쪽에만 0이 있고 왼쪽에는 아무것도 없는 경우
0P처럼 소수 왼쪽에만 0이 있고 오른쪽에는 아무것도 없는 경우
P처럼 소수 양쪽에 아무것도 없는 경우
단, P는 각 자릿수에 0을 포함하지 않는 소수입니다.
- 예를 들어, 101은 P가 될 수 없습니다.

예를 들어, 437674을 3진수로 바꾸면 211020101011입니다. 여기서 찾을 수 있는 조건에 맞는 소수는 왼쪽부터 순서대로 211, 2, 11이 있으며, 총 3개입니다. (211, 2, 11을 k진법으로 보았을 때가 아닌, 10진법으로 보았을 때 소수여야 한다는 점에 주의합니다.) 211은 P0 형태에서 찾을 수 있으며, 2는 0P0에서, 11은 0P에서 찾을 수 있습니다.

정수 n과 k가 매개변수로 주어집니다. n을 k진수로 바꿨을 때, 변환된 수 안에서 찾을 수 있는 위 조건에 맞는 소수의 개수를 return 하도록 solution 함수를 완성해 주세요.

제한사항

1 ≤ n ≤ 1,000,000
3 ≤ k ≤ 10

입출력 예

n k result

437674	3	3
110011	10	2

입출력 예 설명

입출력 예 #1

문제 예시와 같습니다.

입출력 예 #2

110011을 10진수로 바꾸면 110011입니다. 여기서 찾을 수 있는 조건에 맞는 소수는 11, 11 2개입니다. 이와 같이, 중복되는 소수를 발견하더라도 모두 따로 세어야 합니다.

풀이1(실패)

이는 hashMap을 이용하면 쉽게 풀 수 있다. Map에는 containsKey, containsValue라는 내장 함수가 있는데, Key또는 Value에 phone_book 배열 내부의 내용을 넣어서 포함되는지 확인하면, false를 리턴하는 방식으로 진행한다.

chkPrimeNum을 돌릴때 Integer.ParseInt로 했더니 엄청나게 큰 수에 대해서 시간초과or 런타임오류가 발생하여 Double.parstDouble로 바꾸어서 진행했다.

작성코드1(실패)

class Solution {
    public int solution(int n, int k) {
        String transNum="";
        int zinsu=k;
        while(n!=0){
            transNum=(n%k)+transNum;
            n/=k;
        }
        int primeNumber = 0;
        String[] array=transNum.split("0");
        for(String s:array){

            if(s.length()>=1&&chkPrimeNum(s)&&!s.equals("1")){
                System.out.print(s+" ");
                primeNumber++;
            }
        }
        return primeNumber;
    }
    
    public static boolean chkPrimeNum(String s){
        for(int i=2;(i*i)<=Double.parseDouble(s);i++){
            if(Double.parseDouble(s)%i==0){
                return false;
            }
        }
        return true;
    }
}

1번 테스트를 시간초과로 통과하지 못했다.

풀이2(성공)

zinsu는 사용하지 않아서 지웠고,chkPrimeNum 안에서 for문을 돌 때 (i*i)<=Double.pasreDouble(s) 보다, i<=(int)Math.sqrt(Double.parseDouble(s))가 더 적게 돌 것이라고 생각해서 (double > int형으로 반올림하면서 계산하지 않는 값이 존재) 아래와 같이 바꾸고, 1인경우에는 무조건 소수가 아니고 2인 경우에는 무조건 소수이기때문에 통과로 바꾸었다.

작성코드2(성공)

class Solution {
    public int solution(int n, int k) {
        String transNum="";
        while(n!=0){
            transNum=(n%k)+transNum;
            n/=k;
        }
        int primeNumber = 0;
        String[] array=transNum.split("0");
        for(String s:array){
            if(s.length()>=1&&chkPrimeNum(s)){
                //System.out.print(s+" ");
                primeNumber++;
            }
        }
        return primeNumber;
    }
    
    public static boolean chkPrimeNum(String s){
        if(s.equals("1")){
            return false;
        } else if (s.equals("2")) {
            return true;
        }
        for(int i=2;i<=(int)Math.sqrt(Double.parseDouble(s));i++){
            if(Double.parseDouble(s)%i==0){
                return false;
            }
        }
        return true;
    }
}

[Programmers/Java]프로그래머스 연습문제(해시) - 전화번호 목록

유경(shin-6-0) — Mon, 16 Oct 2023 13:44:28 +0900

문제링크

https://school.programmers.co.kr/learn/courses/30/lessons/42577

프로그래머스

programmers.co.kr

문제조건

문제 설명

전화번호부에 적힌 전화번호 중, 한 번호가 다른 번호의 접두어인 경우가 있는지 확인하려 합니다.

전화번호가 다음과 같을 경우, 구조대 전화번호는 영석이의 전화번호의 접두사입니다.

구조대 : 119
박준영 : 97 674 223
지영석 : 11 9552 4421

전화번호부에 적힌 전화번호를 담은 배열 phone_book 이 solution 함수의 매개변수로 주어질 때, 어떤 번호가 다른 번호의 접두어인 경우가 있으면 false를 그렇지 않으면 true를 return 하도록 solution 함수를 작성해주세요.

제한 사항

phone_book의 길이는 1 이상 1,000,000 이하입니다.
- 각 전화번호의 길이는 1 이상 20 이하입니다.
- 같은 전화번호가 중복해서 들어있지 않습니다.

입출력 예제

phone_book return

["119", "97674223", "1195524421"]	false
["123","456","789"]	true
["12","123","1235","567","88"]	false

입출력 예 설명

입출력 예 #1

앞에서 설명한 예와 같습니다.

입출력 예 #2

한 번호가 다른 번호의 접두사인 경우가 없으므로, 답은 true입니다.

입출력 예 #3

첫 번째 전화번호, “12”가 두 번째 전화번호 “123”의 접두사입니다. 따라서 답은 false입니다.

풀이

작성코드

import java.util.*;

class Solution {
    public boolean solution(String[] phone_book) {
        boolean answer = true;
        Map hash= new HashMap<>();
        for(int i=0;i< phone_book.length;i++){
            hash.put(phone_book[i],i);
        }
        for(int i=0;i<phone_book.length;i++){
            for(int j=0;j<phone_book[i].length();j++){
                if(hash.containsKey(phone_book[i].substring(0,j))) return false;
            }
        }
        return answer;
    }
}

[Programmers/Java]프로그래머스 연습문제 - 타겟넘버

유경(shin-6-0) — Mon, 16 Oct 2023 11:35:54 +0900

문제링크

https://school.programmers.co.kr/learn/courses/30/lessons/43165

프로그래머스

programmers.co.kr

문제조건

문제 설명

n개의 음이 아닌 정수들이 있습니다. 이 정수들을 순서를 바꾸지 않고 적절히 더하거나 빼서 타겟 넘버를 만들려고 합니다. 예를 들어 [1, 1, 1, 1, 1]로 숫자 3을 만들려면 다음 다섯 방법을 쓸 수 있습니다.

1+1+1+1+1 = 3 +1-1+1+1+1 = 3 +1+1-1+1+1 = 3 +1+1+1-1+1 = 3 +1+1+1+1-1 = 3

사용할 수 있는 숫자가 담긴 배열 numbers, 타겟 넘버 target이 매개변수로 주어질 때 숫자를 적절히 더하고 빼서 타겟 넘버를 만드는 방법의 수를 return 하도록 solution 함수를 작성해주세요.

제한사항

주어지는 숫자의 개수는 2개 이상 20개 이하입니다.
각 숫자는 1 이상 50 이하인 자연수입니다.
타겟 넘버는 1 이상 1000 이하인 자연수입니다.

입출력 예

numbers target return

[1, 1, 1, 1, 1]	3	5
[4, 1, 2, 1]	4	2

입출력 예 설명

입출력 예 #1

문제 예시와 같습니다.

입출력 예 #2

+4+1-2+1 = 4 +4-1+2-1 = 4

총 2가지 방법이 있으므로, 2를 return 합니다.

풀이

아주 간단한 dfs문제이다. depth와 총 합 (sum)을 매번 체크하면서 재귀형식으로 dfs라는 함수를 돌리면 해결된다.

dfs내에서 dfs를 +인 경우와 -인 경우 두가지를 실행해서 +,- 인 경우를 모두 체크한다.

작성코드

class Solution {
    static int answer = 0;
    public int solution(int[] numbers, int target) {
        answer=0;
        dfs(numbers,0,target,0);
        return answer;
    }
    
    private static void dfs(int[] numbers, int depth, int target, int sum) {
        //System.out.println("depth = "+depth+", target = "+target+", sum = "+sum+", answer = "+answer);
        if(depth==numbers.length){
            if(target==sum) answer++;
        }else{
            dfs(numbers,depth+1,target,sum+numbers[depth]);
            dfs(numbers,depth+1,target,sum-numbers[depth]);
        }
    }
}

참고자료 (DFS, BFS)
https://yunyoung1819.tistory.com/86

[알고리즘] 깊이 우선 탐색(DFS) 과 너비 우선 탐색(BFS)

[알고리즘] 깊이 우선 탐색(DFS) 과 너비 우선 탐색(BFS) ※ 그래프의 개념 - 정점과 간선으로 이루어진 자료구조의 일종. G = (V, E) ※ 그래프 탐색 - 하나의 정점으로부터 시작하여 차례대로 모든 정

yunyoung1819.tistory.com

[Programmers/Java]프로그래머스 연습문제(완전탐색) - 피로도

유경(shin-6-0) — Mon, 16 Oct 2023 09:48:58 +0900

문제링크

https://school.programmers.co.kr/learn/courses/30/lessons/87946

프로그래머스

programmers.co.kr

문제조건

문제 설명

XX게임에는 피로도 시스템(0 이상의 정수로 표현합니다)이 있으며, 일정 피로도를 사용해서 던전을 탐험할 수 있습니다. 이때, 각 던전마다 탐험을 시작하기 위해 필요한 "최소 필요 피로도"와 던전 탐험을 마쳤을 때 소모되는 "소모 피로도"가 있습니다. "최소 필요 피로도"는 해당 던전을 탐험하기 위해 가지고 있어야 하는 최소한의 피로도를 나타내며, "소모 피로도"는 던전을 탐험한 후 소모되는 피로도를 나타냅니다. 예를 들어 "최소 필요 피로도"가 80, "소모 피로도"가 20인 던전을 탐험하기 위해서는 유저의 현재 남은 피로도는 80 이상 이어야 하며, 던전을 탐험한 후에는 피로도 20이 소모됩니다.

이 게임에는 하루에 한 번씩 탐험할 수 있는 던전이 여러개 있는데, 한 유저가 오늘 이 던전들을 최대한 많이 탐험하려 합니다. 유저의 현재 피로도 k와 각 던전별 "최소 필요 피로도", "소모 피로도"가 담긴 2차원 배열 dungeons 가 매개변수로 주어질 때, 유저가 탐험할수 있는 최대 던전 수를 return 하도록 solution 함수를 완성해주세요.

제한사항

k는 1 이상 5,000 이하인 자연수입니다.
dungeons의 세로(행) 길이(즉, 던전의 개수)는 1 이상 8 이하입니다.
- dungeons의 가로(열) 길이는 2 입니다.
- dungeons의 각 행은 각 던전의 ["최소 필요 피로도", "소모 피로도"] 입니다.
- "최소 필요 피로도"는 항상 "소모 피로도"보다 크거나 같습니다.
- "최소 필요 피로도"와 "소모 피로도"는 1 이상 1,000 이하인 자연수입니다.
- 서로 다른 던전의 ["최소 필요 피로도", "소모 피로도"]가 서로 같을 수 있습니다.

입출력 예

k dungeons result

[[80,20],[50,40],[30,10]]

입출력 예 설명

현재 피로도는 80입니다.

만약, 첫 번째 → 두 번째 → 세 번째 던전 순서로 탐험한다면

현재 피로도는 80이며, 첫 번째 던전을 돌기위해 필요한 "최소 필요 피로도" 또한 80이므로, 첫 번째 던전을 탐험할 수 있습니다. 첫 번째 던전의 "소모 피로도"는 20이므로, 던전을 탐험한 후 남은 피로도는 60입니다.
남은 피로도는 60이며, 두 번째 던전을 돌기위해 필요한 "최소 필요 피로도"는 50이므로, 두 번째 던전을 탐험할 수 있습니다. 두 번째 던전의 "소모 피로도"는 40이므로, 던전을 탐험한 후 남은 피로도는 20입니다.
남은 피로도는 20이며, 세 번째 던전을 돌기위해 필요한 "최소 필요 피로도"는 30입니다. 따라서 세 번째 던전은 탐험할 수 없습니다.

만약, 첫 번째 → 세 번째 → 두 번째 던전 순서로 탐험한다면

현재 피로도는 80이며, 첫 번째 던전을 돌기위해 필요한 "최소 필요 피로도" 또한 80이므로, 첫 번째 던전을 탐험할 수 있습니다. 첫 번째 던전의 "소모 피로도"는 20이므로, 던전을 탐험한 후 남은 피로도는 60입니다.
남은 피로도는 60이며, 세 번째 던전을 돌기위해 필요한 "최소 필요 피로도"는 30이므로, 세 번째 던전을 탐험할 수 있습니다. 세 번째 던전의 "소모 피로도"는 10이므로, 던전을 탐험한 후 남은 피로도는 50입니다.
남은 피로도는 50이며, 두 번째 던전을 돌기위해 필요한 "최소 필요 피로도"는 50이므로, 두 번째 던전을 탐험할 수 있습니다. 두 번째 던전의 "소모 피로도"는 40이므로, 던전을 탐험한 후 남은 피로도는 10입니다.

따라서 이 경우 세 던전을 모두 탐험할 수 있으며, 유저가 탐험할 수 있는 최대 던전 수는 3입니다.

풀이

위 문제는 완전탐색(DFS,BFS)이라는 점에서 힌트를 얻었습니다.

던전 중 1곳을 방문했을 때, 방문 여부를 저장해야하고 (갔던 던전은 다시 가지 않음), 들른 던전을 체크 (count)해야하고, 마지막으로 던전의 값 만큼 피로도를 감소시켜야합니다.

이를 위해서 던전의 방문여부를 저장하는 visit을 solution에 선언해서 사용하고, dungeonExplore라는 탐색 함수를 만들어 반복문을 통해 탐색합니다. 방문여부(visit[i]==0)와 최소필요피로도(dungeons[i][0])가 현재피로도(k)보다 작은 경우에만 방문을 하고 다시 이 상태에서 던전 방문을 해서 재귀함수처럼 계속 들어가는 방식입니다.

다만 던전 방문 후 빠져나왔을 때, 다시 visit[i]의 값을 0으로 만들어서 이전의 방문 여부가 for문을 돌 때 영향을 주지 않도록 합니다.

작성코드

class Solution {
    public int solution(int k, int[][] dungeons) {
                int[] visit=new int[dungeons.length];
        //던전탐색함수는 던전정보(dungeons), 방문수(visit), 현재피로도(k), 방문한던전수(count)를 가지고 계산한다.
        dungeonExplore(dungeons,visit,k,0);

        return max;
    }
    
    private static int max=0;
    private static void dungeonExplore(int[][] dungeons, int[] visit, int k, int count) {
        for(int i=0;i<dungeons.length;i++){
            if(visit[i]==0&&dungeons[i][0]<=k){
                visit[i]=1;
                dungeonExplore(dungeons,visit,k-dungeons[i][1],count+1);
                visit[i]=0; //이전 방문여부가 다음 회차에 영향을 주지 않기 위함
            }
        }
        if(max<count){
            max=count;
        }
    }
}

[Programmers/Java]프로그래머스 2018 카카오 블라인드 채용 - 뉴스 클러스터링

유경(shin-6-0) — Fri, 13 Oct 2023 16:12:41 +0900

문제링크

https://school.programmers.co.kr/learn/courses/30/lessons/17677

프로그래머스

programmers.co.kr

문제조건

문제 설명

뉴스 클러스터링

여러 언론사에서 쏟아지는 뉴스, 특히 속보성 뉴스를 보면 비슷비슷한 제목의 기사가 많아 정작 필요한 기사를 찾기가 어렵다. Daum 뉴스의 개발 업무를 맡게 된 신입사원 튜브는 사용자들이 편리하게 다양한 뉴스를 찾아볼 수 있도록 문제점을 개선하는 업무를 맡게 되었다.

개발의 방향을 잡기 위해 튜브는 우선 최근 화제가 되고 있는 "카카오 신입 개발자 공채" 관련 기사를 검색해보았다.

카카오 첫 공채..'블라인드' 방식 채용
카카오, 합병 후 첫 공채.. 블라인드 전형으로 개발자 채용
카카오, 블라인드 전형으로 신입 개발자 공채
카카오 공채, 신입 개발자 코딩 능력만 본다
카카오, 신입 공채.. "코딩 실력만 본다"
카카오 "코딩 능력만으로 2018 신입 개발자 뽑는다"

기사의 제목을 기준으로 "블라인드 전형"에 주목하는 기사와 "코딩 테스트"에 주목하는 기사로 나뉘는 걸 발견했다. 튜브는 이들을 각각 묶어서 보여주면 카카오 공채 관련 기사를 찾아보는 사용자에게 유용할 듯싶었다.

유사한 기사를 묶는 기준을 정하기 위해서 논문과 자료를 조사하던 튜브는 "자카드 유사도"라는 방법을 찾아냈다.

자카드 유사도는 집합 간의 유사도를 검사하는 여러 방법 중의 하나로 알려져 있다. 두 집합 A, B 사이의 자카드 유사도 J(A, B)는 두 집합의 교집합 크기를 두 집합의 합집합 크기로 나눈 값으로 정의된다.

예를 들어 집합 A = {1, 2, 3}, 집합 B = {2, 3, 4}라고 할 때, 교집합 A ∩ B = {2, 3}, 합집합 A ∪ B = {1, 2, 3, 4}이 되므로, 집합 A, B 사이의 자카드 유사도 J(A, B) = 2/4 = 0.5가 된다. 집합 A와 집합 B가 모두 공집합일 경우에는 나눗셈이 정의되지 않으니 따로 J(A, B) = 1로 정의한다.

자카드 유사도는 원소의 중복을 허용하는 다중집합에 대해서 확장할 수 있다. 다중집합 A는 원소 "1"을 3개 가지고 있고, 다중집합 B는 원소 "1"을 5개 가지고 있다고 하자. 이 다중집합의 교집합 A ∩ B는 원소 "1"을 min(3, 5)인 3개, 합집합 A ∪ B는 원소 "1"을 max(3, 5)인 5개 가지게 된다. 다중집합 A = {1, 1, 2, 2, 3}, 다중집합 B = {1, 2, 2, 4, 5}라고 하면, 교집합 A ∩ B = {1, 2, 2}, 합집합 A ∪ B = {1, 1, 2, 2, 3, 4, 5}가 되므로, 자카드 유사도 J(A, B) = 3/7, 약 0.42가 된다.

이를 이용하여 문자열 사이의 유사도를 계산하는데 이용할 수 있다. 문자열 "FRANCE"와 "FRENCH"가 주어졌을 때, 이를 두 글자씩 끊어서 다중집합을 만들 수 있다. 각각 {FR, RA, AN, NC, CE}, {FR, RE, EN, NC, CH}가 되며, 교집합은 {FR, NC}, 합집합은 {FR, RA, AN, NC, CE, RE, EN, CH}가 되므로, 두 문자열 사이의 자카드 유사도 J("FRANCE", "FRENCH") = 2/8 = 0.25가 된다.

입력 형식

입력으로는 str1과 str2의 두 문자열이 들어온다. 각 문자열의 길이는 2 이상, 1,000 이하이다.
입력으로 들어온 문자열은 두 글자씩 끊어서 다중집합의 원소로 만든다. 이때 영문자로 된 글자 쌍만 유효하고, 기타 공백이나 숫자, 특수 문자가 들어있는 경우는 그 글자 쌍을 버린다. 예를 들어 "ab+"가 입력으로 들어오면, "ab"만 다중집합의 원소로 삼고, "b+"는 버린다.
다중집합 원소 사이를 비교할 때, 대문자와 소문자의 차이는 무시한다. "AB"와 "Ab", "ab"는 같은 원소로 취급한다.

출력 형식

입력으로 들어온 두 문자열의 자카드 유사도를 출력한다. 유사도 값은 0에서 1 사이의 실수이므로, 이를 다루기 쉽도록 65536을 곱한 후에 소수점 아래를 버리고 정수부만 출력한다.

예제 입출력

str1 str2 answer

FRANCE	french	16384
handshake	shake hands	65536
aa1+aa2	AAAA12	43690
E=M*C^2	e=m*c^2	65536

풀이

간단하게 전 인덱스 string값과 현재 인덱스 string값이 전부 문자일 때만 List에 넣고, List를 정렬한 후, str1 집합에 대해서 탐색시 str2에 있는 집합일 경우 2에 있는걸 삭제하고 intersection(교집합)에 추가한다. union에는 전부 다 추가한다.

그리고 삭제된 str2에 대한 집합을 전부 union(합집합)에 추가한다.

작성코드

import java.util.*;

class Solution {
    public int solution(String str1, String str2) {
         //J(a,b) 자카드 유사도 = 교집합 크기를 합집합 크기로 나눈 것
        int answer = 0;
        double jaccard = 0.0;
        str1=str1.toUpperCase();
        str2=str2.toUpperCase();
        List<String> intersection=new ArrayList<>();
        List<String> union=new ArrayList<>();
        List<String> newStr1= new ArrayList<>();
        List<String> newStr2= new ArrayList<>();
        for(int i=1;i<str1.length();i++){
            if((str1.charAt(i)>=65&&str1.charAt(i)<=90)&&(str1.charAt(i-1)>=65&&str1.charAt(i-1)<=90)){
                String input= String.valueOf(str1.charAt(i-1))+String.valueOf(str1.charAt(i));
                newStr1.add(input);
            }
        }
        for(int i=1;i<str2.length();i++){
            if((str2.charAt(i)>=65&&str2.charAt(i)<=90)&&(str2.charAt(i-1)>=65&&str2.charAt(i-1)<=90)){
                String input= String.valueOf(str2.charAt(i-1))+String.valueOf(str2.charAt(i));
                newStr2.add(input);
            }
        }
        Collections.sort(newStr1);
        Collections.sort(newStr2);
        for(String s:newStr1){
            if(newStr2.remove(s)){
                intersection.add(s);
            }
            union.add(s);
        }
        for(String s:newStr2){
            union.add(s);
        }

        jaccard= (double) intersection.size() /union.size();
        if(intersection.size()==0&&union.size()==0){
            jaccard=1;
        }
        answer= (int) (jaccard*65536);
        return answer;
    }
}

[Programmers/Java]프로그래머스 연습문제 - 프로세스

유경(shin-6-0) — Fri, 13 Oct 2023 14:28:47 +0900

문제링크

https://school.programmers.co.kr/learn/courses/30/lessons/42587#

프로그래머스

programmers.co.kr

문제조건

문제 설명

운영체제의 역할 중 하나는 컴퓨터 시스템의 자원을 효율적으로 관리하는 것입니다. 이 문제에서는 운영체제가 다음 규칙에 따라 프로세스를 관리할 경우 특정 프로세스가 몇 번째로 실행되는지 알아내면 됩니다.

1. 실행 대기 큐(Queue)에서 대기중인 프로세스 하나를 꺼냅니다. 2. 큐에 대기중인 프로세스 중 우선순위가 더 높은 프로세스가 있다면 방금 꺼낸 프로세스를 다시 큐에 넣습니다. 3. 만약 그런 프로세스가 없다면 방금 꺼낸 프로세스를 실행합니다. 3.1 한 번 실행한 프로세스는 다시 큐에 넣지 않고 그대로 종료됩니다.

예를 들어 프로세스 4개 [A, B, C, D]가 순서대로 실행 대기 큐에 들어있고, 우선순위가 [2, 1, 3, 2]라면 [C, D, A, B] 순으로 실행하게 됩니다.

현재 실행 대기 큐(Queue)에 있는 프로세스의 중요도가 순서대로 담긴 배열 priorities와, 몇 번째로 실행되는지 알고싶은 프로세스의 위치를 알려주는 location이 매개변수로 주어질 때, 해당 프로세스가 몇 번째로 실행되는지 return 하도록 solution 함수를 작성해주세요.

제한사항

priorities의 길이는 1 이상 100 이하입니다.
- priorities의 원소는 1 이상 9 이하의 정수입니다.
- priorities의 원소는 우선순위를 나타내며 숫자가 클 수록 우선순위가 높습니다.
location은 0 이상 (대기 큐에 있는 프로세스 수 - 1) 이하의 값을 가집니다.
- priorities의 가장 앞에 있으면 0, 두 번째에 있으면 1 … 과 같이 표현합니다.

입출력 예

priorities location return

[2, 1, 3, 2]	2	1
[1, 1, 9, 1, 1, 1]	0	5

입출력 예 설명

예제 #1

문제에 나온 예와 같습니다.

예제 #2

6개의 프로세스 [A, B, C, D, E, F]가 대기 큐에 있고 중요도가 [1, 1, 9, 1, 1, 1] 이므로 [C, D, E, F, A, B] 순으로 실행됩니다. 따라서 A는 5번째로 실행됩니다.

풀이

Queue 자료형을 사용한다. Queue에서 poll은 가장 바깥 값을 Queue에서 삭제하고 그 값을 반환하고, peek는 삭제하지는 않고 보여주기만 진행한다.

문제는 처음에 이해가 어려웠는데, 생각보다 간단한 방식이다.

input	output (실제 문제의 output아님)
2,1,3,2	2,3,0,1
1,1,7,1,9,1,1	4,2,3,5,6,9,1
2,1,2,1,2,1,2,1,2	0,2,4,6,8,1,3,5,7

input에서 숫자가 가장 높은 값이 먼저 output으로 들어온다. (다만 0부터 시작하므로 C가 되는 값은 output에서는 2가 된다.) 이후 같은 중요도를 가지는 값이 있으면 input에서 오른쪽으로 가면서 읽어서 또 존재하면 뽑고, 아니면 그 아래 중요순위인 값을 오른쪽으로 가면서 읽고 뽑는다.

* 문제를 2시간 가량 해결하지 못하여 코드를 검색했다.

PriorityQueue자료형과 람다함수로 비교식을 쓰는 방법을 좀 공부해야 할 것 같다.

작성코드

import java.util.*;

class Solution {
    public int solution(int[] priorities, int location) {
                int answer = 0;

        PriorityQueue<Integer> pq = new PriorityQueue<>((o1, o2) -> o2 - o1); // 내림차순 정렬

        for (int priority : priorities) {
            pq.offer(priority);
        }

        while (!pq.isEmpty()) {
            for (int i = 0; i < priorities.length; i++) {
                if (priorities[i] == pq.peek()) {
                    if (i == location) {
                        return ++answer;
                    }
                    pq.poll();
                    answer++;
                }
            }
        }
        return answer;
    }
    
}

[Programmers/Java]프로그래머스 연습문제 - 기능개발

유경(shin-6-0) — Thu, 12 Oct 2023 10:39:30 +0900

문제링크

https://school.programmers.co.kr/learn/courses/30/lessons/42586

프로그래머스

programmers.co.kr

문제 조건

문제 설명

프로그래머스 팀에서는 기능 개선 작업을 수행 중입니다. 각 기능은 진도가 100%일 때 서비스에 반영할 수 있습니다.

또, 각 기능의 개발속도는 모두 다르기 때문에 뒤에 있는 기능이 앞에 있는 기능보다 먼저 개발될 수 있고, 이때 뒤에 있는 기능은 앞에 있는 기능이 배포될 때 함께 배포됩니다.

먼저 배포되어야 하는 순서대로 작업의 진도가 적힌 정수 배열 progresses와 각 작업의 개발 속도가 적힌 정수 배열 speeds가 주어질 때 각 배포마다 몇 개의 기능이 배포되는지를 return 하도록 solution 함수를 완성하세요.

제한 사항

작업의 개수(progresses, speeds배열의 길이)는 100개 이하입니다.
작업 진도는 100 미만의 자연수입니다.
작업 속도는 100 이하의 자연수입니다.
배포는 하루에 한 번만 할 수 있으며, 하루의 끝에 이루어진다고 가정합니다. 예를 들어 진도율이 95%인 작업의 개발 속도가 하루에 4%라면 배포는 2일 뒤에 이루어집니다.

입출력 예

progresses speeds return

[93, 30, 55]	[1, 30, 5]	[2, 1]
[95, 90, 99, 99, 80, 99]	[1, 1, 1, 1, 1, 1]	[1, 3, 2]

입출력 예 설명

입출력 예 #1

첫 번째 기능은 93% 완료되어 있고 하루에 1%씩 작업이 가능하므로 7일간 작업 후 배포가 가능합니다.

두 번째 기능은 30%가 완료되어 있고 하루에 30%씩 작업이 가능하므로 3일간 작업 후 배포가 가능합니다. 하지만 이전 첫 번째 기능이 아직 완성된 상태가 아니기 때문에 첫 번째 기능이 배포되는 7일째 배포됩니다.

세 번째 기능은 55%가 완료되어 있고 하루에 5%씩 작업이 가능하므로 9일간 작업 후 배포가 가능합니다.

따라서 7일째에 2개의 기능, 9일째에 1개의 기능이 배포됩니다.

입출력 예 #2

모든 기능이 하루에 1%씩 작업이 가능하므로, 작업이 끝나기까지 남은 일수는 각각 5일, 10일, 1일, 1일, 20일, 1일입니다. 어떤 기능이 먼저 완성되었더라도 앞에 있는 모든 기능이 완성되지 않으면 배포가 불가능합니다.

따라서 5일째에 1개의 기능, 10일째에 3개의 기능, 20일째에 2개의 기능이 배포됩니다.

※ 공지 - 2020년 7월 14일 테스트케이스가 추가되었습니다.

풀이

이 문제는 예전에 풀어본 문제였습니다!

Queue 자료형을 이용하여 쉽게 풀 수 있었습니다.

걸리는날짜 (date)는 '(100 - 현재진행상태) / 속도' 로 구합니다. 9.3일이 걸린다고 하면 실제로는 일은 9일만에 끝내지 못하고 10일이 걸리므로 반올림합니다.

이 값이 Queue에 존재하는 가장 마지막 값보다 클 경우 정답 list에 넣어 반환합니다.

작성 코드

import java.util.*;

class Solution {
    public int[] solution(int[] progresses, int[] speeds) {
        Queue<Integer> q = new LinkedList<>();
        List<Integer> answerList = new ArrayList<>();

        for (int i = 0; i < speeds.length; i++) {
            double remain = (100 - progresses[i]) / (double) speeds[i];
            int date = (int) Math.ceil(remain);

            if (!q.isEmpty() && q.peek() < date) {
                answerList.add(q.size());
                q.clear();
            }

            q.offer(date);
        }

        answerList.add(q.size());

        int[] answer = new int[answerList.size()];

        for (int i = 0; i < answer.length; i++) {
            answer[i] = answerList.get(i);
        }

        return answer;
    }
}

[Programmers/Java]프로그래머스 2019 카카오 겨울 인턴십 - 튜플

유경(shin-6-0) — Thu, 12 Oct 2023 10:29:36 +0900

문제링크

https://school.programmers.co.kr/learn/courses/30/lessons/64065

프로그래머스

programmers.co.kr

문제 조건

문제 설명

셀수있는 수량의 순서있는 열거 또는 어떤 순서를 따르는 요소들의 모음을 튜플(tuple)이라고 합니다. n개의 요소를 가진 튜플을 n-튜플(n-tuple)이라고 하며, 다음과 같이 표현할 수 있습니다.

(a1, a2, a3, ..., an)

튜플은 다음과 같은 성질을 가지고 있습니다.

중복된 원소가 있을 수 있습니다. ex : (2, 3, 1, 2)
원소에 정해진 순서가 있으며, 원소의 순서가 다르면 서로 다른 튜플입니다. ex : (1, 2, 3) ≠ (1, 3, 2)
튜플의 원소 개수는 유한합니다.

원소의 개수가 n개이고, 중복되는 원소가 없는 튜플 (a1, a2, a3, ..., an)이 주어질 때(단, a1, a2, ..., an은 자연수), 이는 다음과 같이 집합 기호 '{', '}'를 이용해 표현할 수 있습니다.

{{a1}, {a1, a2}, {a1, a2, a3}, {a1, a2, a3, a4}, ... {a1, a2, a3, a4, ..., an}}

예를 들어 튜플이 (2, 1, 3, 4)인 경우 이는

{{2}, {2, 1}, {2, 1, 3}, {2, 1, 3, 4}}

와 같이 표현할 수 있습니다. 이때, 집합은 원소의 순서가 바뀌어도 상관없으므로

{{2}, {2, 1}, {2, 1, 3}, {2, 1, 3, 4}}
{{2, 1, 3, 4}, {2}, {2, 1, 3}, {2, 1}}
{{1, 2, 3}, {2, 1}, {1, 2, 4, 3}, {2}}

는 모두 같은 튜플 (2, 1, 3, 4)를 나타냅니다.

특정 튜플을 표현하는 집합이 담긴 문자열 s가 매개변수로 주어질 때, s가 표현하는 튜플을 배열에 담아 return 하도록 solution 함수를 완성해주세요.

[제한사항]

s의 길이는 5 이상 1,000,000 이하입니다.
s는 숫자와 '{', '}', ',' 로만 이루어져 있습니다.
숫자가 0으로 시작하는 경우는 없습니다.
s는 항상 중복되는 원소가 없는 튜플을 올바르게 표현하고 있습니다.
s가 표현하는 튜플의 원소는 1 이상 100,000 이하인 자연수입니다.
return 하는 배열의 길이가 1 이상 500 이하인 경우만 입력으로 주어집니다.

[입출력 예]

s result

"{{2},{2,1},{2,1,3},{2,1,3,4}}"	[2, 1, 3, 4]
"{{1,2,3},{2,1},{1,2,4,3},{2}}"	[2, 1, 3, 4]
"{{20,111},{111}}"	[111, 20]
"{{123}}"	[123]
"{{4,2,3},{3},{2,3,4,1},{2,3}}"	[3, 2, 4, 1]

입출력 예에 대한 설명

입출력 예 #1

문제 예시와 같습니다.

입출력 예 #2

문제 예시와 같습니다.

입출력 예 #3

(111, 20)을 집합 기호를 이용해 표현하면 {{111}, {111,20}}이 되며, 이는 {{20,111},{111}}과 같습니다.

입출력 예 #4

(123)을 집합 기호를 이용해 표현하면 {{123}} 입니다.

입출력 예 #5

(3, 2, 4, 1)을 집합 기호를 이용해 표현하면 {{3},{3,2},{3,2,4},{3,2,4,1}}이 되며, 이는 {{4,2,3},{3},{2,3,4,1},{2,3}}과 같습니다.

풀이

substring과 split으로 한개의 String으로 주어진 입력값을 분해하고, 각각의원소를 list에 존재하지 않을 경우에만 넣으면 완료!

작성코드

import java.util.*;

class Solution {
    public List<Integer> solution(String s) {
        int[] answer = {};
        List<Integer> tuple=new ArrayList<>();
        s=s.substring(2,s.length()-2).replace("},{","!"); //맨앞 {{, 맨뒤 }} 삭제 후 {,} 형태를 전부 !로 변경
        String[] arr=s.split("!");//!를 기준으로 나누면, },{ 를 기준으로 나눠지기 때문에 바로 분리해서 넣기가 가능.
        Arrays.sort(arr, new Comparator<String>() { //arr내의 string길이에 따라 재정렬
            @Override
            public int compare(String o1, String o2) {
                return Integer.compare(o1.length(),o2.length());
            }
        });
        for(String d:arr){
            String[] temp=d.split(",");
            for(int i=0;i<temp.length;i++){
                int n=Integer.parseInt(temp[i]);
                if(!tuple.contains(n)){
                    tuple.add(n);
                }
            }
        }

        return tuple;
    }
}

[Programmers/Java]프로그래머스 연습문제 - 의상

유경(shin-6-0) — Tue, 10 Oct 2023 20:00:14 +0900

문제링크

https://school.programmers.co.kr/learn/courses/30/lessons/42578

프로그래머스

programmers.co.kr

문제 설명

코니는 매일 다른 옷을 조합하여 입는것을 좋아합니다.

예를 들어 코니가 가진 옷이 아래와 같고, 오늘 코니가 동그란 안경, 긴 코트, 파란색 티셔츠를 입었다면 다음날은 청바지를 추가로 입거나 동그란 안경 대신 검정 선글라스를 착용하거나 해야합니다.

종류 이름

얼굴	동그란 안경, 검정 선글라스
상의	파란색 티셔츠
하의	청바지
겉옷	긴 코트

코니는 각 종류별로 최대 1가지 의상만 착용할 수 있습니다. 예를 들어 위 예시의 경우 동그란 안경과 검정 선글라스를 동시에 착용할 수는 없습니다.
착용한 의상의 일부가 겹치더라도, 다른 의상이 겹치지 않거나, 혹은 의상을 추가로 더 착용한 경우에는 서로 다른 방법으로 옷을 착용한 것으로 계산합니다.
코니는 하루에 최소 한 개의 의상은 입습니다.

코니가 가진 의상들이 담긴 2차원 배열 clothes가 주어질 때 서로 다른 옷의 조합의 수를 return 하도록 solution 함수를 작성해주세요.

제한사항

clothes의 각 행은 [의상의 이름, 의상의 종류]로 이루어져 있습니다.
코니가 가진 의상의 수는 1개 이상 30개 이하입니다.
같은 이름을 가진 의상은 존재하지 않습니다.
clothes의 모든 원소는 문자열로 이루어져 있습니다.
모든 문자열의 길이는 1 이상 20 이하인 자연수이고 알파벳 소문자 또는 '_' 로만 이루어져 있습니다.

입출력 예

clothes return

[["yellow_hat", "headgear"], ["blue_sunglasses", "eyewear"], ["green_turban", "headgear"]]	5
[["crow_mask", "face"], ["blue_sunglasses", "face"], ["smoky_makeup", "face"]]	3

입출력 예 설명

예제 #1

headgear에 해당하는 의상이 yellow_hat, green_turban이고 eyewear에 해당하는 의상이 blue_sunglasses이므로 아래와 같이 5개의 조합이 가능합니다.

1. yellow_hat 2. blue_sunglasses 3. green_turban 4. yellow_hat + blue_sunglasses 5. green_turban + blue_sunglasses

예제 #2

face에 해당하는 의상이 crow_mask, blue_sunglasses, smoky_makeup이므로 아래와 같이 3개의 조합이 가능합니다.

1. crow_mask 2. blue_sunglasses 3. smoky_makeup

풀이

조합과 순열을 생각하면, 0개일 수도 있고, 전부다 0개인 것은 빼야하므로

(종류별갯수+1)*(종류별갯수+1)*...-1 을 하면 된다.

작성코드

import java.util.*;
class Solution {
    public int solution(String[][] clothes) {
                int answer = 1;
        List<Map<String,Integer>> list=new ArrayList<>();
        Map<String,Integer> map=new HashMap<>();
        //의상종류별로 (종류+1)*(종류+1)*(종류+1)-1
        for(int i=0;i<clothes.length;i++){
            if(map.containsKey(clothes[i][1])){
                int n=map.get(clothes[i][1]);
                map.put(clothes[i][1],n+1);
            }else{
                map.put(clothes[i][1],1);
            }
            list.add(map);
        }

        // 방법2
        for( Map.Entry<String, Integer> e : map.entrySet() ){
            //System.out.println( String.format("키 : %s, 값 : %s", e.getKey(), e.getValue()) );
            answer*=(e.getValue()+1);
        }
        return answer-1;
    }
}

[Programmers/Java]프로그래머스 2018 카카오 블라인드 기출문제 - 캐시

유경(shin-6-0) — Tue, 10 Oct 2023 17:41:05 +0900

문제 링크

https://school.programmers.co.kr/learn/courses/30/lessons/17680

프로그래머스

programmers.co.kr

문제 조건

캐시

지도개발팀에서 근무하는 제이지는 지도에서 도시 이름을 검색하면 해당 도시와 관련된 맛집 게시물들을 데이터베이스에서 읽어 보여주는 서비스를 개발하고 있다.

이 프로그램의 테스팅 업무를 담당하고 있는 어피치는 서비스를 오픈하기 전 각 로직에 대한 성능 측정을 수행하였는데, 제이지가 작성한 부분 중 데이터베이스에서 게시물을 가져오는 부분의 실행시간이 너무 오래 걸린다는 것을 알게 되었다.

어피치는 제이지에게 해당 로직을 개선하라고 닦달하기 시작하였고, 제이지는 DB 캐시를 적용하여 성능 개선을 시도하고 있지만 캐시 크기를 얼마로 해야 효율적인지 몰라 난감한 상황이다.

어피치에게 시달리는 제이지를 도와, DB 캐시를 적용할 때 캐시 크기에 따른 실행시간 측정 프로그램을 작성하시오.

입력 형식

캐시 크기(cacheSize)와 도시이름 배열(cities)을 입력받는다.
cacheSize는 정수이며, 범위는 0 ≦ cacheSize ≦ 30 이다.
cities는 도시 이름으로 이뤄진 문자열 배열로, 최대 도시 수는 100,000개이다.
각 도시 이름은 공백, 숫자, 특수문자 등이 없는 영문자로 구성되며, 대소문자 구분을 하지 않는다. 도시 이름은 최대 20자로 이루어져 있다.

출력 형식

입력된 도시이름 배열을 순서대로 처리할 때, "총 실행시간"을 출력한다.

조건

캐시 교체 알고리즘은 LRU(Least Recently Used)를 사용한다.
cache hit일 경우 실행시간은 1이다.
cache miss일 경우 실행시간은 5이다.

입출력 예제

캐시크기(cacheSize) 도시이름(cities) 실행시간

3	["Jeju", "Pangyo", "Seoul", "NewYork", "LA", "Jeju", "Pangyo", "Seoul", "NewYork", "LA"]	50
3	["Jeju", "Pangyo", "Seoul", "Jeju", "Pangyo", "Seoul", "Jeju", "Pangyo", "Seoul"]	21
2	["Jeju", "Pangyo", "Seoul", "NewYork", "LA", "SanFrancisco", "Seoul", "Rome", "Paris", "Jeju", "NewYork", "Rome"]	60
5	["Jeju", "Pangyo", "Seoul", "NewYork", "LA", "SanFrancisco", "Seoul", "Rome", "Paris", "Jeju", "NewYork", "Rome"]	52
2	["Jeju", "Pangyo", "NewYork", "newyork"]	16
0	["Jeju", "Pangyo", "Seoul", "NewYork", "LA"]	25

풀이

캐시는 총 저장할 수 있는 도시 수 라고 보면되고, 새로 저장될 경우 +5, 이미 캐시에 있는 경우 +1을 진행한다. 이는 링크드리스트를 이용하여 풀면 쉽게 풀 수 있다.

링크드리스트에는 remove라는 함수가 있다. 이 안에 object값을 넣으면 해당하는 값을 삭제하면서 true를 반환하고 , 아닐 경우 false를 반환한다. remove에 숫자(index)를 넣으면 인덱스 값을 찾아서 그 값을 삭제하고 반환한다. 이를 통해서 cities배열에 존재하는 city 이름을 하나하나 분석하여 캐시 값을 구한다.

+ 그냥 작성할 경우 보통 예외 케이스로 인해 통과하지 못했다. 자세히 문제를 살펴보니, 캐시사이즈가 0도 가능하다는 사실을 알았다.. 0일 경우를 따로 작성해준다.

작성코드

import java.util.*;

class Solution {
    public int solution(int cacheSize, String[] cities) {
        int answer = 0;
        if(cacheSize==0){
            return cities.length*5;
        }
        LinkedList<String> cache = new LinkedList<>();
        for(int i=0;i<cities.length;i++){
            String s=cities[i].toUpperCase(); //대소문자 구분을 하지 않아 전부다 upperCase로 대문자처리
            if(cache.remove(s)){ //s값이 존재할 경우 이 값을 지우고 true를 반환
                answer++;
                cache.add(s);
            }else{
                answer+=5;
                if(cache.size()>=cacheSize){
                    cache.remove(0);//0번째 리스트 삭제
                }
                cache.add(s);
            }
        }

        return answer;
    }
}

[Programmers/Java]프로그래머스 연습문제 - 행렬의곱셈

유경(shin-6-0) — Tue, 10 Oct 2023 17:11:53 +0900

문제 링크

https://school.programmers.co.kr/learn/courses/30/lessons/12949

프로그래머스

programmers.co.kr

문제 조건

문제 설명

2차원 행렬 arr1과 arr2를 입력받아, arr1에 arr2를 곱한 결과를 반환하는 함수, solution을 완성해주세요.

제한 조건

행렬 arr1, arr2의 행과 열의 길이는 2 이상 100 이하입니다.
행렬 arr1, arr2의 원소는 -10 이상 20 이하인 자연수입니다.
곱할 수 있는 배열만 주어집니다.

입출력 예

arr1 arr2 return

[[1, 4], [3, 2], [4, 1]]	[[3, 3], [3, 3]]	[[15, 15], [15, 15], [15, 15]]
[[2, 3, 2], [4, 2, 4], [3, 1, 4]]	[[5, 4, 3], [2, 4, 1], [3, 1, 1]]	[[22, 22, 11], [36, 28, 18], [29, 20, 14]]

풀이

a*b X c*d 행렬을 곱할 경우, b와 c는 값이 같아야 하고 --> 코드에서 k로 표기 정답인 행렬은 a*d로 표기된다.

https://jjw7808.tistory.com/7 참고

코드

class Solution {
    public int[][] solution(int[][] arr1, int[][] arr2) {
                //3*2 2*2 = 3*2 -> a*b X c*d = a*d 사이즈. b와 c는 숫자가 같아야함. =k
        int ansRow=arr1.length;
        int ansCol=arr2[0].length;
        System.out.println("ansRow = "+ansRow+", ansCol = "+ansCol);
        int[][] ans=new int[ansRow][ansCol];
        for(int i = 0; i < ans.length; i++){
            for(int j = 0; j < ans[0].length; j++){
                int sum = 0;
                for(int k = 0; k < arr2.length; k++){
                    sum += arr1[i][k] * arr2[k][j];
                }
                ans[i][j] = sum;
            }
        }
        return ans;
    }
}

[Programmers/Java]프로그래머스 연습문제 - H-dex

유경(shin-6-0) — Tue, 10 Oct 2023 13:20:59 +0900

문제링크

https://school.programmers.co.kr/learn/courses/30/lessons/42747

프로그래머스

programmers.co.kr

문제조건

문제 설명

H-Index는 과학자의 생산성과 영향력을 나타내는 지표입니다. 어느 과학자의 H-Index를 나타내는 값인 h를 구하려고 합니다. 위키백과1에 따르면, H-Index는 다음과 같이 구합니다.

어떤 과학자가 발표한 논문 n편 중, h번 이상 인용된 논문이 h편 이상이고 나머지 논문이 h번 이하 인용되었다면 h의 최댓값이 이 과학자의 H-Index입니다.

어떤 과학자가 발표한 논문의 인용 횟수를 담은 배열 citations가 매개변수로 주어질 때, 이 과학자의 H-Index를 return 하도록 solution 함수를 작성해주세요.

제한사항

과학자가 발표한 논문의 수는 1편 이상 1,000편 이하입니다.
논문별 인용 횟수는 0회 이상 10,000회 이하입니다.

입출력 예

citations return

[3, 0, 6, 1, 5]

입출력 예 설명

이 과학자가 발표한 논문의 수는 5편이고, 그중 3편의 논문은 3회 이상 인용되었습니다. 그리고 나머지 2편의 논문은 3회 이하 인용되었기 때문에 이 과학자의 H-Index는 3입니다.

풀이

while문으로 h값이 size와 일치할때 까지 돌리고, while문 내부에서 h개 이상인 논문 수를 체크하여 반환할 값 (chkH)을 계속 변환합니다.

코드

    public int solution(int[] citations) {
        //h번 이상 인용된 논문이 h개 > 이때 h의 최댓값
        int size=citations.length;
        int h=0;
        int chkH=0;
        while(h!=size){
            h++;
            int count=0;
            for(int i=0;i<size;i++){
                if(citations[i]>=h){
                    count++;
                }
            }
            if(count>=h){
                chkH=h;
            };
        }

        return chkH;
    }

효율성이 좋은 코드는 아니라고 생각했는데, 한번에 통과하게 되었습니다 !

[Programmers/Java]프로그래머스 연습문제 - n^2 배열자르기

유경(shin-6-0) — Sat, 7 Oct 2023 10:58:35 +0900

문제링크

https://school.programmers.co.kr/learn/courses/30/lessons/87390

프로그래머스

programmers.co.kr

문제조건

문제 설명

정수 n, left, right가 주어집니다. 다음 과정을 거쳐서 1차원 배열을 만들고자 합니다.

n행 n열 크기의 비어있는 2차원 배열을 만듭니다.
i = 1, 2, 3, ..., n에 대해서, 다음 과정을 반복합니다.
- 1행 1열부터 i행 i열까지의 영역 내의 모든 빈 칸을 숫자 i로 채웁니다.
1행, 2행, ..., n행을 잘라내어 모두 이어붙인 새로운 1차원 배열을 만듭니다.
새로운 1차원 배열을 arr이라 할 때, arr[left], arr[left+1], ..., arr[right]만 남기고 나머지는 지웁니다.

정수 n, left, right가 매개변수로 주어집니다. 주어진 과정대로 만들어진 1차원 배열을 return 하도록 solution 함수를 완성해주세요.

제한사항

1 ≤ n ≤ 10
7
0 ≤ left ≤ right < n
2
right - left < 10
5

입출력 예

n left right result

3	2	5	[3,2,2,3]
4	7	14	[4,3,3,3,4,4,4,4]

풀이1(실패)

행렬을 인덱스로 구분할 때, 행렬안에 들어갈 값은 row,column 인덱스값 둘 중 최댓값 + 1이다.

이를 이용해서 풀어봤다.

코드1 (실패)

import java.util.*;

class Solution {
    public int[] solution(int n, long left, long right) {
                int[] answer = {};
        int size= (int) (right-left+1);
        int[] arr=new int[size];
        List<Long> ans = new ArrayList<>();
        // 행렬에 들어가는 값은 인덱스 (0,0)부터 시작이라고 쳤을 때
        // 인덱스의 최댓값 +1 이다.
        /*
            (0,0) (0,1) (0,2)
            (1,0) (1,1) (1,2)
            (2,0) (2,1) (2,2)
         */
        for(long i=0;i<n;i++){
            for(int j=0;j<n;j++){
                int index=(int)(i*n+j);
                if(index>=left&&index<=right){
                    ans.add(Math.max(i,j)+1);
                }
            }
        }
        for(int i=0;i<ans.size();i++){
            arr[i]= Math.toIntExact(ans.get(i));
        }
        return arr;
    }
}

시간초과+실패가 나면서 실패했다. 이중for문으로 인해서 long타입에서 시간초과가 난 것 같다.

풀이2(성공)

더욱 간단하게 생각해봐야겠다. 시간복잡도를 줄이기 위해서 반환 사이즈는 그대로 반환할 사이즈만 선택하고,

이중 for문을 사용하지 않고 행렬을 탐색할 방법이 필요하다.

(0,0) (0,1) (0,2) 1 2 3

(1,0) (1,1) (1,2) -> 2 2 3

(2,0) (2,1) (2,2) 3 3 3

행렬이 있을 때, 3~6번째 값만 반환한다면 3,2,2,3 이 되는데

1번 풀이에서 생각한 '행렬안에 들어갈 값은 row,column 인덱스값 둘 중 최댓값 + 1' 을 이중for문으로 인덱스를 제시하지 않고 답을 반환하는 것이다.

1번 풀이 : 이중for문으로 인덱스 설정 -> 인덱스를 바탕으로 행렬에 들어갈 값 구함 -> n번째에 저장

지금의 풀이 : n번째 값의 인덱스를 구함 -> 인덱스를 바탕으로 행렬에 들어갈 값 구함 -> n번째에 저장

만약 위 행렬에서 3번째 값을 기준으로 구한다면 row의 값은 (i+left)/n , column의 값은 (i+left)%n 이다.

코드2(성공)

import java.util.*;

class Solution {
    public int[] solution(int n, long left, long right) {
        int size= (int) (right-left+1);
        int[] arr=new int[size];

        for(int i = 0; i < arr.length; i++){
            int row = (int)((i + left) / n) + 1; // row
            int col = (int)((i + left) % n) + 1; // column
            arr[i] = Math.max(row, col);
        }
        return arr;
    }
}

[Programmers/Java]프로그래머스 연습문제 - 할인행사

유경(shin-6-0) — Wed, 4 Oct 2023 15:50:52 +0900

문제링크

https://school.programmers.co.kr/learn/courses/30/lessons/131127

프로그래머스

programmers.co.kr

문제조건

문제 설명

XYZ 마트는 일정한 금액을 지불하면 10일 동안 회원 자격을 부여합니다. XYZ 마트에서는 회원을 대상으로 매일 한 가지 제품을 할인하는 행사를 합니다. 할인하는 제품은 하루에 하나씩만 구매할 수 있습니다. 알뜰한 정현이는 자신이 원하는 제품과 수량이 할인하는 날짜와 10일 연속으로 일치할 경우에 맞춰서 회원가입을 하려 합니다.

예를 들어, 정현이가 원하는 제품이 바나나 3개, 사과 2개, 쌀 2개, 돼지고기 2개, 냄비 1개이며, XYZ 마트에서 15일간 회원을 대상으로 할인하는 제품이 날짜 순서대로 치킨, 사과, 사과, 바나나, 쌀, 사과, 돼지고기, 바나나, 돼지고기, 쌀, 냄비, 바나나, 사과, 바나나인 경우에 대해 알아봅시다. 첫째 날부터 열흘 간에는 냄비가 할인하지 않기 때문에 첫째 날에는 회원가입을 하지 않습니다. 둘째 날부터 열흘 간에는 바나나를 원하는 만큼 할인구매할 수 없기 때문에 둘째 날에도 회원가입을 하지 않습니다. 셋째 날, 넷째 날, 다섯째 날부터 각각 열흘은 원하는 제품과 수량이 일치하기 때문에 셋 중 하루에 회원가입을 하려 합니다.

정현이가 원하는 제품을 나타내는 문자열 배열 want와 정현이가 원하는 제품의 수량을 나타내는 정수 배열 number, XYZ 마트에서 할인하는 제품을 나타내는 문자열 배열 discount가 주어졌을 때, 회원등록시 정현이가 원하는 제품을 모두 할인 받을 수 있는 회원등록 날짜의 총 일수를 return 하는 solution 함수를 완성하시오. 가능한 날이 없으면 0을 return 합니다.

제한사항

1 ≤ want의 길이 = number의 길이 ≤ 10
- 1 ≤ number의 원소 ≤ 10
- number[i]는 want[i]의 수량을 의미하며, number의 원소의 합은 10입니다.
10 ≤ discount의 길이 ≤ 100,000
want와 discount의 원소들은 알파벳 소문자로 이루어진 문자열입니다.
- 1 ≤ want의 원소의 길이, discount의 원소의 길이 ≤ 12

입출력 예

want number discount result

["banana", "apple", "rice", "pork", "pot"]	[3, 2, 2, 2, 1]	["chicken", "apple", "apple", "banana", "rice", "apple", "pork", "banana", "pork", "rice", "pot", "banana", "apple", "banana"]	3
["apple"]	[10]	["banana", "banana", "banana", "banana", "banana", "banana", "banana", "banana", "banana", "banana"]	0

입출력 예 설명

입출력 예 #1

문제 예시와 같습니다.

입출력 예 #2

사과가 할인하는 날이 없으므로 0을 return 합니다.

풀이

일단 해시맵(map)안에 구매하려는 물품 정보를 물품명,갯수 로 key-value 짝을 지어 작성합니다.

이후, 10일간 할인을 받을 수 있으므로, discount 배열을 탐색하면서 10개까지만 탐색해서 checkMap에 저장 후 , map과 일치하면 결과값을 +1 합니다.

코드

import java.util.*;
class Solution {
    public int solution(String[] want, int[] number, String[] discount) {
                int answer = 0;
        String[] want2=want;
        Map<String,Integer> map=new HashMap<>();
        //해시맵으로 갯수와 정보 저장
        for(int i=0;i<want.length;i++){
            map.put(want[i],number[i]);
        }
        //discount 배열을 탐색하면서 시작일부터의 정보 저장, map과 일치하면 answer++;
        int days=0;
        for(int j=0;j<discount.length-10+1;j++) {
            Map<String,Integer> checkMap=new HashMap<>();
            for (int i = j; i < 10 + j; i++) {
                if (checkMap.containsKey(discount[i])) {
                    int input = checkMap.get(discount[i]) + 1;
                    checkMap.put(discount[i], input);
                } else {
                    checkMap.put(discount[i], 1);
                }
            }
            Boolean chkSame = true;
            for (String key : map.keySet()) {
                if (map.get(key) != checkMap.get(key)) {
                    chkSame = false;
                    break;
                }
            }
            answer += chkSame ? 1 : 0;
        }
        return answer;
    }
}

[Programmers/Java]프로그래머스 연습문제 - 괄호 회전하기

유경(shin-6-0) — Sat, 30 Sep 2023 21:27:18 +0900

문제링크

https://school.programmers.co.kr/learn/courses/30/lessons/76502

프로그래머스

programmers.co.kr

문제내용

문제 설명

다음 규칙을 지키는 문자열을 올바른 괄호 문자열이라고 정의합니다.

(), [], {} 는 모두 올바른 괄호 문자열입니다.
만약 A가 올바른 괄호 문자열이라면, (A), [A], {A} 도 올바른 괄호 문자열입니다. 예를 들어, [] 가 올바른 괄호 문자열이므로, ([]) 도 올바른 괄호 문자열입니다.
만약 A, B가 올바른 괄호 문자열이라면, AB 도 올바른 괄호 문자열입니다. 예를 들어, {} 와 ([]) 가 올바른 괄호 문자열이므로, {}([]) 도 올바른 괄호 문자열입니다.

대괄호, 중괄호, 그리고 소괄호로 이루어진 문자열 s가 매개변수로 주어집니다. 이 s를 왼쪽으로 x (0 ≤ x < (s의 길이)) 칸만큼 회전시켰을 때 s가 올바른 괄호 문자열이 되게 하는 x의 개수를 return 하도록 solution 함수를 완성해주세요.

제한사항

s의 길이는 1 이상 1,000 이하입니다.

입출력 예

s result

"{}"	3
"}]()[{"	2
"[)(]"	0
"}}}"	0

입출력 예 설명

입출력 예 #1

다음 표는 "[](){}" 를 회전시킨 모습을 나타낸 것입니다.

x s를 왼쪽으로 x칸만큼 회전 올바른 괄호 문자열?

0	"{}"	O
1	"](){}["	X
2	"(){}[]"	O
3	"){}[]("	X
4	"{}"	O
5	"}{"	X

올바른 괄호 문자열이 되는 x가 3개이므로, 3을 return 해야 합니다.

입출력 예 #2

다음 표는 "}]()[{" 를 회전시킨 모습을 나타낸 것입니다.

x s를 왼쪽으로 x칸만큼 회전 올바른 괄호 문자열?

0	"}]()[{"	X
1	"]()[{}"	X
2	"()[{}]"	O
3	")[{}]("	X
4	"{}"	O
5	"{}]()["	X

올바른 괄호 문자열이 되는 x가 2개이므로, 2를 return 해야 합니다.

입출력 예 #3

s를 어떻게 회전하더라도 올바른 괄호 문자열을 만들 수 없으므로, 0을 return 해야 합니다.

입출력 예 #4

s를 어떻게 회전하더라도 올바른 괄호 문자열을 만들 수 없으므로, 0을 return 해야 합니다.

풀이

Stack과 Queue를 사용하자는 생각이 들었습니다.

Stack : 선입후출 , Queue : 선입선출

괄호는 계속 순서를 지키며 회전해야하고, 이때 올바른 괄호 구조인지 체크해야합니다.

Queue에 넣어서 괄호 자체를 회전시키고, Stack을 이용해서 peek()로 마지막 값을 확인하여 원하는 값이 맞는지 체크를 하며 괄호를 돌립니다.

작성코드

import java.util.*;
class Solution {
    public int solution(String s) {
                //괄호가 잘 닫겨야함! stack을 사용해서 풀어보자
        int answer = 0;
        Queue<String> queue = new LinkedList<>();

        for(int i = 0; i < s.length(); i++){
            String str = s.substring(i,i+1);
            queue.add(str);
        }
        for(int i=0;i<s.length();i++) {
            String firstS = queue.poll();
            queue.add(firstS);
            Stack<String> stack = new Stack<>();
            for (int j = 0; j < s.length(); j++) {
                String otherS = queue.poll();//맨앞거 빼고 나머지애들을 빼냄
                queue.add(otherS);
                if (stack.isEmpty()) {
                    stack.push(otherS);
                } else if (otherS.equals(")") && stack.peek().equals("(")) {
                    //남은 것이 stack에 짝과 맞을 경우
                    stack.pop();
                } else if (otherS.equals("]") && stack.peek().equals("[")) {
                    //남은 것이 stack에 짝과 맞을 경우
                    stack.pop();
                } else if (otherS.equals("}") && stack.peek().equals("{")) {
                    //남은 것이 stack에 짝과 맞을 경우
                    stack.pop();
                }else{
                    stack.push(otherS);
                }
            }
            if(stack.isEmpty()){
                answer++;
            }
        }

        return answer;
    }
}

[Programmers/Java]프로그래머스 연습문제 - 연속 부분 수열 합의 개수

유경(shin-6-0) — Sat, 30 Sep 2023 19:56:21 +0900

문제링크

https://school.programmers.co.kr/learn/courses/30/lessons/131701

프로그래머스

programmers.co.kr

문제 내용

문제 설명

철호는 수열을 가지고 놀기 좋아합니다. 어느 날 철호는 어떤 자연수로 이루어진 원형 수열의 연속하는 부분 수열의 합으로 만들 수 있는 수가 모두 몇 가지인지 알아보고 싶어졌습니다. 원형 수열이란 일반적인 수열에서 처음과 끝이 연결된 형태의 수열을 말합니다. 예를 들어 수열 [7, 9, 1, 1, 4] 로 원형 수열을 만들면 다음과 같습니다.

!https://grepp-programmers.s3.ap-northeast-2.amazonaws.com/files/production/f207cd37-34dc-4cbd-96bb-83435bd6efd4/그림.png

원형 수열은 처음과 끝이 연결되어 끊기는 부분이 없기 때문에 연속하는 부분 수열도 일반적인 수열보다 많아집니다.

원형 수열의 모든 원소 elements가 순서대로 주어질 때, 원형 수열의 연속 부분 수열 합으로 만들 수 있는 수의 개수를 return 하도록 solution 함수를 완성해주세요.

제한사항

3 ≤ elements의 길이 ≤ 1,000
1 ≤ elements의 원소 ≤ 1,000

입출력 예

elements	result
[7,9,1,1,4]	18

입출력 예 설명

입출력 예 #1

길이가 1인 연속 부분 수열로부터 [1, 4, 7, 9] 네 가지의 합이 나올 수 있습니다.

길이가 2인 연속 부분 수열로부터 [2, 5, 10, 11, 16] 다섯 가지의 합이 나올 수 있습니다.

길이가 3인 연속 부분 수열로부터 [6, 11, 12, 17, 20] 다섯 가지의 합이 나올 수 있습니다.

길이가 4인 연속 부분 수열로부터 [13, 15, 18, 21] 네 가지의 합이 나올 수 있습니다.

길이가 5인 연속 부분 수열로부터 [22] 한 가지의 합이 나올 수 있습니다.

이들 중 중복되는 값을 제외하면 다음과 같은 18가지의 수들을 얻습니다.

[1, 2, 4, 5, 6, 7, 9, 10, 11, 12, 13, 15, 16, 17, 18, 20, 21, 22]

풀이1

원순열 풀이법을 검색해보니, 두배로 길이를 늘려서 풀으라는 키포인트가 있었습니다.

elements의 길이를 2배로 늘리고, Set에 더한 값을 넣기로 했습니다. (Set은 중복 값을 저장하지 않음)

작성코드1

import java.util.*;

class Solution {
    public int solution(int[] elements) {
                int[] newElements = new int[elements.length * 2];


        // {4,7,9,1,1} -> {4,7,9,1,1,4,7,9,1} 원순열은 두배로 길이를 늘려서 계산
        for(int i = 0; i < elements.length; i++) {
            newElements[i] = newElements[i + elements.length] = elements[i];
        }

        Set<Integer> set = new HashSet<>();

        for (int i = 0; i < elements.length; i++) {
            int sum = 0;
            // 원소의 길이만큼 더하되, 자기 자신부터 up
            for (int k = i; k < i + elements.length; k++) {
                sum += newElements[k];
                set.add(sum);
            }
        }
        return set.size();
    }
}

[Programmers/Java]프로그래머스 연습문제 - 예상대진표

유경(shin-6-0) — Sun, 24 Sep 2023 23:27:31 +0900

문제링크

https://school.programmers.co.kr/learn/courses/30/lessons/12985

프로그래머스

programmers.co.kr

문제조건

문제 설명

△△ 게임대회가 개최되었습니다. 이 대회는 N명이 참가하고, 토너먼트 형식으로 진행됩니다. N명의 참가자는 각각 1부터 N번을 차례대로 배정받습니다. 그리고, 1번↔2번, 3번↔4번, ... , N-1번↔N번의 참가자끼리 게임을 진행합니다. 각 게임에서 이긴 사람은 다음 라운드에 진출할 수 있습니다. 이때, 다음 라운드에 진출할 참가자의 번호는 다시 1번부터 N/2번을 차례대로 배정받습니다. 만약 1번↔2번 끼리 겨루는 게임에서 2번이 승리했다면 다음 라운드에서 1번을 부여받고, 3번↔4번에서 겨루는 게임에서 3번이 승리했다면 다음 라운드에서 2번을 부여받게 됩니다. 게임은 최종 한 명이 남을 때까지 진행됩니다.

이때, 처음 라운드에서 A번을 가진 참가자는 경쟁자로 생각하는 B번 참가자와 몇 번째 라운드에서 만나는지 궁금해졌습니다. 게임 참가자 수 N, 참가자 번호 A, 경쟁자 번호 B가 함수 solution의 매개변수로 주어질 때, 처음 라운드에서 A번을 가진 참가자는 경쟁자로 생각하는 B번 참가자와 몇 번째 라운드에서 만나는지 return 하는 solution 함수를 완성해 주세요. 단, A번 참가자와 B번 참가자는 서로 붙게 되기 전까지 항상 이긴다고 가정합니다.

제한사항

N : 2 이상 2 이하인 자연수 (2의 지수 승으로 주어지므로 부전승은 발생하지 않습니다.)20
1
A, B : N 이하인 자연수 (단, A ≠ B 입니다.)

입출력 예

N	A	B	answer
8	4	7	3

입출력 예 설명

입출력 예 #1

첫 번째 라운드에서 4번 참가자는 3번 참가자와 붙게 되고, 7번 참가자는 8번 참가자와 붙게 됩니다. 항상 이긴다고 가정했으므로 4번 참가자는 다음 라운드에서 2번이 되고, 7번 참가자는 4번이 됩니다. 두 번째 라운드에서 2번은 1번과 붙게 되고, 4번은 3번과 붙게 됩니다. 항상 이긴다고 가정했으므로 2번은 다음 라운드에서 1번이 되고, 4번은 2번이 됩니다. 세 번째 라운드에서 1번과 2번으로 두 참가자가 붙게 되므로 3을 return 하면 됩니다.

풀이1(성공)

토너먼트 방식은 2로 나누어서 누구와 대결하는지 계산할 수 있다.

1,2 -> 1번 3,4 ->2번 5,6 -> 3번 7,8 -> 4번

이 값이 나오려면 개인의 번호/2 인 몫과, 2로 나눈 나머지 값을 더하면 몇번째 대진자가 되는지 알 수 있다.

만날때까지 무조건 이기기 때문에, 이기고 나서는 다시 2로나눈몫 + 나머지 를 더한 값이 번호가 되어 또 계산한다.

작성코드1(성공)

class Solution
{
    public int solution(int n, int a, int b)
    {
        int answer = 0;
        while(true){
            a=a/2+a%2;
            b=b/2+b%2;
            answer++;
            if(a==b) break;
        }
        return answer;
    }
}

[Programmers/Java]프로그래머스 연습문제 - 구명보트 (그리디 Greedy 알고리즘)

유경(shin-6-0) — Fri, 22 Sep 2023 14:21:47 +0900

문제링크

https://school.programmers.co.kr/learn/courses/30/lessons/42885

프로그래머스

programmers.co.kr

문제조건

풀이(성공)

일단 이 문제는 Greedy (탐욕 알고리즘)을 이용해서 풀어야 하는 것 같았다.

나는 탐욕법에 대하여 전혀 모르고 있기 때문에.. 이를 이해하기 위해 검색을 실시했다.

탐욕 알고리즘(Greedy)이란, 무언가를 선택해야할때(탐색해야할때) 눈 앞의 최적의 상황만 찾아서 답을 찾는 방법이다.

문제 해결 방법은 다음과 같다.

1. 선택 - 현재 상태에서 최적의 해답을 선택

2. 적합성 검사 - 선택된 해가 문제의 조건을 만족하는지 검사

3. 정답 검사 - 1,2 를 거친 해답으로 문제가 해결되었는지 확인 후 해결되지 않았다면 1,2의 절차로 돌아가서 위의 과정을 반복

나는, 최소+최대값을 limit에 들어가는지 확인하고 들어가면 2개의 숫자를 array에서 없애고 count를 +1, 안들어갈경우 최대값만 없애고 count를 +1하는 방식으로 작성했다.

작성코드(성공)

import java.util.Arrays;

class Solution {
    public int solution(int[] people, int limit) {
                int answer = 0;
        //정렬 후 최솟값 + 최댓값이 limit 안에 들으면 같이가고 , 아니면 최댓값을 그 다음으로 큰 값으로 변경
        Arrays.sort(people);
        int maxIndex=people.length-1;
        int max=people[maxIndex];
        int minIndex=0;
        int min=people[minIndex];
        while(true){
            max=people[maxIndex];
            min=people[minIndex];
           // System.out.println("maxIndex = "+maxIndex+", minIndex = "+minIndex+", answer = "+answer);
            if(minIndex==maxIndex){
                answer++;
                break;
            } else if (minIndex>maxIndex) {
                break;
            }
            //System.out.println("min+max = "+(min+max));
            if(min+max<=limit){
                answer++;
                minIndex++;
                maxIndex--;

            }else{
                answer++;
                maxIndex--;
            }
        }
        return answer;
    }
}

[Programmers/Java]프로그래머스 연습문제 - 영어끝말잇기

유경(shin-6-0) — Tue, 19 Sep 2023 13:56:07 +0900

문제링크

https://school.programmers.co.kr/learn/courses/30/lessons/12981

프로그래머스

programmers.co.kr

문제조건

문제 설명

1부터 n까지 번호가 붙어있는 n명의 사람이 영어 끝말잇기를 하고 있습니다. 영어 끝말잇기는 다음과 같은 규칙으로 진행됩니다.

1번부터 번호 순서대로 한 사람씩 차례대로 단어를 말합니다.
마지막 사람이 단어를 말한 다음에는 다시 1번부터 시작합니다.
앞사람이 말한 단어의 마지막 문자로 시작하는 단어를 말해야 합니다.
이전에 등장했던 단어는 사용할 수 없습니다.
한 글자인 단어는 인정되지 않습니다.

다음은 3명이 끝말잇기를 하는 상황을 나타냅니다.

tank → kick → know → wheel → land → dream → mother → robot → tank

위 끝말잇기는 다음과 같이 진행됩니다.

1번 사람이 자신의 첫 번째 차례에 tank를 말합니다.
2번 사람이 자신의 첫 번째 차례에 kick을 말합니다.
3번 사람이 자신의 첫 번째 차례에 know를 말합니다.
1번 사람이 자신의 두 번째 차례에 wheel을 말합니다.
(계속 진행)

끝말잇기를 계속 진행해 나가다 보면, 3번 사람이 자신의 세 번째 차례에 말한 tank 라는 단어는 이전에 등장했던 단어이므로 탈락하게 됩니다.

사람의 수 n과 사람들이 순서대로 말한 단어 words 가 매개변수로 주어질 때, 가장 먼저 탈락하는 사람의 번호와 그 사람이 자신의 몇 번째 차례에 탈락하는지를 구해서 return 하도록 solution 함수를 완성해주세요.

제한 사항

끝말잇기에 참여하는 사람의 수 n은 2 이상 10 이하의 자연수입니다.
words는 끝말잇기에 사용한 단어들이 순서대로 들어있는 배열이며, 길이는 n 이상 100 이하입니다.
단어의 길이는 2 이상 50 이하입니다.
모든 단어는 알파벳 소문자로만 이루어져 있습니다.
끝말잇기에 사용되는 단어의 뜻(의미)은 신경 쓰지 않으셔도 됩니다.
정답은 [ 번호, 차례 ] 형태로 return 해주세요.
만약 주어진 단어들로 탈락자가 생기지 않는다면, [0, 0]을 return 해주세요.

입출력 예

n words result

3	["tank", "kick", "know", "wheel", "land", "dream", "mother", "robot", "tank"]	[3,3]
5	["hello", "observe", "effect", "take", "either", "recognize", "encourage", "ensure", "establish", "hang", "gather", "refer", "reference", "estimate", "executive"]	[0,0]
2	["hello", "one", "even", "never", "now", "world", "draw"]	[1,3]

입출력 예 설명

입출력 예 #1

3명의 사람이 끝말잇기에 참여하고 있습니다.

1번 사람 : tank, wheel, mother
2번 사람 : kick, land, robot
3번 사람 : know, dream, tank

와 같은 순서로 말을 하게 되며, 3번 사람이 자신의 세 번째 차례에 말한 tank라는 단어가 1번 사람이 자신의 첫 번째 차례에 말한 tank와 같으므로 3번 사람이 자신의 세 번째 차례로 말을 할 때 처음 탈락자가 나오게 됩니다.

입출력 예 #2

5명의 사람이 끝말잇기에 참여하고 있습니다.

1번 사람 : hello, recognize, gather
2번 사람 : observe, encourage, refer
3번 사람 : effect, ensure, reference
4번 사람 : take, establish, estimate
5번 사람 : either, hang, executive

와 같은 순서로 말을 하게 되며, 이 경우는 주어진 단어로만으로는 탈락자가 발생하지 않습니다. 따라서 [0, 0]을 return하면 됩니다.

입출력 예 #3

2명의 사람이 끝말잇기에 참여하고 있습니다.

1번 사람 : hello, even, now, draw
2번 사람 : one, never, world

와 같은 순서로 말을 하게 되며, 1번 사람이 자신의 세 번째 차례에 'r'로 시작하는 단어 대신, n으로 시작하는 now를 말했기 때문에 이때 처음 탈락자가 나오게 됩니다.

풀이 (성공)

HashSet에 word가 있는지여부 && 직전 word의 마지막글자와 현재 word의 일치 여부를 확인후, 분기하여 작성한다.

x번째 사람은 %값으로 구하였기 때문에 마지막에 %값이 0이면 n값으로 변경한다.

작성코드 (성공)

import java.util.*;
class Solution {
    public int[] solution(int n, String[] words) {
         int[] answer = {0,0};
        int findN=0,findCount=0;
        HashSet<String> wordlist=new HashSet<>();
        wordlist.add(words[0]);
        for(int i=1;i<words.length;i++){
            if(!wordlist.contains(words[i])&&words[i-1].substring(words[i-1].length()-1,words[i-1].length()).equals(words[i].substring(0,1))){
                wordlist.add(words[i]);
            }else{
                findN=(i+1)%n;
                findCount=(int)Math.round((i)/n+1);
                answer[0]=findN;
                answer[1]=findCount;
                break;
            }
        }
        if(findN==0&&findCount!=0){
            answer[0]=n;
        }
        System.out.println(answer[0]+", "+answer[1]);
        return answer;
    }
}

한번에 통과한건 오랜만이다!

[Programmers/Java]프로그래머스 연습문제 - 카펫

유경(shin-6-0) — Tue, 19 Sep 2023 12:20:36 +0900

문제링크

https://school.programmers.co.kr/learn/courses/30/lessons/42842

프로그래머스

programmers.co.kr

문제조건

문제 설명

Leo는 카펫을 사러 갔다가 아래 그림과 같이 중앙에는 노란색으로 칠해져 있고 테두리 1줄은 갈색으로 칠해져 있는 격자 모양 카펫을 봤습니다.

Leo는 집으로 돌아와서 아까 본 카펫의 노란색과 갈색으로 색칠된 격자의 개수는 기억했지만, 전체 카펫의 크기는 기억하지 못했습니다.

Leo가 본 카펫에서 갈색 격자의 수 brown, 노란색 격자의 수 yellow가 매개변수로 주어질 때 카펫의 가로, 세로 크기를 순서대로 배열에 담아 return 하도록 solution 함수를 작성해주세요.

제한사항

갈색 격자의 수 brown은 8 이상 5,000 이하인 자연수입니다.
노란색 격자의 수 yellow는 1 이상 2,000,000 이하인 자연수입니다.
카펫의 가로 길이는 세로 길이와 같거나, 세로 길이보다 깁니다.

입출력 예

brown yellow return

10	2	[4, 3]
8	1	[3, 3]
24	24	[8, 6]

출처

※ 공지 - 2020년 2월 3일 테스트케이스가 추가되었습니다.

※ 공지 - 2020년 5월 11일 웹접근성을 고려하여 빨간색을 노란색으로 수정하였습니다.

풀이 1(실패)

i와 j가 주어질때 brown과 yellow를 구하는 방법은 생각이 났으나, 그 반대는 생각나지 않아 이중for문으로 찾았다.

완전탐색이므로, 반복문을 이용해야겠다는 생각이 바로 들었다.

작성코드 1(실패)

class Solution {
    public int[] solution(int brown, int yellow) {
        int[] answer = new int[2];
        //4, 3 일때 brown&yellow 계산법 -> 4*2+(3-2)*2 = brown , (4-2)*(3-2)=yellow
        int max = Math.max(brown, yellow);
        for(int i=0;i<max;i++){
            for(int j=0;j<max;j++){
                if(i*j==(brown+yellow)&&((i*2+(j-2)*2)==brown)&&((i-2)*(j-2)==yellow)){
                    answer[0]=i;
                    answer[1]=j;
                    break;
                }
            }
        }
        return answer;
    }
}

역시 2중for문은 바로 시간초과 가 떠버렸다.

풀이 2(성공)

for문을 전부 다 돌리는 것은 비효율적이다.

일단 가로길이는 brown/2 의 값보다 무조건 작기 때문에, (column이 3이상이어야 yellow가 존재해서 brown길이/2 보다 가로는 짧을 수 밖에 없다. brown/2가 가로길이가 되면 yellow는 존재할 수 없음.)

세로 길이는 가로길이에 영향을 받지만, 일단 넓이의제곱근/2 보다는 크고, 넓이의 제곱근 값보다 작거나 같다.

이를 이용해서 코드를 작성하였다.

작성코드 2(성공)

class Solution {
    public int[] solution(int brown, int yellow) {
        int[] answer = new int[2];
        //넓이가 brown+yellow인 점을 활용
        int area = brown+yellow;
        int root = (int) Math.ceil(Math.sqrt(area));
        //가로길이는 brown/2보다 무조건 작고 세로길이의 합은 root*2 보다작음
        for(int row=1;row<brown/2;row++){
            for(int column=(root-1)*2-row;column<=root*2;column++){
                if(row*column==area&&(row-2)*(column-2)==yellow&&(row*2+(column-2)*2)==brown){
                   // System.out.println("brown : "+brown+", yellow : "+yellow);
                    answer[0]=row;
                    answer[1]=column;
                    break;
                }
            }
        }
        //System.out.println(answer[0]+", "+answer[1]);
        return answer;
    }
}

+ 검색을 해 보니 약수를 이용해서 통과한 경우가 꽤 있다.

약수를 왜 생각을 못했을까..

깔끔한 코드는 아닌 것 같다.

[Programmers/Java]프로그래머스 연습문제 - 짝지어 제거하기

유경(shin-6-0) — Tue, 19 Sep 2023 10:03:46 +0900

문제링크

https://school.programmers.co.kr/learn/courses/30/lessons/12973

프로그래머스

programmers.co.kr

문제 조건

문제 설명

짝지어 제거하기는, 알파벳 소문자로 이루어진 문자열을 가지고 시작합니다. 먼저 문자열에서 같은 알파벳이 2개 붙어 있는 짝을 찾습니다. 그다음, 그 둘을 제거한 뒤, 앞뒤로 문자열을 이어 붙입니다. 이 과정을 반복해서 문자열을 모두 제거한다면 짝지어 제거하기가 종료됩니다. 문자열 S가 주어졌을 때, 짝지어 제거하기를 성공적으로 수행할 수 있는지 반환하는 함수를 완성해 주세요. 성공적으로 수행할 수 있으면 1을, 아닐 경우 0을 리턴해주면 됩니다.

예를 들어, 문자열 S = baabaa 라면

b aa baa → bb aa → aa →

의 순서로 문자열을 모두 제거할 수 있으므로 1을 반환합니다.

제한사항

문자열의 길이 : 1,000,000이하의 자연수
문자열은 모두 소문자로 이루어져 있습니다.

입출력 예

s result

baabaa	1
cdcd	0

입출력 예 설명

입출력 예 #1

위의 예시와 같습니다.

입출력 예 #2

문자열이 남아있지만 짝지어 제거할 수 있는 문자열이 더 이상 존재하지 않기 때문에 0을 반환합니다.

※ 공지 - 2020년 6월 8일 테스트케이스가 추가되었습니다.

※ 공지 - 2023년 8월 31일 테스트케이스가 추가되었습니다. 기존에 제출한 코드가 통과하지 못할 수도 있습니다.

풀이 1 (실패)

while문 내에서 string을 짤라서 인덱스 하나하나 비교하고, 값이 변하게 되면 다시 한번 더 확인하는 방식으로 진행해 보았습니다.

작성코드 1 (실패)

public static int solution(String input) {
        int ans=0;
        String changeInput=input;
        int i=1;
        while(true){
            int size=changeInput.length();
            if(changeInput.charAt(i-1)==changeInput.charAt(i)){
                changeInput=changeInput.substring(0,i-1)+changeInput.substring(i+1,size);
                size=changeInput.length();
                i=1;
            }else{
                i++;
            }
            if(size==0||i==size){
                break;
            }
        }

        if(changeInput.length()==0){
            ans=1;
        }
        return ans;
    }

테스트 9번을 실패하고, 효율성 부분에서는 아예 실패를 했다.

일단.. while문이 아닌 Stack을 이용해서 풀어야 겠다는 생각이 들었다.

stack은 LIFO (Last In First Out)의 특징을 가진다.

풀이 2 (성공)

Stack 자료형을 하나 만들고, input을 하나하나 탐색하면서, 스택이 비어있지 않고 스택의 가장 윗 값이 현재 탐색중인 input의 문자(=c)와 같으면 스택의 맨윗값을 빼고 ( pop() ), 아닐 경우에는 탐색중인 input의 문자(=c)를 오히려 스택에 넣어준다.

작성코드 2 (성공)

import java.util.*;
class Solution
{
    public int solution(String input)
    {
        int ans=0;
        Stack<Character> stInput = new Stack<Character>();
        for(char c:input.toCharArray()){
            if(!stInput.isEmpty()&& stInput.peek()==c){
                stInput.pop();
            }else{
                stInput.push(c);
            }
        }

        if(stInput.isEmpty()){
            ans=1;
        }
        return ans;
    }
}

통과!

쓸데없이 while문을 통해서 모든 경우의 수를 다 따져가면서 계산하면 효율성은 항상 통과하지 못하는 것 같다.

Stack, Queue, HashMap을 항상 염두해 두고 짜야 겠다는 생각이 들었다.

[Programmers/Java]프로그래머스 연습문제 - 피보나치수

유경(shin-6-0) — Sat, 16 Sep 2023 16:47:40 +0900

문제링크

https://school.programmers.co.kr/learn/courses/30/lessons/12945

프로그래머스

programmers.co.kr

문제 조건

문제 설명

피보나치 수는 F(0) = 0, F(1) = 1일 때, 1 이상의 n에 대하여 F(n) = F(n-1) + F(n-2) 가 적용되는 수 입니다.

예를들어

F(2) = F(0) + F(1) = 0 + 1 = 1
F(3) = F(1) + F(2) = 1 + 1 = 2
F(4) = F(2) + F(3) = 1 + 2 = 3
F(5) = F(3) + F(4) = 2 + 3 = 5

와 같이 이어집니다.

2 이상의 n이 입력되었을 때, n번째 피보나치 수를 1234567으로 나눈 나머지를 리턴하는 함수, solution을 완성해 주세요.

제한 사항

n은 2 이상 100,000 이하인 자연수입니다.

입출력 예

n return

3	2
5	5

입출력 예 설명

피보나치수는 0번째부터 0, 1, 1, 2, 3, 5, ... 와 같이 이어집니다.

풀이 1 (실패)

피보나치수? 그냥 0일때 0, 1일때 1, 2이상일때 n-1, n-2를 더하면 되는거아닌가? 라고 간단하게 생각하였습니다.

문제조건에 n번째 피보나치수를 1234567로 나눈 나머지를 리턴하라고 되어 있어 2 이상일 때만 1234567로 나누었습니다.

작성코드 1 (실패)

class Solution {
    public int solution(int n) {
        int ans=0;
        if(n==0){
            ans=0;
        } else if (n==1) {
            ans=1;
        } else {
            ans = (solution(n-2)+solution(n-1))%1234567;
        }
        return ans;
    }
}

시간초과로 실패하였습니다

풀이 2 (성공)

계산을 할 때마다, solution이 계속 도는 재귀함수의 형태가 시간초과의 문제인 것 같아,

solution이 반환하는 값을 int 배열에 넣기로 결정하였다.

작성코드 2 (성공)

class Solution {
    public int solution(int n) {
        int ans=0;
        int[] arr=new int[n+1];
        
        for(int i=0;i<=n;i++){
            if(i==0){
                arr[i]=0;
            }else if(i==1){
                arr[i]=1;
            }else{
                arr[i]=(arr[i-1]+arr[i-2])%1234567;
            }
        }
        return arr[n];
    }
}

solution을 계속 도는 재귀형식은 숫자가 클수록 제곱의 형태로 점점 계산수가 많아지므로, 배열에 값을 저장하여 진행하였더니 통과했다.

[Programmers/Java]프로그래머스 연습문제 - 다음 큰 숫자

유경(shin-6-0) — Sat, 16 Sep 2023 16:20:05 +0900

문제링크

https://school.programmers.co.kr/learn/courses/30/lessons/12911

프로그래머스

programmers.co.kr

문제 조건

문제 설명

자연수 n이 주어졌을 때, n의 다음 큰 숫자는 다음과 같이 정의 합니다.

조건 1. n의 다음 큰 숫자는 n보다 큰 자연수 입니다.
조건 2. n의 다음 큰 숫자와 n은 2진수로 변환했을 때 1의 갯수가 같습니다.
조건 3. n의 다음 큰 숫자는 조건 1, 2를 만족하는 수 중 가장 작은 수 입니다.

예를 들어서 78(1001110)의 다음 큰 숫자는 83(1010011)입니다.

자연수 n이 매개변수로 주어질 때, n의 다음 큰 숫자를 return 하는 solution 함수를 완성해주세요.

제한 사항

n은 1,000,000 이하의 자연수 입니다.

입출력 예

n result

78	83
15	23

입출력 예 설명

입출력 예#1

문제 예시와 같습니다.

입출력 예#2

15(1111)의 다음 큰 숫자는 23(10111)입니다.

풀이

가장 먼저 떠올린것은, toBinaryString 입니다

Java에는 Integer값을 toBinaryString으로 1010101 형태로 변경할 수 있습니다.

이후 이 값에 대해서 1값의 갯수를 세고(=count1Input), (subString사용)

인풋(=n) 을 하나씩 늘리면서(findN) 이 값도 1의 갯수를 세서(count1FindNum)

인풋의 1갯수와 같으면 그때의 findN을 반환하는 방식으로 작성하였습니다.

작성코드

class Solution {
    public int solution(int n) {
        int answer = 0;
        String binaryN=Integer.toBinaryString(n);
        int count1Input=0;
        for(int i=0;i<binaryN.length();i++){
            String index=binaryN.substring(i,i+1);
            if(index.equals("1")){
                count1Input++;
            }
        }
        String binaryFindN="";
        int findN=n;
        while(true){
            findN++;
            binaryFindN=Integer.toBinaryString(findN);
            int count1FindNum=0;
            for(int i=0;i<binaryFindN.length();i++){
                String index=binaryFindN.substring(i,i+1);
                if(index.equals("1")){
                    count1FindNum++;
                }
            }
            if(count1FindNum==count1Input){
                break;
            }
        }
        return findN;
    }
}

조건이 자연수 1000000이하여서 그런지, 효율성 테스트도 통과했습니다!

Mysql(MariaDB) 함수 모음 (집계, 문자열, 수학, 날짜)

유경(shin-6-0) — Wed, 30 Aug 2023 16:09:33 +0900

문자열함수

limit : limit 0,10 붙이면 1 부터 10번째 까지만

concat : concat ( A, B) 연결

upper , ucase : 대문자로

lower , lcase : 소문자로

substring('문자열' , 시작index , 시작으로부터몇개인지) :문자열 자르기

lpad , rpad : lpad(’내용’, 전체칸수, ‘나머지채울내용’) 왼쪽정렬 / rpad는 오른쪽 정렬

trim , ltrim , rtrim : MySQL 문자열에 공백 또는 문자 제거

length : 문자 길이 (공백 포함)

수학함수

abs : 절댓값 반환

floor : 소숫점 내림(버림)

ceil : 소숫점 올림

mod(a,b) : a%b 의 값. 나머지 반환

power(x,y) : x의 y승

pow(x,y) : x의 y제곱근

round(x) , round(x,y) : x에 가장 가까운 정수 (반올림) / x값 중에서 소수점 y자리에 가장 근접한 실수

greatest , least : 주어진 값들 중에서 최댓값 , 최솟값 반환

날짜함수

curdate() , current_date : 현재시간

now() vs sysdate() : 현재시간 시분초까지

now()의 경우 쿼리가 실행되는 그 순간을 기점으로 삼는다. 반면 sysdate()의 경우 함수가 실행되는 순간을 기점으로 삼는다.

date_format :

%Y	4자리 년도	%m	숫자 월 ( 두자리 )
%y	2자리 년도	%c	숫자 월(한자리는 한자리)
%M	긴 월(영문)	%d	일자 (두자리)
%b	짧은 월(영문)	%e	일자(한자리는 한자리)
%W	긴 요일 이름(영문)	%I	시간 (12시간)
%a	짧은 요일 이름(영문)	%H	시간(24시간)
%i	분	%r	hh:mm:ss AM,PM
%T	hh:mm:SS	%S	초

period_diff(p1,p2) :p1 - p2 만큼 개월 수 를 구함

date_add(adddate,더할날짜길이) : 더할날짜만큼 날짜 더하기

date_sub(=subdate) : 뺄날짜만큼 날짜 빼기

cast('내용' as 타입) : type 변경

집계함수

avg : 평균

max , min : 최댓값, 최솟값

count : 갯수 반환

sum : 합 반환

stddev : 표준편차 반환

select절에 그룹함수(통계함수) 있는 경우, 어떤 컬럼도 select절에 올 수 없다 → 와도 의미가 없음

쿼리 순서

from: 테이블에 접근
where: 조건에 맞는 row를 선택
projection: 집계(임시 테이블, 메모리 캐시)
결과를 반환: 출력
group by 한 컬럼은 select절에 올 수 있다.

Having 절 : 집계결과(결과 테이블) 에서 row를 선택해야 하는 경우 , 이미 where절은 실행 후 이기 때문에 having 절에서 조건을 줘야 한다.

JAVA Collection Framework (Vector, List, Stack, Queue, Set, Map)

유경(shin-6-0) — Wed, 16 Aug 2023 21:05:11 +0900

Collection

Collection에는 List,Set,Map이 있고 세부로는 더 나뉜다.

Collection은 Iterator를 상속받는다.

ArrayList < List < Collection < Iterable

Java Collection Hierarchy

이것도 2020년 자료이다. 더 많이 생겼다. (ConcurrentMap, TreeMap, EnumMap 등..)

LinkedHashXXXX : 저장된 순서가 유지되는 자료구조(Set,Map..)

TreeXXX : key 값을 기준 (set은 내용비교) 으로 기본 정렬되는 자료구조(Set,Map..)

Generic 은 기본형을 사용할 수 없다.

Map<String, Integer> m =new HashMap<>();
m.put("one", 1); //auto boxing. int형으로 넣었지만, Integer로 알아서 들어감

기본형을 사용할 경우, Wrapper타입으로 변환한다 (Auto Boxing)

Map<String, Integer> m =new HashMap<>();
m.put("one", 1);//auto boxing
int i = m.get("one"); //객체로 넣엇는데 기본형으로나옴. auto unboxing

반대로 Auto Unboxing도 있다.

Iterator를 상속 받는 Generic은 For-each문을 쓸 수 있다

요소 열람하는법

1. for문

for(int i=0;i<list.size();i++) {
	System.out.print(list.get(i)+(i != list.size()-1 ? " " : "\n"));
}

2. for each문

for(Double d:list)
	System.out.println(d+" ");
System.out.println();

3. Iterator(StringTokenizer 와 비슷)

Iterator<Double> iter=list.iterator(); // 반복 접근 가능한 객체
while(iter.hasNext()) {
	Double d=iter.next();
	System.out.print(d+" ");
}

Vector

벡터는 객체만 저장 가능
벡터의 참조 결과는 항상 Object타입이므로, 적절한 타입 변환 후 사용
다른 타입의 객체를 섞어서 저장할 수 있음

Vector의 함수들

Object 는 o, int 는 i

addElement(o) : o라는 값을 맨 뒤에 추가
insertElementAt(o , i) : o라는 객체를 i인덱스에 추가
elementAt(i) : 인덱스로 개체 구하기
indexOf(o) : 인덱스 번호 구하기
setElementAt(i) : i 인덱스를 가진 객체를 변경
remove(o), remove(i) : o라는 객체 삭제 , i인덱스 객체 삭제
contains(o) : 벡터가 o를 가지고 있는지에 따른 반환
size() : 벡터의 크기
capacity() : 벡터의 용량
clone() : 벡터 복사

✨벡터와 리스트의 차이 - 벡터는 자료구조에 항목을 삽입, 삭제할 때 동기화가 되지만 리스트는 되지 않는다. (벡터가 멀티쓰레드 환경에서 안전)

List

List의 함수들

add(값) : 마지막에 값 추가
add(i ,값) : i 번째 인덱스에 값 추가
set(i ,값) : i 번째 인덱스를 '값'으로 변경
remove(i) : i 번째 인덱스 요소를 제거 ( 타입 있음 )

ex) Double justRemoved = list.remove(2); // 2번째 인덱스의 double형인 값이 justRemoved에 저장

remove(값) : 값이 제거 되었냐에 따라 true/false 리턴
contains(값) : 값이 존재하는지에 따라 true/false 리턴
indexOf(값) : 값이 존재하는 경우 위치인덱스값 반환, 없을경우 -1 반환. 앞에서부터 찾아서 가장 먼저 뜨는 것.
lastIndexOf(값) : indexOf랑 같은데 뒤에서부터 처음 검색된 요소의 인덱스.
리스트A.equals(리스트B) : 요소가 모두 일치할때 두 리스트의 equals는 true를 반환
clear() : 모든 요소 제거
리스트이름.isEmpty() : 리스트가 비어있으면 true 반환

배열(Array)과 리스트(List) 차이

Linked List

링크로 연결된 노드의 집합.
java.util.LinkedList 클래스에 정의됨
Index를 통해 참조 접근은 불가능하나, head로부터 링크를 따라가면서 접근
각 노드는 본인의 데이터와 다음 노드로의 링크를 가지고 있음.

LinkedList 함수들

add(값) : 마지막에 값 추가
add(i ,값) : i 번째 인덱스에 값 추가
set(i ,값) : i 번째 인덱스를 '값'으로 변경
remove(i) : i 번째 인덱스 요소를 제거 ( 타입 있음 )
removeFirst() : 첫번째 값 삭제
removeLast() : 마지막 값 삭제
clear() : 모든 데이터 삭제
removeAll(리스트명) : 모든 데이터 삭제
size() : 리스트 크기 구하기
get(i) : i번째 리스트 값 구하기
contains(값) : 값이 존재하는지에 따라 true/false 리턴
indexOf(값) : 값이 존재하는 경우 위치인덱스값 반환, 없을경우 -1 반환. 앞에서부터 찾아서 가장 먼저 뜨는 것.

ArrayList

Vector, LinkedList, ArrayList 모두 추상클래스(AbstractList)를 상속 받은 동적 자료구조

Stack, Queue

Stack

여러 데이터 항목이 일정한 순서로 나열
Last In First Out (LIFO)
java.util.Stack 클래스로 제공
Vector 클래스를 상속받아 구현

선언

Stack<Integer> stack = new Stack<>(); //int형 스택 선언

Stack 함수들

push(값) : stack에 값을 추가
pop() : stack의 가장 상단의 값 빼내서 반환
size() : 쌓여있는 스택 크기 반환
empty() : 비어있으면 true, 아니면 false반환
contains(값) : 값이 stack안에 있으면 true 반환
peek() : stack의 가장 상단의 값 빼내지는 않고, 반환

Queue

리스트와 유사한 자료구조
First In First Out (FIFO)
기존 항목의 제거는 리스트의 처음에서 일어남
java.util.Queue로 제공

선언

Queue<Integer> queue = new LinkedList<>(); //int형 queue 선언, linkedlist 이용

Queue의 함수들

add(값) : queue에 값을 추가
offer(값) : queue의 값 추가
poll() : queue의 가장 첫번째 값 빼내서 반환, 비어있으면 null 반환
size() : 쌓여있는 스택 크기 반환
clear() : queue 초기화
isEmpty() : 비어있으면 true, 아니면 false반환
contains(값) : 값이 queue안에 있으면 true 반환
peek() : queue의 가장 상단의 값 빼내지는 않고, 반환
remove(값) : queue의 특정 값 빼기

Set

Set은 중복 요소를 추가하지 않고, 순서가 존재하지 않는다.
Set의 경우, 값이 집합에 존재하는지를 검사하는 목적으로 주로 사용된다.

Set<String> setName = new Set<>();

Set의 함수들

add(값) : 값 추가
size() : 갯수 반환
contains(값) : 값이 존재하면 true반환
remove(값) : 해당 값을 제거

HashSet

해시 테이블에서 키 없이 값만 존재하는 경우
자료의 해시로 유지되므로, 객체 참조시 O(1) 의 시간 복잡도를 가짐
java.util.HashSet 클래스로 제공

선언

HashSet<Integer> set = new HashSet<Integer>();

HashSet의 함수들

add(값) : 값 추가
size() : 갯수 반환
contains(값) : 값이 존재하면 true반환
remove(값) : 해당 값을 제거

Map

순차적으로 값을 구하지 않고, key를 통해 value를 얻는다.
key와 value를 하나의 요소로 관리한다.
key는 중복될 수 없다. (value는 중복 가능)

선언

HashMap<String, String> map = new HashMap<String, String>();

Map의 함수들

put(k,v) : key를 k, value 를 v로 가지는 요소 추가
get(k) : 키가 k인 요소 반환
remove(k) : 키가 k인 요소 삭제
containsKey(k) : 키가 k값인 Map 존재하면 true, 없으면 false 반환
containsValue(v) : 밸류가 v인 값이 존재하면 true, 없으면 false 반환
value 사용법위와 같이 value를 하나의 변수로 사용 가능
Collection<Object> values = map1.values();
B.putAll(A) : A맵에 B맵 내용 합치기
key 는 k, value 는 v로 표시

[2023 인프콘]내 시간표 공유하기 이벤트!

유경(shin-6-0) — Sat, 22 Jul 2023 17:59:47 +0900

두둥.. 2023년 인프콘 안내 링크를 지인에게 받았다.

AWS Summit을 너무나 재밌게 다녀온 나로썬, 내가 관심있는 세션까지 많은 인프콘을 놓치고 싶지 않았다.

네이버페이 결제로 1분도 채 걸리지 않아 1:00에 바로 신청을 완료했고, 기다리던 와중..

심장을 쫄깃하게 하는 메일제목..!!! 나 혹시 당첨인가..?

응 아니야..

휴일을 기꺼이 내줄 수 있었는데!! 엄청나게 가고싶었는데!!!!!!

나도 인프콘보내줘....

내가 현재 들어가있는 개발자 단톡방 및 스터디 조원들 아무도 당첨이 되지 않은 것을 보아 굉장한 경쟁률을 가진 것으로 보인다. 작년보다는 덜했다는데.. 이거 평생 못가보는거아니야..?

세션을 봤을 때 주니어로써 듣고싶은 강의가 너무너무너무 많았다.

인프콘2023 시간표 공유이벤트

인프런 김영한 강의를 학습하려고 들어갔다가 본 배너!!!!!!!!!!!!! 25명에게 티켓증정..!!!!!!!! 이건못참찌..

클릭시 이벤트 페이지로 이동된다.

내시간표

두둥! 이게 바로 내가 짜본 시간표!!

나의 현재 가장 큰 관심사는 "스프링을 잘 사용하는것" 이고, 부가적으로는 김영한님의 강의를 들으면서 TDD에 관심이 많다. (회사에서 쓰질 않으니..) 코프링(Spring + Kotlin)에도 관심이 많고, 아직 주니어 1년차이기 때문에 기술적으로 성장할 필요가 있다고 생각하여 그 위주로 짜봤다!

이중 가장 궁금한 세션은 김영한님의 어느 날 고민 많은 주니어 개발자가 찾아왔다 2탄: 주니어 시절 성장과 고민들 과

이일민 님의 스프링과 함께 더 나은 개발자 되기 세션이다.

그리고 개발자 찐 인맥이 없는 나로썬... 가서 네트워킹도 매우매우매우 참여하고싶단말이다..

세션 선택 이유

Kopring(Kotlin + Spring) 프로젝트 투입 1주일 전: 주니어 개발자의 Kotlin 도입 이야기 의 경우, 코프링을 신규 프로젝트에 도입하게 되면서 겪었던 에피소드와 배울점을 느낄 수 있을 것 같아 담게 되었다.

구글 Apps Script와 ChatGPT로 많은 동료들 생산성 향상 시킨 썰 의 경우, 우아한 형제들 개발자여서 담은게 영향이 없지않아 있다.. Chat GPT를 개인적으로는 함수명 만드는거 , 유효성검사 만드는용으로만 쓰고 있었는데 어떻게 생산성을 향상시켰는지 궁금하다. 이 세션을 들을 경우 회사에서 직접 바로 적용이 가능할 것 같아 굉장히 도움이 될 것이라고 생각한다.

2곳 중 1곳은 무조건 합격하는 개발자 이력서 만들기 의 경우, 제약회사 영업사원으로 일하시던 발표자분이 데브옵스 전문기업의 백엔드 개발자가 되는 동안의 노하우를 담았다고 한다. 서비스 기업을 목표로 하는 나로써는 굉장히 솔깃한 내용이 아닐 수 없다.

안타깝게도 오늘의 TDD는 실패한 것 같군요. 내일은 가능할지도...? 세션의 경우 , 김영한님의 강의를 들으며 TDD에 관심을 가지게 되어 제목에 이끌려 담게 되었다. 실제로 TDD를 100%적용하는것은 실무에 어렵다는 말이 많은데, 회사에서 테스트코드를 아예 사용하지 않는 나로써는 TDD를 쉽게 구현하고 적용시키는 법을 알려준다는 설명에서 끌려 관심을 가지게 되었다.

어느 날 고민 많은 주니어 개발자가 찾아왔다 2탄: 주니어 시절 성장과 고민들 세션은 김영한님이 하시는 세션이다. 주니어시절은 다들 그렇듯 고민이 많은 것 같다. 내가 잘하고 있는건지도 모르겠고, 정답도 없고.. IT는 빠르게 기술이 향상되면서 새로 무언가를 계속 도입하고 그것이 정답인지 교본 같은 게 없다. 코로나 호황이 끝나고 IT업계가 굉장히 위축된 상황에서, 주니어 개발자가 가져야 할 마음가짐이 궁금하다.

인프런에서는 수천 개의 테스트 코드를 이렇게 다루고 있어요 세션의 경우, 위의 오늘의 TDD는 실패할 것 같군요 세션과 같은 이유로 담게 되었다. 인프콘 내내 TDD하나만 제대로 알고 가도 나에게 큰 자산이 될 것이라 생각했다 :)

스프링과 함께 더 나은 개발자 되기 세션의 경우, 토비의 스프링으로 유명한 이일민님께서 세션을 진행하신다. 스프링 1.0부터 6.0이 되기까지 겪었던 스프링의 역사를 몸소 체험해보신 분이다. 다양한 도전에 대한 경험을 공유해주신다고 하니, 스프링 5.x부터 쓴 나는 배울 점이 아주 많을 것이라 느낀다.

웹뷰를 이용해 웹 서비스를 앱으로 빠르게 구현하기의 경우, 백엔드보다는 프론트앤드에 약간은 치중된 세션이라 생각된다. 하지만 웹 서비스를 이미 구축된 시스템을 통해 빠르게 구현한다니.. 솔깃하지 않은가?

패션 이커머스 서비스의 아키텍처 성장 기록 세션의 경우, 매년 70%이상 성장하는 29cm의 아키텍쳐 변화에 대해 듣게 된다. 29cm에서 MSA를 도입한 이유를 알려준다니.. MSA의 경우 엄청 거대한 서비스가 아니면 비효율적이라는 말도 있는데, 선택하게 된 계기가 궁금하여 담게 되었다.

세션별로 내가 듣고 싶은 이유를 적고 보니 더더더더 듣고 싶어졌다 으아아!!!!

제발..되면 후기 정성들여 하루종일 쓸게요... 멋진 개발자가 될게요.. 열심히 살게요..!!!!!!!!!

오늘부터 인프랩 있는 판교쪽으로 1일 1기도 하면서 당첨되길 기다려보겠습니다..

제발 뽑아주세요..제발..

[정보처리기사 실기] 2023 1회 정보처리기사 실기 합격 후기

유경(shin-6-0) — Fri, 16 Jun 2023 17:10:51 +0900

https://cheerup313.tistory.com/80

[정보처리기사 실기] 2023 1회 정보처리기사 실기 시험 후기

이번 시험의 특징 2022년과 다르게 코딩문제 많음 + 기출문제 4개 출제 + 약술형없음 => 역대급 쉬웠던 시험 아마도 기출문제를 생각하고 공부하셨던 분들은 대부분 붙으셨을걸로 예상된다. 나는

cheerup313.tistory.com

시험직후에 기억나는 특징들을 적어놨었다.

6/9에 합격 결과를 확인하고 나서, 글 쓰는 걸 깜빡했다..ㅎㅎ

63점이라는 간당간당한 점수로 합격을 했고, 아무래도 직장 재직중이다보니 또 보는건 너무나 끔찍했다..

붙어서 천만다행이라는 생각이 든다.

TIP

1. 먼저 코딩 문제는 무조건 맞춰야한다. 프로그래밍, sql부분은 외우지 말고 이해하자

2. 퀴즐렛어플에 '정보처리기사 실기'를 검색하여 출퇴근시에, 이동시에 보면서 외우자. 개인적으로 누워서도 폰으로 볼수있어서 너무좋았음

3. 1달이상 남았을 경우 > 수제비 기본서 + 수제비 파이널

시간이 촉박할 경우 > 수제비 파이널 풀면서 모르는 개념정리 방식

을 이용해서 풀자!

개인적으로 기본서만 봤을땐 머리에 하나도 안남는 느낌이었는데 파이널을 통해서 도움을 너무너무많이 얻었다.

강추할 수 밖에 없는 ...!!!!!!!!

시험이 쉬웠기에 운이 좋았다는 생각도 든다 :)

[스프링 핵심 원리 기본편 02] 테스트 코드 구조 / SOLID원칙 지켜서 개발하기

유경(shin-6-0) — Tue, 30 May 2023 23:22:39 +0900

비즈니스 요구사항과 설계

회원
- 회원을 가입하고 조회할 수 있다.
- 회원은 일반과 VIP 두 가지 등급이 있다.
- 회원 데이터는 자체 DB를 구축할 수 있고, 외부 시스템과 연동할 수 있다.(미확정)
주문과 할인 정책
- 회원은 상품을 주문할 수 있다.
- 회원 등급에 따라 할인 정책을 적용할 수 있다.
- 할인 정책은 모든 VIP는 1000원을 할인해 주는 고정 금액 할인을 적용해 달라. (나중에 변경될 수 있다.)
- 할인 정책은 변경 가능성이 높다. 회사의 기본 할인 정책을 아직 정하지 못했고, 오픈 직전까지 고민을 미루고 싶다. 최악의 경우 할인을 적용하지 않을 수도 있다. (미확정)

위의 경우, 미확정 인 부분에 대해서 현재 결정하기 어렵다. 개발을 뭐든 기획이 다 끝날때까지 기다렸다가 할 수는 없으니, 역할과 구현을 구분해서 진행한다.

회원 데이터는 DB가 자체구축이 가능하며, 외부 시스템과 연동 할 수 있기 때문에 회원 데이터에 접근하는 계층은 따로 만들어서 관리한다.

public class OrderServiceImpl implements OrderService {
    private final DiscountPolicy discountPolicy = new RateDiscountPolicy();
}

이대로 개발할 경우, 다른 저장소로 변경하면 OCP원칙 (개방-폐쇄 원칙)을 잘 지키는 걸까? DIP(의존관계 역전 원칙)는?

-> 실제로 의존 관계가 인터페이스 뿐 아니라 구현까지 모두 의존하고 있다. = 추상화 / 구체화 모두 의존

실제 구현 상태는 다음과 같아진다. 기능을 확장하게 되면 클라이언트에 영향을 주고, OrderServiceImpl은 구현클래스인 FixDiscountPolicy와 RateDiscountPolicy 에 의존하고 있기 때문에 OCP와 DIP를 어긴다.

별도의 AppConfig 사용

구현 객체를 생성하고, 연결하는 AppConfig를 생성한다. (어떤 구현 객체가 들어와야하는지 정하는 역할)

OrderServiceImpl에 하지 않는 이유는, SRP(단일책임)원칙을 지키기 위해서이다.

public class AppConfig {
    public OrderService orderService() {
        return new OrderServiceImpl(memberRepository(), discountPolicy());
    }
    
    public MemberRepository memberRepository() {
        return new MemoryMemberRepository();
    }
    
    public DiscountPolicy discountPolicy() {
        return new RateDiscountPolicy();
    }
}

public class OrderServiceImpl implements OrderService {
    private final MemberRepository memberRepository;
    private final DiscountPolicy discountPolicy;
    
    public OrderServiceImpl(MemberRepository memberRepository, DiscountPolicy discountPolicy) {
        this.memberRepository = memberRepository;
        ths.discountPolicy = discountPolicy;
    }
}

public class OrderApp {

    public static void main(String[] args) {
        AppConfig appConfig = new AppConfig();
        OrderService orderService = appConfig.orderService();

        Long memberId = 1L;
        Member member = new Member(memberId, "memberA", Grade.VIP
        Order order = orderService.createOrder(memberId, "itemA", 20000);

        System.out.println("order = " + order);
    }
}

이렇게 설계하면, OrderServiceImpl은 구현 클래스들을 의존하지 않는다.

OrderServiceImpl에 어떤 구현 객체가 들어올지는 AppConfig에서 결정한다.

위와같이 클라이언트는 주문 서비스에 주문 생성을 요청하고,

할인을 위해서는 회원 등급이 필요하므로 주문 서비스가 회원 저장소에서 회원을 조회하고,

할인 정책 저장소에서 할인 정책을 가져오도록 한다.

이렇게 될 경우, '주문'이라는 방식에 대해서 회원 및 할인 정책을 유연하게 바꿀 수 있다. 바꾼다 한들 주문 서비스에는 영향이 가지 않기 때문에 협력 관계를 그대로 사용할 수 있다.

테스트 코드 작성 방식

given : 테스트를 위한 준비 . 변수, 입력 값 등을 정의함
when : 테스트를 실행하는 과정 . 검증하는 내용을 확인 가능
then : 실제 실행으로 결과를 검증

[스프링 핵심 원리 기본편 01] 스프링의 개념과 객체지향 설계

유경(shin-6-0) — Tue, 30 May 2023 22:58:20 +0900

스프링?

2000년 초, EJB라는 복잡한 틀에서 벗어나, POJO를 지향하는 "Spring" 이 개발되었다.

스프링 프레임워크 : 스프링의 기본 구조. 객체지향 설계를 잘 할 수 있도록 도와주는 도구

스프링 부트 : 복잡한 스프링 프레임워크 설정을 간단하게 할 수 있도록 도와주는 도구 (실무에서 대부분 사용)

스프링 데이터 : noSQL이던, RDB건간에 기본적인 CRUD는 비슷하기 때문에, 이를 도와주는 도구

스프링 세션 : 세션을 편리하게 쓸 수 있도록 도와주는 도구

스프링 시큐리티 : 보안과 관련된 설정을 쉽게 할 수 있는 스프링 도구

스프링 Rest Docs : API 문서를 편리하게 작성할 수 있도록 도와주는 도구

스프링 배치 : 변경해야하는 DATA가 수천만개일 때, 이를 나누어서 차례차례 업데이트 한다. (실시간 사용성을 보장하기 위해) 이때, 자동으로 업데이트 및 변경 (=배치)하게 도와주는 도구

스프링 클라우드 : 클라우드 환경에서 작업할 수 있도록 도와주는 도구

스프링 vs 스프링부트

스프링 부트는 내장 톰캣 서버가 있어 톰캣을 별도 설치하고 설정할 필요가 없다.

손쉬운 빌드가 가능하도록 starter를 잘 구성하여, 선택만 하면 자동으로 기본 세팅이 완료되도록 설계되었다.

외부 라이브러리를 설치할 경우, 가장 안정적이고 알맞은 버전을 선택하여 최상의 라이브러리 버전을 제공한다.

스프링과 스프링부트는 별도의 것이 아니며, 스프링 프레임워크를 편리하게 사용하도록 만든 것이 부트라고 보면 된다.

스프링 핵심 개념 - 객체지향

EJB가 아닌 스프링에 다들 열광한 이유, "객체지향" 이라는 특징을 굉장히 잘 살린 프레임워크이기 때문이다.

객체지향이란

객체지향이란, 다형성(Polymorphism)을 가진 것을 의미한다. 역할과 구현을 분리한다.
Client와 Server 중 하나가 바뀌어도 다른 것에 영향을 주지 않는 설계 방식이다.

다형성 예시 ) 자동차 종류가 바뀌어도, 제조사가 바뀌어도 운전자는 운전 경험이 있다면 바뀔 필요가 없다.

-> 레고 블럭 조립하듯, 컴퓨터 부품 갈아끼우듯 부분 변경이 가능하다!

-> 역할 : 인터페이스(운전자) , 구현 : 인터페이스를 구현한 객체(자동차)

클라이언트나 서버'만' 있는 객체는 없다.

클라이언트 : 요청하는사람

서버 : 요청에 응답하는 사람

* 클라이언트는 동시에 서버가 될 수 있다. (ex. 클라이언트 -> 클라이언트/서버 -> 서버 )

인터페이스란

동일한 기능을 가진 것들을 '정형화'하기 위해 강제하는 것이라고 볼 수 있다.

동일한 목적을 가진 객체를 아무 규칙 없이 생성한다면, 객체를 수정하거나 제어할 때 문제가 생기기 때문이다.

학생 인터페이스라면 이름, 학번, 과, 듣는 학점, 생년월일 등을 지정하는 것을 말한다.

이렇게 인터페이스로 정형화하여 객체를 생성하게 된다면, 유지보수성이 굉장히 올라가게 된다.

그러므로, 인터페이스를 유지보수하기 좋도록 안정적으로 설계하는 것이 객체지향 설계에서 가장 중요하다.

다형성이란

다형성의 본질 : 객체 인스턴스를 실행 시점에 유연하게 변경할 수 있다.

클라이언트를 변경하지 않고, 서버의 구현 기능을 유연하게 변경할 수 있다.

스프링의 제어의 역전(Ioc), 의존관계 주입(DI)은 다형성을 활용해, 역할과 구현을 편리하게 다룰 수 있도록 지원한다.

객체지향 설계 5원칙 (SOLID)

SRP: 단일 책임 원칙(single responsibility principle)
OCP: 개방-폐쇄 원칙 (Open/closed principle)
LSP: 리스코프 치환 원칙 (Liskov substitution principle)
ISP: 인터페이스 분리 원칙 (Interface segregation principle)
DIP: 의존관계 역전 원칙 (Dependency inversion principle)

SRP 단일 책임 원칙 (single responsibility principle)

하나의 클래스는 하나의 책임만 가져야 한다.
책임의 중요한 판단 기준은 변경이다.
변경이 있을 때 파급 효과가 적으면 적을수록 좋다.(UI 하나 변경했는데, 애플리케이션을 다 고쳐야 한다면? 잘못된 설계이다. )

OCP 개방-폐쇄 원칙 (Open/closed principle)

가장 중요한 원칙이다!
소프트웨어 요소에는 확장에는 열려 있으나, 변경에는 닫혀 있어야 한다.
다형성을 활용하여 코드 변경 없이 기능을 추가한다.
인터페이스를 구현한 새로운 클래스를 하나 만들어서 새로운 기능을 구현한다.
다형성을 사용하고, OCP 원칙을 지키기 위해서는 객체를 생성하고 연관 관계를 맺어주는 별도의 설정자가 필요하다. =Spring

LSP: 리스코프 치환 원칙 (Liskov substitution principle)

프로그램의 객체는 프로그램의 정확성을 깨뜨리지 않으면서 하위 타입의 인스턴스로 바꿀 수 있어야 한다.
다형성에서 하위 클래스는 인터페이스 규약을 다 지켜야 한다는 것, 다형성을 지원하기 위한 원칙, 인터페이스를 구현한 구현체는 믿고 사용하려면, 이 원칙이 필요하다.
단순히 컴파일에 성공하는 것이 개발의 완성이 아니라, 정확한 기능을 개발해야 한다.

ISP: 인터페이스 분리 원칙 (Interface segregation principle)

기능을 여러개로 쪼갠 인터페이스 여러 개가 범용 인터페이스 하나보다 낫다.
예) 자동차 인터페이스가 존재한다고 가정해 보자.
- 자동차 인터페이스를 운전 인터페이스, 정비 인터페이스로 두 개로 분리하는 것이 더 낫다.
- 두 개로 분리할 경우, 사용자 클라이언트를 운전자 클라이언트, 정비사 클라이언트로 분리할 수 있다.
- 만약 정비와 관련된 기능을 바꿔야 해서 정비 인터페이스 자체가 변해도 운전자 클라이언트에 영향을 주지 않는다.
인터페이스의 기능이 명확해지고 대체 가능성이 높아진다.

DIP: 의존관계 역전 원칙 (Dependency inversion principle)

중요한 원칙!
프로그래머는 “추상화에 의존해야지, 구체화에 의존하면 안 된다.” 의존성 주입은 이 원칙을 따르는 방법 중 하나다.
쉽게 말해 클라이언트 코드가 구현 클래스에 의존하지 말고, 인터페이스에 의존해야 한다는 뜻이다. (MemberService가 MemberRepository 인터페이스에만 의존해야 한다.)
예) 운전자는 자동차 역할에 대해서 알아야 한다.
역할(Role)에 의존하게 해야 한다는 것과 같은 의미이다.
클라이언트가 인터페이스에 의존해야 유연하게 구현체를 변경할 수 있다.
만약 클라이언트가 구현체에 의존하게 된다면 변경이 아주 어려워진다.

객체지향의 핵심은 다형성이나, 다형성만으로는 OCP,DIP 지키기가 어렵다.

이를 위해 스프링이 개발 한 것이 DI(Dependency Injection) : 의존성 주입

스프링 특징과 개발에 유의할 점

역할과 구현을 분리하여 생각해야한다.
기능 확장은 용이해야하지만, 변경은 어려워야한다.
다형성은 가장 중요한 개념이며, 의존성주입으로 다형성만으로는 지키기 어려운 SOLID원칙을 지킬 수 있다.
인터페이스는 자세하게 쪼개면 쪼갤수록 좋다. (하지만 현실적으로 추상화 비용 존재)
기능 확장할 가능성이 없을 경우엔 구체 클래스를 사용한다.

톰캣 포트 충돌 해결하기 (Several ports (8005, 8080) required by Tomcat v9.0 Server at localhost are already in use.)

유경(shin-6-0) — Thu, 25 May 2023 15:37:04 +0900

톰캣 포트 충돌 해결하기를 검색하면 나오는 수많은 cmd 창 pid 죽이기..

회사 보안사항인지 나는 TASKKILL이 가능하지 않았다.

그러다가 찾은 방법!!!

Windows 키 + R 으로 실행창 키기

taskmgr 입력

javaw.exe 프로세스 종료
작업 관리자 → 세부 정보 → javaw.exe 오른쪽버튼 → 작업 끝내기

이것만으로 간단하게 해결!

[IntelliJ] 인텔리제이 스프링 환경설정 / 라이브러리 / 빌드 방법 / Gradle(그래들) / Thymeleaf(타임리프)

유경(shin-6-0) — Mon, 22 May 2023 11:20:01 +0900

김영한의 스프링 로드맵을 시작했다.

국비교육과 회사에서 사용하는 이클립스(Eclipse)가 아닌 인텔리제이(IntelliJ)를 사용해서 공부하려고 한다.

인텔리제이에 한번 빠지면 편리함 때문에 다시는 이클립스로 돌아가지 못한다는 말이 있어 궁금하다..

나의 경우, 커뮤니티버전이 아닌 유료 버전을 받아서 대학교 이메일 인증을 통해 학생 계정으로 이용한다.

인텔리제이 환경설정(Set up)

https://start.spring.io/

에 접속하여, spring을 시작하자.

프로젝트 빌드 툴 (Gradle / Maven) , 언어(Java / Kotlin / Groovy) , Spring Boot 버전, 프로젝트 기본 명칭, 패키징(Jar / War), 자바버전,Dependency 를 설정할 수 있다.

강의에서는 2.4(?) 버전을 사용하는데, 이미 3.1.0 버전이 나와있고 최신 버전으로 공부하는 것이 좋다고 생각이 들어 3버전을 선택하였다. SNAPSHOT의 경우 아직 미완성 된 버전 이라고 보면 된다.

스프링부트 3.0 이상 부터는, Java버전을 17이상만 지원하므로 LTS인 17 버전을 선택하였다. (자바버전 관련링크)

미처 캡쳐하지 못한 아래 Dependencies에서는 ADD버튼을 누르면 스프링 개발 환경에 필요한 많은 것들을 받을 수 있다.

Spring Web과 Thymeleaf라는 템플릿 엔진을 Dependency로 설정하고 Generate를 누르면 파일이 받아진다.

인텔리제이에서는 새 프로젝트 만들기를 선택하여, build.gradle을 실행하면 gradle이 알아서 설치해준다.

start.spring.io에서 설정 후 빌드한 프로젝트 구조

이게 기본적으로 빌드하면 나오는 구조이다. main에는 실제로 실행할 내용들이 들어가고, test에는 테스트코드와 관련된 소스들이 들어가게 된다.

* .gitignore도 이클립스는 사이트에 들어가서 다운받아 설정했어야 하는데, 알아서 깔린다!

build.gradle

15번째줄 dependencies에 세가지가 있다.

1. thymeleaf

2. starter-web

3. starter-test

1,2의 경우 처음에 지정한 Dependency이고, test는 starter-web을 의존성으로 사용할 경우 기본적으로 사용하는 test인거같다.

여기서 의존성을 더 추가하거나 https://start.spring.io/ 에서 설정했을 경우 갯수가 늘어날 것이다.

실행해보기

src/main/java/hello/hellospring/HelloSpringApplication을 실행해보면

이런 실행 내용이 나오게 된다. 기본적으로 포트는 8080이므로 localhost.8080 에 접속해보면 된다.

이렇게 뜨면 성공! (아직 index페이지가 없어 뜰게 없다)

빌드가 Gradle을 통해서 할 경우, 느려질 수 있기 때문에 Settings에서 Gradle을 찾아 Build and run using, Run test using을 IntelliJ IDEA로 바꿔준다.

그러면 보다 빠르게 실행되는 것을 확인할 수 있다.

라이브러리 살펴보기

start.spring.io에서 설정 후 빌드한 프로젝트 구조

프로젝트 구조 아래에, External Libraries를 보면 엄청나게 많은 라이브러리가 들어있다.

타임리프랑 spring web starter만 가져왔는데.. 이 내용들은 웹 어플리케이션을 쓸 때 모두 필요하기 때문에 가져온 것이다.

오른쪽 gradle을 열어보면, springboot-starter-web과 타임리프가 쓰는 라이브러리들을 볼 수 있다.

*표시는 둘중 다른데서 이미 쓰고있어서 중복이라 땡겨오지 않음

현업은 System.out.println이 아닌 로그로 저장하여, 로그 관리도 해야하고 결과를 확인해야 하므로 log 관련 의존도 필요한데, slf4j와 logback 두종류가 설치되어있었다.

slf4j를 회사와 국비교육 당시 배워서 사용하고있는데, 요즘은 logback을 사용한다고 한다.

Logback은 새로운 라이브러리가 아닌, log4j아키텍쳐 기반으로 설계되었다.
XML설정뿐만 아니라 XML을 대신할 수 있는 그루비(Grooby) 설정을 지원한다.
Logback과 slf4j의 차이는 요기 참고

라이브러리들을 요약하자면 다음과 같다.

spring-boot-starter-thymeleaf: 타임리프 템플릿 엔진(View)

- spring-boot-starter(공통): 스프링 부트 + 스프링 코어 + 로깅

- spring-boot

- spring-core

- spring-boot-starter-logging

- logback, slf4j

테스트 라이브러리

- spring-boot-starter-test

- junit: 테스트 프레임워크

- mockito: 목 라이브러리

- assertj: 테스트 코드를 좀 더 편하게 작성하게 도와주는 라이브러리

- spring-test: 스프링 통합 테스트 지원

타임리프(Thymeleaf)는 템플릿 엔진으로, 뷰 템플릿이라고 부른다.
HTML과 백단의 데이터를 조합하여 결과물을 만들어주는 엔진이라고 보면 된다. (JSP를 대체할!)
그외 다양한 종류와 구분에 따른 템플릿 엔진이 존재한다.
( Groovy / Thymeleaf / Freemarker / Mustache )

*spring-boot-devtools라이브러리를 추가하면, html 파일을 컴파일만 해도 재시작 없이 View파일 변경이 가능하다.

View 환경 설정

main/resource/static/index.html 에 내용을 작성하면, 기본 도메인 입장시 나오는 화면이 설정된다.

기본적으로 resource 안에 Controller를 만들어서 하나 작성하고, view단에서 링크를 설정하면 작동이 가능하다.

이 동작 순서는 다음과 같다.

1. 웹 브라우저에서 링크 요청
2. 내장 톰캣 서버에서 컨트롤러 찾기
3. 컨트롤러에서 리턴 값 반환
4. 뷰 리졸버가 화면을 찾아서 반환값 처리
(스프링 부트의 기본 view 매핑 : resources:template / {ViewName} / .html )
5. 뷰 리졸버에서 템플릿엔진(타임리프)이 view를 매핑하면 이 화면을 찾아서 처리

뷰 리졸버(View Resolver)란

백단에서 가져온 데이터를 View 영역으로 전달할 때, View를 어떤 것을 사용할 지 정할 수 있는데 이를 지정 역할을 하는 것이 View Resolver 이다. View의 템플릿 종류에 따라 뷰 리졸버도 다르게 사용한다. 뷰

타임리프의 경우 Dependency없이 HTML파일로 View를 제작할 수 있어 템플릿 종류 중 가장 인기가 많다.

빌드

빌드(build)는 소스코드로 작성한 프로젝트가 JVM, WAS에서 실행할 수 있도록 만드는 것을 의미한다.

빌드 도구로는 Gradle / Maven이 있다.

빌드 방법은 생각보다 간단하다.

명령프롬프트 (cmd)창을 켜서, 프로젝트 위치로 이동한다.

윈도우의 경우 gradlew.bat build 를 입력한다.

build/libs 에 들어가서 dir를 입력해보면, 내부 파일들을 볼 수 있는데

hello-spring-0.0.1.snapshot.jar파일이 생성된 것을 볼 수 있다.

java -jar hello-spring-0.0.1-SNAPSHOT.jar 입력하면 실행이 된다.

이제 배포를 하고 싶다면 .jar파일만 실행하면 되는것이다!

.jar 와 .war의 차이 (참고)
.jar 는 JRE만 있어도 실행이 가능하지만, .war는 웹서버나 WAS가 있어야 실행 가능
.war는 JSP/Servlet 등의 웹 관련 자원을 포함한다.
springboot는 표준으로 .jar를 채택하고 있다.

그외, 스프링으로 개발 할 때 참고할 문서들 정리

타임리프

스프링 공식 튜토리얼

스프링 부트 2.3.1 매뉴얼

[JAVA] 자바 버전에 대하여 (java 8, 11, 17 버전 차이/17버전 사용이유)

유경(shin-6-0) — Wed, 17 May 2023 10:14:03 +0900

나의 경우, 학원에서는 11버전을 쓰고 회사에서는 8 버전을 쓰고 궁금한 건 17버전이다 (?)

자바 버전은 왜이렇게 많으며, 어떤걸 써야 좋은지 모르겠어서 좀 찾아봤다.

자바 JDK LTS버전

https://www.java.com/releases/

JDK Releases

The release information on this page covers the Java SE releases that were widely distributed or significant to the development of Java. It does not cover patch releases or other one-off releases.

www.java.com

여기서 jdk 버전에 대한 내용을 모두 확인할 수 있다.

출처 : https://www.java.com/releases/

보면 LTS가 붙은게 있고, 아닌게 있다.

LTS는 Long Term Support로, 오랜 기간 지원하는 특별한 버전의 에디션이다. (대부분 LTS버전을 사용)

Java 버전	지원기간
8 version	~ 2030, 12
11 version	~ 2026, 9
17 version	~ 2029, 9

8,11,17 버전만 굉장히 긴 시간 지원하는 것을 알 수 있다. (8버전이 제일 김!)

8버전 이후로 사용하는 것을 무조건 추천하며, 8버전 이후는 업그레이드 된 부분이 조금씩 생겼다고 볼 정도로 8버전과 그 이하 버전은 차이가 크다. 이제 버전별로 알아보자.

Java 8 (Java 1.8)

오라클이 java를 인수한 후 첫번째 LTS 출시 버전
32비트를 지원하는 공식적인 마지막 버전
유료버전(Oracle JDK)과 무료버전(Open JDK)으로 나뉨
LocalDateTime과 같은 새로운 날짜,시간 API제공
Unsigned Integer 계산
람다식 제공
Stream API제공
PermGem 영역 삭제 - 참고 : https://johngrib.github.io/wiki/java8-why-permgen-removed/
Static Link JNI Library 제공

Java 11

Open JDK와 Oracle JDK 통합
Oracle JDK가 구독형 유료모델로 전환
G1 GC가 기본 GC로 설정 (GC : Garbage Collection)
람다 지역변수 var 키워드 사용 가능
컬렉션, 스트림 등에 메소드 추가

Java 17

recode class 키워드 사용 가능
애플 M1 및 이후 프로세서 탑재 제품군에 대한 정식 지원
난수 생성 API 추가
봉인 클래스(Sealed Class) 정식 추가
String 여러줄 사용시 텍스트 블록 기능 사용 가능
NumberFormat,DateTimeFormatter 기능 향상
Stream.toList() 사용 가능

Java 버전 사용비율

출처 : https://www.jetbrains.com/ko-kr/lp/devecosystem-2022/java/

2022년 자료인데, 2021년에 비해 자바 8버전 사용 비율이 줄고, 17버전의 사용 비율이 현저히 증가했다.

Java 8버전이 기간도 제일 길게 지원하고 여전히 사용량 1등인 버전이지만, Java 17버전의 사용량이 급격히 증가한 것을 보면 무시할 수 없는 수치라는 생각이 든다.

Java 17을 채택하는 이유

https://techblog.gccompany.co.kr/%EC%9A%B0%EB%A6%AC%ED%8C%80%EC%9D%B4-jdk-17%EC%9D%84-%EB%8F%84%EC%9E%85%ED%95%9C-%EC%9D%B4%EC%9C%A0-ced2b754cd7

우리팀이 JDK 17을 도입한 이유

안녕하세요, T플랫폼개발실 개발3팀 제이든입니다. 이번 포스팅에서는 저희팀에서 Java 17 버전을 도입하게 된 이유와 개발자 입장에서 주요하다 생각되는 업데이트 내용 및 사용사례를 소개드리

techblog.gccompany.co.kr

여기어때 기술 블로그를 보면, JDK 17을 도입한 이유를 다음과 같이 말하고 있다.

Java 서포트 기간이 길다. (LTS)
신규 버전을 위한 대비용으로 도입. (java 8에서 바로 최신버전을 쓰려고 할 때보다 마이그레이션이 수월할 것으로 예상)
Spring Boot 3.0 부터는 자바 17 이상을 지원

이 중 3번째가 가장 중요한 이유라고 한다.

대부분 스프링 부트를 사용하지 않는 SI, 공공기관 프로젝트에서는 와닿지 않는 사용 이유라고 생각되며 회사에서 왜 1.8버전을 사용하는지 알게 되었다. (SI다님..)

위에 미처 작성하지 못한 많은 업데이트 내용이 있으므로, 초심자라면 1.8버전부터 해서 바뀐점에 대해 숙지해가며 17버전까지 사용해 보는 것이 좋을 것 같다.

나도 다음 개인 프로젝트는 17버전으로 해봐야겠다 :)

[JAVA] JRE 와 JDK의 차이

유경(shin-6-0) — Wed, 17 May 2023 09:20:35 +0900

회사에서 자바 버전 1.8을 쓰고 있다.

난 17버전을 써보고싶은데, jdk를 새로 깔까 하다가 문득 java를 설치하면 둘다 보게되는 JRE와 JDK의 차이가 궁금해졌다.

출처 : https://www.geeksforgeeks.org/difference-between-jdk-and-jre-in-java/

JRE

Java Runtime Environment 의 약자이며, 자바 실행 환경이다. 자바로 만들어진 프로그램이 실행할 수 있는 환경을 제공한다. 하지만, JRE는 컴파일러, 디버거를 지원하지 않기 때문에 JRE만 설치되었을 때에는 개발을 할 순 없다. java로 만들어진 프로그램을 "실행" 할 수만 있다.

출처 : https://www.geeksforgeeks.org/difference-between-jdk-and-jre-in-java/

JDK

Java Development Kit 의 약자이며, 자바 개발 도구이다. 자바로 개발을 할 수 있도록 돕는 툴으로, 컴파일러, javadoc, jar 등이 포함되어 java로 프로그램을 "개발"할 때 사용할 수 있다. (당연히 실행도 가능)

즉, JRE가 JDK에 포함된 것이라고 볼 수 있다. JRE < JDK

참고 https://inpa.tistory.com/entry/JAVA-%E2%98%95-JDK-JRE-JVM-%EA%B0%9C%EB%85%90-%EA%B5%AC%EC%84%B1-%EC%9B%90%EB%A6%AC-%F0%9F%92%AF-%EC%99%84%EB%B2%BD-%EC%B4%9D%EC%A0%95%EB%A6%AC

☕ JDK / JRE / JVM 개념 & 구성 원리 총정리

자바를 처음 설치하면 C:\Program Files\Java 폴더에 아래와 같이 JDK와 JRE 가 각각 설치되는 것을 볼 수 있다. 그렇다면 이 JDK와 JRE의 역할은 무엇인지 그리고 자바 프로그램(JVM)은 어떤식으로 돌아가

inpa.tistory.com

[Eclipse/전자정부프레임워크] svn 버전 표시 안될때

유경(shin-6-0) — Tue, 16 May 2023 08:39:48 +0900

Window - Preferences

General - Appearance - Label Decoration 에서

SVN 체크

[자바의 신 1]클래스 / 메소드 / 컴파일 / 객체

유경(shin-6-0) — Mon, 8 May 2023 22:00:02 +0900

1단원 - 프로그래밍이란 무엇인가

클래스와 메소드

메소드는 행동하는 행위

클래스는 상태와 행위가 같이 존재

클래스의 상태는 클래스의 특성을 결정짓는다.

2단원 - Hello God Of Java

컴파일, 메소드 필수 요소

컴파일은 텍스트로 된 파일을 컴파일러가 컴퓨터가 이해할 수 있는 언어로 변경하여 실행하는 것을 의미한다.

.java 파일을 컴파일하면 .class파일 생성하고 .class파일을 JVM에서 읽어 OS에서 실행한다.

javac 파일명.java : 컴파일하는 명령어

java 파일명 : 컴파일 된 .class를 찾아 실행하는 실행 명령어

메소드 선언시 필수 3가지

1. 리턴타입 2. 메소드이름 3. 메소드 내용

3단원 - 자바를 제대로 알려면 객체가 무엇인지를 알아야 해요

클래스와 객체

클래스명 객체명 = new 생성자

위와 같이 실행하면 객체를 생성한다. 매개변수가 없는 생성자는 "기본생성자" 라고 부른다.

기본생성자는 클래스 컴파일 시 자동 생성된다.

객체의 생성도구는 생성자라고 볼 수 있다.

클래스와 객체의 차이

클래스는 추상개념으로 고유한 특징을 가지고 있는 설계도, 틀 이라고 볼 수 있다. 객체의 field(속성)와 method(행위)로 이루어져 있다.

객체는 클래스의 성격을 가진 실체(개체) 라고 할 수 있다. (실제로 존재하는 것, 추상적으로 생각할 수 있는 것 모두)

클래스와 객체의 차이도 어버버거리면서 면접에서 대답을 못할 것 같다는 생각이 드니까, 정리를 하게된다..

당연히 알고 있어야 하는 개념이니 헷갈리지 말아야겠다.

[AWS Summit Seoul 2023] AWS Summit Seoul 후기 (Day2)

유경(shin-6-0) — Mon, 8 May 2023 18:04:42 +0900

0. AWS Summit 2023 신청

개발바닥 유투브를 구독하여 보고 있던 도중, AWS Summit 컨퍼런스가 열린다는 사실을 알게 되었다.

평일이었지만.. 일단 갈지 말지는 당일에 결정하기로 하고, 신청을 하였다.

회사이름이랑 본인이름, 직위 등등 쓰는 칸이 있었고, 회사 메일을 기입했기 때문에 신청 후 다음과 같은 메일이 왔다.

5월 3일은 산업 업종별 강연, 5월 4일은 기술 주제별 강연이었다.

AWS 강연 표. 확대하면 더 자세히 보여요 :)

나는 5월 2일까지 고민하다가.. 5월 4일에 가기로 했다.

나의 경우 AWS를 사용하여 뭘 해본적이 없기 때문에.. 거의 백지의 상태로 참여하여

입문기술 위주로 들으려고 Day 2( 5/4) 에 참여하였다.

1. 강연 전 네임택 받기 / 이벤트홀과 강연홀

나의 경우 봉은사역에서 내려서 코엑스를 가게 되었고, 파란색 별마당 길을 따라 걷다 보면 1층으로 올라가는 곳이 보인다. 거기서 올라가서 안내 스태프 분을 따라 가다보니 .. 이런 곳을 발견했다

두근두근 AWS 행사장으로 가는길이다.

코엑스가 너무 넓어서 길을 잃지 않도록 조심해야함..

나는 첫째날에 참여하지 않고 둘째날에만 참여했는데, 늦게 참여해서 그런건지 아니면 AWS 멤버십이 아닌 회사여서 그런건지.. 다른 분들과 다른 모양의 네임택을 받았다

행사장 어디를 가든, 네임택은 필수로 체크하기 때문에 목에 걸고 다녀야 한다!

행사장의경우 이벤트홀(B)는 각종 IT회사들이 부스를 차려 이벤트도 하고, 회사의 서비스에 대한 각종 설명을 들어볼 수 있 다! (솔루션 및 제품 상담도 가능하나, 나는 일개 회사의 사원으로.. 그런건 할 수가 없었다)

AWS Summit 2023 이벤트홀 입구

네임택 받고 바로 B홀로 돌진했더니, 내가 생각한 강연장이 아닌 이벤트홀이여서 굉장히 당황함 ㅋㅋㅋ

들어가자마자 왼쪽은 SK쉴더스, 오른쪽은 롯데정보통신이었다.

다시 물어물어 나왔더니, B홀에서 더 가야 강연을 들을 수 있는 곳이 나왔다.

바로이곳! 여기서 각 강연 홀로 이동하면 된다.

왼쪽은 설문 코너 같은거였고, 오른쪽은 이벤트였다.

출퇴근시간, 코로나이후 일상 등등 우리가 일상에서 한번쯤 생각해봤을법한 질문들이었다.

진짜 신기한건 7시출근 4시퇴근이 11시출근 8시퇴근보다 훨씬 많았다는 사실이다.

다들 아침형 인간인건지, 아니면 출퇴근시간대를 피하고싶어서인지 궁금..ㅎㅎ

나도 회사에서 7시 출근이 가능만 하다면 무조건 하고싶다 (완전 아침형인간 그자체)

오른쪽 이벤트는 AWS Summit에 몇번째 참가인지 물어보고, 그에 맞는 공을 뽑아 내용물을 주는거였다.

난 사실 1번째였지만.. 1번째가 비워져있어서 2번째라고 하고 받았다

AWS 스티커 두장과, 오트밀 과자가 들어있었다.

2. 본격 강연

2-1. 가격은 저렴, 성능은 최대로! 달라진 Amazon EC2 알아보기

내가 처음 들은 강연은 Amazon EC2 알아보기 였다.

AWS 서비스에대해 아는게 거의 없다시피 하기 때문에 입문 강의중에서 선택했다.

Amazon EC2란?

Amazon Elastic Compute Cloud 의 줄임말으로, AWS 클라우드에서 확장이 가능한 컴퓨팅 용량을 제공하는 서비스이다.

물리적인 서버를 두고 애플리케이션을 배포할 필요 없이, 가상 서버를 구축하여 사용량 만큼 금액을 내면 되는 편리한 서비스라고 볼 수 있다. ~~가벼운 경량 애플리케이션이나, 초기 스타트업 같은 경우에 사용량 만큼만 요금을 지불하면 되기 때문에 합리적인 선택이라고 볼 수 있다.~~

EC2는 카테고리, 성능, 옵션 등을 선택할 수 있는데 아래의 표 내용에서 선택할 수 있다.

카테고리	기능	옵션
M : 범용 T : 버스팅 가능 C : 컴퓨팅 집약적 R : 메모리 집약적 I : 스토리지(높은 I/O) D : 고밀도 스토리지 P : GPU 컴퓨팅 G : 그래픽 집약적	프로세서 선택 g: AWS Graviton i : Intel a : AMD 빠른프로세서 높은 메모리 공간 인스턴스 스토리지 가속 컴퓨팅 네트워킹 베어메탈 크기	Elastic Block Store(EBS) Elastic Fabric Adapter Elastic Inference Elastic Graphics Linux, Unix, Windows, macOS

이렇게나 인스턴스에 대한 선택권이 많다.. 이 모두를 조합하면 600가지 이상의 인스턴스 유형이 나오며,

웬만한 비즈니스 요구사항에는 적합한 조건으로 선택할 수 있다.

인스턴스를 표기하는 방법은 다음과 같다.

C5d.2xlarge

C : 인스턴스 패밀리

5 : 인스턴스 세대

d : 추가기능

2xlarge : 인스턴스 크기(size)

인스턴스 패밀리의 경우 위의 표에 있는 카테고리 중에 하나이다. (인스턴스의 타입을 의미)

인스턴스 세대는 말그대로 인스턴스의 세대를 의미한다. 아마존 EC2의 경우 무조건 "최신세대" 가 가성비가 좋다.

추가기능의 경우, 표의 기능 중에 하나를 의미하게 되는데 종류는 다음과 같다.

d : 로컬 NVMe SSD 스토리지

e : 동급 저렴한 메모리

n : 네트워크 특화

z : 동급 최강 CPU

g: AWS Graviton
i : Intel
a : AMD

Mac : 맥 인스턴스

인스턴스 크기는 말그대로 크기를 의미하는 것으로, 티셔츠의 개념과 유사하다고 한다.

AWS Nitro 시스템

Nitro 시스템은 클라우드에서 전용 하드웨어 및 경량 하이퍼바이저의 조합으로 강력한 보안, 성능 및 혁신을 제공한다.

하드웨어에 Nitro를 적용하여 고성능, 보안이 중요한 프로그램에서 사용하기 적합하다.

Card : vpc네트워킹

보안칩 : 가상화 , 보안

하이퍼바이저 : 메모리 및 cpu할당관리. 베어메탈 수준의 성능을 제공

* 15%이상의 성능 향상을 보임

그외에도최신 인스턴스 모델에 대한 설명 등 을 들었다.

삼성전자의 x86 -> ARM 기반 Graviton 으로 전환 사례

EKS+EC2(x86)모델, Java 8, Spring, Alpine Linux를 사용하고 있었던 삼성전자에서 Graviton (AWS에서 개발) 을 적용한 사례에 대해 들을 수 있었다.

도입한 이유는, 다음과 같다.

1. 비용절감

2. ARM 기반 프로세서 약진

3. ESG경영 동참(Graviton은 저전력 인스턴스)

4. 같은 가격이면 최신 EC2를 사용하는것이 가성비

등등..

어플리케이션 용 EC2를 x86에서 ARM으로 바꾸려면 해야할 단계들이 많았다.

1. 호환성 확인 - 수동 소프트웨어의 경우 설치 내용을 확인해야하고, 자동 소프트웨어는 설치 시 알아서 체크해준다.

2. 멀티빌드 - 도커 buildx 사용하면 x86과 ARM기반을 한번에 빌드할 수 있다.
QEMU emulator를 이용한다. 이미지 빌드 후 ECR에 업로드한다. 하드웨어와 상관 없이 다양한 플랫폼을 제공한다.
3. 트러블 슈팅 - open JDK의 버전을 up, Alpine Linux의 버전도 최신으로 up. 하지만 오류가 또 발생했다고 한다. jdk 버그 리포트에 따르면 ARM64와 관련된 것이 많았다고 하며, k8s POD Dependency를 최신으로 업데이트 한다.

이로 인해 얻을 수 있는 효과는, API 서버 응답 속도가 개선되고, 인스턴스 비용이 15%정도 절감되었다고 한다.

2-2. AWS의 개발자를 위한 신규 서비스 소개 - Amazon CodeCatalyst & Amazon CodeWhisperer

두번째 강연은 aws의 솔루션 서비스에 대한 소개였다.

개발자들이 "개발" 자체에 몰입하기 위해 편리성을 추구하는 솔루션들이라고 보면 된다.

Amazon CodeCatalyst

1. 블루프린트

프로젝트에 필요한 통합 도구 몇분만에 설정 가능 / AWS 모범 사례 사용하여 바로 배포, CI·CD 파이프라인과 샘플코드 제공 / 기존 프로젝트를 가져와 다양한 3rd Party 도구들로 교체 가능

2. 워크플로우

Visual Editor 통한 시각적 파이프라인 제공, yaml코드로 구성 가능 / AWS관리형 컴퓨트 사용한 유연한 동작 / 테스트, 리포트, CI·CD, 인프라 등 구축에 필요한 구성 자동화 하여 파이프라인 생성 가속

등의 기능을 가지고 있는 어플리케이션 관리,배포 를 위한 통합 솔루션

Amazon Code Wisperer

ML(머신러닝) 기반 개발자도구로, 주석과 주변 코드를 기반으로 코드를 추천해주는 개발자의 협업 도우미IDE에 코드를 작성하면 자동으로 Code Wisperer에 전송된다. 기능1. 코드 제안 - 1줄부터 완전한 함수까지, 개발자의 코드를 분석하여 코드 스타일대로 적용하고, 테스트코드도 작성 가능2. AWS API의 경우 더 강력한 기능 제공3. 책임감 있는 AI/ML (일자리를 위협하지 않는.. 뭐 이런 뜻인듯)

~~세상이 정말 많이 발전했다는 생각이 들었다.. 개발자의 코드 스타일까지 분석해준다니.~~

~~코드 위스퍼러의 경우 개인 개발자에게 무료로 제공되고 있으니, 사용법을 검색해서 사용해보면 너무 좋을 것 같다.~~

2-3. 성공적인 AWS RDS 마이그레이션을 위한 여정과 필수 고려사항

이번 강연의 경우 ETEVERS 라는 회사에서 설명하게 되었다. 이번에는 대기를 잘해서 앞자리에 앉았다 ㅎㅎ

~~에티버스라는 그룹을 몰랐는데, 알고보니 천명이 다되는 큰 IT회사이고, 영우디지탈 에서 이름을 바꿨다고 한다.~~

1. Amazon의 DB 서비스

Amazon RDS와 Aurora를 비교해주셨다.

Amazon RDS의 경우 RDBMS들에 대해 지원을 한다. (MySQL, PostgreSQL, MariaDB, MSSQL, Oracle..)

스토리지의 확장성은 64TiB까지 가능하다고 한다. (mssql은 16TiB)

가격은 인스턴스의 유형과 스토리지의 볼륨 크기에 따라 결정된다.

Aurora의 경우 MySQL, PostgreSQL에 대해 지원하고, Amazon RDS에 비해 더좋은 성능과 안정성을 보장한다.

스토리지 확장성도 128 TiB까지 가능하다.

가격은 인스턴스 유형과 스토리지의 실사용크기, IO요청에 따라 결정된다.

이렇게만 봤을 때 Amazon RDS는 할당된 DB크기만큼 요금을 책정하기 때문에 설계를 잘 해야하지만, Aurora는 DB의 실사용크기에 따라 가격을 책정하기 때문에 더 합리적이라고 볼 수 있다.

Amazon RDS CUSTOM for Oracle의 경우 추가 OS와 DB의 커스텀 설정이 필요한 경우에 사용할 수 있는 옵션이다.

2. DB Migration Step

마이그레이션이란, DB를 옮기는 것을 말한다. DB에서 DB로 옮기는 것도, 코드로 작성한 클래스를 DB 테이블로 옮기는 것도 모두 포함된다.

여기서는 기존의 온프레미스 DB -> Amazon RDS로의 마이그레이션을 의미한다.

1. Assess

- 소스 DB 환경에 대한 분석 (인프라환경, 데이터용량·종류, 연계환경, 요구 조건, 영향, 리스크)

- 타겟 AWS DB 환경 분석

* 가장 중요한 단계

2. Plan

- 데이터 용량, 이관 기간, 다운타임, 실행 난이도 등을 전체적으로 고려하여 계획을 수립한다.

(이관 전략·기술, 테스트·검증 계획, 이행 계획, 롤백 계획)

3. Test

- 실제 데이터로 이관 테스트를 진행한다. (검증, 시간 측정, 튜닝 요소 점검, 2~3회 테스트 권장)

4. Execute

- 계획에 맞추어 DB 이관을 진행한다. (이관 진행, 상황 모니터링, 검증 진행, 시스템 오픈, 모니터링, 운영 모드 진입)

3. DB Migration시 고려사항

백업(필수!) , 호환성 점검 , 이관방법 제약사항 숙지, 라이선스 As-Is -> To-be 변화 준비 , 3rd파티 SW이관 대체방안 마련, 충분한 시간 확보

4. DB Migration 툴

1. OS COMMAND - OS, DB 버전이 동일하고 데이터 크기가 크지 않은 경우 쉽게 이관이 가능한 방법

장점 : 간단한 OS명령 (scp, sftp) 만 사용한 이전 가능, 쉬운 사용법

단점 : 파일 복사에 필요한 서비스 중단 시간은 파일 용량에 비례, OS/플랫폼·DB버전·설정 등의 환경이 일치해야함,

중간에 끊김을 대비해야함

2. DBMS PROVIDED TOOLS - DBMS자체에서 제공해주는 도구로 버전이 다른 환경으로 이관이 가능한 방법

장점 : OS/플랫폼·DB버전이 다른 환경에서 이전 가능, 특정 대상 테이블만 선별하여 이전 가능

단점 : 시간이 많이 소요되며 이에 따른 서비스 중단 필요 , 타 DB로의 이전은 사용 불가, 버전차이 심하면 실패확률 증가

ex ) Oracle Data Dump / MySQL Dump

3. CHANGE DATA CAPTURE TOOLS - CDC도구는 동일 또는 이기종 DB간 실시간 복제 기능 제공

장점 : OS/플랫폼·DB 달라도 이전 가능, 대용량 이전 가능, 제품에따라 선별 이전 가능, 실시간에 가까운 Ongoing복제 가능(다운타임 최소화)

단점 : 상용 제품일 경우 도입 비용 발생, 제품별로 지원되지 않는 DB 있음

ex ) Oracle golden gate / Shareplex Quest / AWS Database Migration Service

5. DB Migration 케이스 (예시)

1. 온프레미스 MSSQL -> AWS MySQL RDS (AWS도구-SCT,DMS 사용)

AWS 스키마 툴을 사용하여 이전. 이기종 DB 전환이므로 쿼리에 대한 튜닝과 로직 수정 진행

MSSQL의 경우 'DBO.테이블명' 이런식으로 쓰이기 때문에 테이블명에 DBO를 일일이 빼주어야 한다.

프로시저의 경우 메뉴얼 작업이 필요했다.

2. 온프레미스 Oracle -> AWS Oracle RDS (CDC 도구 사용)

버전을 12->19로 업데이트 하였고, GoldenGate 허브를 이용하였다. RDS를 없애고 HA로 가다보니 Active 인스턴스는 기존 RAC환경의 모든 처리를 처리할 수 있어야 하고, 로직에서도 타깃 DB에 대한 수정이 필요했다.

버전 업그레이드에 따른 쿼리 튜닝이 필요했으며, CDC도구가 만능이 아니기에 오류 발생시 수작업으로 수정해야 했다.

이 강연의 경우 AWS에서 다루고 있는 DB에 대해서도 알게 되었고, 이관 방법이나 주의사항을 직접 경험해보고 사례를 들어 설명해주어 이해가 쏙쏙 됐다. DB이관은 아무래도 인프라 담당자가 하게 될 것 같지만, 유익한 시간이었다.

3. 점심

첫 강연을 들으러 갔을때, Lunch라고 써있는 팔찌를 주셨다. 첫 강연이 끝난 후에 자리에 앉아있으면 알아서 나눠주신다.

팔찌를 다시 가져가면서 런치키트(도시락)을 나누어 주었다.

Day 2 Lunch Kit

뭔가 학회에서 나눠줄 것 같은 도시락이다. 샌드위치가 3종류나 있어서 대식가도 배부를 수 밖에 없는 양이다..

하지만 전형적인 한국인 입맛을 가진 나에겐 샐러드 빼고는 다 느끼했다 ㅠ

그래도 그저 컨퍼런스를 들으러 신청한 사람들에게 모두 빠짐없이 이정도의 식사를 대접하다니.. 이게 바로 미쿡 대기업인가 싶었다.

4. 이벤트홀 - 부스

처음에 명찰을 나눠주고 다짜고짜 들어갔던 이벤트홀에 강연 3개만 듣고 다시 갔다.

갔더니 각종 이벤트로,, 부스별로 회사의 에코백, 스티커 등등을 나눠주고 있었다.

나는 처음에 뭣도 모르고 있는대로 다 받아서 가방을 5개나 받아버렸다..

어쩌다가 부스에서 네이버페이 만원권이 당첨됐는데, 월요일에 문자로 발송해준다고했는데 6시인데도 안왔다 흑

안주려나,,?

베라 아이스크림도주고,, 소프트콘도 주고 ,, 별별거 다 나눠줘서 재밌었다

aws에서 주는 친환경 커피박 컵과 받은 스티커들

개인적으로 이 컵이 제일 이쁘고 맘에든다 :) ㅋㅋ

혼자 갔을때도 이렇게 재밌었는데, 다음 해에는 개발자 동료와 함께 가고싶다는 생각을 했다 !

나의 비루한 개발자 인맥.. 어떻게든 더 만들어내고말겠어,,

마지막은 모르는사람에게 찍어달라고 한 나 로 마무리 !

[SQLD] 비전공 현업자 1일 벼락치기 합격 후기

유경(shin-6-0) — Sun, 23 Apr 2023 21:08:40 +0900

응시이유

시험은 3월 19일이었고, 정보처리기사를 보기 전에 잠깐 맛보기 공부를 하자는 마음으로 신청하여 응시하였다.

실제로 취업을 해서 개인 약속이 많았고, 공부를 전혀 하지 못했다..

SQLP를 따고 싶은데, 그전에 워밍업 한다는 마음으로 응시하였다.

체감난이도

SI에 있으면서 쿼리 좀 만져봤다 하는 분들, 국비 학원 다닐때 sql 제대로 들었다 하는 사람은 절대 떨어질 수 없는 시험이다. 내가 쉬운 때에 봐서 그런진 모르겠지만.. (난이도모름) 개인적으로 진짜 사용하는 내용들이 많이 나와서 재밌게 풀었던 것 같다. 또 대부분 객관식이기 때문에 찍을수도 있고? (객관식45문제 + 주관식 5문제 입니다)

현업 2달이 지난 시점에 시험을 봤고 결과는 합격이었다!

준비 꿀팁

sql에 자신이 없는 사람은, 기본서를 하나 보기를 권장한다.

하지만 그게 아니라 국비나 부트캠프에서 sql부분 제대로 들었고,

쿼리 몇개 작성 해보신 분들은 노랑이 책을 구매해서 하기를 권장한다.

노랑이 책은 이거고, 기출 문제가 굉~장히 많다.

이건 정공법이고..

나의 개인적인 꿀팁은

https://www.youtube.com/c/SQL%EC%A0%84%EB%AC%B8%EA%B0%80%EC%A0%95%EB%AF%B8%EB%82%98

SQL전문가 정미나

안녕하세요, SQL전문가 정미나입니다. 이 채널의 궁극적인 목표는 전공자 포함 Database에 관심이 있는 초보자분들께 조금이나마 도움을 드리는 것입니다. 지금은 어떨지 모르겠지만 제가 학부생

www.youtube.com

SQL전문가 정미나 유투브를 강추한다.

문제를 하나하나 풀이하는데 , 보면서 아는문제면 그냥 넘기고 모르면 들으면 된다.

전날에 이분 영상 20개정도 보고 갔더니 노랭이책 안풀고 합격함Vv

[정보처리기사 실기] 2023 1회 정보처리기사 실기 시험 후기

유경(shin-6-0) — Sun, 23 Apr 2023 20:55:07 +0900

이번 시험의 특징

2022년과 다르게 코딩문제 많음 + 기출문제 4개 출제 + 약술형없음 => 역대급 쉬웠던 시험

아마도 기출문제를 생각하고 공부하셨던 분들은 대부분 붙으셨을걸로 예상된다.

나는 실제로 시험 당일 아침까지 기출문제를 보면서 '아 다음에 또봐야겠다' 라고 느꼈다.

(수제비 Final 실전 모의고사 1~ 10회 전부 4-50점, 기출 40- 55점 사이였음..)

암기가 택도없이 부족하다는 생각이 들었다..

하지만 시험을 풀 당시에는 ?? 아예 다른 시험의 느낌이었다.

기출이 되게많고.. 코딩 문제가 많아서 현업자와 전공자에게 굉장히 유리했을것으로 보이는 시험이었다.

나는 코딩문제 \n을 못보고 개행을 안해서 틀리거나, 단답은 정답이 기억이 안나는 등 ..

정말 말도안되는 실수들을 했다 ㅠ

1문제당 5점이고, 1문제 안에 3개나 2개로 나눠진 문제의 경우 부분점수를 준다고 하는데

1문제를 2/3개 맞추고, 1문제를 1/3 맞추면.. 이건 5점을 받으려나? 실제로 합격자가 많을 것 같아 부분점수로 합격자를 조절할 거같다는 생각이 들어 굉장히 불안하다. (확실히 맞은게 11개임.. )

이런 천운을 놓치다니..... 나란 바보...!

하나 확실한 것은 "약술형" 문제는 이제 더이상 잘 안나온다는 점이다.

또한, 한가지의 특징을 좀 자세히 알아야 단답형을 쓸 수 있다. (키워드 한두개만 외워서는 쓸 수 없도록 헷갈리게 낸다)

C,Java의 상속 / 부모 자식 객체 / for문계산 등은 무조건 나오는 필수항목이라고 볼 수 있다.

내가 2회차를 보게 된다면, 또 이 글을 보고 정보처리기사 실기를 준비하는 사람이 있다면

단답형+코딩문제+sql문제로 준비하는 것이 좋겠다.

https://cafe.naver.com/soojebi

수제비- IT 커뮤니티 (정보처리기사... : 네이버 카페

수제비-수험생 입장에서 제대로 쓴 비법서(정보처리기사, 정보처리산업기사, 빅데이터 분석기사, ADsP 등)

cafe.naver.com

정보처리기사 질문 및 답안 맞춰보는것은 무조건 수제비가 최고다.

수제비 카페를 확인해보자

[kh정보교육원 72일차] jQuery - event / traversing / css

유경(shin-6-0) — Sun, 16 Apr 2023 11:24:03 +0900

event

mouseover | mouseout : 자식 객체에 진입시, 탈출시에도 이벤트 발생

mouseenter | mouseleave : 자식개체에 진입시, 탈출(출차)시에는 이벤트 발생하지 않음

div 로 outer와 inner를 만들어 비교해보자.

    <div class="outer">
        <div class="inner"></div>
    </div>

.outer{
    width:200px;
    height: 200px;
    background-color: orange;
    padding: 50px;
    margin: 20px auto;
}
.inner{
    width: 100%;
    height: 100%;
    background-color: tomato;
}

        $(".outer")
         .mouseover((e)=>{
             console.log("mouseover",e.target)
         })
         .mouseout((e)=>{
             console.log("mouseout",e.target)
         })

내부요소인 inner에도 반응을 한다.

        $(".outer")
        // .mouseenter((e)=>{
        //     console.log("mouseenter",e.target);
        // })
        // .mouseleave((e)=>{
        //     console.log("mouseleave",e.target);
        // })
        .hover((e)=>{
            console.log("mouseenter",e.target);
        },((e)=>{
            console.log("mouseleave",e.target);
        }))

위 주석코드와 아래 hover코드는 같다.

mouseenter와 mouseleave는 내부요소에 반응하지 않는다.

on 핸들러 바인딩용

off 핸들러 바인딩용

바인딩(binding) : 요소에 행위(ex. click)에 대한 이벤트 핸들러를 바인딩하는 다양한 방법

    $(btn1).on('click',(e)=>{
        alert('감사합니다.');

        //e.target -> #btn1
        $(e.target).off('click'); //click핸들러 제거
    });

    $(btn2).one('click',(e)=>{
        alert('처음이자 마지막');
    });

off를 하면 핸들러 바인딩이 끝난다.

.on() 메소드의 특징

선택한 요소에 어떤 타입의 이벤트라도 연결할 수 있다.
하나의 이벤트 핸들러에 여러개의 이벤트를 동시에 연결할 수 있다.
선택한 요소에 여러개의 이벤트 핸들러와 여러개의 이벤트를 같이 연결할 수 있다.
사용자 지정 이벤트(custom event)를 위해 이벤트 핸들러로 데이터를 넘길 수 있다.
차후에 다루게 될 요소를 이벤트에 바인딩 할 수 있다.

이런 특징을 가지고 있다. 수업때 짧게 넘어갔으므로 사용하고싶다면 다음 링크를 보자

https://byul91oh.tistory.com/429

글씨가 초과하면 제출이 불가능한 입력폼 만들기

    <form action="javascript:alert('제출성공');" name="tweeterFrm">
        <fieldset>
            <legend>트위터</legend>
            <p>
                <span id="counter"></span> / <span id="max-counter"></span>
            </p>
            <textarea name="content" id="content" cols="30" rows="10"></textarea>
            <br>
            <input type="submit" value="제출">
            <button>제출</button>
        </fieldset>
    </form>

 const MAX_COUNTER=30; //최대길이설정
    // document.querySelector("#counter").innerHTML=0;
    // document.querySelector("#max-counter").innerHTML=MAX_COUNTER;
    $(counter).html(0);
    $("#max-counter").html(MAX_COUNTER);

    $(content).keyup((e)=>{
        const {target:{value}}=e; //value를 타겟이자, 변수로 지정
        console.log(value);//content의 값(value)을 받아온다.
        const len=value.length;
        const $counter = $(counter);
        // const $submit = $("form:submit"); //input[type=submit], button[type=submit]
        const $submit=$(":submit",document.tweeterFrm);//tweeterFrm에 대해 submit을 실행하는 제이쿼리
        $counter.html(len);//길이 확인

        if(len<=MAX_COUNTER){ //만약 길이가 최대길이(30)보다 작은경우
            $counter.css('color',"initial"); //초기 색상으로 돌리라는 뜻
            $submit.prop("disabled",false); //prop불가능을 해제
        }else{
            $counter.css('color',"red"); //빨간색으로 길이가 초과했음을 알림
            $submit.prop("disabled",true); //prop불가능 설정 (제출 불가)
        }
    });

코드에 대한 설명은 코드 안에 작성하였다.

제출버튼 클릭시 제출 성공이 뜬다.

traversing

기준요소가 여러개일 때 선택하기에 좋기 때문에 사용한다.

부모방향 요소 설정

parent([selector]) : 직계부모요소
parents([selector]) : 모든 조상요소
parentsUtil(selector) : 특정 부모요소 전까지 모든 조상요소

자식방향 요소 설정

childern([selector]) : 선택자와 일치하는 직계 자식요소
find(selector) : 선택자와 일치하는 모든 후손요소

형제방향 요소 설정

siblings([selector]) : 선택자와 일치하는 모든 형제요소
next([selector]) : 선택자와 일치하는 다음 형제요소 하나
nextAll([selector]) : 선택자와 일치하는 모든 다음 형제요소
nextUntil(selector) : 선택자와 일치하는 다음 형제요소의 전까지의 형제요소
prev([selector]) : 선택자와 일치하는 이전 형제요소 하나
prevAll([selector]) : 선택자와 일치하는 모든 이전 형제요소
prevUntil(selector) : 선택자와 일치하는 이전 형제요소의 전까지 해당하는 형제요소

부모방향 요소 설정

    <div class="wrap">
        <div class="type">div.type (great-grandparent)
            <ul>ul (grandparent)
                <li>li (direct parent)
                    <span>span1</span>
                </li>
                <li>li (direct parent)
                    <span>span2</span>
                </li>
            </ul>
        </div>
    
        <div class="type">div.type (grandparent)
            <p>p (direct parent)
                <span>span3</span>
            </p>
        </div>
    </div>

      .wrap * {
        border: 1px solid lightgray;
        display: block;
        padding: 5px;
        margin: 15px;
        color: gray;
      }
      .type {
        width: 500px;
      }

const style={
            "color" : "red",
            "border" : "2px solid red"
        };

        $(btn1).on('click',(e)=>{
            console.log(
                $("span")
                    // .parent()//span 태그의 부모를 가져옴
                    // .css(style)
                    // .parents() //span태그의 모든부모를 가져옴
                    // .parents("div") //모든 조상중에 선택
                    .parentsUntil("div.type")//div.type 전까지만 조상요소 전부 호출
                    .css(style)
            );
        });

버튼을 클릭하지 않았을 때 / .parent() 선택시

버튼을 클릭하지 않았을 때 원래와 비교해보면, .parent()는 span의 바로 윗단계인 p를 선택하는것을 알 수 있다.

.parents() / .parents("div") / .parentsUntil("div.type")

.parents()는 span(본인)을 제외한 모든 부모요소를 선택하고

.parents("div")는 모든 조상중에 div를 가지는 요소를 선택한다.

.parentsUntil("div.type)은 div.type전까지의 모든 요소를 선택한다.

자식방향 요소 설정

        $(btn2).on("click",(e)=>{
            console.log(
                $(".wrap")
                    // .children().children()
                    // .children(":has(li)")
                    .find("span")
                    .css(style)
            );
        });

.childern().children() / .children(":has(li)") / .find("span")

.children().children() 은 wrap을 기준으로 자식의 자식인 ul, p가 선택되었다.

.children(":has(li)") 는 wrap중에서 li를 가지는 자식요소가 선택되었다.

.find("span") 은 자식요소중에서 span을 가지는 모든 자식 요소가 선택되었다.

형제방향 요소설정

          <div class="wrap">
            <p>p</p>
            <span>span</span>
            <h1>h1</h1>
            <h2 id="start">h2</h2>
            <h3>h3</h3>
            <h4>h4</h4>
            <p>p</p>
        </div>
    <button id="btn3">형제방향</button>

    $(btn3).on('click',(e)=>{
        console.log(
            $("#start")
                // .siblings() h2빼고 다 선택
                // .siblings(":header") //header 태그인 h1 ~ h4 중 본인제외하고 선택
                // .next() //h3
                // .next("p") //다음형제요소가 p가아니기때문에 선택 x
                // .nextAll() //h2 이후 모두
                // .nextAll("h3,h4") //다음형제요소중 h3, h4만
                .nextUntil("p") //다음 형제요소중 p태그 전까지만
                .css(style)
        )
    });

기본 / .siblings() / .siblings(":header")

.next() / .next("p") / .nextAll()

.nextAll("h3,h4") / .nextUntil("p")

형제요소 설명은 코드 안 주석 참고

실습문제

li2-2, li2-3 선택하기

      <div>
        <div class="type test">
            div.test
            <ul>
                ul1
                <li>li1-1</li>
                <li>
                    li1-2
                    <ul>
                        ul2
                        <li>li2-1</li>
                        <li>li2-2</li>
                        <li>
                            li2-3
                            <ul>
                                ul3
                                <li>
                                    li3
                                    <span id="fromMe">fromMe</span>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
      </div>

1. .wrap부터 시작

    $(btn4).on('click', (e)=>{
        console.log(
            $(".wrap")
                .children()
                .children()
                .children()
                .children(":has(li)")
                .children("li")
                .nextAll()
                .css(style)
        )
    });

2. span#fromMe부터 시작

    $(btn4_1).on('click',(e)=>{
        console.log(
            $("#fromMe")
                .parent()
                .parent()
                .parent()
                .prev("li")
                .prev("li")
                .nextAll("li")
                .css(style)
        )
    })

기본 / .wrap에서시작 / span#fromMe 에서 시작

css

display : none 효과 처리

show(speed, easing, callbackFunction)
hide(speed, easing, callbackFunction)
toggle(speed, easing, callbackFunction)

  <div>
    <img id="river1" src="../sample/image/river1.PNG" alt="">
  </div>

  $(btn1).click(() => {
    $(river1).show(1000, 'easeOutBounce', () => {
      console.log('show complete!');
    });
  });
  $(btn2).click(() => {
    $(river1).hide(1000, 'easeOutBounce', () => {
      console.log('hide complete!');
    });
  });
  $(btn3).click(() => {
    $(river1).toggle();
  });

show를 누르면 보이고, hide를 누르면 숨겨진다.

toggle을 누르면 보였다 안보였다가 반복한다.

slideDown
slideUp
silideToggle

  <div class="wrapper">
    <div class="menu">HTML</div>
    <p class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur debitis, voluptatibus, nemo eum doloremque molestiae vitae, aut inventore alias nihil officiis veniam enim! Neque nobis, rem ex cupiditate fugiat quisquam!</p>
    <div class="menu">CSS</div>
    <p class="content">Nam maiores repellat minima laudantium ipsum ratione! Consequuntur harum quidem facilis animi nesciunt labore reiciendis eum aspernatur mollitia molestias perspiciatis ipsam, iste natus atque asperiores voluptatem veniam voluptas enim beatae?</p>
    <div class="menu">JAVASCRIPT</div>
    <p class="content">Adipisci in dolorum inventore quia excepturi pariatur nihil iste ratione nulla enim debitis neque, ut cupiditate dicta repudiandae maiores expedita distinctio accusantium minima natus ex itaque labore quas? Vero, magni.</p>
    <div class="menu">JQUERY</div>
    <p class="content">Sed quae quaerat temporibus expedita ducimus blanditiis, aliquid est, voluptatem harum ut recusandae quia ad assumenda odit, saepe excepturi iure. Illum vitae dignissimos cumque repellendus quidem commodi facere deserunt mollitia?</p>
    <div class="menu">HTML5 API</div>
    <p class="content">Debitis, rem quo eaque ipsum obcaecati quisquam consequatur nobis, est beatae optio qui perspiciatis ea alias quis eum maiores amet praesentium ratione voluptas quas. Corrupti rerum facere obcaecati quisquam natus.</p>
  </div>

  .menu {
    width: 300px;
    height: 30px;
    line-height: 30px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid lightgreen;
    cursor: pointer;
    padding: 3px;
  }
  .content {
    width: 300px;
    margin: 3px 0;
    padding: 3px;
    border: 1px solid gray;
    border-radius: 10px;
    display: none;
  }

  $(".menu").click((e) => {
    // $(e.target).next()
      // .slideDown(5000);
      // .slideUp(5000);
      // .slideToggle();

    // @실습문제 : 아코디언 효과만들기
    // $(e.target).next()
    //   .slideToggle()
    //   .siblings(".content")
    //   .slideUp()

    $(e.target).next().slideToggle();
    $("p.content").not($(e.target).next()).slideUp();

  });

클릭시 1개씩 열렸다가 닫히는 구조이다. (토글)

열린 상태로 다른 버튼을 클릭하면, 열렸던 것이 닫히고 클릭한 것이 열린다.

Opacity / Display

FadeIn

FadeOut

FadeToggle

  <button id="btn4">fadeIn</button>
  <button id="btn5">fadeOut</button>
  <button id="btn6">fadeToggle</button>
  <div>
    <img id="river2" src="../sample/image/river2.PNG" alt="">
  </div>

  img {
    width: 300px;
    margin: 10px 0;
  }

  $(btn4).click(() => {
    $(river2).fadeIn(1000);
  });
  $(btn5).click(() => {
    $(river2).fadeOut(1000);
  });
  $(btn6).click(() => {
    $(river2).fadeToggle(1000);
  });

사진이 사라질경우 아래 사진이 올라오는 것임!

  <div class="img-wrapper">
    <img id="forest1" src="../sample/image/forest1.PNG" alt="">
  </div>

  .img-wrapper {
    width: 300px;
    height: 200px;
    overflow: hidden;
  }
  .img-wrapper img {
    opacity: .7;
    margin: 0;
    transition-duration: .1s;
  }

  $(forest1).hover((e) => {
    // mouseenter
    $(e.target)
      .fadeTo(100, 1)
      .css('transform', 'scale(1.2)');


  }, (e) => {
    // mouseleave
    $(e.target)
      .fadeTo(100, .7)
      .css('transform', 'scale(1)');
  });

도형 움직이게 만들기(animate)

   <div class="box"></div>

  .box {
    width: 200px;
    height: 200px;
    background-color: tomato;
    border: 2px solid #000;
    margin: 10px 0;
    position: relative;
  }

  $(btn7).click(() => {
    const style = {
      "width" : "400px",
      "height" : "400px",
      "top" : "200px",
      "border-radius" : "50%",
      "background-color" : "yellow"
    };
    // animate(styleProps, duration, easing, callback)
    $(".box").animate(style, 1000, 'swing', () => {
      $(".box").animate({
        "width" : "300px",
        "height" : "300px",
        "top" : "0",
        "background-color" : "#369c7a"
      }, 1000, 'easeOutBounce');
    });
  });

[kh정보교육원 71일차] jQuery - 제이쿼리 설치 / selector / atter / prop / filter

유경(shin-6-0) — Sun, 16 Apr 2023 10:00:45 +0900

https://jquery.com/

여기서 바로 다운로드 해주면 되는데, jQuery의 특징중 하나로

브라우저 호환이 잘 된다는 점이 있다!

이 장점때문에 실제로 많이 쓰였다고 하는데, 현재는 React가 대세라고 한다.

다운로드시에는 production ver가 아닌 development version을 받아준다.

production버전은 라이트해서 개발자에겐 맞지 않다고 한다.

slim버전은 ajax기능 (비동기처리) 없으므로 X!!

나는 uncompressed버전을 받았다.

파일이뜨면 오른쪽마우스버튼 - 저장!

    <script src="js/jquery-3.6.0.js"></script>

head안에 이렇게 써주면 로드 성공!

jQuery

기본선택자

    <div class="wrapper">
        <p id="p1" class="group1">안녕1</p>
        <p id="p2" class="group1" title="안녕2">안녕2</p>
        <p id="p3" class="group2">안녕3</p>
        <p id="p4" class="group2" title="안녕4">안녕4</p>
        <p id="p5" class="group1 group2">안녕5</p>
    </div>
    <button id="btn1">기본선택자</button>

    btn1.addEventListener('click',()=>{
        //const $el=$("#p1");
        //console.log($el);
        //$el.css('color','red');//js에는 css와 같은 함수 없음. 자바스크립트 순수메소드와 jquery메소드 구분

        const $group1=$(".group1");
        console.log($group1);
        $group1.css('color','blue'); 
        //실제요소 각각에 style 지정
        //method chaining : 메소드 리턴값이 다시 jquery 객체이므로 연달아 메소드 호출가능

        // document.querySelectorAll(".group1").forEach((p)=>{
        //     p.style.color='hotpink';
        // }) //순수 자바스크립트로 쓰면 이렇게 김.
        console.log(
        $group1
            .css('color','blue')
            .css('font-size','24px') ===$group1
        )
        
        $("[title]").css('text-decoration','underline');
    });

.group1 클래스를 가진 p 요소들은 파란색이 되었고, 크기가 커졌다.

title을 가진 클래스들은 밑줄이 그어졌다.

실제로 제이쿼리의 $group1.css('color','blue'); 이 코드 하나는 자바스크립트로 표현시

document.querySelectorAll(".group1").forEach((p)=>{

p.style.color='hotpink';

})

이렇게 길다.

jQuery객체

1. selector문자열

2. js객체

    btn2.addEventListener('click',(e)=>{
        $(p4).css('background-color',"yellow");

        $("#p1,#p2,#p3").css("color","springgreen");

        const group2=document.querySelectorAll(".group2");
        $(group2).css('text-decoration',"line-through");
    });

p4에 대해 배경색이 노란색이 되었고,

p1,p2,p3에 대해서는 css로 색깔을 넣어 색이 지정되었다(springgreen)

마지막으로 group2를 가진 셀렉터에 의해 취소선이 지정되었다.

맨 마지막은 selector문자열을 이용한 방법이다.

가상선택자

    <fieldset>
        <legend>input</legend>
        <input type="text" placeholder="text">
        <input type="password" placeholder="password">
        <br>
        <input type="radio">
        <input type="checkbox">
        <input type="button" value="버튼">
        <br>
        <input type="button" id="btn3" value="가상선택자">
    </fieldset>

    $(btn3).click((e)=>{
        $(":text, :password")
            .css("background-color",'tomato')
            .css("color","#fff");
        $(":radio, :checkbox").prop("checked",true);

        console.log($(":button:eq(2)").val());//getter(jquery객체가 아닌 실제 값 반환)
        $(":button:eq(2)").val('Button');// setter
    });

가상선택자 버튼을 클릭시, jQuery로 작성한 스크립트문이 작동한다.

버튼 클릭전 / 후

순서관련 가상선택자

:odd

:even

:first (css 에서는 first-child, first-of-type으로 사용했었음)

:last (css last-child, last-of-type)

:eq(index)

:gt(index) n번째보다 큰 애

:lt(index) n번째보다 작은애

:contains(text) 자식요소 textnode 포함 여부

:has(selector) 자식요소 selector 포함여부

:selected

https://www.w3schools.com/jquery/jquery_ref_selectors.asp

w3schools의 jQuery셀렉터들 확인해보기

      <table id="people">
        <thead>
          <tr>
            <th>이름</th>
            <th>혈액형</th>
            <th>주소</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>홍길동</td>
            <td>A</td>
            <td>서울시 강남구</td>
          </tr>
          <tr>
            <td>신사임당</td>
            <td>AB</td>
            <td>서울시 강서구</td>
          </tr>
          <tr>
            <td>장영실</td>
            <td>B</td>
            <td>서울시 강북구</td>
          </tr>
          <tr>
            <td><a href="#">이순신</a></td>
            <td>O</td>
            <td>서울시 강동구</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <th colspan="2">총원</th>
            <td>4명</td>
          </tr>
        </tfoot>
        </table>
        <button id="btn4">확인</button>

        $(btn4).click((e)=>{
            let $selected;
            // $selected = $("#people tr:even");
            // $selected =$("#people tr:first,tr:last");

            // $selected=$("#people tr:eq(1)");
            // $selected=$("#people tr:gt(0)");
            // $selected=$("#people tr:lt(5)");

            $selected=$("#people tr:contains('A')"); //textnode 체크
            $selected=$("#people tr:has(a)"); //selector

            $selected.css({//여러개 지정시 객체사용
                'background-color':'gray',
                'color':'#fff'
            });
        });

윗줄부터 하나씩 주석을 없애가며 확인해보겠다.

$selected = $("#people tr:even");

$selected =$("#people tr:first,tr:last");

$selected=$("#people tr:eq(1)");

$selected=$("#people tr:gt(0)");

$selected=$("#people tr:lt(5)");

$selected=$("#people tr:contains('A')"); //textnode 체크

$selected=$("#people tr:has(a)"); //selector

attr(attribute)

태그 객체에 inline에 작성된 속성관리
getter : 해당 속성값을 리턴(작성되어 있지 않다면 undefined 리턴)
- n개의 요소를 가진 경우 0번지 요소의 값을 반환
- method chaing 끝
setter : 해당 속성을 작성
- n개 모든 요소의 속성을 변경
- method chaing 계속 가능

    <div class="img-wrapper">
        <img src="../sample/image/flower1.PNG">
        <img src="../sample/image/flower2.PNG" alt="꽃이미지2">
    </div>
    <button id="btn1">attr</button>

    $(btn1).click((e)=>{
        const $img = $(".img-wrapper img");
        console.log($img);

        //getter
        console.log($img.attr("src")); // ../sample/image/flower1.PNG
        console.log($img.attr("alt")); //undefined

        //setter
        $img.attr('src','../sample/image/hyunta.jpg');
    });

attr 클릭 전후

클릭 전후로 사진이 바뀐 것을 알 수 있다.

prop

논리형으로 처리될 값을 제어 (javascript를 이용한 동적제어)
- checked : true | false 로 처리

$(btn2).click(()=>{
        //attr | prop 비교
        // const $menu2=$(menu2);
        // console.log($menu2.attr("checked")); //check확인
        // console.log($menu2.prop("checked")); //true | false 
        // $menu2.prop("checked",true);   

        const $menuChecked = $("[name=menu]:checked");
        console.log($menuChecked);

        const checkedValues = [];

        // for(let i =0; i<$menuChecked.length;i++){
        //     const chk = $menuChecked[i];//순수js객체
        //     checkedValues.push(chk.value);
        // }

        
        $menuChecked.each((index,checkbox)=>{
            console.log(index,checkbox);
            checkedValues.push($(checkbox).val());
        })
        
        console.log(checkedValues);
        alert(checkedValues.length?checkedValues:"선택한 항목이 없습니다.");
    });
    $(checkAll).change((e)=>{
        // console.log(e.target);//js랑 같음
        // $("[name=menu]").prop("checked",e.target.checked);
        // $("[name=menu]").prop("checked",$(e.target).prop("checked")); //윗줄과같음
        $("[name=menu]").prop("checked",$(e.target).is(":checked"));
        console.log($(e.target).is(":checked"));//체크되어있으면 true, 아니면 false

    });

햄버거랑 핫도그를 선택하면 알람에 뜨고, console창에도 뜨는 것을 확인할 수 있다.

선택을 바꿔도 마찬가지이다.

filter

    <div class="wrapper">
        <p id="p1" class="group1">안녕1</p>
        <p id="p2" class="group1" title="안녕2">안녕2</p>
        <p id="p3" class="group2">안녕3</p>
        <p id="p4" class="group2" title="안녕4">안녕4</p>
        <p id="p5" class="group1 group2">안녕5</p>
    </div>

    <button id="btn1">filter</button>
    <button id="btn2">first | last</button>
    <button id="btn3">eq</button>
    <button id="btn4">not</button>
    <button id="btn5">get</button>

    $(btn1).click((e)=>{
        const $p=$("p");

        // filter(selector)
        // console.log(
        // $p
        //     .filter(".group1")
        //     .css("color","blueviolet")
        //     .filter(":even")
        //     .css("text-decoration","underline")
        // );

        //filter(callbackFunction) : true를 반환한 경우만 요소 유지
        $p
            .filter((index,p)=>{
                return $(p).is(".group1");
            })
            .css("color","blueviolet")
            .filter((index,p)=>$(p).is(":even"))
            .css("text-decoration","underline");
    });

그룹 1에 대해서 보라색으로 바꿈 , css를 underline으로 지정.

    $(btn2).click((e)=>{
        const $p=$("p");
        console.log(
        $p.first()
            .css("font-size","32px")
            .end() //prevObject 상태로 되돌아가기
            .last()
            .css("font-size","32px")
        );

    });

처음 [ .first() ] , 마지막 [ .end() ] 에 대해서 글씨 크기를 조정한다.

둘다 지정하려면 중간에 end()를 적어줘야한다. (prevObject로 돌아가는 명령어)

:eq(index) - 선택자일 경우

.eq(index) - 메소드일때

:not(selector)

.not(selector)

    $(btn3).click((e)=>{
        $("p").eq(3)
            .css("background-color","tomato");
    });

3번째 인덱스 (0부터시작)에 대해 배경색을 지정해주었다.

    $(btn4).click((e)=>{
        $("p").not(".group1")
            .css("color","hotpink");
    });

group1이 아닌 클래스명을 가지는 p인자에 대해서 글씨색을 핫핑크로 지정해주었다.

jquery 객체에서 해당 인덱스의 요소를 vanilla js객체로 변환

인덱스를 주지 않으면 배열로 반환
자바스크립트 객체 추출하고 싶을 때 사용(자바스크립트 값으로 추출함)

    $(btn5).click((e)=>{
        const $p=$("p");
        console.log($p.get(0));
        console.log($p.get(1));
        console.log($p.get());//[p#p1.group1, p#p2.group1, p#p3.group2, p#p4.group2, p#p5.group1.group2]
    });

첫번째줄 : 제이쿼리 객체가 p중 인덱스 첫번째인 것을 반환

두번째줄 : 제이쿼리 객체가 p중 인덱스 두번째인 것을 반환

세번째줄 : 제이쿼리 객체가 p인 것들을 모두 반환

[kh정보교육원 70일차] 개인미니프로젝트 - 홈페이지 만들기 / git으로 html파일 사이트 주소 생성하기

유경(shin-6-0) — Sat, 15 Apr 2023 22:09:49 +0900

git 으로 html파일 사이트 주소 생성하기

먼저 git 에 들어가서 repository를 생성한다.

repository 이름은

깃허브 아이디.github.io

그리고 https://git-scm.com/ 에 들어가서 git을 운영체제에 맞게 다운받는다.

(Git 이랑 github 달라요)

Git

About The advantages of Git compared to other source control systems. Documentation Command reference pages, Pro Git book content, videos and other material. Downloads GUI clients and binary releases for all major platforms. Community Get involved! Bug reporting, mailing list, chat, development and ...

git-scm.com

설치는 기본설정대로 하면 됨!

그리고 g만 쳐도 나오는 git bash를 켜준다

pwd : 현재 위치

cd : 이동

cd .. : 한단계 상위폴더로 이동

cd ~~~ : ~~~라는 폴더로 이동 (하위 접속)

이 단계를 내 html파일이 있는 곳까지 이동한다. (홈의 파일 이름은 index.html로 하라고 했다. 이유는 나도모름)

나의 경우 최종 폴더는 내이름이라 폴더명,,,,,,, 으로 가림

git init : 내 html 파일을 저장소로 옮기기 위한 명령 (입력하면 오른쪽에 (master) 가 떠야함)

ls : 존재하는 파일,폴더 뜸

ls -a : (띄어쓰기 필수) 숨겨진 폴더까지 뜸 . 여기서 .git 파일을 볼수있다

git config --list 입력시 user.name과 user.email이 비어있을 것이다. 이걸 채우자.

깃허브 아이디 , 이메일을 " " 쌍따옴표 안에 적기

ex ) git config --global user.name "githubID"

ex ) git config --global user.email "email@naver.com"

git status를 누르면 바뀔 파일이 뜬다. 아마 처음한다면 모든 파일이 뜰것

이후 git add . 을 입력하면 모든 파일(.)이 추가된다.

git status를 다시 입력하면 Changes to be committed로 바뀌고, 바뀔 파일이 뜬다!

git commit -m "메세지"

메세지 안에 설명을 적는다. 나는 세번째 업그레이드이므로 3rd init.

git log 검색시, 내가 init한 횟수들이 전부 뜬다! 날짜와 commit 코드 등.

git remote add origin 깃허브리포지토리주소 를 입력한다 (origin은 별칭임)

이때 아무것도 안뜨면 성공

git push origin master입력하면 끝!

대충 이런게 뜨면 끝임

이렇게 내 홈페이지 사이트가 생겼다!

[kh정보교육원 69일차] Javascript - fetch / async / await

유경(shin-6-0) — Sat, 15 Apr 2023 22:07:33 +0900

fetch

- XMLHttpRequest(=callback방식으로 전달하는 객체)의 callback 방식을 개선해 Promise를 통한 then절에서 응답결과를 처리할 수 있다.

  btn1.onclick = () => {
    console.log(
      fetch(USER_URL)
        .then((response) => {
          console.log(response);
          return response.json(); // message body 적힌 부분을 추출하는 promise가 한 단계필요하다.
        })
        .then((data) => console.log(data))
    );
  };

USER_URL 은 {"id":"shqkel","company":"KH정보교육원","classroom":"M","cnt":1} 라는 값을 가진 데이터이다.

Promise 닫혔을때

Promise 열렸을때

닫혀있을때는 pending이라는 값을 출력하지만 ( ??? ) 열게되면 resolve에서 값을 받아서 fulfilled 를 출력하게 된다.

USER_URL 에 들어있는 값이 제대로 출력되는 것을 확인할 수 있다.

fetch는 return response.json(); 이라는 message body가 적힌 부분을 추출하는 코드가 따로 필요하다.

아바타 렌더하기

GITHUB_URL은 github의 개인 정보를 가지고 있다.

유저정보 가져오기
1.의 유저아이디로 github 사용자정보 가져오기
2번의 사용자정보중 avatar_url로 img태그 생성하기
3번의 이미지 로딩이 완료되면 메세지 출력하기

를 실행해보려고 한다.

  </script>
  <div class="img-wrapper"></div>
  <style>
  .img-wrapper img {
    margin: 10px;
    width: 300px;
    border-radius: 50%;
    box-shadow: 5px 5px 10px 5px lightgray;
  }

  </style>

  btn2.onclick = () => {
    fetch(USER_URL)
      .then((response) => response.json())
      .then((user) => {
        console.log(user);
        const {id} = user;
        return fetch(`${GITHUB_URL}${id}`); // 명시적으로 promise 리턴
      })
      .then((response) => response.json())
      .then((githubUser) => {
        console.log(githubUser);
        const {avatar_url} = githubUser;
        return loadUserImg(avatar_url);
      })
      .then(() => console.log("이미지 로딩 완료!"));

  };

  const loadUserImg = (src) => {
    return new Promise((resolve) => {
      const img = document.createElement("img");
      img.src = src;
      img.onload = () => resolve();
      document.querySelector(".img-wrapper").append(img);
    });
  };

btn2. onclick 구조 설명 )

USER_URL을 fetch로 받으면, then으로 response를 보낸다. (json으로 처리한 body에 적힌 값.)

then으로 user를 출력한다.

user의 값중 사용할 id값을 리턴한다 (명시적으로 promise리턴)

이 리턴한 값을 가지고 다시 then으로 response를 보내고, githubUser를 요청한다.

const {avatar_url} 으로 아바타url을 꺼낸다.

이 꺼낸 url의 이미지를 받아서 querySellector로 img-wrapper에 추가하도록 만든 함수인 loadUserImg에 avatar_url값을 변수로 준다.

이렇게 이미지 로딩이 완료되었다!

axios

axios cdn 검색 - <scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/axios/1.0.0-alpha.1/axios.min.js"integrity="sha512-xIPqqrfvUAc/Cspuj7Bq0UtHNo/5qkdyngx6Vwt+tmbvTLDszzXM0G6c91LXmGrRx8KEPulT+AfOOez+TeVylg=="crossorigin="anonymous"referrerpolicy="no-referrer"></script> 입력

  <script>
  btn3.onclick = () => {
    axios(USER_URL)
      .then((response) => {
        const {id} = response.data;
        alert(`사용자의 아이디는 ${id}입니다.`);
      });
  };
  </script>

위의 fetch보다 더 빠르게 확인 가능.

  btn4.onclick = () => {
    axios("https://dog.ceo/api/breeds/image/random")
      .then(({data}) => loadDogImage(data))
      .then((img) => {
        img.remove();
        console.log('dog 이미지 제거완료!');
      });
  };

  const loadDogImage = (data) => {
    return new Promise((resolve) => {
      const {message, status} = data;
        if(status === 'success'){
          const img = document.createElement("img");
          img.src = message;
          img.onload = () => {
            console.log('dog 이미지 로드완료!');
            setTimeout(() => {
              resolve(img);
            }, 3000);
          };
          const wrapper = document.querySelector(".dogs");
          wrapper.innerHTML = ""; // 초기화
          wrapper.append(img);
        }
    });
  }

이렇게 강아지가 로드되고, 3초뒤에 제거된다.

강아지 사진은 랜덤으로 나오고, dog ceo 라는 사이트에서 dog api 를 가져온 것이다.

async

ES2017에 추가된 일반함수의 Promise화를 지원하는 문법

await

async함수 안에서만 사용이 가능

promise의 동기적 처리를 지원

  btn1.addEventListener('click', () => {
    zoo()
      .then((value) => console.log(value));
  });
  const zoo = async () => 10;

async로 불러온 zoo가 콘솔창에 Promise문법인 then으로 전달된 것을 확인할 수 있다.

  btn2.addEventListener('click', async () => {
    // 프라미스 사용
    // xoo()
    //   .then((value) => console.log(value));

    const value = await xoo();
    console.log(value);
  });

  const xoo = () => new Promise((resolve) => {
    setTimeout(() => resolve(100), 3000);
  });

  (async () => {
    const value = await xoo();
    console.log(value);
  })();

창이켜지고 3초뒤, 100이 resolve를 통해서 출력되는 것을 확인할 수 있다.

xoo는 Promise문법, async로 전달한 await xoo(=value)를 통해 value값(=100)이 전달된다

  btn3.addEventListener('click', async () => {
    // loadScript('js/1.js')
    //   .then(() => loadScript(bar()))
    //   .then(() => loadScript(car()))
    //   .then(() => dar());

    await loadScript('js/1.js'); // resolve되기전까지 기다린다.(동기적)
    let path = bar();
    await loadScript(path);
    path = car();
    await loadScript(path);
    dar();
  });

  const loadScript = (path) => new Promise((resolve) => {
    const script = document.createElement('script');
    script.src = path;
    script.onload = () => {
      console.log(`${path} 로드 완료!`);
      resolve();
    } 
    document.head.append(script);
  });

주석 부분은 promise문법.

await fetch

  const USER_URL = "https://asia-northeast3-focal-elf-326215.cloudfunctions.net/user"; // google cloud function
  const GITHUB_URL = "https://api.github.com/users/";
  btn4.addEventListener('click', async () => {
    const resp = await axios(USER_URL);
    console.log(resp);
    const {data : {id}} = resp;

    const {data: {avatar_url}} = await axios(GITHUB_URL + id)
    console.log(avatar_url);

    const img = await loadImg(avatar_url);
    setTimeout(() => img.remove(), 3000);
  
  });

  const loadImg = (url) => new Promise((resolve) => {
    const img = document.createElement("img");
    img.src = url;
    img.onload = () => resolve(img);
    document.body.append(img);
  });

Promise때와 같은 사진 불러오기 성공

Random Dog

  btn5.onclick = async () => {
    const {data} = await axios("https://dog.ceo/api/breeds/image/random");
    const img = await loadDogImage(data);
    img.remove();
    console.log('dog 이미지 제거완료!');
  };

  const loadDogImage = (data) => {
    return new Promise((resolve) => {
      const {message, status} = data;
        if(status === 'success'){
          const img = document.createElement("img");
          img.src = message;
          img.onload = () => {
            console.log('dog 이미지 로드완료!');
            setTimeout(() => {
              resolve(img);
            }, 3000);
          };
          const wrapper = document.querySelector(".dogs");
          wrapper.innerHTML = ""; // 초기화
          wrapper.append(img);
        }
    });
  }

[kh정보교육원 68일차] Javascript - Promise (프로미스)

유경(shin-6-0) — Thu, 13 Apr 2023 11:32:29 +0900

Promise

기존 callback함수를 통한 비동기처리를 개선하기 위한 문법

producer/consumer 코드를 연결

- producer(비동기처리가 포함된 코드)

- consumer(비동기완료 후 실행할 코드)

속성

status
- pending -> fulfilled(이행) / rejected(거부)
result
- undefined -> value(이행할 경우) / error 객체 (거부될 경우)

resolve : 이행시 호출할 콜백함수 (then에서 전달) - 실행시 PromiseState : fulfilled / PromiseResult : value

reject : 거부시 호출할 콜백함수 (catch에서 전달) - 거부시 PromiseState : rejected / PromiseResult : error

  btn1.onclick = () => {
    // resolve 이행시 호출할 콜백함수. then에서 전달.
    // reject 거부시 호출할 콜백함수. catch에서 전달.
    const promise = new Promise((resolve, reject) => {
      const num = Math.floor(Math.random() * 2);  // 0 1
      console.log("producing.....", num);

      try {
        if(!num) throw new Error("오류 발생");
        resolve(num); // 이행 콜백호출
      } catch(e){
        reject(e); // 거부 콜백 호출
      }
    });
    console.log(promise); 

    promise
      .then((value) => {
        console.log('result : ', value);
      })
      .catch((err) => {
        console.error('result : ', err);
      });
  };

먼저 프로미스 객체를 만들고 프로미스 객체 안에 resolve, reject 를 인자로 가지는 callback 함수를 만든다.

resolve : 이행시 호출할 콜백함수 (then에서 전달) - 실행시 PromiseState : fulfilled / PromiseResult : value

reject : 거부시 호출할 콜백함수 (catch에서 전달) - 거부시 PromiseState : rejected / PromiseResult : error

다음과 같은 결과가 나올 것으로 예상이 된다.

실행시 다음과 같은 코드가 나오고

거부시 다음과 같은 코드가 나오게 된다.

setTimeout을 Promise로 작성하기

  btn2.onclick = () => {
    getTimeoutPromise("안녕", 2000)
    .then((value) => {
      alert(value);
      // then은 암묵적으로 promise객체를 만들어 반환 (promise chain)
    })
    .then(() => {
      alert("실행 끝~");
    });
  };
  const getTimeoutPromise = (msg, millis) => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(msg);
      }, millis);
    });
  };

then은 암묵적으로 promise 객체를 만들어서 반환하기때문에 2초후 안녕 - 실행끝 이 나오게된다.

getTimeoutPromise 안 resolve에서 메세지인 "안녕"을 받았기 때문에 then의 value에서 그 값을 받고, alert로 출력되는 구조이다.

Promise Chain

암묵적 chain : then의 resolve 콜백에서 리턴값이 없다면, 암묵적으로 promise 객체 반환
- resolve 콜백에서 특정값을 리턴한다면, 암묵적 promise 객체의 result 값으로 사용된다.
명시적 chain : then의 resolve 콜백에서 다시 promise객체를 반환 후 then 메소드로 chaining 가능

  btn3.onclick = () => {
    getTimeoutPromise("안녕", 1000)
      .then((msg) => { //then(1)
        console.log(msg);
        return getTimeoutPromise("잘가", 1000);
      })
      .then((msg) => { //then(2)
        alert(msg);
      });
  };

  const getTimeoutPromise = (msg, millis) => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(msg);
      }, millis);
    });
  };

바깥 getTimeoutPromise에서 "안녕"을 받아서 then(1)이 1초 뒤 콘솔에 출력하고

return의 getTimeoutPromise에서 "잘가"를 받아서 아래의 then(2)에서 출력한다

실습문제 - 배경색 변경하기

. bg-box 배경색을 1초단위로 빨-초-노-파-핑 으로 변경

  btn4.onclick = () => {
    changeBgcolorPromise('red', 1000)
      .then(() => changeBgcolorPromise('green', 1000))
      .then(() => changeBgcolorPromise('yellow', 1000))
      .then(() => changeBgcolorPromise('blue', 1000))
      .then(() => changeBgcolorPromise('pink', 1000))
  };

  const changeBgcolorPromise = (color, millis) => {
    const target = document.querySelector(".bg-box");
    return new Promise((resolve) => {
      setTimeout(() => {
        target.style.backgroundColor = color;
        resolve();
      }, millis);
    });
  }

먼저 .bg-box의 배경색을 millis이후에 color로 변환하는 프로미스를 선언한다 (=changeBgcolorPromise)

그 후 changeBgcolorPromise를 호출하고, then에서 받고 , then에서 다시 호출하고, 받고 를 반복한다.

다음과 같은 결과가 나오게 된다.

js파일 로드

  btn5.onclick = () => {
    loadScriptPromise('js/1.js')
      .then(() => {
        const path = bar(); // js/2.js
        return loadScriptPromise(path);
      })
      .then(() => {
        const path = car();
        return loadScriptPromise(path);
      })
      .then(() => {
        dar();
      });
  };

  const loadScriptPromise = (path) => {
    return new Promise((resolve) => {
      const script = document.createElement("script");
      script.src = path;
      script.onload = () => {
        console.log(`${path} 로딩완료!`);
        resolve();
      };
      document.head.append(script);
    });
  };

//1.js
const bar = () => {
  console.log("bar");
  return 'js/2.js';
};

//2.js
const car = () => {
  console.log("car");
  return "js/3.js";
};

//3.js
const dar = () => {
  console.log("dar");
};

버튼 클릭시 로딩이 동시에 진행된다.

return한 값이 path로 들어가서 다음 값을 계속 불러오는 구조이다.

action이 랜덤으로 일어나는 코드 만들기

  const devActions = {
    gotocafe : {
      actionname : '카페로 출발합니다.',
      duration : 1000,
      next : 'arriveatcafe'
    },
    arriveatcafe : {
      actionname : '카페에 도착했습니다.',
      duration : 100,
      next : 'startcoding'
    },
    startcoding : {
      actionname : '코딩을 시작합니다.',
      duration : 3000,
      next : 'finishcoding'
    },
    finishcoding : {
      actionname : '코딩을 마칩니다.',
      duration : 10,
      next : 'gotohome'
    },
    gotohome : {
      actionname : '집으로 출발합니다.',
      duration : 1000,
      next : 'gethome'
    },
    gethome : {
      actionname : '집에 도착했습니다.',
      duration : 0
    },
  }

  btn6.onclick = () => {
    runDevAction('gotocafe')
      .then((action) => runDevAction(action))
      .then((action) => runDevAction(action))
      .then((action) => runDevAction(action))
      .then((action) => runDevAction(action))
      .then((action) => runDevAction(action))
      .catch((err) => console.error(err))
      .finally(() => {
        console.log('해가 지고, 하루가 끝났습니다.');
      });
  };

  const runDevAction = (action) => {
    const {actionname, duration, next} = devActions[action];
    console.log(actionname);
    return new Promise((resolve, reject) => {
      Math.random() * 100 > 90 && reject(new Error('친구에게 전화가 왔습니다.'));
      setTimeout(() => {
        resolve(next);
      }, duration);
    });
  }

runDevAction 는 action의 종류, 유지시간, 다음 action을 지정한다.

Promise 객체에서 랜덤으로 다음 액션을 지정하고, setTimeout 으로 일정 시간이 지난 다음, 다음 액션이 일어나도록 resolve에 다음 액션을 입력받는다.

버튼을 클릭하면 gotocafe에서 부터 then으로 다음 액션들이 실행된다. 만약 error(친구에게 전화가 온 경우) 가 발생할 경우 error창을 받도록 catch절도 넣었다.

다음과 같이 다양한 경우가 발생하는 것을 확인할 수 있다.

Promise Chain - 값 반환

  btn7.onclick = () => {
    new Promise((resolve) => {
      resolve(1);                 //producing
    })
    .then((value) => {           //consumer
      console.log(value); // 1
      return value * 2; // 암묵적 Promise객체의 resolve(value)의 result(value)값이 된다. 
    })
    .then((value) => {
      console.log(value); // 2
      return value * 2;
    })
    .then((value) => {
      console.log(value); // 4
      return value * 2;
    })
    .then((value) => {
      console.log(value); // 8
      return value * 2;
    });
  };

return값은 암묵적 프로미스 객체의 resolve(value) 의 결과가 된다.

return값이 *2 이므로 두배씩 증가하는 값이 나온다는 사실을 예상할 수 있다.

producing 으로 resolve값 1 이 생기면 then에서는 resolve값을 받아서 사용하게된다 (consumer)

생산자와 사용자가 연결된 좋은 코드라고 볼 수 있다.

다음과 같은 결과가 나오게 된다.

[kh정보교육원 67일차] Javascript - Asynchronous (비동기처리) / Html5api - LocalStorage

유경(shin-6-0) — Thu, 13 Apr 2023 11:28:44 +0900

Web Storage

웹서버에 많은 정보를 Client에 저장해 두는 것.

localStorage 도메인별로 관리 . 직접 삭제하기 전까지 영구적으로 보관
sessionStorage 도메인별로 관리. 접속한 동안만 데이터를 유지

Cookie와 다른점

크기에 제한이 없음 - cookie는 4KB , Web Storage는 제한이 없음.
서버로 보내지지 않음 - Cookie는 HTTP Request에 의해 자동으로 서버에 전송이 되지만 Web Storage는 전송되지 않음.
유효기간의 제한이 없음 - Cookie처럼 특정 기간이 지나면 자동으로 삭제되지 않음.
JavaScript 객체를 저장할 수 있음

localStorage로 CRUD(Create Read Update Delete) 기능 만들기

1. Create

로컬 스토리지에 값 작성해서 넣기 : localStorage.setItem( 키값 , 밸류값 );

    <h2>CRUD</h2>
    <fieldset>
        <legend>Local Storage</legend>
        <input type="text" id="key" placeholder="key">
        <input type="text" id="value" placeholder="value">
        <hr>
        <button id="btn1">저장</button>
        <button id="btn2">조회</button>
        <button id="btn3">삭제</button>
        <button id="btn4">전체삭제</button>
    </fieldset>

    btn1.onclick=()=>{
        const keyVal=key.value;
        const ValueVal=value.value;
        //유효성검사
        if(!keyVal || !ValueVal)return;

        //저장 - 모두 문자열로 저장됨
        localStorage.setItem(keyVal,ValueVal);

        //초기화
        key.value='';
        value.value='';
    };

key와 value를 입력했다.

Console 옆 Application의 Storage -> Local Storage에서 Key 값 = key, Value값 = value가 저장된 것을 볼 수 있다.

key에 개발자 , value에 춘딩 을 넣어보겠다.

이 역시 저장되었다.

2. Read

로컬 스토리지에서 값 가져오기 : localStorage.getItem(key.value);

    btn2.onclick=()=>{
        const keyVal=key.value;

        const value=localStorage.getItem(keyVal);
        console.log(typeof(value),value);//모두 문자열

        if(value){
            document.querySelector("#value").value=value;
        }
        else{
            alert(`${keyVal}에 해당하는 값이 없습니다.`);
            key.select();
        }
    };

개발자를 입력하고 조회를 누르면 value부분에 value값인 '춘딩' 이 나온다.

없는 값을 입력하면 다음과 같은 알림창이 나온다.

3. Delete

로컬스토리지에서 값 삭제하기 : localStorage.removeItem(key.value);

    btn3.onclick=()=>{
        const keyVal=key.value;

        //제거
        localStorage.removeItem(keyVal);

        //초기화
        key.value='';
        value.value='';
    }

없는 값을 key 박스에 입력하고 삭제를 누르면 아무 일도 일어나지 않는다.

개발자를 입력하고 삭제를 누르면, localStorage에서 삭제된 것을 확인할 수 있다.

4. Delete all

로컬 스토리지 전체 삭제 : localStorage.clear();

    btn4.onclick=()=>{
        localStorage.clear();
    };

다음과 같은 값이 존재할 때, 전체삭제를 누르면 전부 없어진다.

localStorage에 객체와 배열저장

web storage에 저장되는 key/value는 모두 string타입이다.

- 배열, 객체를 그대로 저장하게 되면 toString 호출 결과를 저장한다. 즉, 데이터가 유실된다.

배열과 객체 JSON으로 변환 : JSON.stringify(배열명, 객체명)

JSON으로 변환한 객체 js(javascript)로 변환 : JSON.parse(localStorage.getItem("arr"))

    <button id="btn5">실행</button>

    btn5.onclick=()=>{
        const arr=[1,2,3,['a','b','c']];
        const obj={
            id:123456,
            name:'애플토마토',
            expired : Date.now()+(1000*60),
            options : ['red','green','blue'],
            maker : {
                id: 'honggd'
            }
        };
        console.log(arr,obj);
        const arrJsonStr=JSON.stringify(arr);
        const objJsonStr=JSON.stringify(obj);
        console.log(typeof arrJsonStr,arrJsonStr);
        console.log(typeof objJsonStr,objJsonStr);

        //저장
        localStorage.setItem('arr',arrJsonStr);
        localStorage.setItem('obj',objJsonStr);

        //가져와서 js로 변환
        const arr2=JSON.parse(localStorage.getItem("arr"));
        console.log(typeof arr2,arr2);
        const obj2=JSON.parse(localStorage.getItem("obj"));
        console.log(typeof obj2, obj2);
    };

obj에 Object(객체)가 제대로 들어간 것을 확인할 수 있다.

방명록 만들기 (정보 저장 및 호출)

    <h2>방명록</h2>
    <form action="javascript:saveGuestbook();" name="guestbookFrm">
    <table>
        <tr>
        <th><label for="username">이름</label></th>
        <td><input type="text" id="username"></td>
        </tr>
        <tr>
        <th><label for="content">내용</label></th>
        <td><input type="text" id="content"></td>
        </tr>
        <tr>
        <td colspan="2" style="text-align: center;">
            <button>저장</button>
        </td>
        </tr>
    </table>
    </form>
    <table id="tb-guestbook">
    <thead>
        <tr>
        <th>No</th>
        <th>이름</th>
        <th>내용</th>
        <th>일시</th>
        </tr>
    </thead>
    <tbody></tbody>
    </table>
  <script>

  <script>
  class Guestbook {
    constructor(username, content, datetime = Date.now()){
      this.username = username;
      this.content = content;
      this.datetime = datetime;
    }
  }

    /**
     * 유효성검사
     */
     document.guestbookFrm.onsubmit = () => {
        if(!username.value || !content.value){
        alert("이름과 내용을 작성해주세요");
        return false;
        }
    };
    /**
     * 방명록 저장
     * 사용자 입력값 -> guestbook객체 ->배열에 저장 ->json -> localStorage 저장
     */
    const saveGuestbook =()=>{
        // 사용자 입력값 처리
        const usernameVal=username.value;
        const contentVal=content.value;
        //guestbook 객체
        const guestbook = new Guestbook(usernameVal,contentVal);
        
        //배열에 저장
        const guestbooks=JSON.parse(localStorage.getItem("guestbooks")) || [];//null일경우 오른쪽에 값 담김
        console.log(guestbook);
        guestbooks.push(guestbook);

        //json
        const data=JSON.stringify(guestbooks);
        console.log(data);

        //localStorage에 저장
        localStorage.setItem('guestbooks',data);

        //초기화
        document.guestbookFrm.reset();

        //렌더링
        renderGuestbook(guestbooks);
    };
    const renderGuestbook=(guestbooks)=>{
        if(!guestbooks) return;
        const tbody=document.querySelector("#tb-guestbook tbody");
        tbody.innerHTML="";
        guestbooks.map((guestbook,index)=>{ //행 한칸씩 추가
            const {username,content,datetime}=guestbook;
            return `<tr>
                <td>${index+1}</td>
                <td>${username}</td>
                <td>${content}</td>
                <td>${datetimeFormatter(datetime)}</td>
            <tr>`;
        }).forEach((tr)=>{
            tbody.innerHTML+=tr;
        });
    }

    const datetimeFormatter=(millis)=>{
        const d=new Date(millis);
        const f=(n)=>n<10?'0'+n:n;//무조건10의자리 만들기위해사용
        const yyyy=d.getFullYear();
        const mm=f(d.getMonth()+1);
        const dd=f(d.getDate());
        const hh=f(d.getHours());
        const mi=f(d.getMinutes());
        return `${yyyy}/${mm}/${dd} ${hh}:${mi}`;
    }
    </script>

이름과 내용을 입력하면 다음과 같이 저장된다.

Application에서도 다음과 같이 내용을 볼 수 있다.

비동기처리

동기 (synchronous) | 비동기(asynchronous)

자바스크립트는 싱글쓰레드로 실행한다.

비동기처리함수(Timer API, DOM관련, 이벤트처리, Ajax요청) 호출시, 백그라운드에 처리를 위임한다.

동기함수의 모든 처리가 끝나면 (call stack이 비워지면) 실행된다.

heap = 객체 저장공간

call stack = 함수 실행 스택

Web APIs

Callback Queue

Event Loop

비동기 처리 함수 - Timer API

  <button id="btn1">Async - Timer</button>
  <button id="btn2">Async - DOM</button>
  <button id="btn3">Async - DOM 연속</button>

  btn1.onclick = () => {
    // 동기식처리
    let result = foo();
    console.log(result);

    // 비동기식처리
    let result2;
    // Timer API 함수들은 호출과 동시에 background(Web APIs)에 처리를 위임한다.
    setTimeout(() => {
      result2 = 100;
      console.log('result2 : ', result2); // 1. 코드위치 수정
    }, 0);
  };

  const foo = () => {
    console.log('foo');
    return 100;
  }

버튼 클릭과 동시에 result2 : 100이 돌아온다. (시간차를 두지 않음)

Timer API함수들은 호출과 동시에 background(Web API)에 처리를 위임한다.

비동기처리 - DOM관련, event 처리

const bar = () => {
  console.log("bar");
  return 'js/2.js';
};

1.js 파일

const car = () => {
  console.log("car");
  return "js/3.js";
};

2.js 파일

const dar = () => {
  console.log("dar");
};

3.js 파일

  btn2.onclick = () => {
    // loadScript("js/1.js");
    // bar(); // Uncaught ReferenceError: bar is not defined

    loadScript("js/1.js", () => {
      console.log('load완료!');
      bar(); // bar
    });
  };

  // const loadScript = (path) => {
  //   const script = document.createElement('script');
  //   script.src = path;
  //   document.head.append(script); // 비동기처리
  // };

  const loadScript = (path, callback) => {
    const script = document.createElement('script');
    script.src = path;
    script.onload = callback; // 2. callback함수
    document.head.append(script); // 비동기처리하는부분. append되길 기다리지 않고 실행
  };

button 2 클릭시 다음과 같은 콘솔창을 볼 수 있다.

load완료 후 bar(1.js파일)를 호출하면 bar가 출력된다.

  /**
   * js/1.js 로드 - bar() 다음에 로드할 js의 주소값 리턴
   */
  btn3.onclick = () => {
    loadScript('js/1.js', () => {
      loadScript(bar(), () => {
        car();
      });
    });
  };

다음과 같이 실행할 경우, bar가 나온 다음에 car가 나온다.

1.js를 로드한 이유는 bar() 다음에 로드할 js의 주소값을 리턴하기 위함이다.

배경색 연속변경

  <button id="btn4">@실습문제 - 배경색 연속변경</button>
  <div class="bg-box"></div>
  <style>
  .bg-box {
    width: 100px;
    height: 100px;
    margin: 10px;
    border: 1px solid #000;
  }

  btn4.onclick = () => {
    const target = document.querySelector(".bg-box");

    setTimeout(() => {
      target.style.backgroundColor = "red";
      setTimeout(() => {
        target.style.backgroundColor = "green";
        setTimeout(() => {
          target.style.backgroundColor = "yellow";
          setTimeout(() => {
            target.style.backgroundColor = "blue";
            setTimeout(() => {
              target.style.backgroundColor = "pink";
            }, 1000);
          }, 1000);
        }, 1000);
      }, 1000);
    }, 1000);

  }

클릭시 1초 단위로 색이 바뀌고, pink에서 멈추는 것을 확인할 수 있다.

Call Stack & Heap -> WEB API's -> Callback Queue -> Call Stack & Heap 이벤트 발생 루프

http://latentflip.com/loupe/?code=CgoKCgokLm9uKCdidXR0b24nLCAnY2xpY2snLCBmdW5jdGlvbiBvbkNsaWNrKCkgewogICAgc2V0VGltZW91dChmdW5jdGlvbiB0aW1lcigpIHsKICAgICAgICBjb25zb2xlLmxvZygnWW91IGNsaWNrZWQgdGhlIGJ1dHRvbiEnKTsgICAgCiAgICB9LCAyMDAwKTsKfSk7Cgpjb25zb2xlLmxvZygiSGkhIik7CgpzZXRUaW1lb3V0KGZ1bmN0aW9uIHRpbWVvdXQoKSB7CiAgICBjb25zb2xlLmxvZygiQ2xpY2sgdGhlIGJ1dHRvbiEiKTsKfSwgNTAwMCk7Cgpjb25zb2xlLmxvZygiV2VsY29tZSB0byBsb3VwZS4iKTs%3D!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D

여기서 실행하면 눈으로 코드가 실행되는 순서를 볼 수 있다.

callStack이 비면 비동기함수 실행 가능 (Callback Queue -> Call Stack)

A에서 B를 신경쓰지않고 바로 실행되는것 = 비동기

[kh정보교육원 66일차] Javascript - RegExp (정규표현식)

유경(shin-6-0) — Thu, 13 Apr 2023 11:24:34 +0900

정규표현식(RegExp : Regular Expression)

특정 규칙을 가진 문자열 집합에 대한 표현식. 유효성 검사, 검색, 문자열 대체 등에 유용

언어독립적. 간결하게 복잡한 조건을 검사가능. 문법자체가 복잡하므로 학습 비용이 비교적 높음

정규표현식 객체 생성하기

    <button id="btn1">정규표현식 객체</button>

    btn1.addEventListener('click',(e)=>{
        //숫자포함여부 검사용 정규표현식
        const regexp1 = /[0-9]/gi;
        const regexp2 = new RegExp(/[0-9]/gi);
        const regexp3 = new RegExp("[0-9]","gi");
        console.dir(regexp1);
        console.dir(regexp2);
        console.dir(regexp3);
    });

모두 똑같이 표현되는 것을 확인할 수 있다.

"gi"를 플래그 라고 한다.

    btn1.addEventListener('click',(e)=>{
        //숫자포함여부 검사용 정규표현식
        const regexp1 = /[0-9]/gi;
        const regexp2 = new RegExp(/[0-9]/gi);
        const regexp3 = new RegExp("[0-9]","gi");

        //정규식
        console.log(regexp1.test("abcde"));//false
        console.log(regexp1.test("hello123",regexp1.lastIndex));//true 한개라도 해당되면 true
        console.log(regexp1.exec("hello123",regexp1.lastIndex));//매칭결과를 배열로 변환
        console.log(regexp1.exec("hello123",regexp1.lastIndex));
        console.log(regexp1.exec("hello123",regexp1.lastIndex));

    });

정규식 테스트는 1개라도 해당이 되면 true를 리턴한다.

regexp1.lastIndex 는 매칭의 결과를 배열로 변환한다.

lastIndex를 계속 입력할 경우 그다음인덱스, 그다음 인덱스, ... 를 반환하고

"hello123"보다 긴 인덱스를 찾을 경우 null을 반환한다.

.search : 처음 일치한 인덱스 반환

.replace(정규표현식,"바꿀문자") : 일치하는 부분 바꿀문자로 변환

split(/[ ]/) : [ ] 안에 들어가는 값으로 split

match : 일치하는 요소를 배열로 변환

    btn1.addEventListener('click',(e)=>{
        //숫자포함여부 검사용 정규표현식
        const regexp1 = /[0-9]/gi;
        const regexp2 = new RegExp(/[0-9]/gi);
        const regexp3 = new RegExp("[0-9]","gi");

        //문자열
        console.log("hello123".search(regexp1));//5 처음 일치한 인덱스 반환
        console.log("hello123".replace(regexp1,"*"));//hello*** 일치하는 부분을 *으로 변환
        console.log("a,p/p l,e".split(/[,/ ]/));//['a','p','p','l','e']
        console.log("hello123".match(regexp1));//일치하는 요소를 배열로 반환 ['1','2','3']
    });

대체문자

String#replace시 사용
$& 매칭된 문자열
$` 매칭 이전 문자열
$' 매칭 이후 문자열

     btn2.addEventListener('click',(e)=>{
        const str="javascript jquery ajax css sass";
        const regexp=/as/g;
        area2.innerHTML=`${str.replace(regexp,"<mark>$&</mark>")}<br/>`;
        area2.innerHTML+=`${str.replace(regexp,"<mark>$`</mark>")}<br/>`;
        area2.innerHTML+=`${str.replace(regexp,"<mark>$'</mark>")}<br/>`;
        area2.innerHTML+=`${str.replace(regexp,(matched)=>`<mark>${matched}</mark>`)}<br/>`;
    });

/as/g : as를 전역으로 찾음

flag 문자 (정규표현식 옵션)

g global : 전역비교수행. 여러건 매칭을 처리. g가 없으면 첫 매칭만 처리
i ignoreCase : 영문자에 한해 대소문자 구분하지 않고 처리
m multiLine : 여러줄인 경우(\n) 행단위로 처리

    const SUBSTITUTE = "<mark>$&</mark>";
    btn3.onclick=(e)=>{
        const str="Javascript jQuery Ajax Sass";
        area3.innerHTML =`${str.replace(/a/g,SUBSTITUTE)}<br>`;
        area3.innerHTML +=`${str.replace(/a/g,SUBSTITUTE)}<br>`;
        area3.innerHTML +=`${str.replace(/a/gi,SUBSTITUTE)}<br>`; //대문자도 포함

    }

anchor

^ 시작
$ 끝

    btn4.onclick=(e)=>{
        const str="Javascript xxx jQuery Ajax";
        area4.innerHTML=`${str.replace(/^j/i,SUBSTITUTE)}<br/>`;//i안붙이면 해당사항없
        area4.innerHTML+=`${str.replace(/x$/,SUBSTITUTE)}<br/>`;

        const str2=`Javascript
xxx
jQuery
Ajax`; //탭안쓰고 바짝붙여써야 플래그 실행됨
        area4.innerHTML+=`${str2.replace(/^j/img,SUBSTITUTE)}<br/>`; //플래그 사이 순서 상관없
        // m = 줄단위 수행. 엔터쳐야 의미있음
        area4.innerHTML+=`${str2.replace(/x$/gm,SUBSTITUTE)}<br/>`;
    };

.(온점) : 임의의 한글자 의미

문자, 특수문자, 공백문자 하나를 가리킴

개행문자(\n)는 임의의 글자에 포함되지 않음. 띄어쓰기는 포함

    btn5.onclick=(e)=>{
        const regexp =/^a.b/;
        console.log("acb",regexp.test("acb"));//true
        console.log("acbc",regexp.test("acbc"));//true
        console.log("acbcccccccc",regexp.test("acbcccccccc")); //true
        console.log("aaba",regexp.test("aaba"))//true
        console.log("ab",regexp.test("ab"))//false
        console.log("a b",regexp.test("a b"))//true
        console.log("a\nb",regexp.test("a\nb"))//false

        const regexp2=/in.$/; //in다음에 한글자 있고 끝이나는 문자열 검사
        console.log("going",regexp2.test("going")); //true
        console.log("inner",regexp2.test("inner")); //f
        console.log("holidayin",regexp2.test("holidayin"));//f
    }

[ ]

하나의 문자에 대한 값목록(순서상관없음), 범위(아스키코드(유니코드)작은순-큰순) [abc] [김이]

[^abc] [ ]안에 사용된 ^은 반전을 의미. abc가 아닌 문자

    btn6.onclick=(e)=>{
        const str="Javascript jQuery Ajax 12345 안녕 ㄱㄴㄷ ㅏㅔㅣㅗㅜ";
        area6.innerHTML=`${str.replace(/[0123456789]/g,SUBSTITUTE)}<br/>`;
        area6.innerHTML+=`${str.replace(/[0-9]/g,SUBSTITUTE)}<br/>`;
        area6.innerHTML+=`${str.replace(/[A-Za-z]/g,SUBSTITUTE)}<br/>`;//범위쓸때는 (유니코드)작은값부터 큰값으로
        area6.innerHTML+=`${str.replace(/[a-z]/gi,SUBSTITUTE)}<br/>`;
        area6.innerHTML+=`${str.replace(/[가-힣ㄱ-ㅎㅏ-ㅣ]/g,SUBSTITUTE)}<br/>`;//자모음분리상태는 이걸로 체크 불가
        
        //@실습문제
        //1. 알파벳소문자로 시작하는 문자열 여부검색
        const re1=/^[a-z]/g;
        console.log(re1.test("abcde"));//true
        console.log(re1.test("123qwerty"));//false
        console.log(re1.test("Hello World"));//f
        console.log(re1.test("aㅏㅏㅏㅏㅏㅏ"));//true
        console.log(re1.test("ㄱaaaㄹaaaa"));//f

        //2. 숫자 4자리 여부 검사
        const re2=/^[0-9][0-9][0-9][0-9]$/g;
        console.log(re2.test("1234"));//t
        console.log(re2.test("123456"));//f
        console.log(re2.test("abcd"));//f
        console.log(re2.test("12"));//f
        console.log(re2.test("가나다라"));//f
    };

단축문자

\d digit : 숫자 한글자
\w word : 영문자/숫자/_ 한글자
\s space : 공백문자/개행문자/탭문자 한글자
\D : 숫자아닌 한글자
\W : 영문자, 숫자, _ 아닌 한글자
\S : 공백문자, 개행문자, 탭문자가 아닌 한글자

    btn7.onclick=(e)=>{
        const str = `A1 B2 c3 d_4 e:5 fG12345 -@!@#$% 
안녕    잘가
水`;
        area7.innerHTML=`${str.replace(/\d/g,SUBSTITUTE)}<br/>`;
        area7.innerHTML+=`${str.replace(/\D/g,SUBSTITUTE)}<br/>`;
        area7.innerHTML+=`${str.replace(/\w/g,SUBSTITUTE)}<br/>`;
        area7.innerHTML+=`${str.replace(/\W/g,SUBSTITUTE)}<br/>`;
        area7.innerHTML+=`${str.replace(/\s/g,SUBSTITUTE)}<br/>`;
        area7.innerHTML+=`${str.replace(/\S/g,SUBSTITUTE)}<br/><br/>`;

        //[]문법
        area7.innerHTML += `${str.replace(/[0-9]/g, SUBSTITUTE)}<br/>`;
        area7.innerHTML += `${str.replace(/[^0-9]/g, SUBSTITUTE)}<br/>`;
        area7.innerHTML += `${str.replace(/[A-Za-z0-9_]/g, SUBSTITUTE)}<br/>`;
        area7.innerHTML += `${str.replace(/[^A-Za-z0-9_]/g, SUBSTITUTE)}<br/>`;
        area7.innerHTML += `${str.replace(/[ \n\t]/g, SUBSTITUTE)}<br/>`;
        area7.innerHTML += `${str.replace(/[^ \n\t]/g, SUBSTITUTE)}<br/>`;
    }

( ) grouping , | or

btn8.onclick = (e) => {
  const str = '월요일에는 월요병, 화가 부르르르 화요일 홧병, 수수술한잔 하는 수요일, 목이 컥~ 목요일, 금방 오지 않는 금요일, 그리고 오늘은 월요일';
  area8.innerHTML = `${str.replace(/(수요일|목요일|금요일)/g, SUBSTITUTE)}<br/>`;
  area8.innerHTML += `${str.replace(/(수|목|금)요일/g, SUBSTITUTE)}<br/>`;
  area8.innerHTML += `${str.replace(/[수목금]요일/g, SUBSTITUTE)}<br/>`;

  // String#match:매칭된 결과를 배열로 반환
  console.log(str.match(/(월요일|화요일)/g));
};

escaping

wildcard문자를 문자그대로 사용하고자 하는 경우 \와 함께 escaping할 수 있다.
[ ]안에서 escaping 필요없음. (단 \\ 처리 필요)

btn9.onclick = (e) => { 
  const str = '\\3.4^2$'; 
  area9.innerHTML = `${str.replace(/\$/, SUBSTITUTE)}<br>`;
  area9.innerHTML += `${str.replace(/\./, SUBSTITUTE)}<br>`;
  area9.innerHTML += `${str.replace(/\\/, SUBSTITUTE)}<br>`;
  area9.innerHTML += `${str.replace(/\^/, SUBSTITUTE)}<br>`;
  area9.innerHTML += `${str.replace(/[$]/, SUBSTITUTE)}<br>`;
  area9.innerHTML += `${str.replace(/[.]/, SUBSTITUTE)}<br>`;
  area9.innerHTML += `${str.replace(/[\\]/, SUBSTITUTE)}<br>`;
  area9.innerHTML += `${str.replace(/[\^$]/g, SUBSTITUTE)}<br>`;
  area9.innerHTML += `${str.replace(/[$^]/g, SUBSTITUTE)}<br>`;

};

수량자 Quantifier

a* a가 0개이상
a+ a가 1개이상
a? a가 0,1개
a{2,5} a가 2개이상 5개이하
a{2, } a가 2개이상
a{3} a가 3개
~~a{ , 5}~~ ~~a가 5개 이하 (지원하지 않는 문법)~~

    btn10.onclick = () => {
    const str = "aabc abc bc";
    area10.innerHTML = `${str.replace(/a*b/g, SUBSTITUTE)}<br/>`;
    area10.innerHTML += `${str.replace(/a+b/g, SUBSTITUTE)}<br/>`;
    area10.innerHTML += `${str.replace(/a?b/g, SUBSTITUTE)}<br/>`;

    // @실습문제 
    // a로 시작하고, z로 끝나는 문자열 검사
    const regexp = /^a.*z$/;
    console.log(regexp.test("abcdefz")); // true
    console.log(regexp.test("a*z")); // true
    console.log(regexp.test("az")); // true
    console.log(regexp.test("abc")); // false
    console.log(regexp.test("xyz")); // false
    console.log(regexp.test("안a하b이c녕z")); // false
    console.log("-----------------------")

    // 영문자만으로 이루어진 문자열 검사
    const regexp2 = /^[A-Za-z]+$/;
    console.log(regexp2.test("abcde"));
    console.log(regexp2.test("a"));
    console.log(regexp2.test(""));
    console.log(regexp2.test("123"));
    console.log(regexp2.test("abc123"));
    };

    btn11.onclick = () => {
    const str = "aa aba abba abbba";
    area10.innerHTML = `${str.replace(/ab{0,}a/g, SUBSTITUTE)}<br>`;
    area10.innerHTML += `${str.replace(/ab*a/g, SUBSTITUTE)}<br>`;
    area10.innerHTML += `${str.replace(/ab{1,}a/g, SUBSTITUTE)}<br>`;
    area10.innerHTML += `${str.replace(/ab+a/g, SUBSTITUTE)}<br>`;
    area10.innerHTML += `${str.replace(/ab{0,1}a/g, SUBSTITUTE)}<br>`;
    area10.innerHTML += `${str.replace(/ab?a/g, SUBSTITUTE)}<br>`;
    area10.innerHTML += `${str.replace(/ab{1}a/g, SUBSTITUTE)}<br>`;

    // 4자리 숫자로 이루어진 비밀번호 검사
    const regexp1 = /^\d{4}$/;
    console.log("1234", regexp1.test("1234")); // true
    console.log("123456", regexp1.test("123456")); // false
    console.log("abcd", regexp1.test("abcd")); // false
    console.log("12", regexp1.test("12")); // false
    console.log("가나다라", regexp1.test("가나다라")); // false
    console.log("----------------------------------")
    // 숫자로 시작하고 영문자가 3개이상 나오고, .로 끝나는 문자열 검사
    const regexp2 = /^\d[a-zA-Z]{3,}\.$/;
    console.log("9abcdefg.", regexp2.test("9abcdefg.")); // true
    console.log("9abc.", regexp2.test("9abc.")); // true
    console.log("100", regexp2.test("100")); // false
    console.log("1가나다.", regexp2.test("1가나다.")); // false
    console.log("123abc가나다.", regexp2.test("123abc가나다.")); // false
    };

Look Around

검사만 실시하고 최종 결과에 포함되지 않는 것.

Look Ahead
1. a(?=b) b가 뒤따르는 a를 조회
2. a(?!b) b가 뒤따르지 않는 a를 조회
Look behind
1. (?<=b) a앞에 b가 존재하는 a를 조회
2. (?<! b) a앞에 b가 존재하지 않는 a를 조회

    btn12.onclick = () => {
    const str1 = 'hello world hello Tom hello Jane';
    area12.innerHTML = `${str1.replace(/hello(?= world)/g, SUBSTITUTE)}<br>`;
    area12.innerHTML += `${str1.replace(/hello(?! world)/g, SUBSTITUTE)}<br>`;
    
    const str2 = 'hello world lotte world t world';
    area12.innerHTML += `${str2.replace(/(?<=hello )world/g, SUBSTITUTE)}<br>`;
    area12.innerHTML += `${str2.replace(/(?<!hello )world/g, SUBSTITUTE)}<br>`;
    
    };

*비밀번호 유효성 검사*

ex ) 8~12자리, 숫자/영문자/특수문자(!&/\*@)가 하나이상 포함된 비밀번호

    <input type="text" name="password" id="password" placeholder="비밀번호">

    password.onblur = (e) => {
    const val = e.target.value;

    if(!/^.{8,12}$/.test(val)){
        alert("비밀번호는 8 ~ 12자리여야 합니다.");
        return;
    }
    if(!/\d/.test(val)){
        alert("비밀번호는 하나이상의 숫자를 포함해야 합니다.");
        return;
    }
    if(!/[a-z]/i.test(val)){
        alert("비밀번호는 하나이상의 영문자를 포함해야 합니다.");
        return;
    }
    if(!/[!&/\\*@]/i.test(val)){
        alert("비밀번호는 하나이상의 특수문자(!&/\\*@)를 포함해야 합니다.");
        return;
    }

    console.log("비밀번호가 유효합니다.");
    };

[kh정보교육원 65일차] Javascript - Event(이벤트)

유경(shin-6-0) — Thu, 13 Apr 2023 11:19:01 +0900

Event (이벤트)

문서가 모두 로딩되었을때 window의 load이벤트 발생!

window.onload와 body.onload는 동일하다.

    window.onload=()=>{
        const h2=document.createElement("h2");
        h2.append(document.createTextNode("Hello Friday~"));
        target.append(h2); //Uncaught ReferenceError: target is not defined -> 위에서부터 아래로 해석
    };
    <body onload="alert('Page Loading Complete')"><!--onload="alert('Page Loading Complete!')"-->

event

웹페이지 상에 일어나는 모든 사용자의 action, 네트워크상 처리상태변화 등 event라는 이름으로 하나의 이벤트로 관리됨.

event -> eventHandler : 이벤트가 발생하면, 태그에 등록된 핸들러를 호출

태그객체별로 event별 eventHandler 등록해서 사용

    <h1>event</h1>
    <a href="https://www.w3schools.com/tags/ref_eventattributes.asp">HTML Event Attributes</a>

handler binding

handler binding 1 : inline 이벤트 속성에 작성한 내용이 핸들러함수의 몸통에 전달된다.

handler binding 2 : 태그 객체의 이벤트 속성에 핸들러를 직접 지정, 하나의 핸들러만 적용 가능

handler binding 3 : addEventListener(이벤트명, 핸들러), 복수개의 핸들러 등록 가능

    //handler binding 1
    const test1=()=>{
        console.log(btn1.onclick); //ƒ onclick(event) {test1();} 함수의 몸통에 전달됨.
    };
    //handler binding 2
    btn2.onclick=()=>{
        console.log(btn2.onclick);//()=>{console.log(btn2.onclick);}
    };
    btn2.onclick=()=>{
        console.log('#btn2 clicked! - 2 ');
        btn2.onclick=null; //등록된 함수 제거
    };
    //handler binding 3
    const foo1=()=>console.log('#btn3 clicked! - 1');
    const foo2=()=>{console.log('#btn3 clicked! - 2');
        btn3.removeEventListener('click',foo2);
    }
    btn3.addEventListener('click',foo1);
    btn3.addEventListener('click',foo2);

실습문제 _ 이미지 로딩하기

조건 ) #btn를 클릭하면, 동적으로 img태그를 생성해서 #target의 자식요소로 추가.

추가가 완료되면(load) "이미지 로딩이 완료되었습니다. " 메세지를 alert하세요.

    <div id="target"></div>
    <script>
    btn4.addEventListener('click',()=>{
        const img=document.createElement("img");
        img.src="../sample/image/hyunta.jpg";
        img.style="width:100px; border-radius:50%;";
        img.onload=()=>alert("이미지 로딩이 완료되었습니다.");
        target.innerHTML ="";//자식요소 모두 제거
        target.append(img);
    });
    </script>

[kh정보교육원 64일차] Javascript - window객체 , BOM, DOM

유경(shin-6-0) — Fri, 7 Apr 2023 07:16:30 +0900

window객체

웹페이지의 모든 자원을 관리하는 객체

BOM (Browser Object Model)

navigator, location, history, screen, XMLHttpRequest, frames ...

DOM (Document Object Model)

document (html로 부터 변환된 객체)

Javascript (Object, String, Array, ...)

오늘은 이렇게 배워봤다.

window 객체

웹페이지의 모든 자원을 관리하는 객체 (최상위)

F12콘솔창에 this를 검색하면, 다음과 같이 window 가 가진 객체들이 뜬다.

그외에도 window.Object , window.Array, window.String 등등 검색이 가능하다.

window객체는 페이지에 대한 관리로, 크롬 탭이 여러개일 경우 window객체도 여러개라고 봐야 한다.

window객체의 메소드들을 알아보자.

open

새 탭 또는 팝업을 시작하는 메소드
open(url, target, specs) : window
target : window 이름 또는 _self
specs : 팝업크기, 위치 지정

    <button onclick="test1();">open</button>
    <button onclick="test2();">close</button>

    const test1 = () => {
      open("index.html");
    };

다음과 같이 입력하면, 버튼 open을 클릭시 index.html이 새 탭으로 나타난다.

    const test1 = () => {
      open("https://naver.com", "_self");
    };

다음과 같이 입력하면, open 클릭시 네이버로 가며, 새 탭이 아닌 현재 창에서 띄워진다.

    let newWindow;
    const test1 = () => {
      newWindow = open("index.html", "javascript-index"); // 새 window객체의 name
      console.log(newWindow);
    };

위와 같이 입력하면, index페이지가 새로 열리고, 그 index페이지의 window객체 이름은 javascript-index가 된다.

콘솔창에 window를 검색해보면 이름이 제대로 설정된 것을 확인할 수 있다.

    let newWindow;
    const test1 = () => {
      newWindow = open("", "popup", "width=300px, heigimage.pnght=300px, left=200px, top=200px");
      console.log(newWindow);
    };
    const test2 = () => {
      newWindow.alert('부모창(opener)에서 보낸 메세지~ '); // non-block | block (newWindow콘솔 open되었을때만!)
      newWindow.close();
    }

open을 누르면 새 창이 왼쪽에서부터 200px, 위에서부터 200px 아래에 존재하게 뜨는 것을 볼 수 있다.

여기서 기준값은 '모니터의 크기' 이며, 브라우저 바 를 제외하고 창에서만 위치를 계산해서 따진다.

close를 누를 경우 종료가 제대로 된다.

* 여기서 alert는 제대로 작동하지 않았는데, non-block | block에 따라 다르다고 하는데 이해를 하지 못했다 ㅠ

setTimeout (callbackFunction, millis) : id

    <button onclick="test3();">setTimeout</button>
    <button onclick="test4();">clearTimeout</button>
    <button onclick="test5();">@실습문제 - 타이머</button>

    let timeoutId;
    const test3 = () => {
      timeoutId = setTimeout(() => {
        alert('안녕');
      }, 3000);
      console.log("timeoutId : ", timeoutId);
    };

    const test4 = () => {
      clearTimeout(timeoutId);
      console.log(timeoutId + "번 timeout을 취소!");
    };

3000의 단위는 밀리초로, setTimeout 버튼을 클릭하면 3초뒤에 '안녕'이라는 팝업이 뜬다.

팝업이 뜨기 전에 clearTimeout을 클릭하면 창이 뜨지 않는다.

팝업이 뜬 후에 clearTimeout을 입력하면, console창에 취소 메세지는 뜨지만, 실제로 취소할 수 없다.

팝업 타이머 만들기

사용자부터 타이머메세지와 시간(초)를 입력받아 타이머를 생성해보자.

    const test5 = () => {
      const msg = prompt("타이머 메세지를 입력해주세요~", "밥 먹어라~");
      const sec = prompt("타이머 시간(초)을 입력해주세요~", "3");
      timeoutId = setTimeout(() => {
        alert(msg);
      }, sec * 1000);
    };

이렇게 입력하면

정확히 3초뒤에 입력한 내용 그대로 팝업이 뜬다.

setInterval(callbackFunction, millis) : intervalId

millis초 후에 millis초 간격으로 callbackFunction 실행

    <h2 id="count"></h2>
    <button onclick="test6();">setInterval</button>
    <button onclick="test7();">clearInterval</button>
    <h2 id="clock"></h2>

    let countNum = 10;
    count.innerHTML = countNum;
    let intervalId;
    const test6 = () => {
      intervalId = setInterval(() => {
        countNum--;
        count.innerHTML = countNum;
      }, 1000);
      console.log('intervalId :', intervalId);
    };
  
    const test7 = () => {
      clearInterval(intervalId);
    };

setInterval 을 실행하면 1초(1000밀리초)에 숫자가 1개씩 줄어든다.

clearInterval을 실행하면 계속 실행되던 setInterval이 멈춘다. (-값이어도 계속 진행됨)

시계만들기

    const clockString = () => {
      const f = (n) => n.toString().padStart(2, "0");
      const now = new Date();
      const yyyy = now.getFullYear();
      const MM = f(now.getMonth() + 1);
      const dd = f(now.getDate());
      const hh = f(now.getHours());
      const mm = f(now.getMinutes());
      const ss = f(now.getSeconds());
      return `${yyyy}/${MM}/${dd} ${hh}:${mm}:${ss}`;
    };
    const displayClock = () => clock.innerHTML = clockString();
    console.log(setInterval(displayClock, 1000));

다음과 같이 실행하면, 현재 시간이 출력된다.

BOM (Browser Object Model)

navigator, location, history, screen, XMLHttpRequest, frames ...

BOM에 종류에는 위와 같은 것들이 있다. 하나하나 알아보자.

navigator

브라우저에 대한 정보를 가진 객체

userAgent

    const test1 = () => {
        console.log(navigator);
        console.log(navigator.userAgent);
        //크롬 : Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.67 Safari/537.36
        //firefox : Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:100.0) Gecko/20100101 Firefox/100.0
        //edge : Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.64 Safari/537.36 Edg/101.0.1210.53
        //웨일 : Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.151 Whale/3.14.134.62 Safari/537.36
        //사파리 : Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.4 Safari/605.1.15

    };

크롬에서 실행하면 다음과 같이 나온다.

이걸로 브라우저가 어떤 기반으로 만들어졌는지 알 수 있다.

location

브라우저 주소표시줄 관련정보를 가진 객체

location.href=" "; 페이지 이동

location.reload(); 새로고침

    const test2 = () => {
    console.log(location);
    const {href, protocol, hostname, port, origin, pathname, search, hash} = location;
    console.log(href, protocol, hostname, port, origin, pathname, search, hash);
    // http://192.168.10.6:5500/03_javascript/17_BOM.html?type=abc&query=%EC%95%88%EB%85%95#qwerty 
    // http: 
    // 192.168.10.6 
    // 5500 
    // http://192.168.10.6:5500 
    // /03_javascript/17_BOM.html 
    // ?type=abc&query=%EC%95%88%EB%85%95 
    // #qwerty
  };


    //페이지이동
    const test3=()=> location.href="https://naver.com";
    //새로고침
    const test4=()=> location.reload();

test2 실행시, 주석과 같은 정보들이 나타나고

test3 실행시 네이버로 페이지가 이동된다.

test4 실행시 새로고침이 진행된다.

history

브라우져 방문기록 관리 객체

history.forward(); : 앞으로가기

history.back(); : 뒤로가기

go(n) : 양수) 제공된 숫자만큼 앞으로가기 / 0) 새로고침 / 음수) 제공된 숫자만큼 뒤로가기

    const test5=()=>{
        console.log(history);
    };
    const test6=()=>history.forward();
    const test7=()=>history.back();

test5실행시 length:3을 볼 수 있는데, 현재페이지, 이전페이지, 이후 페이지 합쳐서 3개라는 것을 의미한다.

test6, 7 실행시 뒤로 갔을때와 앞으로 갔을 때의 length를 확인할 수 있다.

     const test8 = () => {
    const n = prompt("이동한 페이지에 대해 정수로 입력하세요.")
    history.go(n);
  }

이 역시 n에 대한 값을 입력하면 이동하는 것을 확인할 수 있다.

0 : 새로고침

양수 : 앞으로가기

음수 : 뒤로가기

screen

os에 연결된 모니터(hardware)관련 정보를 가진 객체

    <button onclick="test9();">screen</button>

     const test9=()=>{
        console.log(screen);
        const {width,height,availWidth,availHeight,availLeft,availTop}=screen;
        console.log(width,height,availWidth,availHeight,availLeft,availTop);
        //1440
        //900
        //1440
        //860
        //-1440
        //0

        //300px=300px 팝업창을 화면 정가운데 위치시키기
        const left=availLeft+(width-300)/2;
        const top=availTop+(height-300)/2;
        open("","popup",`width=${width}px, height=${height}px, left=${left}px, top=${top}px`);
    };

이렇게 정보가 뜬다. 이를 참고해서 popup을 만들면,

open으로 모니터크기와 똑같은 popup이 뜨게 된다.

DOM (Document Object Model)

document (html로 부터 변환된 객체)

window.document

브라우져가 html문서를 해석해서 document객체 하위에 계층구조로써 html태그객체를 관리한다.

document.getElementByXXX, document.querySelectorXXX 메소드는 모두 DOM에서 검색하게 된다.

Node.prototype, Element.prototype등을 상속하고 있다.

Node계열

- TextNode

- CommentNode

Element계열

- 모든 Tag(Element) 객체

    <div id="sample">
        <span>Hello</span>
        <!--Hello는 한국어로 안녕입니다. -->
    </div>
    <button onclick="test1();">#sample</button>
    <button onclick="test2();">Element-textNode</button>
    <button onclick="test3();">Element</button>

    const test1 = () =>{
        console.log(sample);
        console.dir(sample);
    };

    const test2=()=> {
        const h2=document.createElement("h2");
        const content = document.createTextNode("안녕하세요");
        h2.appendChild(content);//각자 만든 후 합친것 . 이 줄 선언전까지는 합쳐지지 않음.
        document.body.appendChild(h2); //body의 자식요소로 맨 마지막 DOM에 추가
        //이벤트핸들러를 바로 등록 가능.
        h2.click=()=>{alert("ㅋㅋㅋㅋ")};

        document.body.innerHTML+="<h2>안녕하세요</h2>";
    };

    const test3=()=>{
        const img=document.createElement("img");
        img.src="../sample/image/hyunta.jpg";
        img.style='width:300px; margin:10px; border-radius:50%;';
        document.body.append(img);
    };

test1의 경우 sample에 대한 코드, sample에 대한 구성요소가 나온다.

test2의 경우, textNode로 "안녕하세요"와 createElement로 h2를 만들고, 이를 합친다.

출력시 위와 같이 나오게 된다.

test3의 경우, textNode없이 img element를 생성했다.

요소제거

자식속성

- Node속성 : firstChild | lastChild | childNodes

- Element속성 : firstElementChild | lastElementChild | children

형제속성

- Node속성 : nextSibling | previousSibling

- Element속성 : nextElementSibling | previousElementSibling

부모요소

- Node속성 : parentNode

- Element : parentElement

자식요소

    <button onclick="test4();">자식요소제거</button>
    <button onclick="test5();">요소제거</button>
    <button onclick="test6();">형제요소</button>
    <button onclick="test7();">부모요소</button>
    <button onclick="test8();">@실습문제 - textNode변경하기</button>


    <div id="foo">
        <p id="p1">안녕1</p>
        <p id="p2">안녕2</p>
        <p id="p3">안녕3</p>
        <p id="p4">안녕4</p>
        <p id="p5">안녕5</p>
    </div>

    const test4=()=>{
        console.dir(foo);
        console.log(foo.firstChild);
        console.log(foo.firstElementChild);
        console.log(foo.lastChild);
        console.log(foo.lastElementChild);
        console.log(foo.childNodes);//[text, p, text, p, text, p, text, p, text, p, text]
        console.log(foo.children);//[p, p, p, p, p]

        // foo.removeChild(foo.firstChild);//textNode제거
        console.log(foo.removeChild(foo.firstElementChild)); //p제거후 반환

        //모든 자식요소 제거
        while(foo.firstChild){
            foo.removeChild(foo.firstChild);
        }
    };

test4클릭시 자식요소가 제거되므로, 안녕1,2,3,4,5 가 모두 삭제된다.

foo => 함수 출력

foo.firstChild => foo의 첫번째 요소 #text 출력

foo.firstElementChild =>foo의 첫번째 요소 내용 <p id="p1">안녕1</p> 출력

foo.lastChild => foo의 마지막 요소 #text 출력

foo.lastElementChild =>foo의 마지막 요소 내용 <p id="p5">안녕5</p> 출력

foo.ChildNodes => text, p#p1, text, p#p2 ... 출력

foo.children => 자식요소의 p태그와, 요소별로 p태그 값이 출력

foo.removeChild(foo.firstElementChild) => 첫번째요소 제거 후 값 반환

    const test5=()=>foo.remove();

태그 자신이 직접 제거된다.

형제속성

    const test6=()=>{
        console.log(foo.childNodes);
        // const node = p3.nextSibling.nextSibling;//textNode-p#p4
        // const node=p3.previousSibling.nextSibling;//textNode-p#p2
        // const node = p3.nextElementSibling; // p#p4
        const node = p3.previousElementSibling;//p#p2
        console.log(node);
        node.style.color='red';//textNode에는 style속성이 없다.
    }

p3태그의 previousElement인 p2태그만 빨간색으로 변하였다.

부모속성

    const test7=()=>{
        const node =p3.parentNode;
        // const node=p3.parentElement;
        node.style.color="blue";
        console.log(node);
    };

p3태그의 부모요소 (p태그 전체)가 파란색으로 변하였다.

부모요소(test7)클릭 후, 자식요소( test6) 클릭시 (혹은 순서 반대) 위와 같이 나온다.

부모요소와 자식요소설정은 동시에 적용될 수 있다.

@실습문제 - textNode변경하기

- #p2 컬러 pink

- #p5 컬러 tomato

- 부모요소를 찾아 background-color를 지정

- 자식요소의 textNode를 hello1,Hello2, ... 로 변경하기

    const test8=()=>{
        p3.previousElementSibling.style.color="hotpink";
        p3.nextElementSibling.nextElementSibling.style.color="tomato";
        p3.parentElement.style.backgroundColor="beige";
        console.log(p3.parentElement.children);//유사배열
        [...p3.parentElement.children].forEach((p,index)=>{
            const content = document.createTextNode('Hello'+(index+1));
            // p.removeChild(p.firstChild); //기존 textNode제거
            // p.appendChild(content);//새로추가
            p.replaceChild(content,p.firstChild);//newNode,oldNode순으로 전달
        
        })
    };

값이 제대로 전달된 것을 확인할 수 있다. p5는 nextElementSibling을 두번 써서 진행했다.

값을 Hello1,2,3,4,5로 바꾸는 것은 약간 어려웠는데, forEach를 이용해서 p값과 index값을 정해 반복으로 진행했다.

replaceChild는 대체한다는 뜻이고 newNode / oldNode 순으로 전달한다.

parent.insertBefore(newNode, refNode)

    const test9=()=>{
        const mark=document.createElement("mark");
        mark.append(document.createTextNode("금요일이다!")); //mark.innerText="금요일이다~";

        // foo.insertBefore(mark,p3);
        p3.insertAdjacentElement('beforebegin',mark);
    };

target.insertAdjacentHTML (position, html);

beforebegin 시작태그전(형제요소)
afterbegin 시작태그직후(자식요소)
beforeend 종료태그직전(자식요소)
afterend 종료태그후 (형제요소)

    const test10=()=>{
        const html = "<mark>HTML</mark>";

        p3.insertAdjacentHTML('beforebegin',html);
        p3.insertAdjacentHTML('afterbegin',html);
        p3.insertAdjacentHTML('beforeend',html);
        p3.insertAdjacentHTML('afterend',html);
    };

순서대로 결과를 하나씩 보면

[kh정보교육원 63일차] Javascript - 객체배열 (리터럴,생성자함수,prototype,속성비교), 상속

유경(shin-6-0) — Tue, 4 Apr 2023 15:39:41 +0900

객체배열 - 리터럴

[{},{},{}] 이런 형태로 관리할 때 사용한다.

    const test1=()=>{
        const pets=[];
        pets.push({
            name:'구리구리',
            breed: '푸들',
            weight: 3,
            age: 10,
            color:['white'],
            bark(){
                console.log(this.weight);
                return this.weight< 10?'왈왈':'멍멍';
            }
        })
        pets.push({
            name:'둘리',
            breed: '말티즈',
            weight: 6,
            age: 5,
            color:['white'],
            bark(){
                console.log(this.weight);
                return this.weight< 10?'왈왈':'멍멍';
            }
        })
        pets.push({
            name:'사랑이',
            breed: '코카스파니엘',
            weight: 13,
            age: 3,
            color:['white','brown'],
            bark(){
                console.log(this.weight);
                return this.weight< 10?'왈왈':'멍멍';
            }
        })
        console.log(pets);

        // 반복처리 : 둘리야 ~ 왈왈/멍멍
        pets.forEach((pet)=>{
            const{name,bark}=pet;
            //method를 구조분해할당하면 this를 잃어버린다. 
            console.log(`${pet.name}야~ ${bark.call(pet)}`);//this를 pet으로 binding해서 bark호출!
        });
    };

pets를 출력하면 pets의 모든 객체들이 출력되는 것을 확인할 수 있다.

name과 bark도 아래 써진 방법으로 출력이 가능하다.

10키로가 넘는지 안넘는지에 따라 왈왈,멍멍이 다르게 출력되는 것을 확인할 수 있다.

객체배열 - 생성자함수

    const test2=()=>{
        const pets=[];
        pets.push(new Pet('구리구리','푸들',3,10,'white'));
        pets.push(new Pet('둘리','말티즈',6,5,'white'));
        pets.push(new Pet('사랑이','코카스파니엘',13,3,'white','brown'));
        console.log(pets);
        pets.forEach((pet)=>{
            const{name,bark}=pet;
            console.log(`${pet.name}야~ ${bark.call(pet)}`);
        });
        
    };

생성자함수

관례상 대문자로 시작하는 이름을 가진다.
new 연산자를 통해 호출되고, 객체를 생성한다.
this용법 6. 생성자함수안의 this는 현재 객체를 가르킨다.
화살표함수는 생성자함수로 사용할 수 없다.

    function Pet(name,breed, weight,age, ...color){
        this.name=name;
        this.breed=breed;
        this.weight=weight;
        this.age=age;
        this.color=color;
        // this.bark=function(){
        //     return this.weight<10?'왈왈':'멍멍';
        // };
    };

    Pet.prototype.bark=function(){
        return this.weight<10?'왈왈':'멍멍';
    }

다음과 같이 생성자함수를 만들었다.

객체로 push하여 더 짧고 간결한 코드로 프린트 할 수 있다.

생성자함수 - 프로토타입

javascript는 프로토타입 기반의 상속모델을 가진 객체지향 언어이다.
생성자함수 호출로 생성된 객체는 프로토타입과 연결된 프로토타입체인을 갖는다.
프로토타입체인 최상위에는 Object.prototype이 존재한다.

    const test3 = () =>{
        console.log(Duck);//생성자함수
        console.log(Duck.prototype);//프로토타입

        console.log(Duck.prototype.constructor==Duck); //true
        //duck을 만들면 duck.prototype이 자동으로 생김

        const lee=new Duck('이','오리'); //duck객체
        console.log(lee);

        lee.say();//Duck.prototype.say 호출
        console.log(lee.toString());//[object Object]
        console.log(`${lee}`); //[object Object]

        console.log(lee.__proto__);//Duck.prototype
        console.log(lee.__proto__===Duck.prototype);//true

        //생성자함수는 new연산자와 함께 호출해야한다.
        const donald = Duck('Donald','Trump');
        console.log(donald);//undefined
        console.log(this.firstName);//Donald
        console.log(this.lastName);//Trump
    };

    function Duck(firstName,lastName){
        this.firstName=firstName;
        this.lastName=lastName;
    }
    Duck.prototype.say=function(){
        console.log(`안녕하세요, ${this.firstName} ${this.lastName}입니다.`);
    }

duck을 만들면 duck.prototype은 자동으로 생긴다.

say로 duck을 호출한다.

생성자함수는 new연산자와 함께 호출해야한다.

속성비교

생성자함수 속성
프로토타입 속성
생성객체 속성

    const test4=()=>{
        const a= new A();

        console.dir(A);
        console.dir(A.prototype);
        console.log(a);
        
        //생성객체속성
        console.log(a.username);//알 파치노
        a.hello(); //안녕 알파치노

        //생성자함수 속성(static)
        console.log(A.username);//홍길동
        A.hello();//안녕 홍길동
    };
    /**
     * 생성자함수
     */
    function A(){
         this.username='알 파치노';
         this.hello=function(){
             console.log('안녕 알파치노');
         };
    }

    /**
     * 생성자함수 속성(=static자원)
     */
    A.username='홍길동';
    A.hello=function(){
        console.log('안녕 홍길동');
    }

a로 불러내면 알파치노(생성자 함수)가, A로 불러내면 홍길동(생성자함수 속성=static)이 출력된다.

    const test4=()=>{
        const a= new A();

        console.dir(A);
        console.dir(A.prototype);
        console.log(a);
        
        //생성객체속성
        console.log(a.username);
        a.hello(); 

        //생성자함수 속성(static)
        console.log(A.username);//홍길동
        A.hello();//안녕 홍길동
    };

    /**
     * 생성자함수 속성(=static자원)
     */
    A.username='홍길동';
    A.hello=function(){
        console.log('안녕 홍길동');
    }
    /**
     * 프로토타입 속성
     */
    A.prototype.username='아이언맨';
    A.prototype.hello=function(){
        console.log('안녕 아이언맨');
    };

생성자함수를 지우고, 프로토타입 속성을 출력하면 생성객체속성에서 알파치노(생성자함수) 대신 프로토타입 속성이 프린트된다.

상속

    const test1=()=>{
        const books=[
            new Book('매트릭스',35000,.15),
            new Book('오라클 완전정복',30000,.2),
            new Book('네오클래식',15000),
            new Comic('원피스',3000, 0, false),
            new Comic('드래곤볼',2500,0.1,true),
        ];
        console.log(books);
        books.forEach((book)=>console.log(`${book}`));
    };

    function Book(title,price,discountRate=0.05){
        this.title=title;
        this.price=price;
        this.discountRate=discountRate;
    }
    Book.prototype.getSalePrice = function(){
        return this.price-(this.price*this.discountRate);
    };
    Book.prototype.toString=function(){
        return `제목 : ${this.title}, 판매가 : ${this.getSalePrice()}원 (정가 : ${this.price}원)`;
    };

다음과 같은 books 가 존재할 때, Comic은 상속을 받은 자식 객체이다.

    function Novel(title,price,discountRate,type){
        //1. 부모생성자함수 호출
        Book.call(this,title,price,discountRate);
        //Book.apply(this,title,price,discountRate); //this사용가능
        //부모생성자함수에서 처리할 수 없는 속성 등록
        this.type=type;
    }
    //2. 자식생성자함수의 프로토타입객체를 부모프로토타입객체 복제본으로 지정
    Novel.prototype=Object.create(Book.prototype);
    //3. 2번에서 생성된 프로토타입객체의 constructor속성으로 자식생성자함수를 재지정
    Novel.prototype.constructor=Novel;
    function Comic(title,price,discountRate,finished){
        Book.call(this,title,price,discountRate);
        this.finished=finished;
    }
    Comic.prototype = Object.create(Book.prototype);//new 생성자함수호출 없이 Book객체 생성
    Comic.prototype.constructor=Comic;
    Comic.prototype.toString=function(){
        return `[${this.finished ? '완결' : '연재중'}] ${Book.prototype.toString.call(this)}`;
    }

자식 생성자함수 & 프로토타입 처리 하는 방법은 다음과 같다.

자식 생성자함수 안에서 부모 생성자 함수를 호출한다(super())
자식 생성자함수의 프로토타입 객체를 부모 프로토타입 객체의 복제본으로 지정한다.
2번에서 생성된 프로토타입의 객체를 constroctor속성으로 자식 생성자함수를 재지정한다.

위에서 방법에 따라 순서대로 처리를 하고, 프린트 한 결과 Book에 대한 프린트와 Comic에 대한 프린트 (연재여부 추가) 가 제대로 이루어졌음을 알 수 있다.

call | apply | bind

- this binding과 관련한 함수

- this를 binding해서 호출

- call(this객체, arg1, arg2, ...) - 함수의 매개인자를 나열

- apply(this객체, [arg1, arg2, ...]) - 함수의 매개인자를 배열로 전달

* 화살표함수는 this 재지정이 불가능하다

- this가 binding된 함수를 리턴한다. : bind

    const test2=()=>{
        const foo=function(a,b){
            console.log(this, this.id,a,b);//this는 window를 가르킴.
        }
        foo(10,20); //undefined 10 20

        const obj={
            id:'qwerty1234'
        };
        foo.call(obj,10,20); //{id:'qwerty1234'} 'qwerty1234' 10 20
        foo.apply(obj,[10,20]);//{id:'qwerty1234'} 'qwerty1234' 10 20

        const foooooo=foo.bind(obj);
        foooooo(10,20);
    };

call과 apply는 같은 역할을 하고, fooooo와도 같은 값이 나왔음을 알 수 있다.

Object.create

생성자 호출 없이 해당객체를 생성하는 메소드 (Object생성자함수의 static메소드)

    const test3=()=>{
        //1. room객체 - Room.prototype을 부모객체로 하는 객체생성. 생성자함수 호출(속성추가)
        const room1 = new Room(1);
        console.log(room1);

        //2. Object.create(Room.prototype) - Room.prototype의 자식객체 생성
        const room2 = Object.create(Room.prototype);
        console.log(room2);

        console.log(room1.__proto__ === Room.prototype);//true
        console.log(room2.__proto__===Room.prototype);//true

        
    };

    function Room (no) {
        this.no=no;
    }

Class

생성자함수와 상속관계를 문법적으로 쉽게 표현

생성자함수의 Syntactic Sugar(문법적 설탕)

class는 동일한 이름의 생성자함수를 선언한다.

new 연산자를 통해 생성자함수를 호출하면 constructor가 호출된다.

클래스 내에 선언된 메소드(메소드 단축문법)는 prototype에 작성이 된다.

클래스 내에 선언한 속성은 현재 객체의 속성이 된다.

static키워드를 사용하면 생성자함수의 속성으로 등록할 수 있다.

    class Person{
        constructor(name,phone){
            this.name=name;
            this.phone=phone;
        }
        //현재객체 속성지정
        x=10;

        //생성자함수 속성지정
        static y=20;
        static z(){
            console.log('zzzzzzzzzzzzzzz');
        }
        
        //prototype 속성 - 메소드단축문법
        sayHi(){
            console.log(`안녕하세요, 저는 ${this.name}입니다.`);
        }
    };
    class Dev extends Person{//2,3번해결
        constructor(name,phone,lang){
            super(name,phone);//1번 해결
            this.lang=lang;
        }

        //Dev.prototype 
        sayHi(){
            super.sayHi(); //프로토타입체 인 상의 부모메소드
            console.log(`저는 ${this.lang}개발자입니다.`);
        }
    };

    const test4=()=>{
        const honggd = new Person('홍길동','01012341234');
        console.log(honggd);

        console.log(typeof Person,Person); //function 생성자함수

        honggd.sayHi();
        
        console.log(Person.y);//static속성
        Person.z();

    };
    const test5=()=> {
        const sinsa = new Dev('신사임당','01012344321','Javascript');
        console.log(sinsa);

        sinsa.sayHi();
    };

test4

test5

test4에서는 Person이 함수형이고, 어떤 형태를 가지는지 나온다.

그리고 prototype 속성이 출력되고, static 속성도 출력되고, static 함수도 출력된다. (static속성과 함수는 생성자함수속성)

test5에서는 Person을 물려받은 Dev에 대한 출력이 나온다.

Dev에서 super()로 부모객체에 존재하는 내용을 담고, lang을 추가한다.

Dev의 프로토타입 sayHi도 super로 부모객체에 존재하는 함수를 가져올 수 있고, 새로 출력도 가능하다.

이 내용이 test5에 제대로 출력되었음을 확인할 수 있다.