웹개발 종합반 개발일지
키워드 : html css bootstrap js
간단한 자바스크립트 기능과 css로 정적 페이지를 구현하는 법을 배웠다! 심화과정 4번째
자바스크립트를 알아보자.
자바스크립트 연습용 툴 1 : 크롬 개발자도구
자바스크립트 연습용 툴 2 : 코드 샌드박스 https://codesandbox.io/
자바스크립트 연습용 툴 3 : vscode
문법강의 참고 : 자바스크립트 문법 뽀개기
자바스크립트 강의 https://learnjs.vlpt.us/basics/01-hello-javascript.html
- 연습장 정하기
1. 변수와 상수
변수 : 왼쪽에 선언, 오른쪽에 값
값이 변할 수 있어서 변수
let apple = 'red'상수 : 왼쪽에 선언, 오른쪽에 값
const banana = 'yellow'상수는 한번 선언되면 값이 변하지 않는다!
2. 데이터 타입(함수를 위해 영칭도 알아두자!)
숫자(Number) = 그냥 써도 됨
문자열(String) = ''나 ""나 ``
참/거짓(Boolean) = true / false
null = 이 값이 없음을 선언
undefined = 아직 값이 설정되지 않은(언젠가 있을) 객체
3. 연산자
산술연산자 : 사칙연산 + - * /
a++ : 1을 더한다음 1을 더하기 직전 값을 보여줌
++a : 1을 더한다음 1을 더한 값을 보여줌
대입연산자 : 특정 값이 정해져 있을때 연산하는 값만을 가져다 작성하는 축약된 형태의 연산자
let a = 1;
a += 3;
a -= 3;
a *= 3;
a /= 3;
console.log(a) : 1논리연산자 : 낫앤올
!: NOT - true를 false로, false 는 true로
const a = !true;
&&: AND - 양쪽 다 true일때만 true
const a = true && true;
console.log(a);||: OR - 하나라도 true라면 true
let t = true || false;리액트에서 유용하게 쓰이니까 모양을 잘 연습하자.
! : 1 위에 있는거
&& : 7 위에 있는거 2개
|| : 엔터 위에 있는거 2개
논리연산자 순서 : NOT -> AND -> OR
비교연산자 : = == ===
==를 쓸때의 주의점
number 1과 string '1'을 동일한 값으로 취급
0 과 false 도 동일한 값으로 취급
undefined 와 null 도 동일한 값으로 취급
왠만하면 ===를 쓰자
두 값이 일치하지 않는지 확인 : !==
=일치하지 않아야 true 를 내놓음
그 외 > < >= <=
4. 조건문
if문 : 특정 조건이 만족 될 때에만 특정 코드를 실행
const a = 0;
if (a + 1 === 2) {
console.log('a + 1 이 2 입니다.');
}if else 문 : 만족하지 않을 때 1개 더 구현
if-else if문 : 더더더 많이 구현
const a = 10;
if (a === 5) {
console.log('5입니다!');
} else if (a === 10) {
console.log('10입니다!');
} else {
console.log('5도 아니고 10도 아닙니다.');
}switch/case문
const device = 'iphone';
switch (device) {
case 'iphone':
console.log('아이폰!');
break;
case 'ipad':
console.log('아이패드!');
break;
case 'galaxy note':
console.log('갤럭시 노트!');
break;
default:
console.log('모르겠네요..');
}if문 걸기 애매한 케이스일때 쓰는걸까...
브레이크를 걸지 않으면 계속 돌기 때문에 꼭 걸어줘야함
5. 함수
여러 작업을 한 블록에 묶어주는거
함수를 만들때는 function 키워드를 사용하며, 옆에 ()는 함수에서 어떤 값을 받아올지 정해주는데 이를 파라미터(매개변수)라고 부름
중괄호로 묶어주면 되고
return을 하면 그 함수는 끝남
function add(a, b) {
return a + b;
console.log('호출이 되지 않는 코드!');
}콘솔로그는 찍히지 않는다.
함수 내에 템플릿 리터럴이 유용하게 쓰임
6. 화살표함수
리액트 내에서는 완전체 함수를 쓰지 못하기 때문에 화살표함수 문법을 사용해야 한다. 애로우펑션이다.
const add = (a, b) => {
return a + b;
};
선언 = 이름 (파라미터, 파라미터) => {
return a + b;
}function 키워드 대신에 => 문자를 사용해서 함수를 구현, 화살표의 좌측에는 파라미터, 화살표의 우측에는 코드 블록을 넣는다. 한눈에 잘 안들어오는게 단점
바로 리턴되는 한줄짜리 함수라면
const add = (a, b) => a + b;형태로 더 축약도 가능하다.
7. 객체
변수(let), 상수(const) 사용시 한 이름에 여러 종류의 값을 선언할 수 있다, 이를 객체라고 함
= 뒤에 {} 중괄호를 넣고 키 : 밸류의 형태로 데이터를 차곡차곡 쌓는다.
const captainAmerica = {
name: '스티븐 로저스',
actor: '크리스 에반스',
alias: '캡틴 아메리카'
};선언된 객체는 파라미터로 받아올 수 있다.
(템플릿 리터럴과 함수표현식을 쓰면 좋다.)
function print(hero) {
const text = `${hero.alias}(${hero.name})
역할을 맡은 배우는 ${
hero.actor
} 입니다.`;
console.log(text);
}이렇게 하고 print(captainAmerica) 이렇게 하면 캡틴의 정보가 담긴 문장이 나오는 것이다!
객체 비구조화 할당
객체에서 값을 추출해서 새로운 상수로 선언해주면 파라미터로 불러온 데이터값과 매치해서 코드 길이를 줄일 수 있다.
파라미터에서 객체 비구조화 할당
()괄호 내부에서 새로운 객체를 선언해버림.
파라미터 이름을 지을 필요가 없어진다!
객체 안에 함수 넣기
객체 내부에 함수를 만들면 this 를 사용해서 같은 블록 내의 값들을 자유롭게 쓸 수 있다.
(화살표함수와 같은 축약형은 사용불가능 - this가 가리키는 대상이 불명확해져서 그럼)
Getter 함수와 Setter 함수
보안용 함수(배우자) https://mygumi.tistory.com/161
https://humahumahuma.tistory.com/68
8. 배열
여러개의 항목이 들어있는 리스트
단일 항목 배열도 있고
객체 배열도 있다!
배열의 항목을 조회하고 싶을때는 []대괄호를 쓴다!
0부터 시작
배열 내장함수를 유용하게 사용하자
