DH의 개발 공부로그

자바스크립트에서 this를 활용하여 작업을 할 수가 있는데, this가 의미하는 것이 각각의 상황에서 다 다르므로 이해를 잘 하는것이 중요하고, 헷갈릴때는 console.log()를 활용하는 것이 좋습니다. 그러면 this에 대해 알아보겠습니다. 구문 this 브라우저의 콘솔창에 this를 쳐보면 this // window {} 이렇게 this는 window를 의미합니다. 또 함수에서 this가 의미하는것은 function a() { console.log(this) } a() // window {} 역시나 window 입니다. 이렇듯 this는 기본적으로 window를 의미합니다. 그렇다면 this가 다른 것을 의미할 때의 상황을 알아보겠습니다. 우선 객체 안에서의 this입니다. let obj = { ..

reduce() 란? reduce()는 배열의 각 요소를 순회하면서 주어진 함수를 실행하여 값을 누적해 하나의 결과값으로 반환하는 메서드입니다. 구문 arr.reduce(callback[, initialValue]) callback 콜백함수에는 다음 4가지의 인수를 받을 수 있습니다. 누적 값 (accumulator) 현재 값 (currentValue) 현재 인덱스 (currentIndex) 원본 배열 (array) initialValue callback함수의 초기값으로, 따로 초기값을 제공하지 않으면 배열의 첫번째 요소를 사용합니다. 예시 쉽게 이해해보면 이런 형태의 구조를 갖는다고 볼 수 있습니다. 배열.reduce((누적값, 현재값) => { return 새로운 누적값 }, 초기값) ### 1. 배..

sort() 함수 sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환하는 함수입니다. 기본 정렬 순서는 문자열의 유니코드를 따라 정렬합니다. 구문 array.sort([compareFunction]) ompareFunction은 매개변수로 정렬순서를 정의하는 함수입니다. 또한 sort()는 배열의 순서를 정렬하고 복사본을 반환하는 것이 아닌, 원 배열을 정렬하고 그 원 배열을 반환하기 때문에 이점은 유의해야 합니다. 정렬방법 1. 오름차순 const array = [2, 4, 5, 8, 30, 1]; array.sort( (a, b) => a - b ); console.log(array); // output : [1, 2, 4, 5, 8, 30] 간단하게 정렬하는 방법을 설명하자..

프론트엔드 개발자가 되기위해 우선 완벽하지는 않아도 기초를 탄탄하게 하고 싶어서, ZeroCho님의 강의를 보면서 JavaScript 공부를 다시 시작하였습니다. 이번에 새롭게 배운 팁?이 있다면 if문의 중첩으로 인한 코드의 복잡성을 제거해주는 방법에 대해 공부를 하였습니다. if문 중첩제거 방법 if문 다음에 나오는 공통으로 진행되는 코드를 true와 false 각각의 분기점 내부에 넣는다. 분기점을 비교하여 그중 짧은 절차의 코드 먼저 실행이 되도록 if문을 작성한다. 짧은 절차가 끝나면 return이나 break로 중단한다. 이제 else를 제거한다. (이때 중첩하나가 제거간 됨) 이 방식으로 하면 if문의 중첩을 제거할 수 가 있다. 예시 ex) function test1() { let resu..

See the Pen js 시계 by Shape2ee (@shape2ee) on CodePen. 자바스크립트를 이용한 시계를 만들어보았습니다. 코드는 생각보다 아주 간단합니다. HTML 코드 00:00:00 요일 시간이 들어갈 부분을 기본값으로 00:00:00과 요일로 작성하였고 자바스크립트 코드로 넘어가겠습니다. JAVASCRIPT 변수선언 const clockTime = document.querySelector(".time"); const day = document.querySelector(".day"); let date = new Date(); 우선 자바스크립트로 수정해줄 h1과 h2를 상수로 선언하고 new Date() 함수를 이용하여 오늘 지금 시간을 변수에 저장합니다. 시간 변경 함수 func..

요즘 웹사이트를 돌아다녀 보면 자주 보이는 마우스를 따라다니는 도형들을 볼 수 있습니다. 그래서 그런 기능은 어떻게 구현할 수 있을지 공부하면서 구현을 해보았습니다. See the Pen Untitled by Shape2ee (@shape2ee) on CodePen. JavaScript 코드 1. 마우스 좌표 얻기 마우스의 좌표값을 구하는 javascript 프로퍼티에는 종류가 다양한 것으로 알고 있습니다. 대표적으로 clientX, offsetX, pageX, screenX 이렇게 있는데(X를 Y으로 변경하면 Y값 제어) 그중에서 clientX, clientY를 이용했습니다. 이유는 현재 보이는 브라우저의 x,y 좌표 값을 구할 수 있기 때문입니다. offset은 이벤트 대상 노드를 기준으로 좌표값을 ..

비교 연산자 비교 연산자는 왼쪽의 피연산자를 기준으로 두개의 값을 비교하는 연산자입니다. 주로 조건문에서 많이 사용되며 결과 값은 true(1)와 false(2)로 출력합니다. 자바스크립트에서는 boolean을 넣지 않아도 자동으로 값을 변환해 연산을 해줍니다. 비교 연산자 종류 1. 왼쪽 피연산자가 오른쪽 피연산자 보다 크다 i = 5 > 4;// ~보다 크다. 참 true == 13. = 4;// ~크거나 같다 true 비교 연산자는 숫자에서만 사용되지 않고, 두 피연산자가 문자열이어도 비교가 가능합니다. a = `hello` > `world`; // true b = `apple` > `append`; // true c = `bee` > `be`; // true문자열의 비교에서는 두 문자열의 문자 하..

1. DOM(Document Object Model) DOM이란? DOM은 구조화된 문서를 객체로 표현하는 형식을 말합니다. 2. 웹브라우저 동작 과정 웹서버로부터 html 파일을 가져옴 가져온 html 파일과 css정보를 파싱(parsing)하여 DOM tree 생성, CSSOM tree 생성 DOM / CSSOM tree를 기반으로 Render tree 생성 3. 웹브라우저 동작과정과 Javascript html 코드를 기반으로 DOM 트리를 구성하는데, javascript 코드인 를 내에 넣으면 DOM 트리가 구성하기 전에 태그를 만나면서 javascript 엔진에 제어권을 넘기게 됩니다. javascript 엔진에 제어권을 넘기게 되면 자바스크립트 엔진이 해당 js 코드 파일을 로드해서 실행하고,..