브라우저란?
앱. 고유한기능. HTML, CSS, Javascript 읽고 해석해서 그리는 역할. 즉 렌더링해준다.
웹앱서비스 기본구조
FE( 사용자페이지, 관리자페이지admin=백오피스 ):데이터생성및사용 - BE:데이터검증&보완 - Database:데이터저장및관리
FE: API보내고받기 - 데이터바인딩/데이터로직
BE: API database에 보내고받기 - 비즈니스로직
데이터타입과 연산자
데이터타입
문자, 숫자, 참/거짓, null(값없음), undefined(정의X)
연산자
산술연산자
+ - / * % (나머지)
산술연산자 통해 숫자뿐 아니라 문자를 합칠수도 있음
"가" + "나" = "가나"
숫자+문자열 연산도 가능하지만 오류발생할수있어서 조심하기
- NaN은 Not-A-Number의 약자
- - 연산자는 숫자에서만 정의되므로 모두 숫자로 반환
- Javascript에서 + 연산자는 "더하기" 와 "연결"의 의미 가짐
비교연산자
>, <, <=, >=, ===( 우리가 보통 아는 (=) 라는 뜻. JS에서 그냥 = 는 대입의 의미), !==
== 와 != : 느슨한 동치연산자. 값만 비교하는 연산자. 타입비교 ㄴㄴ
반면 === 와 !== 는 데이터타입과 값까지 모두 같아야 true
예)
'1' === 1 : false(문자vs숫자)
'1' == 1 : true
논리 연산자
&&: and 연산자. 둘다 맞아야함.
(true) && (true) -> true
|| : or 연산자. 하나만 맞아도 됨
(true) || (false) -> true
! : not 연산자.
(false) ! (false) -> true
조건문
특정조건을 만족하면 실행하는 것.
핵심: 시작점과 끝점이 존재.
조건의 결과는 true 또는 false. 그래서 비교연산자와 함께 쓰임
조건1이 맞다면 A 실행(시작점). 아니라면 B 실행(끝점).
if (조건1) {
A 실행
} else {
B 실행
}조건 여러개 달 수 있음. 시작점끝점만 있다면 얼마든 가능.
if (조건1) {
A 실행
} else if (조건2) {
B 실행
} else if (조건3) {
C 실행
} else {
D 실행
}조건문 실무적용예시: 비밀번호===비밀번호확인 이 true면 가입성공
반복문
같은 행위를 반복하는 것.
핵심: 몇 번 반복할 것인가.
for ( let i = 0; i < 5; i=i+1) {
console.log("Hello")
}초기식: let i = 0
조건식: i < 5
증감식: i = i + 1 : 반복문이 한번 돌때마다 i가 1씩 증가하자
= i++
몇번째에 그만두기 : break
몇번째에 건너뛰기: continue
만약
const children = ["철수", "영희", "훈이"]
for (let i = 0; i < 3; i=i+1){
console.log(children[i] + "입니다.")
}이런게아니라
배열이 막 몇개일지 모를땐?
배열의 길이 측정할 수 있는 length를 이용하면 된다.
for (let i = 0; i < children.length; i=i+1){
어쩌구저쩌구
}실습예제
const fruits = [
{ number: 1, title: "레드향" },
{ number: 2, title: "샤인머스켓" },
{ number: 3, title: "산청딸기" },
{ number: 4, title: "한라봉" },
{ number: 5, title: "사과" },
{ number: 6, title: "애플망고" },
{ number: 7, title: "딸기" },
{ number: 8, title: "천혜향" },
{ number: 9, title: "과일선물세트" },
{ number: 10, title: "귤" }
]
for(let i = 0; i < fruits.length; i++){
console.log(fruits[i].number + " " + fruits[i].title)
}객체.키[i] 가 아니라
객체[i].키 이 순서
수학객체
자바스크립트의 수학기능 을 사용하는 명령어
배열, 문자열, 객체 등을 제어하는 메서드 = 내장함수
수학객체의 다앙한 기능
최대값 Math.max(2, 1, 6)
최소값 Math.min(2, 1, 6)
0~1 랜덤값 구하기 Math.random()
반올림하기 Math.round(2.12)
올림하기 Math.ceil(2.12)
버림하기 Math.floor(2.12)
수학객체 실무 실습 - 랜덤인증번호 6자리
String() : 문자열로 변환해주는 메서드
padStart : 앞의 문자열을 검증해서 사전에 설정해놓은 길이(첫번째 인자)가 아닐 경우 앞쪽부터 문자열(두번째인자) 을 채워주는 것
String (Math.floor(Math.random() * 1000000) ).padStart(6, "0")
// '027072' -> 이전같았으면 27072 이라고 떴을 거임.
이런 6자리 코드를 token 이라 보통 이름붙인다.
기능있는건 소괄호() 붙는당 메서드
DOM(Document Object Model)조작
자바스크립트로 html가서 특정id든class든 가져와서 스타일이든 속성이든뭐든 조작하는거
CSS 몰랐던 것들
padding: 50px; : 상하좌우 모두 50px
padding: 50px 30px 20px 30px; : 상우하좌. 즉 시계방향 순.
padding: 20px 30px; : 앞에건 위아래. 뒤에껀 좌우.
.wrapper__word__header .title { }
부모의 클래스 써주고 한칸띄고 자식 클래스 써줘도 효과있음
부모클래스 안의 자식클래스 에! 효과준다 는 의미.
html, body 같은 콤마로 구분해서 쓰는건
둘 다 먹이겠다 임. 차이 구분해야함.
단어입력해주세요 버튼 창이 아래로 내려가있을 수 있음
사용하는 브라우저, 운영체제 마다 렌더링엔진이 다르기때문에
화면이 다르게 나올 수 있다.
