ansui

#4 조건문 업그레이드 : 조건이 많아지면 전부 다 쓸 수 없다. function isKoreanFood(food) { if (food === "불고기" || food === "비빔밥" || food === "떡볶이") { return true; } return false; } const food1 = isKoreanFood("불고기"); const food2 = isKoreanFood("피자"); console.log(food1); //true console.log(food2); //false function isKoreanFood(food) { if (["불고기", "비빔밥", "떡볶이"].includes(food)) { return true..

#1 Truthy & Falsy : 참 같은 값, 거짓 같은 값 //TRUE로 인식되는 경우 let a = "string"; let a = []; let a = {}; let a = 43; let a = "false" let a = Infinity; //FALSE로 인식되는 경우 let a = null; let a = ""; let a = undefined let a; let a = 0; let a = NaN; if(a) { console.log("TRUE"); } else { console.log("FALSE"); } const getName = (person) => { return person.name; }; let person1 = { name: "이정환" }; const name..

#11 배열 내장 함수 : 배열 순회 const arr = [1, 2, 3, 4]; for (let i=0; i console.log(elm) ); //1 2 3 4 arr.forEach((elm) => console.log(elm * 2) ); //2 4 6 8 /* 같은 코드 arr.forEach(function (elm) { console.log(elm); }); */ : 원본 배열의 모든 요소를 순회하면서 연산을 한 후 return 값 반환 arr = [1, 2, 3, 4]; const newArr = []; arr.forEach..

#8 객체 - key : 문자열로 작성 : 중복되어도 문제는 없지만 추천하지 않는다. - property (객체 프로퍼티) : 속성, 객체가 갖는 데이터 : 여러 개의 값을 가질 수 있다. : 어떤 자료형이든 사용 가능 let person = new Object(); //생성자 이용 let person = { key: "value", //프로퍼티 key1: 123, key2: true, key3: undefined, key4: [1, 2], key5: function() {} }; //객체 리터럴 방식 console.log(person); //{key: "value", key1: "value2"} console.log(person.key1); //123 (점표기법) console.log(person.ke..

#5 함수 - 순서: 함수 선언 → 함수 호출 → 함수 안 → 함수 종료 - 여러번 호출 가능 - 함수 내에서 선언한 지역변수는 함수 내에서만 사용 가능 - 함수 외에서 선언한 전역변수는 함수 내/외에서 사용 가능 //함수 선언식, 함수 선언 방식의 함수 생성 function getArea() { let width = 10; let height = 20; let area = width * height; console.log(area); } getArea(); //200 //매개변수 사용 function getArea(width, height) { let area = width * height; return area; } let area1 = getArea(10, 20); //area1 = 200 #6 함..

#1 변수와 상수 - 프로그램이 실행되는 도중에 계속해서 바뀌는 값을 저장하기 위한 도구 - 변수명에는 기호를 사용할 수 없다. ( _ , $ 는 사용 가능) - 변수명에는 숫자로 시작할 수 없다. - 예약어는 변수명으로 사용할 수 없다. - let은 변수 중복 선언이 불가능하므로 var보다 사용하기 편하다. let age = 25; console.log(age); //25 age = 30; console.log(age); //30 var age = 20; - 상수는 읽기 전용이므로 선언 이후 값을 바꿀 수 없다. //선언과 동시에 초기화하지 않았으므로 오류가 발생 const age; age = 30; const age = 30; console.log(age); //30 #2 자..

프로젝트에서 OpenWeather API를 사용하여 날씨 웹사이트 맡아 만들었다. 기본적으로 Seoul의 날씨가 나오고 도시를 영어로 검색하면 검색한 도시의 날씨가 나온다. 서울의 날씨를 출력하는 js파일, 검색한 도시의 날씨를 출력하는 js파일을 별개로 만들었기 때문에 처음에는 서울의 날씨를 출력하고 검색버튼을 누르면 검색한 도시를 출력하는 js파일로 넘어가도록 만들었다. 도시 검색 부분에서 자세히 다루겠다. OpenWeather API에 들어가서 회원가입을 하고 로그인을 한다. 로그인을 하면 API key를 받을 수 있다. 이 key를 저장해 두었다가 사용하면 된다. API와 Pricing에 들어가보면 무료로 사용할 수 있는 버전과 유료로 사용할 수 있는 버전이 나온다. 본인이 원하는 ..

#2 부모, 자식, 형제 노드 const pList1 = document.querySelectorAll('p'); const pList2 = document.getElementsbyTagName('p'); pList1; pList2; //출력 결과 NodeList(4) [p#first, p#second, p, p] HTMLCollection(4) [p#first, p#second, p, p] /* p태그를 추가하면 NodeList(4)는 그대로 출력 HTMLCollection(5)로 변경 */ const red = document.getElementsbyId('red'); red.parentNode; red.parentElement..

#1 노드에 접근하기 DOM: Document Object Model (문서 객체 모델) - html문서의 각 요소들을 트리 형식으로 표현 - 개발자는 js를 이용하여 이를 수정할 수 있다. - Document를 제외한 최상단의 노드: html - 모든 html 태그 = 객체 → JS로 접근하고 제어 가능! Document Root element: Element: ... ... //해당 아이디 접근 const el = document.getElementById('first') el; //해당 클래스 접근 const cl = document.getElementsByClassName('link') cl; //해당 태그 접근 const pList = document.getElem..

#0 오리엔테이션 - Class : 리액트의 기능 전부 사용 가능 : class 문법을 알아야 하고 장황하다. : render() 사용 //클래스 방식 class ClassComp extends React.Component { render() { return ( class style component ); } } - Function style : 기능 부족 : 함수의 문법만 알면 된다. : state, life cycle API(컴포넌트의 생성, 변경, 소멸 이벤트) 사용 불가능 : 자기 자신이 render() → 최신 리액트는 hook 기능 사용 가능! //함수 방식 function FuncComp(props) { return ( function sty..