스코프(Scope)란? 영어사전 상 범위, 영역 이라는 뜻이다. 함수에서 스코프는 어떤 범위의 변수들에 접근할 수 있는지를 나타내는데, 이는 전역 스코프와 지역 스코프로 나뉜다. 1. 전역 스코프 C를 공부해 본 사람들이면 전역변수, 지역변수로 익히 들어왔을 것이다. 이와 비슷한 맥락이다. 전역 스코프는 전 범위에 정의된 변수이다. 예를 들어보자. var gScope = 'newscope'; function inScope() { alert(gScope); } inScope();//newscope 위의 변수 gScope는 전역변수이다. 전 영역에서 gScope를 호출할 수 있는 것이다. 때문에 inScope에서도 gScope는 호출 가능하다. 따라서 결과는 newscope가 되는 것이다. 2. 함수 스코프..
1. 선언, 할당에서의 차이점 간단하게 말하자면, var은 재선언, 재할당 가능 let은 재할당 가능 const는 재선언, 재할당 둘 다 불가능하다. 예를 들어보자. var apple1 = 3 var apple1 = 4//정상작동 apple1 = 5//정상작동 console.log(apple1) //5 위와 같이 var은 변수를 재선언 해도, 값을 재할당 해도 아무런 문제 없이 작동이 된다. 짧게 몇줄 코딩하는 방법으론 편하게 느껴질 지 몰라도, 수백 수천개의 라인이 존재한다면 상당히 복잡해질 것이다. 이에 새롭게 ES6에 let과 const가 등장했다. let apple1 = 3 let apple1 = 4//재선언이 불가하므로 에러 apple1 = 5//재할당은 가능함 console.log(apple1..
문득 생각이 들었다. this를 왜쓰지? 다시 경로를 복사해서 넣어도 되는 것 아닌가? 제이쿼리에서 $('class 이름') 을 사용하면 웹페이지 콘텐츠에서 해당 클래스 등등을 찾기 시작한다. 같은 체인이나 이벤트 안에 있음에도 계속해서 경로를 직접 입력하는 행위는 불필요한 탐색이 이루어지게 한다. 그렇기에, 한번 입력한 이름과 연관된 탐색을 하는 등의 행위를 한다면, $(this)를 이용해서 반환시킬 필요가 없게 한다. $(this)를 이용하면 이전에 요청 해 두었던 DOM을 별도의 과정 없이 바로 이용할 수 있게 된다. 예시: $('.class-name').on('click', (evt) => { $(this).hide(); // DOM쿼리를 실행시키지 않음 $('.class-name').hide()..
체이닝 여러 메소드들을 체인처럼 묶어 선택한 엘리먼트에서 차례로 실행되게 함. 예시: $("#p1").css("color", "red").slideUp(2000).slideDown(2000); 체이닝 된 메소드들이 수십개로 늘어나서 가독성이 힘들어진다면 줄바꿈을 해도 된다. $("#p1").css("color", "red") .slideUp(2000) .slideDown(2000); - 체이닝을 이용하면 같은 셀렉터를 한번 이상 쓰지 않아도 된다. - 코드가 짧아진다. 탐색 위의 체이닝은 하나의 엘리먼트에서 연속된 효과를 주었으나 탐색은 도중에 대상을 바꿀 수 있게 한다. 한 엘리먼트에서 원하는 엘리먼트를 찾아나가는 것이다. 바로 원하는 대상을 적어버린다면, 나도 몰랐던 같은 이름의 엘리먼트가 겹쳐 적용..
- Total
- Today
- Yesterday
- 10989 파이썬
- nextjs 파라미터 넘기기
- css marquee
- 리액트 파라미터 넘기기
- 리액트
- css 글래스모피즘
- 파이썬 정렬
- bs4 크롤링
- 자바스크립트
- 리액트 스크롤
- 파이썬 크롤링
- 백준 10989 파이썬
- dvd 효과
- 움직이는 글래스모피즘
- 카페음료테스트
- 화이팅
- nuxt 공식문서 한글
- react router
- 글래스모피즘 구현
- 리액트 컴포넌트
- 글래스모피즘 애니메이션 구현
- Til
- NextJS
- getserversideprops redirect
- vscode venv
- nextjs 스크롤
- next.js 리다이렉트
- nuxt 공식문서
- 파이썬 flask
- 리액트 라우터
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |