[2024 JS 심화 프론트 스터디] 정호용 #1주차 "JS 첫주차"

첫 주차에 강의를 늦게 듣게 되었네요..하하 다음 주차 스터디 부터는 일찍일찍 들어야 될거 같아요..!

 

저희가 이번 스터디에서 듣게 될 강의는 입문자를 위한 JS강의 인데요, 지난 학기에 이미 JS + 리액트 스터디를 했음에도 완전히 제 것으로 만들고자 다시 듣게 되었습니다.

 

3강. 자바스크립트는 어떤 언어인가요?

 

✅ Java와 JavaScript는 완전히 다른 언어이다!

✅ 원래 웹 사이트에 사용될 목적으로 제작되었다!

✅ html과 css는 기능이 제한된 마크업 언어이기에, 웹 사이트에 이것만 사용하면 아무런 기능이 작동하지 않는다.

✅ 버튼의 클릭에 반응하고, 수식을 연산하는 등의 기능이 있는 자바스크립트를 사용해야 하는 이유이다.

✅ 그러기에 지금까지 자바스크립트는 프론트엔드가 주로 사용했었다.

✅ 2009년에 라이언 달이라는 개발자에 의해 브라우저에서만 읽고 쓸 수 있던 스크립트를 사용자의 컴퓨터에서도 원하는 대로 쓸 수 있게 되었다.

✅ 백엔드의 서버 프로그램, 모바일 앱, 컴퓨터에서 실행되는 프로그램, 심지어 머신러닝까지 구현할 수 있게 된다.

✅ 자바스크립트는 인터프리터 언어이다. 즉, 컴파일 과정을 거치지 않는다. 

✅ 자바스크립트는 동적 자료형을 갖는다. 

✅ 자바스크립트는 객체지향을 지원하지만, 그 형태는 자바와는 다르다. 

✅ 자바스크립트는 타 언어와 같이 표준안을 갖고 있고, 꾸준히 업데이트 되는 언어이다.

✅ 예전에는 각 브라우저의 런타임 버전이 각자 달라 새로운 문법 체계를 적용하는데 어려움이 있었지만, 현재는 다양한 프로그램과 버전 업데이트 덕분에 이 문제가 해결되었다.

 

4강. 수강을 위한 준비

 

✅ 실습환경 구축

✅ 프로그램 설치 없이 자바스크립트 실습을 할 수 있는 환경을 구축한다.

✅ 맥 기준) command + option + i 를 이용해 브라우저 내의 개발자 도구에 들어가고, console을 클릭해 다음 명령어를 입력해본다.

console.log("Hello World");

 

✅ control + l 을 눌러 모든 명령어를 날릴 수 있다.

✅ 브라우저 내의 개발자 도구의 콘솔창을 써도 되지만, 온라인 자바스크립트 에디터를 써도 된다!

✅ 자바스크립트의 확장자는 .js이다.

 

5강. 콘솔과 주석

 

콘솔?

✅ console.log 직접 쳐보기

console.log(1234);

 

✅ log 뒤에 괄호를 치고, 그 안에 출력하고픈 것을 적고, 문장 끝에 세미콜론을 붙여주자. (세미콜론은 필수는 아님)

✅ console.log는 최종 사용자가 아닌 개발자를 위한 기능이며, 개발 중 디버깅 등에 사용된다.

✅ 세미콜론은 필수가 아니라고 했지만, 한 줄에 여러 코드를 쓸 때, 세미콜론을 쓰지 않으면 오류가 난다.

 

console.log(1,2,3);

 

✅ 쉼표를 이용해 여러 값을 한 번에 처리할 수 있다.

console.log([true, false], {a:1, b:2});
console.log(this);
console.log(console);

 

✅ 위의 명령어를 친 뒤에 세모 화살표를 눌러 자세한 정보를 볼 수 있다.

 

주석?

✅ 주석은 컴퓨터가 무시하는 메시지이다.

✅ 코드를 짰을 때 누구나 쉽게 파악할 수 있게 설명해줄 때 주로 주석을 쓴다.

✅ // 를 이용해 주석을 적는다.

// 컴퓨터야, 너한테 하는 말이 아니야.

 

✅ 맥 기준 command + / 를 하면 해당 문장의 주석 처리/해제를 할 수 있다.

✅ /* */ 를 이용하면 여러 줄 주석 처리를 할 수 있다. /*으로 열었으면 */ 으로 닫아줘~

✅ 보통 여러줄을 드래그하고 command + / 을 해서 주석을 처리한다.

 

6강. 변수와 상수에 데이터 담기

 

✅ 변수는 let, 상수는 const / let으로 넣은 값은 바꿀 수 있고, const로 넣은 값은 바꿀 수 없다~

 

let darkModeOn = true;
const PI = 3.1415926535;

✅ 데이터에 의미를 부여하기 위해 변수나 상수를 쓴다.

✅ 특정 값을 바꾸기 용이하게 하기 위해 / 값의 변화를 막기 위해 변수나 상수를 쓴다.

✅ var는 예전 자바스크립트 초창기에 보통 사용했었지만, 지금은 쓰이지 않는다.

