Wbeen

이벤트란이벤트는 사용자의 행동이나 브라우저의 상태 변화를 의미합니다. 버튼 클릭, 마우스 이동, 키보드 입력 등이 대표적인 이벤트입니다. 자바스크립트에서는 이러한 이벤트를 감지하고 처리하기 위해 이벤트 리스너를 활용합니다. 이벤트 전파란이벤트 전파는 이벤트가 DOM 트리에서 전달되는 방식을 말합니다.크게 두 가지 단계로 나눌 수 있습니다: 캡처링 단계 (Capturing Phase): 이벤트가 최상위 요소에서 아래 요소로 내려갑니다. 버블링 단계 (Bubbling Phase): 이벤트가 아래 요소에서 최상위 요소로 올라갑니다. 주로 우리가 다루는 것은 버블링 단계입니다. 이벤트 버블링이란이벤트 버블링은 특정 요소에서 발생한 이벤트가 부모 요소로 차례대로 전파되는 현상입니다. 예를들어, 버튼을 클..

CSS를 보면 가끔 calc라는 이름의 함수를 만나곤 합니다. 이름(calculation)으로 알 수 있듯이 속성의 값을 계산을 해주는 함수입니다. + - * / 사칙연산을 지원합니다. calc 함수는 브라우저의 크기에 따라 요소의 너비가 높이가 변화해야 하는 경우 사용하기 적절합니다. calc 함수 사용법 예제입니다 calc 함수 사용법 예제입니다 calc 함수 사용법 예제입니다 결과 HTML 삽입 미리보기할 수 없는 소스 3번째 줄 ( class = "text3") 에 경우 width: calc(100%/2-100px); 가 제대로 적용되지 않은 것을 확인할 수 있습니다. 여기서 우리가 알아야 할 것은 + 또는 -를 할 떄 +와 - 양 옆에 띄어쓰기를 해줘야 한다는 것입니다. 붙여서 쓰면 동작하지 않..

React와 SCSS를 연동하는 방법을 알아보겠습니다.설치 방법먼저 SCSS를 적용하고 싶은 리액트 폴더에 들어가 컴파일러를 설치해줘야 합니다.명령어npm install node-sassyarn add node-sass위 명령어를 입력해 주면 끝!아래 잘 설치되어 있는것을 확인할 수 있다.새로운 리액트 앱을 만들 때마다 설치해야 한다...ㅠㅠNode Sass is no longer supported. Please use `sass` or `sass-embedded` instead.node-sass에 지원이 종료되었습니다.앞으로는 npm i sass를 사용하셔야 합니다.

오늘은 간단하게 코딩할 때 유용한 기술을 소개해보겠습니다. 문자열을 다룰 때 대문자로 된 단어를 소문자로, 소문자로 된 단어를 대문자로 변경하고 싶을 때가 있는데 이럴 때 문자열에 대소문자를 다루는 방법입니다. 대문자 변환 string.toUpperCase() let str="abcd EFGH"; str.toUpperCase(); // 'ABCD EFGH' 모든 소문자를 대문자로 바꿔줍니다! 소문자 변환 string.toLowerCase() let str="abcd EFGH"; str.toLowerCase(); // 'abcd efgh' 모든 대문자를 소문자로 바꿔줍니다!

단축 평가 "논리합(||) , 논리곱(&&) 연산자는 연산 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환합니다. 논리곱(&&) 연산자 논리곱 연산자는 두 개의 피연산자가 모두 true로 평가될 때 true를 반환합니다. 첫 번째 "a" && "b" 코드에 경우 "a"가 Truthy 값이므로 true로 평가됩니다. 이때 &&연산자는 두 개의 피연산자가 모두 true로 평가되어야 하므로 두 번째 피연산자를 평가하기 전까지 결과를 알 수 없습니다. 이때 논리곱 연산자는 논리 연산의 결과를 결정하는 두 번째 피연산자("b")를 그대로 반환합니다. 논리합(||) 연산자 논리합 연산자는 두 개의 피연산자 중 하나만 true로 평가되면 true를 반환합니다. 첫 번째 줄을 보면 첫 번째 피연산자 "a"가..

오늘은 타입변환에 대해서 알아보겠습니다. 타입변환에는 크게 개발자가 의도적으로 변환하는 명시적 타입 변환(explicit type conversion)과 개발자의 의도와 상관없이 자바스크립트 엔진에 의해 변환되는 암묵적 타입 변환(implicit type conversion)이 있습니다. 타입 변환  명시적 타입변환이나 암묵적 타입변환은 기존의 변수를 직접 변경하는 것이 아닌 기존 값을 사용해 다른 타입의 새로운 값을 생성하는 것이다. a 와 b를 숫자에서 문자열로 타입변환하여 각각 str, str2에 할당했지만 a 와 b에 타입은 변하지 않았습니다.. 암묵적 타입 변환 암묵적 타입 변환이 발생하면 문자열, 숫자, 불리언과 같은 원시 타입 중 하나로 변환됩니다. 첫 줄에서 + 연산자는 피연사자 중 하나..

오늘은 레이블 문에 대해서 알아보겠습니다. 레이블 문이란 식별자가 붙은 문을 말하고 문법은 다음과 같습니다. label : statement // foo라는 레이블 식별자가 붙은 레이블 문 ex) foo : console.log("foo"); 레이블 문은 프로그램의 실행 순서를 제어하는 데 사용됩니다. 반복문에 레이블을 붙이고 break , continue 구문을 사용해 반복문이 작업을 멈추고 다시 실행하는지를 지정할 수 있습니다. 이중 for 문의 내부 for 문에서 break를 실행하면 내부 for 문을 멈추고 외부 for 문으로 돌아가게 됩니다. 레이블 문을 사용하면 내부 for 문에서도 외부 for 문을 컨트롤할 수 있게 됩니다. 그렇다면 레이블 문을 사용한 것과 안한 것은 어떤 차이가 있을까요 ..

이번에는 자바스크립트 연산자에 대해 알아보겠습니다. 그중 산술, 할당, 문자열, 비교, 논리 연산자에 대해서만 알아보겠습니다. 산술 연산자 사칙연산에 사용되는 덧셈(+),뺄셈(-),곱셈(*),나눗셈(/) 그리고 나머지를 계산하는 %가 있습니다. 이때, 위와 같이 문자열로 표현된 숫자 역시 계산이 되지만 + 에 경우 계산이 안 되는 것을 볼 수 있습니다. + 연산자에 경우 문자열과 사용될 경우 문자열을 연결해 주는 역할을 하게 됩니다. 문자열 연산자 + 연산자는 피연사자 중 하나 이상이 문자열일 경우 문자열 연결 연산자로 동작합니다. 첫 번째 연산(let a = 1 + "1")과 같이 + 연산자가 문자열과 함께 사용될 경우에는 숫자 1 을 문자열로 인식하여 연결해주는 동작을 합니다. 증감 연산자 증가연산자..