IT's Jonnie

화살표 함수 function 키워드 대신 ⇒ 사용 const add = (a, b) => { return a + b; }; console.log(add(1, 2)); 일반 function과의 주요 차이점: this가 가리키는 것이 function과 다름 객체 비구조화 할당 객체 구조 분해라고도 함 const ironMan = { name: '토니 스타크', actor: '로버트 다우니 주니어', alias: '아이언맨' }; const captainAmerica = { name: '스티븐 로저스', actor: '크리스 에반스', alias: '캡틴 아메리카' }; function print(hero) { const { alias, name, actor } = hero; const text = `${al..

강의 링크: https://nomadcoders.co/javascript-for-beginners/lobby 강의 주제: 모멘텀 클론 코딩 with Vanilla Javascript #7 To Do List Add ToDo const toDoForm = document.querySelector("#todo-form"); const toDoInput = toDoForm.querySelector("input"); const toDoList = document.querySelector("#todo-list"); function paintToDo(newTodo){ const li = document.createElement("li"); const span = document.createElement("span"..

강의 링크: https://nomadcoders.co/javascript-for-beginners/lobby 강의 주제: 모멘텀 클론 코딩 with Vanilla Javascript Login const loginForm = document.querySelector("#login-form"); const loginInput = loginForm.querySelector("input"); const loginButton = loginForm.querySelector("button"); const loginInput = document.querySelector("#login-form input"); const loginButton = document.querySelector("#login-form butto..

강의 링크: https://nomadcoders.co/javascript-for-beginners/lobby 강의 주제: 모멘텀 클론 코딩 with Vanilla Javascript - 크로미움 기반 브라우저 사용 권장 * 크로미움: 오픈 소스 웹 브라우저 프로젝트. 구글 크롬 개발의 코드로 사용된다. 최신 기술을 시험하는 가늠터의 역할을 한다. Framework React Native: 안드로이드, iOS 앱 일렉트론: Desktop 앱 (ex. VSCode), Slack, Twitch ... socket.io: 실시간 채팅 가능 ml5.js: 머신러닝 모델 생성하는 웹사이트 구축 + 훈련 가능 브라우저에서 여는 것은 js, css 파일이 아닌 html 파일이다 Basic Data Types Integ..

배열 순서가 있는 리스트 let students = ['철수', '영희', ... , '영수']; 검색 console.log(students[0]); //철수 console.log(students[1]); //영희 수정 students[0] = '민정'; 배열의 특징 문자뿐만 아니라 숫자, 객체, 함수 등도 포함 가능 let arr = [ '민수', 3, false, {name:'Mike', age:30}, function(){console.log('TEST')}; ];​ length : 배열의 길이 구하는 데 사용 push() : 배열 끝에 요소 추가. 여러 개 한 번에 가능 pop() : 배열 끝의 요소 제거 shift() : 배열 가장 앞 요소 제거 unshift() : 배열 가장 앞에 요소 추가...

객체 { } 내부에 키(key)와 값(value)로 고정된 속성이 사용됨 const superman = { name : 'clark', age : 33, } 각 property는 쉼표로 구분 마지막 쉼표는 생략 가능(하지만 작성 추천) 접근 superman.name superman['age'] 추가 superman.gender = 'male'; superman['hairColor'] = 'black'; 삭제 (delete 키워드 사용) delete superman.hairColor; 단축 프로퍼티 const name = 'clark'; const age = 33; const superman = { name, //name:name age, //age:age gender:'male', } 없는 propert..

함수(Function) 하나의 한 작업에 집중 읽기 쉽고 어떤 동작인지 알 수 있게 네이밍 정의 function sayHello(name){ console.log(`Hello, ${name}`); } sayHello('Mike'); function: 함수 선언 sayHello: 함수명 name: 매개변수. 없을 수도 있음. 2개 이상이면 , 로 구분 (ex. console.log(name1, name2, name3)) { } 내부: 함수의 실행 코드 function sayHello(name){ let newName = name || 'friend' let msg = `Hello, ${newName}`; console.log(msg); } sayHello(); //"Hello, friend" -> let ..

반복문 반복문(loop): 동일한 작업을 여러번 반복 for for (let i = 0; i < 10; i++){ //초기값; 조건문(false가 되면 멈춤);코드 실행 후 작업) console.log(i) } while let i = 0; while (i 1 증가 //1은 나머지가 1이기 때문에 continue문을 만나게 됨. 그러면 log를 찍지 않고 continue문에서 바로 다음 과정(i++)이 진행됨 Tip! 명확한 횟수가 정해져 있으면 for문을 아니라면 while을 사용하는 편 switch문 if-else문으로 다 치환 가능 그러나 케이스가 다양할 경우 보다 간결하게 작성할 수 있다는 장점이 있음 switch(평가){ case A: //A일 때 코드 case B: //B일 때 코드 ... }..

연산자 + 더하기 - 빼기 * 곱하기 / 나누기 % 나머지 ** 거듭제곱 연산자 줄여쓰기 num = num + 5; num += 5; (+ 외에 - * % 등 가능) 증가 연산자 & 감소 연산자 (++ / --) 값을 1만큼 증가/감소시킴 뒤에 쓰느냐 앞에 쓰느냐에 따라 차이 있음 let num = 10; let result = num++; => 10 //증가시키기 전의 값을 result에 넣음 let result2 = ++num; => 11//증가시킨 값을 result에 넣음 비교 연산자 ≤ ≥ = ≠ = == != 반환하는 값은 항상 boolean(true/false)값 const a = 1; const b = "1"; console.log(a==b); => true console.lo..

대화상자 단점 창이 떠 있는 동안 스크립트 일시 정지 스타일링 불가능 (위치, 모양 지정 불가) alert : 알려줌 prompt : 입력 받음 default값 입력 가능 const name = prompt("이름을 입력하세요.", "Default_Name"); //두 번째 값은 default값 alert("환영합니다, " + name + "님"); alert(`환영합니다, ${name}님`); confirm : 확인 받음 const isAdult = confirm("당신은 성인입니까?"); //alert와 달리 '확인' 버튼 외에 '취소' 버튼도 생김 //확인=>true, 취소=>false 형변환 왜 필요한가? 대화상자 등을 통해 입력 받은 경우(무조건 문자형)와 같이 필요에 의해 기본적으로 자동 형변..