jack_whiteblack.log

JavaScript - 순서도 그리기

Thu, 09 Feb 2023 13:24:29 GMT

1. 프로그램 절차를 만들 때의 원칙

프로그램 절차의 개수는 정해져 있어야 한다.
각 절차는 항상 같은 내용이어야 한다.
최대한 모든 가능성을 고려해야 한다.
예시는 절차를 검증하는 데 사용한다.

👉 예시 끝말잇기

게임에 몇 명이 참가할지를 선택한다.
참가자 순서를 정한다. (편의상 숫자로 한다.)
첫 번째 사람이 어떤 단어를 말한다.
다음 사람이 어떤 단어를 말한다.
절차 4에서 말한 단어가 올바른지 판단한다.
올바르다면 그 다음 사람이 어떤 단어를 말한다.
올바르지 않다면 틀렸다고 표시한다.
게임을 계속 진행한다.

=> 순서가 항상 일정한 것이 아니기 때문에 차례대로 나열하는 것보다 순서도를 그리는 것이 낫다.

2. 대화창 (prompt, alert, confirm)

1. prompt

브라우저에서 입력을 할 수 있는 대화 상자

- prompt에 입력을 하면 문자열로 입력이 되기 때문에 숫자로 만들어줘야 한다.



-> 10은 10진법이라는 것을 알려주기 위해 작성

2. alert

알림창, 경고창

alert('사용자에게 표시할 메시지');

3. confirm

맞는지 아닌지 확인 창 (boolean 값 : true or false)

prompt : 함수는 사용자로부터 값을 전달받는다. alert : 사용자에게 경고 메시지를 표시한다. confirm : 함수는 사용자의 확인을 요구한다.

3. HTML 태그 선택하기 (querySelector)

자바스크립트에서 HTML 태그를 가져오는 것을 선택한다고 표현한다. (document.querySelector 함수 사용)

document.querySelector('선택자')

-> 선택자는 HTML 태그를 선택할 수 있게 도와주는 문자열

input 태그


button 태그

태그가 여러 개있는 경우에 태그를 모두 선택하고 싶다면 document.querySelectorAll 함수를 사용한다.
document.querySelector를 사용 할 경우에는 여러 개 중 첫번째가 선택이 된다.

word-relay.html

document.querySelector('#아이디');
document.querySelector('.클래스');


1번째 참가자
제시어:

선택자가 여러 개일 때
document.querySelector('선택자 내부선택자 내부선택자...');

📚 Reference

[리뉴얼] 렛츠기릿 자바스크립트 (조현영 / 인프런)

✔ 제로초님(조현영님) JavaScript 강의를 보고 공부한 것을 정리하였습니다. ✔ 사진 및 자료 삽입도 제로초님(조현영님) 강의에서 가져왔습니다.

JavaScript - 기본 문법 (3)

Mon, 06 Feb 2023 06:35:30 GMT

1. 객체

객체(object) : 자료형의 일종으로 다양한 값을 모아둔 또다른 값
- 종류 : 배열(array), 함수(function), 배열이나 함수가 아닌 객체

1. 배열 기본

배열 : 다양한 자료형들을 하나로 묶어둔 것 -> 값들을 나열한 것

배열의 요소 개수 구하기 : 배열 이름 뒤에 .length를 붙이면된다.

❓ Quiz

arr라는 배열이 있을 때 배열의 마지막에서 세 번째 요소 찾기

> const arr = [1,2,3,4,5]
> console.log(arr[arr.length - 3]); -> 정답

< 3

배열 요소 추가

> const target = ['a', 'b', 'c', 'd', 'e'];
  target[5] = 'f';
  console.log (target);

<["a", "b", "c", "d", "e", "f"]

배열의 제일 앞에 값을 추가하고 싶을 때 'unshift' 사용

> const target = ['나', '다', '라', '마', '바'];
  target.unshift('가');
  console.log(target);

< (6) ['가', '나', '다', '라', '마', '바']

배열의 제일 뒤에 값을 추가하는 방법 -> push 사용

> const target = ['가', '나', '다', '라', '마'];
  target.push('바');
  console.log(target);

< (6) ['가', '나', '다', '라', '마', '바']

⁕ const : 상수 (엄밀히 상수는 아님 -> 배열에 새 값을 추가하거나 수정할 수 있어서) => const에는 처음 이후에는 새로운 값을 대입(=)하지만 못한다고 기억하면됨. const에 객체(배열, 함수, 객체 리터럴)가 대입된 경우 객체 내부의 속성이나 배열의 요소는 수정할 수 있다.

> const target2 = ['a', 'b', 'c', 'd', 'e'];

  target2 = ['f', 'g']; // 불가능 (새로운 변경) -> 재할당 불가
  target2[0] = 'h'; // 가능 (내부 요소 변경 및 추가)

배열 마지막 요소 제거 -> pop 사용

> const target = ['a', 'b', 'c', 'd', 'e'];
  target.pop();
  console.log(target);

< (4) ['a', 'b', 'c', 'd']

배열 첫 번째 요소 제거 -> shift 사용

> const target = ['a', 'b', 'c', 'd', 'e'];
  target.shift();
  console.log(target);

< (4) ['b', 'c', 'd', 'e']

배열의 중간 요소 제거 -> splice 사용

> const target = ['a', 'b', 'c', 'd', 'e'];
target.splice(2, 2); // target.splice(시작지점, 시작점부터 지우고 싶은 갯수);
console.log(target);

< (3) ['a', 'b', 'e']

const target = ['a', 'b', 'c', 'd', 'e']; target.splice(1); // 해당 인덱스부터 끝까지 모든 요소 제거 console.log(target);

< ['a']

const target = ['a', 'b', 'c', 'd', 'e']; target.splice(1, 3, 'f', 'g'); // 인덱스 1부터 3개를 지우고 그 자리에 f와 g를 추가한다. console.log(target);

< (4) ['a', 'f', 'g', 'e']

아무것도 지우지 않고 중간에 추가하고 싶을 때

const target = ['a', 'b', 'c', 'd', 'e']; target.splice(2, 0, 'f'); console.log(target);

< (6) ['a', 'b', 'f', 'c', 'd', 'e']


