안랩샘아카데미 React로 시작하는 프론트엔드 수업 1주차 정리
웹개발의 기본
HTML: 웹 문서의 뼈대
CSS: 웹 문서의 꾸밈
JavaScript: 사용자 동작에 반응,웹브라우저에서 사용,작동하는 프로그래밍언어로 기존의 웹페이지보다 많은 기능을 구현할 수 있다.
자바스크립트 개발환경과 코드실행
코드실행기 : 구글 크롬 개발자도구 실행 (Ctrl+Shift+i 나 F12)
코드에디터 : Visual Studio Code
Visual Studio Code 사용하기
개발폴더 설정 후 Visual Studio Code에서 폴더열고 파일 작성
확장프로그램 설치
-Prettier, Live Server
HTML 문서 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./index.js"></script>
</head>
<body>
<h1>React로 시작하는 프론트엔드</h1>
</body>
</html>! 입력하면 HTML 구조 자동완성
자바스크립트 기본 용어
예약어: 자바스크립트가 처음만들어질때 정해놓은 단어
식별자: 이름붙일때 사용하는 단어로 변수명이나 함수명 사용, 키워드를 사용할 수 없다.숫자로 시작할 수 없고 특수문자는 _와 $만 허용, 공백문자를 포함할 수 없다.
주석: 프로그램코드를 설명할 때 사용하고 프로그램 진행에는 전혀 영향을 주지 않는다.
HTML 태그 주석 : 로 문자열을 감싸 생성
자바스크립트 주석
한 줄 주석: //
여러 줄 주석: /* */
출력: 구글 크롬 개발자 도구에서 Console탭에서 값 입력하면 결과가 출력됨
-알림창에 출력
<script>
alert("Hello JavaScript")
</script>
-콘솔에 출력
<script>
console.log("Hello JavaScript")
</script>-확인창 출력
<script>
confirm("Hello Confirm message")
</script>
입출력
- 프롬프트 창에서 입력받기
- 웹 브라우저 화면에 출력
<script>
let name = prompt("이름을 입력하세요");
</script>
<script>
document.write("<h1>어서오세요</h1>");
</script>기본 자료형
자료(data)
- 프로그래밍에서 프로그램이 처리할 수 있는 모든 것
자료형(data type) - 자료 형태에 따라 나눠 놓은 것
- number, string, Boolean
문자열 자료형
<script>
console.log("안녕하세요");
console.log('안녕하세요');
</script>숫자 자료형
소수점이 있는 숫자와 없는 숫자를 모두 같은 자료형으로 인식
숫자 연산자
-더하기 연산자,빼기 연산자,곱하기 연산자,나누기 연산자,나머지 연산자
불 자료형
- 참과 거짓 값을 표현할 때 불 자료형을 사용
- true, false
- 비교 연산자
===, !==, >, <, >=, <=
불 논리합/논리곱 연산자
- && 논리곱 연산자
- || 논리합 연산자
자료형검사
-typeof 연산자
변수와 상수
변수
- 데이터를 담을 수 있는 공간
- 변수에 값을 대입할 때 데이터 타입이 결정됨
- let 키워드를 사용해 변수 선언
- let 이름 = 값
상수 - 항상 같은 수로 값에 이름을 한번 붙이면 값을 수정할 수 없다.
- const 키워드 사용
- const 이름 = 값
변수에 적용할 수 있는 연산자
-복합 대입 연산자 +=,-=,*=,/=,%=
-증감 연산자 변수++,++변수,변수--,--변수
자료형 변환
- 자동 형 변환(묵시적 변환)
- 숫자 타입+문자열 -> 문자열, 문자열 연결연산자(+)
- 문자열에 숫자를 곱하면 숫자 타입
타입변환 함수 사용 (명시적 변환)
- String()함수 사용해서 다른 자료형을 문자열 자료형으로 변환한다.
- Number()함수를 사용해서 숫자 자료형으로 변환한다.
논리 연산자
- ||(OR), &&(AND), !(NOT)
- 피연산자로 boolean뿐만 아니라 모든 타입의 값을 받을 수 있다.
- 연산 결과 역시 모든 타입
||(OR)
let hour = 12;
let isWeekend = true;
if (hour < 10 || hour > 18 || isWeekend) {
alert( '영업시간이 아닙니다.' ); // 주말이기 때문임
}
&&(AND)
let hour = 12;
let minute = 30;
if (hour == 12 && minute == 30) {
alert( '현재 시각은 12시 30분입니다.' );
}
!(NOT)
result = !value;
조건문
if 조건문
- 조건문은 프로그램의 흐름 변경 시 사용(조건 분기)
- 가장 일반적인 조건문
- 표현식의 값이 true면 중괄호 안의 문장을 실행하고 false면 문장을 무시
- 비교 연산자와 논리 연산자를 활용해 조건을 만들고 이 조건에 따라 조건 분기
if(조건){
조건의 결과가 true일 때 실행할 명령;
}
if(조건){
조건의 결과가 true일 때 실행할 명령;
}else{
조건의 결과가 false일 때 실행할 명령;
}
삼항연산자
(조건)? True일때실행명령 : false일때실행명령;
let result = condition ? value1 : value2;
실습
// 1. string type
let myName = "이름";
let myLocation = "지역";
const myName2 = "한번더선언"; //Cannot redeclare block-scoped variable 'myName'. ts(2451) //에러발생
let introduce = `${myName}은 ${myLocation}에 살고 있습니다.`;
console.log(myName+myLocation);
console.log(introduce);
// 2. Number type
let num1 = 10
let num2 = 1.5;
let num3 = -20;
console.log(num1+num2);
console.log(num1-num2);
console.log(num1*num2);
console.log(num1/num2);
//3. Boolean Type
let isEmpty = false;
let isOver = true;
//4. Null Type 명시적으로 비어있다,아무것도 할당하지 않았다.
let empty = null;
console.log(empty); //null
//5. Undefined Type 선언해놓고 아무것도 초기화하지않았다.
let none;
console.log(none); //undefined
// 미션 1> 이름 받아 화면에 출력하기
// 1) 사용자 이름 입력받기
// 2) 이름을 웹 브라우저 화면에 표시
// 3) 콘솔창에도 표시하기
let yourName = prompt("이름을 입력하세요");
document.write(yourName);
console.log(yourName);
// 미션 2> 두 수를 입력받아 +,-,*,/,% 결과를 출력하기
let numone = Number(prompt("첫번째숫자를 입력하세요"));
let numtwo = Number(prompt("두번째숫자를 입력하세요"));
console.log(numone + numtwo);
console.log(numone - numtwo);
console.log(numone * numtwo);
console.log(numone / numtwo);
document.write(numone + numtwo);
document.write(numone - numtwo);
document.write(numone * numtwo);
document.write(numone / numtwo);
// true, false 확인
console.log(Boolean("0"));
console.log(Boolean(" "));
console.log( 1 || 0); //1
console.log( true || 0); //true
console.log( `chris` || 0); //`chris`
console.log( null || 0); //0
console.log( null || 1); //1
console.log( null || `chris`); //`chris`
console.log( null || 0 || 1); //1
console.log( null || 0 || `chris`); //`chris`
console.log( undefined || null || 1); //1
alert( 1 && 0); 0
alert( 1 && 5); 5
alert( 1 && 2 && null && 3); null
alert( 1 && 2 && 3); 3
alert( null && 5); null
alert( 0 && "아무거나 와도 상관없습니다."); 0
// or는 앞쪽에 true한 조건을 배치해주고, and는 앞쪽에 false한 조건을 배치해주는게 더 빠르게 연산을 할 수 있다.
alert(!true); //false
alert( !0 ); //true
alert( !! "non-empty string"); //true
alert( !! null); //false
alert( Boolean("non-empty string")); //true
alert( Boolean(null)); //false
미션 > 입력된 숫자가 3의 배수인지 판별하기
사용자에게 숫자를 입력받고 입력된 숫자가 3의배수인지 확인하고 출력하기, === 값 타입 모두 비교가능
const number = Number(prompt("숫자를 입력해주세요."))
if(number % 3 === 0){
alert("3의 배수입니다.")
}else{
alert("3의 배수가 아닙니다.")
}
미션 > 입력된 숫자가 3의 배수인지 판별하기-취소누름추가,삼항연산자로변환
const number = prompt("숫자를 입력해주세요.")
if(number === null){
alert("취소를 눌렀습니다.")
}else{
number = Number(number);
(number % 3 === 0) ? alert("3의 배수입니다.") : alert("3의 배수가 아닙니다."); //삼항연산자
// if(number % 3 === 0){
// alert("3의 배수입니다.")
// }else{
// alert("3의 배수가 아닙니다.")
// }
}
// 미션> 로그인구현
let id = prompt("아이디를 입력하세요.");
if(id === "Admin"){
let pw = prompt("비밀번호를 입력하세요.")
if(pw === "pwd1234"){
alert("환영합니다!");
} else if(pw === "" || pw === null){
alert("취소되었습니다.");
} else {
alert("인증에 실패하였습니다.");
}
}else if(id === "" || id === null){
alert("취소되었습니다.");
}else{
alert("인증에 실패하였습니다.")
}
