본문 바로가기

웹 프로그래밍/JavaScript

(5)
[JavaScript] 파도 효과 구현하기 파도 효과 구현하기 우선 visual studio를 사용한다면 live server 익스텐션을 추가해서 live server 환경에서 실행을 해야합니다. 프로젝트 구조 다음과 같이 구성되어 있습니다. HTML html 같은 경우에는 js, css 파일을 로드하고 다른 요소를 만들지는 않았습니다. CSS css 역시도 설명할게 없습니다. JS Point.js Point.js는 좌표들을 생성합니다. 좌표를 생성하는 이유는 Wave.js에서 Point에서 생성해낸 좌표를 기준으로 라인을 이어야하기 떄문에 좌표를 생성하고 각각의 좌표가 움직이는 speed등을 정합니다. Wave.js Wave.js에서는 Point에서 생성한 각각의 좌표들을 이어 라인을 이어지게하는 역할을 합니다. 반복문을 통해 이전 좌표 값과 ..
[JavaScript] 무한 스크롤 구현하기 오늘은 무한 스크롤 구현에 관하여 기록해보겠습니다. 스크롤이 제일 아래로 내려가면 js를 이용하여 새로운 콘텐츠를 생성 및 추가되는 방식으로 구현을 했습니다. HTML section 태그에 class="box"인 div가 있습니다. 현재는 4개의 div가 있지만 스크롤을 내리면 계속 추가되게 할 예정입니다. css css는 간단하게 h1 태그는 position: fixed를 사용하여 스크롤을 내려도 고정된 위치에서 보이게 하였고 html을 실행하게 되면 기본적으로 보이게되는 스타일은 다음과 같습니다, js 윈도우의 높이와 현재 스크롤 위치의 값을 더한 뒤 문서의 높이와 비교하여 같거나 크다면 콘텐츠를 추가하는 방식입니다. 위의 코드들을 실행하여 작성하고 실행해보면 정상적으로 무한스크롤 기능이 작동하는 것..
[JavaScript] - var, let, const ● var, let, const 자바스크립트의 변수 선언은 var로만 가능했었으나, ES2015(ES6) 부터 let과 const가 추가되었다. let은 변수의 개념, const는 상수의 개념으로 생각하면 된다. 우선 var, let, const의 차이점은 5가지가 있다. ○ 중복선언 가능 여부, 재할당 가능 여부 중복 선언 재할당 var O O let X O const X X ○ 변수 스코프 유효 범위 - var: 함수 레벨 스코프로 함수 내부에 선언된 변수만 지역변수로 한정하며 나머지는 모두 전역변수로 간주한다. - let, const: 블록 레벨 스코프로 함수 내부뿐만 아니라 if, for문 등의 코드 블럭에서 선언된 변수도 지역변수로 취급한다. ○ 변수 호이스팅 방식 var 에는 변수 호이스팅이 ..
[JavaScript] - 클로저(Closure) ● 클로저 클로저란 내부함수가 외부함수의 컨텐스트에 접근할 수 있는 것을 가르킨다. - 쉽게 설명하면 함수 내에서 함수를 정의하고 사용하면 클로저라고 한다. - 클로저는 외부함수의 지역변수, 인자 등을 외부함수가 종료된 이후에도 사용이 가능한다. 이러한 변수를 자유변수라고 한다. 소스코드로 살펴보면 다음과 같다. 클로저 위 코드를 살펴보면 closure() 는 함수를 반환하고, 반환된 함수는 closure() 내부에서 선언된 변수를 참조하고 있다. 이렇게 참조된 변수는 함수 실행이 끝나도 사라지지 않고 여전히 옳바른 값을 반환하는 것을 알 수 있다. ● 클로저를 통한 은닉화 클로저를 사용하면 외부에서 변수에 직접 접근하는 것을 제한할 수 있다. 즉 변수를 객체지향의 private 처럼 사용할 수 있다. ..
[JavaScript] - 호이스팅(Hoisting) 호이스팅(Hoisting)이란? - 함수 안에 있는 선언들을 모두 끌어올려 해당 함수 유효 범위의 최 상단에 선언하는 것을 말한다. - 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다. js에서 다음과 같은 코드를 실행하면 결과가 다음과 같이 나온다. undefined test 결과를 보면 알 수 있듯이, test 변수를 정의 하기 전에 console.log(test)를 하였는데도 오류가 나지 않고 undefind 값이 출력되는 것을 볼 수 있다. 왜 그렇게 출력이 되냐면 자바스크립트엔진에서 var test = 'test'를 var test와 test='test'로 분리하여 변수 선언부를 함수 상단부로 끌어올려서 선언해버리므로 오류가 나지않고 출력..