- 배열에서 요소 찾기 -> includes 사용
: includes에 주어진 값이 배열 내부에 존재하면 true가 되고, 존재하지 않으면 false가 된다.
![](https://velog.velcdn.com/images/jack_whiteblack/post/ce5de8bb-00be-4aba-a4be-a922c3249fbd/image.png)

- 요소의 정확한 위치 찾기 -> indexOf, lastIndexOf 사용
  - indexOf : 앞에서부터 찾기
  - lastIndexOf : 뒤에서부터 찾기

```javascript
> const target = ['d', 'b', 'c', 'd', 'c'];
  const result = target.indexOf('c');
  const result2 = target.lastIndexOf('d');
  const result3 = target.indexOf('a');

  console.log(result);
  console.log(result2);
  console.log(result3);

  2
  3
  -1 -> 배열에 존재하지 않으므로

배열 반복하기


> const target = ['a', 'b', 'c', 'd', 'e'];
  let i = 0;
  while(i < target.length) {
      console.log(target[i]);
    i++;
  }

< a
  b
  c
  d
  e


> const target = ['a', 'b', 'c', 'd', 'e'];
  for(let i = 0; i < target.length; i++) {
        console.log(target[i]);
  }

< a
  b
  c
  d
  e

❓ Quiz

다음 배열에서 '라'를 모두 제거 -> indexOf와 splice 사용

const arr = ['가', '라', '다', '라', '마', '라'];
for(let i = 0; i < arr.length; i++) {
    arr.splice(arr.indexOf('라'), 1);
}
console.log(arr);

2. 함수 (function)

일정한 동작을 수행하는 코드
함수를 만들 때는 보통 function 예약어를 사용하거나 =>(화살표) 기호를 사용. 화살표 기호를 사용한 함수를 화살표 함수(arrow fucntion)이라고 한다.

function() {} or () => {}

형식 (함수에 이름붙이기) : 선언한다(declare)

function a() {} -> 함수 선언문 뒤에는 세미콜론을 잘 안붙인다.
// 함수를 상수에 대입하는 대신 function 키워드 뒤에 함수 이름을 넣어주는 방식 
// -> 함수 선언문 (function declaration statement)

const b = function() {};
// 상수나 변수에 대입하는 방식 -> 함수 표현식 (function expression)

const c = () => {};
// 화살표 함수

> function a() {} // 선언

  a(); // 호출

return : 함수를 반환해주기도 하고 종료하기도 한다. => 명시적으로 return 문을 사용하지 않는다면 항상 함수 동작문 끝에 return undefined가 있다고 생각하면 된다.
여러개를 리턴하는 법
배열로
return 문이 실행되면 그 아래 코드는 아예 실행되지 않는다.

✔ 매개변수와 인수 (parameter, argument)

> function a(parameter) {
      console.log(prameter);
  }
  a('argument'); 
  -> argument가 첫 번째 parameter로 들어가서 parameter가 argument가 된 후 출력된다.

< argument

- 함수를 선언할 때 parameter (매개변수)
- 함수를 실행(호출)할 때 argument (인수)

=> function 함수에서만 console.log(arguments)사용 가능 : 호출할 때 넣었던 argument들을 배열 형태로 보여준다.

예시
> function add(x, y) {
    return x + y;
  }

  add(5, 3)

< 8

❓ Quiz

매개변수로 x, y, z을 받아 곱한 값을 반환하는 multiply 함수를 만들기 (단, 화살표 함수로 만들기)

const multi = (x, y, z) => {
    return x * y * z;
}

// 이런식으로도 가능 (중괄호와 return이 바로 이어질 때 생략 가능)
const multi = (x, y, z) => x * y * z;

multi(2, 12, 4);

ans = 96

다른 변수 사용

> function minus1(x, y) {

    const a = 100;

    return(x - y) * a;
}

console.log(minus1(5,3));

< 200

![](https://velog.velcdn.com/images/jack_whiteblack/post/ffbb213d-589e-4f40-8c6d-2b0c82e33d47/image.png)=> 함수 바깥에 있는 변수를 가져와도 된다.




### 3. 객체 리터럴 기본

- 배열이나 함수가 아닌 객체
- 객체는 여러 개의 변수를 하나의 변수로 묶을 때 사용

```javascript
const name = 'abc';
const year = 1900;
const month = 01;
const date = 01;
const gender = 'M';

↓ 변수를 묶는다.

const human = {

    name: 'abc',
    year: 1900,
    month: 01,
    date: 01,
    gender: 'M',

}; -> 중괄호를 쓰면 객체 리터럴

배열과의 차이점은 속성 이름이 있냐 없냐
name, year, month, date, gender같은 정보들을 속성(property)라고 한다.
속성은 속성 이름과 속성 값으로 구분된다. (name : 속성 이름, abc : 속성 값)
객체 형식

const 객체 = {
    속성이름: 속성값,
}

=> 다음을 대비하기 위해

속성 이름은 문자열이어야 한다.
속성 이름에 숫자나 공백 그리고 특수문자가 들어갈 때는 ' ' 이 안에 넣는다. ('2name', 'na me', 'na-me')
속성에 접근하는 방법 => 대괄호를 쓰는 이유는 문자열로 감싸준 특수한 속성이름 때문에
대괄호에 따옴표를 빼면 변수가 되므로 주의하길..! (아예 다른 값이 됨)
객체 속성 수정 및 추가 : 배열이랑 비슷
속성 제거하기 : delete 사용

> delete human.gender;
  console.log(human.gender);

< undefined

<참고> 배열과 함수가 객체인 이유

객체의 성질을 모두 다 사용할 수 있음
배열과 함수에도 속성들을 추가할 수도 있고 수정 및 제거가 가능
객체는 함수와 배열을 포함하는 개념이라서 {}를 사용해 만든 객체를 객체 리터럴이라고 부르는 것이다.
메서드 : 객체의 속성 값으로 함수를 넣었을 때 이 속성을 메서드라고 한다.

const debug = {
  log: function(value) {
      console.log(value);
  }
};

debug.log('Hello, Method');

< Hello, Method

4. 객체의 비교 (원시값과의 차이점)

객체끼리는 모양이 같아도 비교하면 false가 나온다. (배열, 함수, 리터럴 모두)
객체가 아닌 숫자, 문자열, 불 값, null, undefined는 모두 true를 반환한다.
true가 나오게 하려면 기존 객체를 변수에 저장해 두어야 한다.

=> { } === { } 이거는 새로운 객체와 새로운 객체를 비교하기 때문에 당연히 다른 것이다.

참조와 복사

객체가 아닐 때

❓ Quiz

다음과 같이 객체 안에 객체가 있을 때, '조' 값에 접근하는 방법은?

const zerocho = {
    name: {
        first: '현영',
          last: '조',
    },

      gender: 'm',
};

zerocho.name.last;
or
zerocho['name']['last'];
-> 답

< 조

📚 Reference

[리뉴얼] 렛츠기릿 자바스크립트 (조현영 / 인프런)

✔ 제로초님(조현영님) JavaScript 강의를 보고 공부한 것을 정리하였습니다. ✔ 사진 및 자료 삽입도 제로초님(조현영님) 강의에서 가져왔습니다.

JavaScript - 기본 문법 (2)

Thu, 02 Feb 2023 16:10:05 GMT

1. 변수 선언하기 (let)

특정한 값을 저장해야 하는 상황이 발생할 때 사용

console.log() : 반환하는 역할이 아니라 그림판처럼 글자를 적는 곳 변수만 입력 : 출력물을 반환

let 변수명 : 변수를 선언하다 let 변수명 = 500 + 500; -> 선언과 동시에 값을 넣는 것은 초기화했다. => 변수 선언문 ' = ' : 대입하다. (우항에서 좌항으로 대입하다)

변수와 메모리

2. 변수 이름 짓기

변수 선언하고 초기화하지 않으면 변수 값은 undefined가 된다.

변수명은 중복되면 안된다.
특수문자는 $, _ 만 된다.
첫글자로 숫자는 안된다.
띄어쓰기 하면 안된다. (해결법 : bigNum, bananaApple -> Camel Case / contents_title -> Snake Case)
let과 예약어를 사용하면 안된다.
- 예약어

3. 변수 수정하기

변수에 넣은 값을 비울 때

변수를 다른 변수에 대입 가능

변수 값 수정하기 : 반복되는 것은 변수에 저장해서 사용하면 수정이 용이하다.

4. 조건문 (if)

주어진 조건에 따라 코드를 실행하거나 실행하지 않는 문이다.
분기점 판단에 따라 실행하기도 한다.

* if 조건문의 기본 형식

if(조건식) {
  동작문1;
  동작문2;
}

ex)
if(true) {
    console.log('Hello, if!');
}

-> Hello, if!

5. else, else if, switch

else

* if-else 조건문의 기본 형식

if(조건식) { // 조건식이 참인 값일 때 실행
    동작문;
} else { // 조건식이 거짓인 값일 때 실행
    동작문;
}

else if

* if-else 조건문의 기본 형식

if(조건식) { // 조건식이 참인 값일 때 실행
    동작문;
} else if (조건식) { // 조건식이 거짓인 값일 때 실행
    동작문;
} else {
     동작문; 
}


const score = 90;
if(score >= 90) { // 90점 이상
    console.log('A+');
} else if(score >= 80) { // 90점 미만 80점 이상
    console.log('A');
} else if(score >= 70) { // 80점 미만 70점 이상
    console.log('B+');
} else if(score >= 60) { // 70점 미만 60점 이상
    console.log('B');
} else { // 60점 미만
    console.log('F');
}

-> A+

중첩 if문


let first = true;

let second = false;

if(first) {
  console.log('첫 번째 조건 충족!');

  if(second) {
    console.log('두 번째 조건도 충족!');
  } else {
    console.log('두 번째 조건은 불충족!');
  }

} else {
  console.log('첫 번째 조건 불충족!');
}

↓ 아래와 같이 깔끔하게 코드를 수정할 수 있다.

switch

* switch 문의 기본 형식

switch(조건식) {

  case 비교 조건식:

    동작문;
}

-> 조건식과 비교 조건식이 같으면 동작문을 실행

-> switch문은 조건식과 비교조건식이 같을 때 그 아래에 있는 값도 모두 출력하기에 특정 값을 출력하고 싶으면 break를 사용한다.


let value = 'F';