✅ 자료형에 있어 엄격하지 않다.

✅ 변수는 보통 소문자로, 상수는 보통 대문자로 작성하는 관례 (컨벤션) 가 있다.

✅ 상수는 초기 선언 후에 값을 바꿀 수 없으며, 선언만 할 수 없다.

✅ 변수는 이미 선언된 것과 동일한 이름의 상수를 선언할 수 없다.

 

식별자 명명 규칙

• 영문, 국문, 유니코드, 숫자 사용가능
• 기호는 $나 _ 만 사용가능
• 숫자로 시작 불가
• 공백 사용불가
• 예약어 사용불가

7강. 기본 자료형들과 연산자

✅ 자료형이란? 프로그램에서 사용되는 데이터의 종류

✅ 자바스크립트는 동적 자료형

✅ boolean : true or false 를 가짐. 받을 값으로 논리 비교 (> , < 등). 반대 (역) 연산 : ! 를 붙인다. !!이면 반대의 반대.

✅ number : 숫자(정수,실수)인데, 용량 구분이 없음(효율적으로 쓰기 위함). 사칙연산 가능 (+ , - , * , / , %)하나

연산자 우선순위 주의할 것.

✅ typeof : 해당 데이터의 자료형을 반환함.

뒤에 괄호를 쓰지 않고 typeof bool1 등과 같이 띄어쓰기로만 구분한다. 반환값의 자료형은 문자열.

✅ string : 문자열을 가짐. ' ' 와 " " 의 구분이 없다. 숫자, 알파벳, 한글, 이모지 등 유니코드에 해당하는 모든 문자가 다 들어갈 수 있다.

✅ undefined 와 null : 

자료형 이름	뜻	조건	비고
undefined	뭐가 들어있는지 모른다!	값이 지정 안 됐을 때	뭐가 나올 자리가 아닐 때
null	비어 있다!	보통 함수에서 반환 실패 시	뭐가 나와야 하는데 없을 때

변수 선언 시에는 단순히 뭘 반환하는 것이 아니기 때문에 undefined를 반환한다.

null의 타입은 object로 변환하는데, 자바스크립트의 초기 설계부실로 인한 것이다.

 

8강. 연산자 더 알아보기

 

✅ 비교 연산자 : boolean을 반환.

연산자 이름	뜻
==	자료형 관계없이 같은 값
===	자료형과 값까지 같음
!==	==의 반대
!===	===의 반대
> >= < <=	대소비교

문자열의 경우 사전순서상 뒤에 오는 쪽이 더 크다고 인식한다.

 

✅ 부수효과를 일으키는 연산자.

연산자 이름	뜻
~ ++ / ++ ~	연산 후 증가 / 증가 후 연산
~ -- / -- ~	연산 후 감소 / 감소 후 연산

 

✅ 할당 산술 연산자.

연산자 이름	뜻
x+=y	x = x + y
x-=y	x = x - y
x*=y	x = x * y
x/=y	x = x / y
x%=y	x = x % y
x**=y	x = x ** y

단, 문자열은 +=만 가능하다.

 

✅ boolean 관련 연산자

연산자 이름	뜻
&& (AND)	둘 다 참이면 참, 그게 아니면 모두 거짓
|| (OR)	둘 중 하나만 참이여도 참, 모두 거짓일 때만 거짓
(조건) ? (참일 시 값) : (거짓일 시 값)	조건이 참일 때와 거짓일 때 각각 반환하는 값이 다름

 

 

9강. 객체와 배열

 

객체?

✅ 배열은 객체의 한 종류이다. 또한 자바스크립트는 원시 자료형을 제외하고는 모두 객체로 이루어져 있다.

✅ 데이터의 묶음은 키 : 값의 조합임. 둘의 조합을 property라 부른다.

const person1 = {
  name: '김철수',
  age: 25,
  married: false
};

위에서 typeof person1 시 object를 반환함.

person1을 console.log() 안에 넣었을 시 객체의 내용을 출력함.
✅ 값에 접근 시 (프로퍼티 추가 시도 동일함)

. 을 쓰는 법	person1.name	. 뒤에 키 이름을 적는다.
[]를 쓰는 법	person1['name']	어떤 키 값이 있을 지 예상되지 않을 때 사용

const person1Age = person1.age;
const typeOfMarried = typeof person1['married'];

console.log(person1Age, typeOfMarried);

위 코드에서 person1Age는 25를 가진 number, typeOfMarried는 false를 가진 boolean을 반환한다.

 

✅ 값을 수정 시

person1.age++;
person1['job'] = 'PM';

console.log(person1);

++은 앞 뒤에 언제나 써도 상관없음.

const인데 내용을 수정할 수 있다?

: 객체의 경우 안의 내용을 수정하는 것은 가능하나, 다른 객체를 연결하려 하면 오류 남

 

배열?

✅ 다수의 데이터를 저장. 이것 또한 근본적으로 배열임.

const myArray = [true, 3.14, 'Hello', person1];

console.log(myArray, myArray.length);

