반영훈/웹 개발34 [JS] 반복문 for, while, break, continue For문 가장 기본적인 반복문으로, 조건이 만족 되면 계속 반복하는 문법 Example for (let i = 0; i < 10; i++) { console.log(i); } 해석) let i = 0을 선언하고 이를 시작으로 i가 10미만일 때 i+1을 반복하고 콘솔에 i를 출력하라. for (초기 구문; 조건 구문; 변화 구문;) {코드} 배열과 for const names = ['멍멍이', '야옹이', '멍뭉이']; for (let i = 0; i < names.length; i++) { console.log(names[i]); } 해석) names 라는 상수를 선언하는데 names 는 '멍멍이', '야옹이', '멍뭉이'라는 값을 가진 [배열]이다. i=0에서 시작, i가 names.length(배열.. 2020. 8. 11. [JS]배열(array) 배열을 선언 할 때에는 [ ] 안에 감싸주면 됨. 배열은 숫자, 문자 뿐만 아니라 객체 또한 넣을 수 있음. ex(객체 배열) const objects = [{ name: '멍멍이' }, { name: '야옹이' }]; 배열 선언 후 조회를 할 때에는 objects[n]; 를 사용해 준다. 배열에 새 항목 추가하기 배열에 새로운 항목을 추가 할 때에는 내장 함수인 push를 사용해 줌 Example const objects = [{ name: '멍멍이' }, { name: '야옹이' }]; objects.push({ name: '멍뭉이' }); console.log(objects); 배열의 크기를 알아 낼 때에는 length를 사용 Example const objects = [{ name: '멍멍이' }.. 2020. 8. 10. [JS] 화살표 함수 기존의 함수 선언 방식은 function 함수명(파라미터) 코드블록{}의 형태였습니다. function name(a,b) {} 이를 화살표 함수문법을 이용하여 표현하면 const add = (a, b) => { return a + b; }; console.log(add(1, 2)); 위와 같이 상수선언 + 함수명 =(파라미터) => 코드블록{} 화살표의 좌측에는 함수의 파라미터, 우측에는 코드블록이 오는 형태가 됩니다. 코드블록 내부에서 바로 return을 하는 경우 아래와 같이 더 간결하게 표현할 수 있습니다. const add = (a, b) => a + b; console.log(add(1, 2)); 화살표 함수로 만든 함수와, function으로 만든 함수의 주요 차이점은 서로 가르키는 this가.. 2020. 8. 10. [JS]switch/case 문 특정 값이 무엇이냐에 따라 다른 작업을 할 때 사용. example) const device = 'iphone'; switch (device) { case 'iphone': console.log('아이폰!'); break; case 'ipad': console.log('아이패드!'); break; case 'galaxy note': console.log('갤럭시 노트!'); break; default: console.log('모르겠네요..'); } device 값에 따라 다른 값을 수행. default의 경우 device에 설정외의 값이 들어갈때 수행. -출처 벨로퍼트와 함께하는 모던 자바스크립트 2020. 8. 10. [JS]변수/상수 선언 #변수선언 # let 변수명 = 값; #이후 값 변경# 변수명 = 값 변수선언 시 var를 이용하기도 하는데 이는 구버전 브라우저 호환용. 현재는 쓰지않음. #상수선언(이후 값 변경 안됨) const 상수명 = 값; 2020. 8. 9. [리액트]스타일,클래스 적용 리액트의 경우 html과 달리 style 적용 시 객체를 만들어 줘야 함. const style = { backgroundColor: 'black', color: 'aqua', fontSize: 32, padding: '1rem' }; 위와 같이 작업 후 위와 같이 div style에 'style'객체가 적용됨. CSS 클래스 적용 App.css를 만들어 준 후 .gray-box { background: gray; width: 64px; height: 64px; } 위와 같이 css를 작성. import './App.css'; 위와같이 임포트 해준 후 와 같이 작성해주면 CSS가 적용됨 2020. 8. 9. 이전 1 2 3 4 5 6 다음