switch(value) {

  case 'A':

    console.log('A');

    break;

  case 'B':

    console.log('B');

    break;

  case 'C':

    console.log('C');

    break;

  default:

    console.log('아무것도 일치하지 않음');

    // default는 if문의 else와 같은 것이다.

-> 아무것도 일치하지 않음

6. 조건부 연산자 (삼항 연산자)

조건부 연산자의 기본 형식

조건식 ? 참일 때 실행되는 식 : 거짓일 때 실행되는 식

Example

> 5 > 0 ? '참입니다' : '거짓입니다';
< "참입니다"

> let value = 5 < 0 ? '참입니다' : '거짓입니다';
< undefined
> value;
< "거짓입니다"

- 조건부 연산자를 if문으로 변경하기

<조건부 연산자>
let condition = true;
let value = condition ? '참' : '거짓';
console.log(value);


if(condition) { 
       value = '참';
} else {
    value = '거짓';
}

console.log(value);

- 조건부 안에 조건부
let condition1 = true;
let condition2 = false;
let value = condition1 ? condition2 ? '둘 다 참' : 'condition1만 참' : 'condition1이 거짓';
console.log(value);

< condition1만 참

- 중첩되어 있으면 괄호로 구분해주는 것이 좋다.
let value = condition1 ? (condition2 : '둘 다 참' : 'condition1만 참') : 'condition1이 거짓';

- 들여쓰기로도 구분 가능
let value = condition1
    ? condition2
        ? '둘 다 참' 
        : 'condition1만 참' 
    : 'condition1이 거짓';

❓ Quiz

if문을 switch문과 조건부 연산자로 바꾸기


let cond = true;
let vlaue = '';
if(cond) {
    value = '참';
} else {
    value = '거짓';
}


let cond = true;
let value = '';
switch(cond){
    case true:
        value = '참';
        break;

    case false:
        value = '거짓'; 
        break;
}

<조건부 연산자>
let cond = true;
let value = cond ? '참' : '거짓';

console.log(value);

7. 반복문

1. while

while 문의 기본형식

while (조건식)
      동작문;

while (조건식) {
    동작문1;
      동작문2;
      동작문3;
}

예제
while (true) {
     console.log('Hello, While'); -> 무한 반복
}

let i = 1;
while(i <= 100) {
    console.log('Hello, While');
      i++;
}
< (100) Hello, While -> 문자열이 100번 실행되었다.
< 100 -> i의 값

2. for

for 문의 기본 형식

for(시작; 조건식; 종료식)
  동작문;

예제
for(let i = 0; i < 100; i++) {
    console.log('Hello, for!');
}
< (100) Hello, for!

⁕ 참고 : for 문의 시작, 조건식, 종료식은 생략 가능

> for(;;) {

  } -> 무한 반복 (조건이 true가 되어버려서)

❓ Quiz

for(let i = 0; i < 100; i++) {
    console.log(i + 1);
}

8. break와 continue

break : 반복문을 중간에 멈춰야 할 때 사용
continue : 특정 조건에서만 실행되기를 원할 때 사용
continue를 넣으면 이후 코드는 건너뛴다.


let i = 0;
while(true) {
    if(i===5) break; -> i가 5일 때 break가 실행
      i++;
}
console.log(i);
< 5
* 무한 반복문은 while을 쓰면 좋다고 한다.


let i = 0;
while(i < 10) { // 홀수만 console.log
    i++;
      if(i % 2 === 0) {    // 짝수만
        continue;    // 건너뛰기
    }
  console.log(i); 
  -> if문 조건에 만족하면 continue에 의해 실행되지 않고 다음 반복문으로 간다.
}

9. 중첩 반복문

반복문 안에 반복문이 있는 것

> for(let i = 0; i < 10; i++) {
    for(let j = 0; j < 10; j++) {
        console.log(i, j);
    }
  }

> for(let i = 0; i < 5; i++) {
    if(i % 2 === 0) {
        continue;
    }
      for(let j = 0; j < 5; j++) {
          if(j % 2 === 0) {
            continue;
        }
          for(let k = 0; k < 5; k++) {
            if(k % 2 === 0) {
                continue;
            }
              console.log(i, j, k);
        }
    }
  }

❓ Quiz

짝수가 나오지 않는 구구단

for(let i = 1; i < 10; i++) {
    if(i % 2 === 0) {
        continue;
    }
      for(let j = 1; j < 10; j++) {
        if(j % 2 === 0) {
            continue;
        }
          console.log(i, j, i*j); 
    }
}

별 찍기

*****
****
***
**
*

for(let i = 5; i > 0; i--) {
    console.log('*'.repeat(i)) -> 반복 함수
}

for(let i = 0; i < 5; i++) {
    console.log('*'.repeat(5 - i))
}

-----------------------------------------------------

*
***
*****
*******
*********

for(let i = 0; i < 10; i++) {
    if(i % 2 === 0) {
        continue;
    }
      console.log('*'.repeat(i));
}

-----------------------------------------------------

*********
*******
*****
***
*

for(let i = 10; i > 0; i--) {
    if(i % 2 === 0) {
        continue;
    }
      console.log('*'.repeat(i));
}

-----------------------------------------------------

*****
 ****
  ***
   **
    *

for(let i = 0; i < 5; i++) {
      console.log(' '.repeat(i), '*'.repeat(5 - i));
}

-----------------------------------------------------

    *
   **
  ***
 ****
*****

for(let i = 0; i < 5; i++) {
    console.log(' '.repeat(4 - i), '*'.repeat(i + 1));
}

📚 Reference

[리뉴얼] 렛츠기릿 자바스크립트 (조현영 / 인프런)

✔ 제로초님(조현영님) JavaScript 강의를 보고 공부한 것을 정리하였습니다. ✔ 사진 및 자료 삽입도 제로초님(조현영님) 강의에서 가져왔습니다.

JavaScript - 기본 문법 (1)

Tue, 31 Jan 2023 19:31:51 GMT

JavaScript

1. Hello World

console.log() : Crome 개발자 도구를 띄워 코드를 입력한다.

외우면 좋은 영어 단어

( ) parentheses

{ } braces

[ ] brackets

2. 세미콜론, 주석, 들여쓰기

세미콜론 : 하나의 명령이 끝날 때 명령 뒤에 붙임 (명령어 구분) (안붙인다고 에러가 나진 않지만 에러가 나는 경우도 있기에 붙이는 것이 좋다.)
주석
- 코드에 대한 설명을 작성하기 위할 때 사용
- 쓰이지 않는 코드에도 사용가능 (// , /* */)

들여쓰기 : 가독성을 높이기 위해 사용

* 예시

if (condition) {
  console.log('Hello, World');
}

3. 문자열 기본 (따옴표, 백틱, typeof, escape)

값 (value) : 프로그램이 조작할 수 있는 데이터

자료형 (data type) : 값의 종류

문자열 : 문자열 표시는 ' ' (작은 따옴표), " " (큰 따옴표), ` (백틱) 으로 한다.
- 백틱의 특성으로는 줄바꿈이 가능하다는 것이다.
- 다른 것들에서 줄바꿈을 하고 싶으면 \n을 사용한다.
typeof : 자료형을 확인하고 싶을 때

4. 문자열 합치기 (연산자)

5. 숫자 기본 (parseInt, NaN)

이진법 : 0b111 -> 7

팔진법 : 0111 -> 73 : 0뒤에 o는 붙여도 되고 안붙여도 된다.

십육진법 : 0x1a1 -> 417 : 숫자는 0부터 9까지 밖에 없기 때문에 10~15는 알파벳 a, b, c, d, e, f로 표현한다.

NaN -> 종류는 숫자, 풀네임은 Not a Number ... just memorize
parseInt('123') / Number('123') : 문자열 숫자를 진짜 숫자로 바꿔준다.
parseFloat('3.14') : 숫자 소숫점으로 만들기, parseInt는 정수로만 만들어준다. but Number는 다된다.

Number()와 parseInt()의 차이점

prompt() : 문자열을 입력할 수 있게 하는 것
거듭제곱 : **
Infinity (숫자) 무한을 나타냄

6. 연산자 우선순위, 소수 계산 주의점

소수점 계산 : 컴퓨터는 소수점 계산을 잘 못한다. => 소수를 정수로 만들어서 계산을 한 후 소수로 돌려놔야한다.

7. 불 값 (boolean, 값들의 비교)

true와 false를 나타낸다. (1과 0에 대응된다.)

⁎ 참고 . NaN끼리 비교

유일하게 false가 나오는 것

> NaN == NaN;
< false

!= 이 것을 제외하고는 다 false

true, false 값 비교하기

> true > false; -> (1 > 0)
< true

문자열 비교

> 'b' > 'a';
< true
-> 사전순 : 뒤에 나오는게 크다

> 'ad' > 'ab';
< true

다른 자료형 비교

> '3' < 5; -> 문자열이 숫자로 바뀌면서 비교
< true

> 'abc' < 5; -> 문자열이 숫자로 바뀌므로 abc는 NaN이 되어 false값이 나온다.
< false

= 와 == 와 === 차이

'=' : 우항을 좌항으로 대압한다. '==' : 같다 (값만 비교) '===' : 같다 (자료형까지 비교)

⁕ ' != ' 도 동일 '!=' : 다르다 (값만 비교) '!==' : 다르다 (자료형까지 비교)

8. 논리 연산자

&&(and), ||(or)
!!'a'; -> true : ( ' !! ' ) Boolean으로 형변환하는 연산자

📌 false, ''(빈 문자열), 0, NaN, undefined, null, document.all(거의 사용은 안함)은 불 값으로 형 변환했을 때, false가 된다.

9. undefined와 null

빈 값 : undefined, null
- undefined : 반환할 결과값이 없을 때 나온다. -> undefined를 반환한다.
- null : 의도적으로 빈 값을 넣을 때 사용

📚 Reference

[리뉴얼] 렛츠기릿 자바스크립트 (조현영 / 인프런)

✔ 제로초님(조현영님) JavaScript 강의를 보고 공부한 것을 정리하였습니다. ✔ 사진 및 자료 삽입도 제로초님(조현영님) 강의에서 가져왔습니다.

Softeer - 장애물 인식 프로그램

Sat, 07 Jan 2023 01:30:31 GMT

👨‍💻 제출 코드

import java.util.Scanner;
import java.util.StringTokenizer;
import java.util.ArrayList;
import java.util.Collections;
import java.util.LinkedList;
import java.util.Queue;

public class Practice02 {

    static Queue qpoint = new LinkedList<>();

    static int[][] arr;
    static int[][] checkArr;
    static String[] strArr;

    public static void main(String[] args) {

        Scanner sc = new Scanner(System.in);
        StringTokenizer st = new StringTokenizer(sc.nextLine());

        int n = Integer.parseInt(st.nextToken());

        arr = new int[n][n];
        checkArr = new int[n][n];
        strArr = new String[n];

        for(int i = 0; i < n; i++) {
            for(int j = 0; j < n; j++) {
                checkArr[i][j] = 0;
            }
        }

        for(int i = 0; i < n; i++) {
            st = new StringTokenizer(sc.nextLine());
            String str = st.nextToken();
            for(int j = 0; j < n; j++) {
                arr[i][j] = Character.getNumericValue(str.charAt(j));                
            }
        }

        ArrayList list = new ArrayList<>();

        for(int i = 0; i < n; i++) {
            for(int j = 0; j < n; j++) {
                if(arr[i][j] == 1 && checkArr[i][j] != 1) {
                    int c = line(i, j);
                    list.add(c);
                }
            }
        }
        Collections.sort(list);
        System.out.println(list.size());        
        for(int i = 0; i < list.size(); i++) {
            System.out.println(list.get(i));
        }

    }

    public static int line(int a, int b) {
        int count = 0;

        qpoint.offer(new Point(a, b));
        checkArr[a][b] = 1;
        count++;
        while(!qpoint.isEmpty()) {
            Point tmp = qpoint.poll();

            if(tmp.y < arr.length - 1 ) {
                if(arr[tmp.y+1][tmp.x] == 1 && checkArr[tmp.y+1][tmp.x] != 1) { // 아래
                    qpoint.offer(new Point(tmp.y+1, tmp.x));
                    checkArr[tmp.y+1][tmp.x] = 1;
                    count++;
                }                
            }

            if(tmp.y > 0) {                
                if(arr[tmp.y-1][tmp.x] == 1 && checkArr[tmp.y-1][tmp.x] != 1) { // 위
                    qpoint.offer(new Point(tmp.y-1, tmp.x));
                    checkArr[tmp.y-1][tmp.x] = 1;
                    count++;
                }
            }

            if(tmp.x > 0) {
                if(arr[tmp.y][tmp.x-1] == 1 && checkArr[tmp.y][tmp.x-1] != 1) { // 좌
                    qpoint.offer(new Point(tmp.y, tmp.x-1));
                    checkArr[tmp.y][tmp.x-1] = 1;
                    count++;
                }                
            }

            if(tmp.x < arr.length - 1) {
                if(arr[tmp.y][tmp.x+1] == 1 && checkArr[tmp.y][tmp.x+1] != 1) { // 우
                    qpoint.offer(new Point(tmp.y, tmp.x+1));
                    checkArr[tmp.y][tmp.x+1] = 1;
                    count++;
                }                
            }

        }
        return count;
    }
}

class Point {
    int x;
    int y;

    Point(int y, int x) {
        this.x = x;
        this.y = y;
    }
}

✔ 사용된 개념

StringTokenizer
ArrayList
Queue

📌StringTokenizer

Scanner sc = new Scanner(System.in);
        StringTokenizer st = new StringTokenizer(sc.nextLine());

        int n = Integer.parseInt(st.nextToken());

        arr = new int[n][n];
        checkArr = new int[n][n];
        strArr = new String[n];

        for(int i = 0; i < n; i++) {
            for(int j = 0; j < n; j++) {
                checkArr[i][j] = 0;
            }
        }

        for(int i = 0; i < n; i++) {
            st = new StringTokenizer(sc.nextLine());
            String str = st.nextToken();
            for(int j = 0; j < n; j++) {
                arr[i][j] = Character.getNumericValue(str.charAt(j));                
            }
        }

React - 구구단 (2), 끝말잇기

Wed, 21 Dec 2022 08:32:55 GMT

구구단

1. React Hooks

Hooks : 함수 컴포넌트에 state와 ref 기능을 추가해준 것

index2.html



    
    구구단

1-1. Class와 Hooks 비교

Class

Gugudan-class.html



    
    구구단

Hooks

index2.html



    
    구구단

끝말잇기

1. 웹팩

Node : javascript 실행기

1-1. 웹팩 설치

node랑 npm 설치하기
터미널에서 폴더 위치 설정하고 npm init 치기
package name, author(이름), license(MIT, ISTC) 설정 -> package.jsc 생성 : 리액트 개발에 필요한 모든 패키지를 넣는 곳
npm i react react-dom : react랑 react-dom 설치
npm i -D webpack webpack-cli : 리액트할 때 필요한 webpack과 webpack-cli 설치

-D : 실제 서비스가 아닌 개발용으로만 웹팩을 사용하겠다는 의미

실제 서비스에서 사용되는 것들 dependencies에 기록
개발할 때만 사용되는 것들 devDependencies에 기록

webpack.config.js 생성
```
module.exports = {
 속성들 넣기
};
```
client.jsx 생성 ```javascript const React = require('react'); const ReactDom = require('react-dom');

-> react와 react-dom 불러오기

ReactDom.render(, document.querySelector('#root'));

9. index.html 생성
```html


    
    끝말잇기

1-2. 모듈 시스템과 웹팩 설정

모듈 시스템 덕분에 필요한 것만 불러올 수 있어 효율적이다.
웹팩은 여러 파일을 하나의 파일로 합쳐준다.

client.jsx

const React = require('react');
const ReactDom = require('react-dom');

const WordRelay = require('./WordRelay');

ReactDom.render(, document.querySelector('#root'));

WordRelay.jsx

const React = require('react');
const {Component} = React;

class WordRelay extends Component {
    state = {

    };

    render() {

    }
}

module.exports = WordRelay;
// 파일을 나눌 때는 const..와 modul..e을 추가적으로 적어준다.

webpack.config.js

// 파일을 하나로 합쳐주는 역할을 함

const path = require('path'); // 경로 조작

module.exports = {
    name: 'wordrelay-setting', // 불필요하지만 속성같은 느낌 : 웹팩에 대한 설명
    mode: 'development', // 실서비스: production
    devtool: 'eval', // 빠르게 하겠다는 뜻
    resolve: {
        extensions: ['.js', '.jsx']
        // 이렇게 하면 확장자를 일일이 쓸 필요 없이 알아서 찾아준다.
    },

    entry: {
        app: ['./client'],
        //app: ['./client.jsx', 'WordRelay.jsx'] -> client.jsx에서 이미 WordRelay.jsx를 불러오고 있기 때문에 굳이 또 적지 않아도 된다.
    }, // 입력 (ex. client.jsx, WordRelay.jsx)
    output: {
        path: path.join(__dirname, 'dist'), // -> 현재 폴더 안에 있는 dist 폴더
        // path.join : 경로를 합쳐줌
        // __dirname : 현재 폴더 경로
        filename: 'app.js'
    }, // 출력 (ex. app.js)
};
// -> 이러고 터미널에 webpack을 치면 파일을 하나로 합친다.

1-3. 웹팩으로 빌드하기

터미널에 webpack을 쳤을 때 오류가 나면 해결하는 방법
- package.json에서 scripts를 바꿔준다.
- 터미널에 npm run dev를 친다.
- 터미널에 npx webpack을 친다.

1-4. 오류 해결하기

app.js를 활용해서 index.html을 실행하면 오류가난다. -> babel을 추가해야한다.

babel 설치 (개발용에서만 사용)
- npm i -D @babel/core : babel의 기본적인 것이 들어있다.
- npm i -D @babel/preset-env : 브라우저에 맞게 최신 문법을 옛날 문법으로 바꿔준다.
- npm i -D @babel/preset-react : jsx같은 것을 지원할 수 있다.
- npm i -D babel-loader : babel이랑 webpack을 연결해준다.

webpack.config.js

// 파일을 하나로 합쳐주는 역할을 함

const path = require('path'); // 경로 조작

module.exports = { name: 'wordrelay-setting', // 불필요하지만 속성같은 느낌 : 웹팩에 대한 설명 mode: 'development', // 실서비스: production devtool: 'eval', // 빠르게 하겠다는 뜻 resolve: { extensions: ['.js', '.jsx'] // 이렇게 하면 확장자를 일일이 쓸 필요 없이 알아서 찾아준다. },

entry: {
    app: ['./client'],
    //app: ['./client.jsx', 'WordRelay.jsx'] -> client.jsx에서 이미 WordRelay.jsx를 불러오고 있기 때문에 굳이 또 적지 않아도 된다.
}, // 입력 (ex. client.jsx, WordRelay.jsx)

module: {
    rules: [{
        test: /\.jsx?/, // js파일과 jsx파일을 이 rule을 적용하겠다는 뜻 (정규 표현식)
        loader: 'babel-loader', // babel rule
        options: {
            presets: ['@babel/preset-env', '@babel/preset-react'], // 알아서 js나 jsx 파일에 babel을 적용해준다.
            plugins: ['@babel/plugin-proposal-class-properties'],
        },
    }],
}, // -> entry에 있는 파일을 읽고 거기에 module을 적용한 후, output에 뺀다.

output: {
    path: path.join(__dirname, 'dist'), // -> 현재 폴더 안에 있는 dist 폴더
    // path.join : 경로를 합쳐줌
    // __dirname : 현재 폴더 경로
    filename: 'app.js'
}, // 출력 (ex. app.js)

}; // -> 이러고 터미널에 webpack을 치면 파일을 하나로 합친다.


```jsx
WordRelay.jsx


const React = require('react');
const {Component} = React;

class WordRelay extends Component {
    state = {
        text: 'Hello, webpack',
    };

    render() {
        return {this.state.text}
    }
}

module.exports = WordRelay;
// 파일을 나눌 때는 const..와 modul..e을 추가적으로 적어준다.

1-5. 구구단 웹팩으로 빌드하기

📚 Referecne

학습 자료 및 그림 출처

Inflearn - 웹 게임을 만들며 배우는 React (조현영 (제로초))

React - 구구단 (1)

Fri, 16 Dec 2022 16:48:55 GMT

1. 리액트를 사용하는 이유

복잡한 웹앱에서 데이터와 화면 일치 문제 같은 것을 쉽게 풀어준다.
요즘 트렌드

단점 : 검색 엔진 노출에 어려움이 있다.

2. 리액트

리액트는 JavaScript다.
데이터 중심으로 움직인다.
함수형과 클래스형으로 나뉜다.
- 현재 클래스형은 거의 사용하지 않으나, ErrorBoundary에서는 사용한다. (사용빈도 : 1%)

class LikeButton extends React.Component {

}
=> 클래스형

const LikeButton = () => {};
function LikeButton() {}
=> 함수형

like-button.html




    
    웹게임

컴포넌트 : 데이터와 화면을 하나로 묶어둔 덩어리

3. JSX (XML)

like-button-jsx.html

babel을 사용하면

return (
  
);

이 것을

return e('button', {onClick: () => this.setState({liked: true})}, 'Like');

이 것으로 바꾸어준다.

4. 클래스 컴포넌트의 형태와 리액트 데브툴즈

객체를 함부로 바꾸지 말 것 (불변성) -> 복사하기 : 기존 객체는 놔두고 객체를 복사해서 새로운 객체를 만들어서 바꾸기

예시

const array = []; // 배열도 객체
pop, push, shift, unshift, splice -> 배열을 직접적으로 수정 // React에서는 사용하지 않음
concat, slice -> 새로운 배열을 만들어냄

return (
    
);

클릭을 하면 데이터가 true로 바뀌고 true로 바뀌는 즉시 화면이 바뀐다. -> 데이터를 바꾸면 화면을 바꾸는 것이다.

5. 함수 컴포넌트 (함수형 X)

코드가 간략하다.
this를 쓸 일이 없다.

// 함수 컴포넌트는 this를 쓸 일이 없다.
  // const LikedButton = () => {} // 화살표 함수
  function LikeButton() { // 함수형 컴포넌트 X 함수 컴포넌트 O
        const [liked, setLiked] = React.useState(false); // 구조분해
        // liked : 데이터, setLiked : 데이터를 바꾸는 함수
        // -> 뭔 짓을 하든, 결국 return한게 화면이다.
        /*
            js 옛날 문법
            const result = React.useState(false);
            const liked = result[0];
            const setLiked = result[1];
        */

        /*
        // 예시
        const[news, setNews] = React.useState(['뉴스1', '뉴스2', '뉴스3', '뉴스4', '뉴스5'])
        const [category, setCategory] = React.useState(['스포츠', '연예', '경제', '시사', '정치'])

        if(category === '뉴스') {
            return '뉴스화면'
        } // 데이터들을 사용해서 화면 리턴
        */

        if(liked) {
            return 'You liked this.';
        }
        return (
            
        );

    }

6. 구구단

index.html



    
        
        구구단

6-1. 클래스 메서드

index.html
구구단 컴포넌트



    
        
        구구단

6-2. Fragment와 기타 팁들

의미없는 div 태그


  {this.state.first} 곱하기 {this.state.second}는?
  {/* 중간에 js를 삽입하고 싶으면 {}를 사용한다. */}
  
    
    {/* input.onChange = (e) => {console.log(e.target.value)} : 글자 치는 것이 콘솔에 나오게 함 ↑ */}
    
    {/* 기본 이벤트 핸들러 : onClick, onChange, onSubmit, onLoad, onInput, onFocus, onBlur */}
  
  {this.state.result}

개선 사항 ↓

빈 태그로 묶어주기 : 현재 babel에서는 지원을 하지 않는다 (babel2에서 지원)

<>
  {this.state.first} 곱하기 {this.state.second}는?
  
    
    
  
  {this.state.result}

React.Fragment 사용

<>
  {this.state.first} 곱하기 {this.state.second}는?
  
    
    
  
  {this.state.result}

form 태그 유무

form 태그가 있을 때는 onSubmit 사용

  
  

--------------------------------------------------------
form이 없으면 onClick 사용

직접 만든 함수는 무조건 화살표 함수로
function으로 바꾸게 되면 작동을 하지 않는다. : this의 의미가 달라진다.

onSubmit = (e) => { // submit할 때 실행
    e.preventDefault();
    if(parseInt(this.state.value) === this.state.first * this.state.second) {
          this.setState({
          result: '정답',
          first: Math.ceil(Math.random() * 9),
          second: Math.ceil(Math.random() * 9),
          value: '',
          });
    } else {
          this.setState({
              result: '땡',
            value: '',
          });
    }
};

onChange = (e) => {
  this.setState({value: e.target.value})
};

constructor 생략 가능 : 실무에서 많이 쓰임


// constructor 포함
class GuGuDan extends React.Component {
  constructor(props) {
    super(props);
    this.state = { // 변할 것들
      first: Math.ceil(Math.random() * 9),
      second: Math.ceil(Math.random() * 9),
      value: '',
      result: '',
    };
  }
}

----------------------------------------

// constructor 미포함
class GuGuDan extends React.Component {
    state = { // 변할 것들
      first: Math.ceil(Math.random() * 9),
      second: Math.ceil(Math.random() * 9),
      value: '',
      result: '',
    };
}

6-3. 함수형 setState

정답 표시하기 (this.state.value)


onSubmit = (e) => {
      e.preventDefault();
      if (parseInt(this.state.value) === this.state.first * this.state.second) {
        this.setState({
            result: '정답: ' + this.state.value, // 정답 값 표시하기 (현재 값)
            first: Math.ceil(Math.random() * 9),
            second: Math.ceil(Math.random() * 9),
            value: '',
        });
        this.input.focus();
      } else {
        this.setState({
          result: '땡',
          value: '',
        });
        this.input.focus();
      }
    };

예전 상태 값을 다음 상태 값에 활용할 수 있다.


onSubmit = (e) => {
      e.preventDefault();
      if (parseInt(this.state.value) === this.state.first * this.state.second) {
        this.setState((prevState) => {
          return {
            result: '정답: ' + prevState.value, // 정답 값 표시하기 (현재 값) => 현재 state
            first: Math.ceil(Math.random() * 9),
            second: Math.ceil(Math.random() * 9),
            value: '',
            // => 미래 state
          };
        });
        this.input.focus();
      } else {
        this.setState({
          result: '땡',
          value: '',
        });
        this.input.focus();
      }
    };

preveState 사용
예전 state 값으로 새로운 state 값을 만들 때 return을 해주는 함수 사용 (setState에 this.state가 들어갈 때 사용)

6-4. ref



    
    구구단

📚 Referecne

학습 자료 및 그림 출처

Inflearn - 웹 게임을 만들며 배우는 React (조현영 (제로초))

JAVA - 파일 입출력

Thu, 08 Dec 2022 13:35:02 GMT

1. 파일 입출력

1-1. java.io.File

File 클래스는 파일 또는 폴더에 대한 정보를 제공하는 클래스이다.
File 클래스의 객체는 정보를 조회하고자 하는 파일이나 폴더의 경로에 대한 문자열을 생성자 파라미터로 전달하는 형태로 만들 수 있다. 이때 파라미터로 전달되는 경로가 실제로 존재하지 않더라도 File 객체의 생성이 가능해진다.

C:\photo\food.jpg 파일에 대한 객체 생성 예시

File file = new File("C:\photo\food.jpg");

File file = new File("C:\photo", "food.jpg");

1-2. 경로 설정하기

운영체제간의 호환성 유지를 위한 "/"의 사용 -> 경로 문자열을 설정할 때 윈도우 기반에서 역슬래시()를 사용하지만 가급적 다른 운영체제와의 호환성을 위해 슬래시(/)를 사용하는 것이 좋다.
절대 경로 -> 작업 디렉토리와 관계없이 절대적인 위치를 의미하는 경로 -> 리눅스 기준 : httpd.conf ./conf/httpd.conf -> 윈도우 예시 : hosts ../drivers/etc/hosts

1-3. 문자 인코딩 (character encoding)이란?

문자나 기호들의 집합을 컴퓨터에서 저장하거나 통신에 사용할 목적으로 부호화하는 방법 -> UTF-8 : 8비트 이진수로 표현하는 방법

1-4. 스트림이란?

입출력에서 stream이란 디바이스의 입출력 방식이 character 단위이든 block 단위이든 관계없이 "1바이트"씩 "연속"적으로 전달되는 형태로, 추상화된 상태를 의미한다.
입출력 장치는 개별적인 특성이 있으므로 읽고, 쓰는 단위가 각각 다르지만 스트림은 이러한 일련의 과정을 추상화하여 모든 디바이스를 character 단위로만 사용하도록 한다.
즉, 입출력 디바이스의 특성을 무시하고 하난의 단일한 입출력 인터페이스를 다룰 수 있도록 하는 것이 stream이다.

1-5. 자바의 스트림 관련 클래스

스트림 관련 클래스들은 각각 InputStream(입력/읽기), OutputStream(출력/저장)과 관련된 인터페이스를 상속받기 때문에 모두 동일한 메서드를 가지고 있다.
프로그래머는 상황에 따라 적절한 클래스를 사용하기만 하면 동일한 방법으로 스트림을 사용할 수 있다.

1-6. 파일 저장 관련

저장을 위한 빈 파일 생성하기 -> OutputStream의 객체를 생성한다.
파일에 내용 쓰기 -> 저장할 내용을 byte 배열로 변환한다. -> 변환된 배열을 OutputStream의 write() 메서드에게 파라미터로 전달
파일 닫기 -> OutputStream 객체로 close() 메서드를 호출하여 스트림을 닫는다.
파일 저장시에 유의사항 -> OutputStream은 각각의 단계마다 예외처리를 강제적으로 요구한다. -> try ~ catch 블록이 형성되는 과정에서 변수의 유효성 범위에 대한 처리에 유의해야 한다.

1-7. 파일 읽기 과정

파일을 읽기 위한 InputStream 객체 생성하기
읽은 내용을 담기 위한 빈 byte 배열 생성하기 -> 파일의 용량 크기만큼 배열의 사이즈를 지정해야 한다.
파일의 내용 읽기 -> 읽은 내용을 담기위한 byte 배열을 InputStream 객체의 read() 메서드에게 파라미터로 전달한다.
사용이 완료된 스트림 닫기 -> InputStream 객체의 close() 메서드를 호출하여 스트림을 닫는다.
읽은 내용을 문자열로 변환하기 -> byte 배열을 String 클래스의 생성자에게 전달하여 문자열로 변환한다. -> 이 과정에서 어떤 인코딩을 사용할 지를 함께 설정해야 한다.

JAVA - 컬렉션 프레임워크

Thu, 08 Dec 2022 13:08:14 GMT

1. 컬렉션 프레임워크 (Collection Framework)

1-1. Collection Framework란?

다수의 데이터를 쉽게 처리할 수 있는 표준화된 방법을 제공하는 클래스들로 기존 배열형태의 자료 저장에서 좀 더 다양한 데이터들을 저장하기 위한 필수 클래스이다.

1-2. HashMap 클래스

데이터에 이름표를 적용하여 저장하기
HashMap 클래스는 Map 인터페이스를 상속받는 '자료 보관소'이기 때문에 암묵적 객체 형변환의 규칙에 따라 Map형태로 선언하고 HashMap형태로 할당한다.
선언과 할당시에 HashMap의 이름표로 사용할 데이터 형(String)과 HashMap에 저장할 데이터형의 클래스 이름으로 명시해야하는데 이를 '제너릭스'라 한다.
제너릭스에 명시할 수 있는 데이터형은 반드시 클래스 이름이여야 하기 때문에 기본 자료형을 보관할 경우 Wrapper Class의 이름을 사용한다.

Map data 
            = new HashMap();

기존에 저장된 데이터와 중복되는 이름이 저장될 경우, 기존에 저장된 데이터를 덮어 씌우게 된다.

1-3. ArrayList

ArrayList는 List 인터페이스를 상속받는 클래스로 데이터를 이름표 없이 무제한으로 보관할 수 있다.
ArrayList에 추가되는 데이터는 순차적으로 배열과 같은 인덱스 번호를 부여받는다.
상위 인터페이스형으로 선언하고 ArrayList 클래스로 객체를 할당하며, 선언과 할당 시에는 보관하고자 하는 지료형에 대한 제너릭스를 명시한다.

```java List<저장할 데이터의 클래스 이름> list = new ArrayList<저장할 데이터의 클래스 이름>(); ``

JAVA - 예외처리

Thu, 08 Dec 2022 12:58:25 GMT

1. 예외처리

1-1. 에러의 종류

컴파일 에러
- 소스코드의 구문 오류로 인하여 컴파일이 불가능한 상태
- 이클립스에서 빨간색으로 표시되는 경우에 해당한다.
- 프로그램을 실행하기 전에 발견되므로 상대적으로 고치기 쉽다.

런타임 에러
- 구문상의 에러는 없지만, 프로그램이 실행되는 과정에서 다양한 경우의 수에 대응하지 못하여 발생하는 예외상황
- 런타임 에러가 발생하면 프로그램은 강제로 종료된다.
- 우리가 프로그램의 에러라고 부르는 현상은 대부분 런타임 에러에 해당한다.

1-2. 런타임 에러의 종류

런타임 에러는 프로그램 자체의 구조적인 문제로 인한 논리적 오류와 자바 가상머신 자체의 문제로 인한 오류, 그리고 예외가 있다.
논리 오류
- 논리적 모순이 생기지 않도록 코드를 작성해야 한다.
자바 가상머신 자체의 오류
- 프로그래머가 책임질 수 있는 수준의 오류가 아니다.
예외(Exception)
- 프로그램 실행 중에 발생할 수 있는 예기치 않은 사건으로 프로그래머의 노력으로 처리할 수 있다.
- 자바 가상 머신은 프로그램 실행 중에 예외가 발생하면 관련된 예외 클래스로부터 예외 객체를 생성하여 프로그램에서 지정된 예외처리 구문으로 넘긴다.
- 예외가 발생하면 프로그램에 지정된 예외 처리 구문이 자바 가상머신에 의해 호출되고, 이때 전달되는 예외 객체를 넘겨받아 적절한 처리를 수행한다.

1-3. java의 예외처리

java에서는 try ~ catch ~ finally 구문을 통해 프로그래머가 예외 상황에 대응할 수 있도록 하고 있다.

try {
    // 기본적으로 실행되는 부분
} catch (예외 클래스 이름 객체 이름) {
    // try 블록에서 예외가 발생한 경우 이 곳으로 제어가 넘어온다.
} finally {
    // 예외 상황의 발생 여부에 상관없이 무조건 실행되는 부분
    // finally 블록은 생략 가능하다.
}

try 블록 실행도중 catch에서 명시한 예외 클래스에 해당하는 런타임 에러가 발생하면, try 블록을 즉시 중단하고 catch 블록이 실행된 후, finally 블록이 실행된다.

1-4. catch 블록을 사용한 복잡한 에러처리

catch 블록은 에러가 예상되는 상황에 대해 복수로 명시하는 것이 가능하다.

try {
    //
} catch(NumberFormatException e) {
} catch(ArrayIndexOutOfBoundsException e) {
}

1-5. Exception 클래스

Java에서 예외 상황을 의미하는 모든 클래스들의 최상위 클래스
이 클래스의 이름으로 catch 블록을 구성하면, 모든 예외 상황에 일괄적으로 대응할 수는 있지만, catch 블록이 세분화된 경우와는 달리 상황 별 개별적인 처리는 불가능하다.
Exception 클래스에 대한 예외처리는 대부분 맨 마지막 catch 블록에 명시하여 '마지막 알 수 없는 에러'를 의미하도록 구성한다.

try {
} catch(NumberFormatException e) {
} catch(ArrayIndexOutOfBoundsException e) {
} catch(Exception e) {
}

1-6. 여러 객체 'e'의 기능

e.getMessage() -> 간략한 에러 메시지를 리턴한다. -> e.getLocalisMessage()도 같은 기능을 한다.
e.printStackTrace() -> 실제 예외 상황시에 출력되는 메시지를 강제로 출력한다. -> 개발자가 catch 블록 안에서 예외 상황을 분석하기 위한 용도로 사용한다.

2. Calendar Class - 날짜 처리

JAVA - 정규 표현식

Thu, 08 Dec 2022 09:15:52 GMT

1. 정규 표현식

1-1. 정규 표현식이란?

정규 표현식(Reqular Expression)은 특정한 규칙을 가진 문자열의 집합을 표현하는데 사용하는 '형식언어'이다.
정규 표현식은 많은 텍스트 편집기와 프로그래밍 언어에서 '문자열의 검색과 치환'을 위해 지원하고 있다.
java.util.regex 패키지에 포함되어있다.

1-2. 정규 표현식의 사용

boolean java.util.regex.Pattern.matches(String arg0, CharSequence arg1);
arg0 : 정규 표현식 문자열이다.
arg1 : 형식을 검사받기 위한 내용이다.
즉, 위의 기능은 arg1이 arg0의 형식에 맞는지를 검사하고 결과를 boolean으로 리턴한다.

1-3. 정규 표현식

숫자 모양에 대한 형식 검사 "^[0-9]*$"
영문으로만 구성되었는지에 대한 형식 검사 "^[a-zA-Z]*$"
한글로만 구성되었는지에 대한 형식 검사 "^[ㄱ-ㅎ가-힣]*$"
영문과 숫자로만 구성되었는지에 대한 형식 검사 "^[a-zA-Z0-9]*$"
한글과 숫자로만 구성되었는지에 대한 형식 검사 "^[ㄱ-ㅎ가-힣0-9]*$"
이메일 형식인지에 대한 검사. "아이디@도메인"의 형식을 충족해야 한다. "^0-9a-zA-Z@0-9a-zA-Z.[a-zA-Z]{2,3}$"
"-"없이 핸드폰번호인지에 대한 형식검사. "^01(?:0|1|[6-9])(?:\\d{3}|\\d{4})\\d{4}$"
"-"없이 전화번호인지에 대한 형식검사. 각 부분에 대한 자리수도 충족시켜야 한다. "^\\d{2,3}\\d{3,4}\\d{4}$"
"-"없이 주민번호에 대한 글자수 및 뒷자리 첫글자가 1~4의 범위에 있는지에 대한 검사 "^\\d{6}[1-4]\\d{6}"

📚 Reference

정규표현식 (Regex) 정리

JAVA - Wrapper Class

Thu, 08 Dec 2022 09:01:49 GMT

1. Wrapper Class

Java는 데이터를 관리하기 위하여 기본 데이터 타입을 지원하지만, 클래스를 통해서 만들어진 객체를 통한 데이터 관리도 가능하다.
어떤 상황에서는 기본 데이터 타입의 변수를 객체 형태로 사용해야 하는 경우가 있는데, 이때 기본형 타입을 객체로 포장할 필요가 있다.
포장 클래스(Wrapper Class)는 특정 기본형 타입을 나타내는 용도로 사용된다.

1-1. Wrapper Class 의미

초창기 java 언어는 기본 자료형의 연산보다도 Wrapper Class를 사용한 연산이 더 많이 이루어졌으나, java 언어가 발전함에 따라서 기본 자료형과 Wrapper Class간의 연산 차이가 없어졌다.
최근의 java 언어는 Wrapper Class와 기본 자료형을 구분하지 않고 사용하기 때문에 객체로서의 특별한 의미가 없어졌다고 볼 수 있다.

1-2. Wrapper Calss의 객체만들기

각각의 Wrapper 클래스의 객체는 자신과 대응되는 기본 자료형의 데이터를 파라미터로 전달받는다.

int num = 1;
Integer wrapper = new Integer(num);

1-3. Wrapper Class의 형변환

기본 자료형과 Wrapper 클래스 간에는 서로 암묵적 형변환이 가능하다.

int num = 100;
Integer wrapper = num;
-----------------------------------------
Integer wrapper2 = new Integer(200);
int num = wrapper2;

1-4. Wrapper Class의 static 데이터

모든 Wrapper Class는 static 데이터 형태로 Wrapper Class에 대응되는 자료형에 대한 최솟값과 최댓값을 가지고 있다.

int max = Integer.MAX_VALUE;
int min = Integer.MIN_VALUE;

1-5. 문자열 데이터의 형변환

1과 "1"의 차이 -> 기본 자료형과 문자열 데이터 간의 연산에서는 기본 자료형 데이터가 문자열로 변환된 후, 문자열 간의 연산으로 처리된다.

int a = 1;
String b = "1";
System.out.println(a+b); // "11"이 출력됨

사용자 입력값에 대한 연산 -> 모든 프로그램 플랫폼에서 사용자의 입력값은 String으로 처리된다. -> 만약, 인터넷 뱅킹에서 2개의 계좌로 송금할 금액을 각각 입력하였을 때, 총 금액을 계산한다면 다음과 같이 처리될 것이다.

String money1 = "5000";
String money2 = "3000";

String total = money1 + money2; // 50003000 출력

문자열 데이터를 기본 데이터형으로 변환하기 -> Wrapper Class에는 기본 자료형의 모양을 띄고 있는 문자열 데이터를 실제 기본 자료형으로 변환시키는 기능이 포함되어 있다. -> Java에서 Wrapper Class의 가장 큰 의미는 바로 이 부분이라고 할 수 있다.

String money1 = "5000";
String money2 = "3000";

int m1 = Integer.parseInt(money1);
int m2 = Integer.parseInt(money2);

System.out.println(m1 + m2); // 8000 출력

2. Math Class

2-1. 수학적인 연산을 지원하는 클래스

Math Class는 흔히 계산을 하는데 도움이 되는 많은 수의 기본적인 수학 함수들을 제공한다.
Math Class는 java 표준 라이브러리의 java.lang 패키지에 정의되어 있다.
Math Class의 모든 메서드들은 static 메서드로, 클래스의 객체를 생성하지 않고 그 메서드가 정의된 클래스 이름을 통해서 호출될 수 있다.

3. String Class

문자열에서 정보를 추출하기 위한 String Class의 기본 기능

JAVA - 패키지

Thu, 08 Dec 2022 08:35:54 GMT

1. 패키지 (Package)

1-1. Java Package

패키지 -> 클래스에 대한 묶음 단위
클래스를 용도별이나, 기능별로 그룹화 한 것을 말한다. 소스코드는 폴더로 분류된 형태로 존재하게 된다.
서로 다른 패키지에 속해 있다면 다른 클래스와 이름이 동일하더라도 충돌이 발생하지 않는다. (서로 다른 폴더에는 이름이 같은 파일들이 존재할 수 있다.)

1-2. 패키지 추가하기

패키지 이름의 일반적인 정의 형식 -> 회사 도메인 이름의 역순, 프로젝트 이름의 소문자 -> com.koreait.shop.user ->com.koreait.shop.article

1-3. 패키지

패키지에 소속된 클래스 파일은 첫 번째 라인에서 자신이 소속된 클래스 패키지 이름을 선언해야 한다.
이클립스가 왼쪽의 트리 영역에서 소스를 분류하는 작업을 통해 구문을 자동으로 추가해 주지만, 간혹 처리되지 않을 때도 있으므로 package 구문에서 에러가 발생할 경우 소스가 어떤 패키지에 있는지 확인하여 직접 이 구문을 수정해 주어야 한다.

2. ClassPath

컴파일이 완료된 *.class 파일들이 위치하는 경로

3. 라이브러리

한개 이상의 패키지들을 배포하기 용이하도록 압축한 형태
다른 프로그램에서 라이브러리 안에 포함된 기능을 활용할 수 있다.
*.jar

4. JAVA 기본 API들

우리가 사용하는 JDK안에는 이미 수많은 라이브러리가 포함되어 있고, 이 라이브러리 안에는 프로그램 개발에 필요한 패키지들이 기본적으로 포함되어 있다.
자바 프로그래밍은 이러한 라이브러리들의 기능을 활용하여 이루어진다.
이렇게 프로그램 개발을 위하여 기본적으로 제공되는 기능들을 API라 한다.

JAVA - 디자인 패턴

Thu, 08 Dec 2022 08:11:22 GMT

1. 디자인 패턴 (Design Pattern)

1-1. 디자인 패턴이란?

디자인 패턴이란 기존 환경 내에서 반복적으로 일어나는 문제들을 어떻게 풀어나갈 것인가에 대한 일종의 솔루션 같은 것이다.
디자인 패턴은 설계자들이 "올바른" 설계를 "빨리" 만들 수 있도록 도와준다.

1-2. SingleTon 패턴

프로그램 내의 여러 곳에서 반복적으로 사용되어야 하는 객체에 대해 전역적인 범위를 갖도록 객체를 생성하고, 이 객체를 여러 곳에서 공유하기 위한 클래스 작성 패턴
이러한 패턴을 통해 생성된 객체를 싱글톤 객체라고 한다.

1-3. SingleTon 객체의 이점

프로그램의 전역에서 활용할 재료로 사용되는 공유 기능을 하나만 생성하여 여러 곳에서 재사용합으로서 메모리를 효육적으로 사용할 수 있다.
단 한번만 객체를 생성하면 다시 객체를 생성할 필요가 없기 때문에, 해당 기능을 사용할 때마다 객체를 일일이 생성해야 하는 번거로움을 피할 수 있다.

1-4. 공통 기능을 포함할 클래스 안에서 스스로의 객체를 static으로 선언

static이 적용된 자원은 메모리의 고정영역에 생성되기 때문에, 클래스 자체의 객체나 그 안에 포함된 멤버변수, 메서드와는 메모리 상에서 구별된다고 볼 수 있다.
그러므로 Calc 클래스 안에 static 형태로 Calc 클래스의 객체를 정의하더라도 코드상의 논리적인 연관 관계를 위해 하나의 파일에서 정의하는 것일 뿐, 실제로는 Calc 클래스 자체에서 독립된 객체가 되는 것이다.

public class Calc {
    static Calc current;
}

Calc 클래스 이외의 여러 곳에서 new 연산자를 사용하여 객체 할당이 가능하다면 SingleTon이라는 개념 자체가 성립되지 않으므로, 외부에서 이 객체에 직접적인 접근을 못하도록 은닉시킨다.

public class Calc {
    private static Calc current;
}

1-5. 은닉된 객체를 할당하거나 메모리에서 삭제하는 기능 추가

current 객체를 private로 지정하였기 때문에 객체를 메모리에 간접적으로 할당하고 삭제하기 위한 메서드가 필요하다.
객체를 메모리에서 제어하기 위해서는 null을 사용한다.

public class Calc {
    private static Calc current; // <- private static Calc current = new Calc(); (객체 선언)

    // 객체 할당처리
    // 객체가 할당되지 않은 경우에만 할당하도록 하여 중복 할당을 방지한다.
    public static Calc getInstance() {
        if(current == null) {
            current = new Calc();
        }
        return current;
    }
    // 객체에 null을 대입하면 메모리에서 삭제된다.
    public static void freeInstance() {
        current = null;
    }
}

1-6. new 연산자를 사용한 객체 할당 금지하기

기본 생성자를 private 형태로 정의하면 객체 생성자가 은닉 처리되어 외부에서 new 연산자를 사용한 객체 할당이 금지된다.

public class Calc {
    private static Clac current;

    // 객체 할당 처리
    // 객체가 할당되지 않은 경우에만 할당하도록 하여 중복 할당을 방지한다.
    public static Calc getInstance() {
        if(current == null){
            current = new Calc();
        }
        return current;
    }

    // 객체에 null을 대입하면 메모리에서 삭제된다.
    public static void freeInstance() {
        current = null;
    }

    private Calc() {
        super();
    }
}

React - 들어가기 전 (2)

Mon, 05 Dec 2022 17:58:00 GMT

1. JavaScript (ECMAScript)

웹페이지에 생명을 불어넣는 역할을 함 (동적인 부분 담당)
스크립트 언어의 종류
- 프로그램이 시작되는 런타임 언어가 해석되고 실행이 가능
표준 버전 : ES5, ES6(ECMAScript2015, ES2015)

1-1. JavaScript의 문법 (ES6 기준)

자료형 (Data Type) : 데이터를 다루기위해 미리 정해놓은 데이터의 유형
- 보통 변수를 선언하는 시점에 해당 변수의 자료형이 결정되지만 JS에서는 변수를 선언할 때가 아닌 변수의 데이터가 개입되는 시점에 해당 변수의 자료형이 결정된다.
동적 타이핑 (Dynamic Typing) : 동적으로 자료형이 결정되는 것
- JS에서 사용
- 변수를 선언할 때 변수의 자료형을 쓰지않고 var나 let을 사용
  - 배열을 사용하는 예제와 인덱스를 이용해서 배열의 변수에 접근하는 예제
  - object type : 객체를 다루기위한 자료형
  - JS에서의 객체는 key와 value로 이루어진 쌍의 집합을 의미 (key는 문자열 value는 어떤 자료형이든 다 가능)

1-2. 연산자 (Operator)

대입 연산자 (Assignment Operator)
- 대입 연산자는 항상 오른쪽에서 왼쪽 방향을 흐름이 흘러감! -> 오른쪽에 있는 값을 왼쪽에 대입시킨다.
사칙 연산자
, -, , /(나눗셈 몫), %(나눗셈 나머지), *(지수 연산자)
산술 연산자 (Arithmetic Operators)
대입 + 산술
증가 연산자(++), 감소 연산자(--)
- postfix 방식 : a++ -> 먼저 증감 전의 값을 반환하고 이후에 변수의 값이 증감된다.
- prefix 방식 : ++a -> 먼저 변수의 값을 증감시키고 이후에 증감된 변수의 값을 반환한다.

유의점 : 꼭 연산자를 변수에 붙여야하는 순서에 유의

관계 연산자 (Relational Operators) = 비교 연산자 (Comparison Operators) : 변수들 사이의 관계를 비교하기 위해 사용 (변수들의 값 비교)
- <, >, <=, >= -> 왼쪽에 나온 변수를 기준으로 생각하기

동등 연산자 (Equality Operators) : 변수의 값이 같은지 다른지를 판단할 때 사용

일치 연산자 (Strict Equality Operators) : JS에서는 변수의 자료형까지도 같은지에 대해 엄격하게 동일한지 확인할 때 사용

이진 논리 연산자 (Binary Logical Operators) : true와 false 값만을 갖는 boolean 값을 비교할 때 사용

조건부 연산자 (Conditional Operator) : 조건에 따라서 결과가 두개로 나뉘어지게 됨 -> 삼항 연산자 (Ternary Operator)

1-3. JavaScript의 함수

함수 : 입력을 받아서 정해진 출력을 하는 것
- 함수의 입력을 파라미터(parameters) 또는 인자(arguments)라고 한다.

📚 Reference

학습 자료 및 그림 출처

Inflearn - 처음 만난 리액트 (React) : Inje Lee(소플)

React - 들어가기 전 (1)

Mon, 05 Dec 2022 16:03:18 GMT

1. HTML (Hyper Text Markup Langage)

: 웹사이트이 뼈대를 구성하기 위해 사용하는 마크업 언어 -> 보통 웹에서 주로 사용하였으나 웹 브라우저를 이용하여 데스크탑 용 앱을 만들 수 있는 기술에도 사용된다.

1-1. Tag (태그)

:웹사이트의 구조를 만들고 웹사이트에 들어갈 내용을 채운다.

구성
```
 -> 열기
 -> 닫기
```

-> 열고 닫기를 한번에 할 수 있음

- 웹사이트의 뼈대를 구성하는 태그들
```html

   -> 웹사이트 속성 (제목, 설명 등 : 메타데이터)
  
   -> 웹사이트에 보이는 컨텐츠

-> 웹사이트의 제목을 넣기위해 title 태그를 사용

1-2. SPA (Single Page Application)

: 하나의 페이지만 존재하는 웹사이트

-> 멀티 페이지와 싱글 페이지

2. CSS (Cascading Style Sheets)

: 웹사이트에 레이아웃과 글꼴 그리고 색상 등과 같이 디자인을 입히는 역할을 하는 언어

📚 Reference

학습 자료 및 그림 출처

Inflearn - 처음 만난 리액트 (React) : Inje Lee(소플)

React - 2022년 개정

Sat, 03 Dec 2022 03:23:32 GMT

1. 설치

https://nodejs.org/ko/ 에 들어가서 node js를 설치해준다.
https://code.visualstudio.com/ 에 들어가서 vs code를 설치해준다.

2. 수정

프로그래머스 - 같은 숫자는 싫어

Sun, 20 Nov 2022 18:01:20 GMT

같은 숫자는 싫어

📚 Reference

프로그래머스 - 올바른 괄호

Sun, 20 Nov 2022 17:56:20 GMT

올바른 괄호

📚 Reference

백준 - 4949번

Sat, 19 Nov 2022 17:38:30 GMT

균형잡힌 세상

📌 문제 세계는 균형이 잘 잡혀있어야 한다. 양과 음, 빛과 어둠 그리고 왼쪽 괄호와 오른쪽 괄호처럼 말이다.

정민이의 임무는 어떤 문자열이 주어졌을 때, 괄호들의 균형이 잘 맞춰져 있는지 판단하는 프로그램을 짜는 것이다.

문자열에 포함되는 괄호는 소괄호("()") 와 대괄호("[]")로 2종류이고, 문자열이 균형을 이루는 조건은 아래와 같다.

모든 왼쪽 소괄호("(")는 오른쪽 소괄호(")")와만 짝을 이뤄야 한다. 모든 왼쪽 대괄호("[")는 오른쪽 대괄호("]")와만 짝을 이뤄야 한다. 모든 오른쪽 괄호들은 자신과 짝을 이룰 수 있는 왼쪽 괄호가 존재한다. 모든 괄호들의 짝은 1:1 매칭만 가능하다. 즉, 괄호 하나가 둘 이상의 괄호와 짝지어지지 않는다. 짝을 이루는 두 괄호가 있을 때, 그 사이에 있는 문자열도 균형이 잡혀야 한다. 정민이를 도와 문자열이 주어졌을 때 균형잡힌 문자열인지 아닌지를 판단해보자.

📌 입력 하나 또는 여러줄에 걸쳐서 문자열이 주어진다. 각 문자열은 영문 알파벳, 공백, 소괄호("( )") 대괄호("[ ]")등으로 이루어져 있으며, 길이는 100글자보다 작거나 같다. 각 줄은 마침표(".")로 끝난다.

입력의 종료조건으로 맨 마지막에 점 하나(".")가 들어온다.

📌 출력 각 줄마다 해당 문자열이 균형을 이루고 있으면 "yes"를, 아니면 "no"를 출력한다.

📌 예제 입력 1 So when I die (the [first] I will see in (heaven) is a score list). [ first in ] ( first out ). Half Moon tonight (At least it is better than no Moon at all]. A rope may form )( a trail in a maze. Help( I[m being held prisoner in a fortune cookie factory)]. ([ (([( [ ] ) ( ) (( ))] )) ]). . .

📌 예제 출력 1 yes yes no no no yes yes

📌 힌트 7번째의 " ."와 같이 괄호가 하나도 없는 경우도 균형잡힌 문자열로 간주할 수 있다.

import java.util.Scanner;
import java.util.Stack;

public class Training_02 {

    public static void main(String[] args) {

        Scanner sc = new Scanner(System.in);

        while(true) {
            String str = sc.nextLine();

            if(str.equals(".")) {
                break;
            } else {
                if(solution(str)) {
                    System.out.println("yes");
                } else {
                    System.out.println("no");
                }
            }
        }
    }

    public static boolean solution(String str) {
        boolean answer = true;

        Stack stack = new Stack<>();

            for(int i = 0; i < str.length(); i++) {
                char c = str.charAt(i);

                if(c == '(' || c == '[') {
                    stack.push(c);
                }

                if(c == ')') {
                    if(stack.empty()) {
                        return false;
                    } else if(stack.peek() != '(') {
                        return false;
                    } else {
                        stack.pop();
                    } 
                }

                if(c == ']') {
                    if(stack.empty()) {
                        return false;
                    } else if(stack.peek() != '[') {
                        return false;
                    } else {
                        stack.pop();
                    }
                }

                if(!stack.empty()) {
                    answer = false;
                } else {
                    answer = true;
                }
            }
        return answer;
    }
}

stack을 활용하여 풀었다.