✅ 위 myArray를 출력해 보면 0,1,2,3.... 과 같이 숫자를 키로 이용함을 알 수 있음. 

✅ 배열에는 length라는 프로퍼티를 갖고 있기에 myArray.length를 하면 배열의 크기를 반환한다.

 

✅ 요소들에 접근하기

console.log(
	myArray[0], // 프로그래밍에서는 수를 0부터 셈
	myArray[1],
	myArray[2],
	myArray[3]
);

myArray[0] = !myArray[0];
myArray[1] *= 100;
myArray[2] += ' world!';

console.log(myArray);

위 코드 세 줄은 특정 연산을 해서 배열 안에 들어있는 데이터를 바꾸게 된다.

 

✅ 요소 추가 및 삭제하기

myArray.push(123); // 요소를 추가

console.log(myArray);

push를 이용하여 맨 끝에 데이터를 넣음.

const popped1 = myArray.pop(); // 마지막 요소를 반환하며 제거

console.log(popped1, myArray);

즉, 제거한 것을 popped1에 할당.

myArray.pop(); // 그냥 제거만 하는 용도로

console.log(myArray);

즉, 마지막 요소를 제거하기만 함.

 

✅ 객체와 배열의 중첩 사용

const person2 = {
  name: '김달순',
  age: 23,
  languages: ['Korean', 'English', 'French'],
  education: {
    school: '한국대',
    major: ['컴퓨터공학', '전자공학'],
    graduated: true,
  }
};

console.log(person2);

person2 안에 languages라는 프로퍼티는 배열이라는 객체를 갖고 있음

person2 안에 education이라는 프로퍼티는 또 다른 객체를 갖고 있음

console.log(person2.languages[2]);

French를 반환. 2보다 큰 값 넣을 시 undefined출력

console.log(person2.education.graduated);

true를 반환. 이 외에도 person2['education'].major[0]; 등과 같이도 접근할 수 있다.( 컴퓨터공학 출력)

 

10강. if / else 문

 

if문?

✅ 조건을 받아 true이면 그 때의 실행문 실행

false라면 그 때의 실행문 실행

if (true) console.log('사실');
if (false) console.log('거짓');

사실 만 출력. 거짓 은 출력하지 않는다.

let open = true;

// 한줄 코드
if (open) console.log('안녕하세요.');

open 이 true이므로 안녕하세요 출력. open이 false이라면 안녕하세요를 출력하지 않는다.

// 여러줄 코드
if (open) {
  console.log('안녕하세요.');
  console.log('자리로 안내하겠습니다.');
}

한 줄 이상 실행문 작성 시 {} 꼭 작성하기. 안 쓰면 첫 번째 한 줄만 실행됨. 블록으로 감싸주기!

 

if ... else 문?

✅ 사실 if 를 두 개 써도 되지만 if else를 쓰는 것이 더 편하다.

// open = !open;

if (open) {
  console.log('안녕하세요.');
  console.log('자리로 안내하겠습니다.');
} else {
	console.log('영업종료되었습니다. 죄송합니다.');
}

open이 true이면 안녕하세요. 자리로 안내하겠습니다. 출력

false이면 영업종료되었습니다. 죄송합니다. 출력

 

들여쓰기는 python처럼 필수요소는 아니다!

const x = 10; // 11, 12로 시도해볼 것

if (x % 4) {
  if (x % 2) {
    console.log('홀수입니다.');
  } else {
    console.log('짝수입니다.');
  }
} else {
  console.log('4의 배수입니다.');
}

false, NaN은 0으로 해석될 수 있음

 

✅ if... else if... else 문?

const a = 1;
const b = 2;

if (a < b) {
	console.log('a가 b보다 작다.');
} else if (a > b) {
	console.log('a가 b보다 크다.');
} else {
	console.log('a와 b는 같다.');
}

여기서 else if 는 여러 번 쓸 수 있다.

 

11강. switch 문

 

✅ 특정 변수나 상수의 값 or 반환값에 따라 작업 실행 시 사용한다.

const firePower = 1;

switch (firePower) {
	case 1:
		console.log('레어');
		break;
	case 2:
		console.log('미디움');
		break;
	case 3:
		console.log('웰던');
		break;
	default:
		console.log('오류');
}

switch() 의 괄호 안에는 어떤 값이던 들어올 수 있다.

default는 어떤 케이스에도 속하지 않을 때 쓴다.

firePower 값	결과값
1	레어
2	미디움
3	웰던
other	오류

 

break를 제거 시에 조건에 맞는 값이 나올 때 까지 계속 실행한다.

const dayOfWeek = '월';

switch (dayOfWeek) {
	case '월':
	case '화':
	case '수':
	case '목':
		console.log('6시 퇴근');
		break;
	case '금':
		console.log('12시 퇴근');
		break;
	case '토':
	case '일':
		console.log('휴무');
		break;
	default:
		console.log('잘못된 요일입니다.');
}

dayOfWeek가

월, 화, 수, 목일 시 6시 퇴근 출력

금일 시 12시 퇴근 출력

토,일 일 시 휴무 출력

그외 입력 시 잘못된 요일입니다 출력