목록JavaScript (33)
솔미는 성장중
📌 정규 표현식이란? 문자 검색 / 문자 대체 / 문자 추출하는 용도로 쓸 수 있는 패턴 📌 어떻게 만들지? 1. 생성자 new RegExp('표현', '옵션') 예시) const regexp = new RegExp('the', 'g') console.log(str.match(regexp)) //str문자열에서 the와 일치하는 것을 찾아줌 옵션) '' : 첫 번째 일치하는 것만 찾음 g : 정확히 일치하는 모든 것들 찾음 i : 대소문자를 고려하지 않고 일치하는 것들 찾음 m : 여러 줄 일치, 각각의 줄을 시작과 끝으로 인식 2. 리터럴 (더 많이 사용) /표현/옵션 예시) const regexp = /the/gi console.log(str.match(regexp)) //console.log(str..
클로저 (closure) 클로저 예시1) 클로저를 사용해서 count 하는 방법 클로저 예시2) 클로저 이용해 click event 제어하기 상단 주석은 클로저 사용하지 않고 상태 관리하는거. 클로저를 사용하면 재사용에 용이 h1El에서 사용된 createToggleHandeler와 h2El에서 사용된 createToggleHandeler는 서로 영향을 주지 않음. 메모리 누수 1. 불필요한 전역 변수 사용 2. 분리된 노드 참조 3. 해제하지 않은 타이머 4. 잘못된 클로저 사용 js 실행 순서 (call stack, web api, task queue(callback queue)) - js 프로그래밍언어에서 직접적으로 동작가능한 것은 JS call stack에 쌓여서 바로 실행 (소모할 수 있는 것은..
📌 Symbol 변경이 불가한 데이터. 유일한 식별자를 만들어 데이터를 보호하는 용도로 사용. 실행될 때마다 고유하게 결과가 하나의 심볼 데이터로 반환된다. 사용형태 Symbol('설명') '설명'은 단순 디버깅 용도. 심볼 값과는 관계 없음. const sKey = Symbol('Hello') //여기서 반환된 symbol 데이터는 sKey에서만 유일하게 사용가능. const user = { key: '일반 정보', [sKey]: '민감한 정보' } console.log(user.key) //일반 정보 console.log(user['key']) //일반 정보 console.log(user[sKey]) //민감한 정보 console.log(user[Symbol('Hello')]) //undefined...
📌 주소 입력 형태 주소?속성=값&속성=값&속성=값 예시) https://www.~~.com?apikey=키이름&s='Froxen' 📌 요청을 처리해줄 JS패키지 : axios 1단계) 설치 npm i axios 2단계) 개발 상태 열기 npm run dev 3-1단계) 예시. 영화 불러와주는 api import axios from 'axios' function Test() { axios .get('https://www.omdbapi.com/?apikey=~~&s=frozen') .then((response)=>{ console.log(response) //frozen이라는 이름에 해당하는 정보들을 불러옴 }) } 3-2단계) 예시. 영화 포스터 이미지 추가하기 html js import axios fr..
1. Console log : 일반 메세지 warn : 경고 메세지 error : 에러 메세지 dir : 속성을 볼 수 있는 객체를 출력 (ex. console.dir(documnet.body) : body태그에서 사용가능한 속성/메소드 확인가능) 🎃 콘솔에 메세지나 객체를 출력한다. console.count('이름') console.countReset('이름') cf) 아무런 이름도 추가하지 않으면 default : 횟수 형태로 출력 🎃 콘솔에 메소드 호출의 누적 횟수를 출력 or 초기화 console.time('이름') console.timeEnd('이름') cf) 동일한 이름을 써서 시작, 종료 시점을 알려줘야 하고, 두 코드 사이에 동작하는 코드를 넣어서 실행하는 데 얼마나 걸렸는지 알아볼 수 있..