Javascript (11) 썸네일형 리스트형 [JS] Eslint, Prettier 설치 적용하는 법 Eslint, Prettier 설치 npm install -D eslint prettier eslint-plugin-prettier eslint-config-prettier 설치 후 최상위 디렉토리에 .eslintrc 와 .prettierrc 파일을 생성해준다 # .eslintrc { "extends": ["plugin:prettier/recommended"] } # .prettierrc { "printWidth": 120, "tabWidth": 4, "singleQuote": true, "trailingComma": "all", "semi": false } 위와 같이 각 파일에 내용을 적으면 VS Code 확장 프로그램으로 가서 'prettier' 와 'Eslint'를 설치한다. 설치가 다 완료되면 '.. javascript 10일차 querySelectorAll( ), setInterval( ), setTimeout( ) querySelectorAll ( ) 내가 선택한 요소의 해당하는 모든 요소를 배열에 담아주는 역할을 한다. let jang = document.querySelectorAll('#visual > li') console.log(jang) // [li, li, li, li] setInterval( ) 매초마다 특정 값을 실행을 하고 싶을 때 사용한다. 1초마다 1이란 숫자를 계속 찍고 싶다라고 했을 때 이 함수를 사용한다. setInterval( ) -> 첫번 째 인자값은 콜백함수를 넣는다. 두번 째 몇초마다 실행을 하고싶은지에 대해 써주면 된다. 참고로 1000 -> 1초이다. setInterval(JC,2000) function JC(){ console.log(1) } // 이런식으로 하면 2초마다 1이.. javascript 9일차 TO DO LIST 만들기 HTML과 javascript를 이용해서 TO DO LIST를 만들어보려고 한다. 먼저 검색창과 확인 버튼을 만들어보는 과정을 보도록 하자. 과 을 이용해서 만들 수 있다. 각 코드에 id를 부여해서 불러오기 쉽게 만든다. 그러면 아래와 같이 화면에 뜨는 것을 볼 수 있다. 그 다음 이제 HTML을 자바스크립과 연결하는 과정을 만들어야 한다. 부분에 자바스크립을 연결해주고 외부연결도 같이 해준다. 자 그럼 이제 TO DO LIST를 만들 준비는 다 갖쳐줬다. 외부연결을 통해서 index3.js로 가서 코드를 완성시켜보자. 먼저 자바스크립에서 HTML을 불러오는 작업을 해보도록 하자 window.addEventListener("DOMContentLoaded", jc) function jc(){ const .. Javascript 8일차 DOM, BOM, addEventListener, callback, onload BOM (브라우저 객체 모델(Browser Object Model)) 웹 서비스 개발은 브라우저와 밀접한 관련이 있습니다. 모든 서비스는 사실 웹 브라우저를 바탕으로 실행이 되니까요. 이 브라우저와 관련된 객체들의 집합을 브라우저 객체 모델(BOM: Browser Object Model)이라고 부릅니다. 이 브라우저 객체 모델(BOM)을 이용해서 Browser와 관련된 기능들을 구성합니다. DOM은 이 BOM 중의 하나입니다. DOM (문서 객체 모델(The Document Object Model)) 문서 객체란 이나 같은 html문서의 태그들을 JavaScript가 이용할 수 있는 객체(object)로 만들면 그것을 문서 객체라고 합니다. (그럼 html문서의 태그들이 객체에 담긴 상태를 의미하는 것일.. Javascript 7일차 깊은복사, 얕은복사 먼저 두 개의 정의를 알아보기전에 우리가 확인해야할 것이 있다! console.log(1==1) // true console.log({}=={})// false 객체를 만들 때마다 항상 새로운 값으로 만든다. // 우리 눈으로 봤을 땐 중괄호 두개가 같아보이지만 컴퓨터로 봤을 때 둘이 서로 다르다 let a = {} let b = {} console.log(a==b) // false a = { name : 'ingoo' } b = { name : 'ingoo' } console.log(a.name === b.name) // true // {}{} 끼리 비교했을 때는 false였지만 ingoo가 들어가니 true가 뜬다. // 컴퓨터가 ingoo라는 값을 저장할 땐 다 같은 값으로 저장.. Javascript 6일차 배열의 method에 대해서 알아보는 시간을 가져보자. 배열의 method에는 정말 다양한 기능들이 있다. 글자를 자르거나 합치거나 아니면 특정부분만을 따로 빼내 만드는 등 여러 기능들을 가지고 있다. 앞으로 알아볼 것은 string method 중에서 많이 사용하고 있는 method에 대해서 알아볼 것이다. 1 . split() 함수 string.split(separator, limit) 1) split() 함수는 문자열을 'separator'로 잘라서 'limit' 크기 이하의 배열에 잘라진 문자열을 저장하여 리턴합니다. 2) 여기서 나오는 'separator'는 필수요소는 아니고 문자열을 자를 때 구분해주는 구분자입니다. 값이 입력되지 않으면 문자열 전체를 배열에 담아서 리턴합니다. 3) 'limi.. Javascript 5일차 2중for문 for문 안에 새로운 for문을 넣어줌으로써 반복문을 추가해주는 행위이다. for(let i=0; i Javascript 4일차 Array (배열) : 데이터타입 중 하나인 군집형이다. 군집형이란 데이터 하나에 여러 객체가 들어가 있는 것을 말한다. 대입연사자 뒤에 붙는 친구이다 배열을 나타내는 방법 let arr = [ ] arr = [10] console.log(arr); // [10] length length : 1 -> 데이터공간에 데이터 하나가 있다는 뜻 배열의 length를 알아내고 싶다! console.log(arr.length); // 1 typeof : 내가 현제 어떠한 데이터타입을 가지고 있는지 확인할 수 있다 console.log(typeof arr.length) // number console.log(typeof arr) // array 문자 배열 let str = ['철수는 부자다'] console.log(.. 이전 1 2 다음
