본문 바로가기
반응형

전체 글

 (362)
[javascript] this 는 호출하는 방식에 따라 가리키는 대상이 달라진다. this... this.. this.. 자바스크립트에서 this는 함수를 호출하는 방식에 따라서 가리키는 대상 혹은 값이 달라진다. 대표적으로 일반함수(function), 생성자 함수, 메서드 3 가지 방식에 따라 나뉜다. 오늘은 이 3가지 방식을 구분해서 정리해보고, 다음 시간에는 this 가 가리키는 대상을 강제적으로 어떻게 바꿀 수 있는가에 대해서도 정리할 것이다. 일반 함수에서의 this 여기서 말하는 일반함수는 흔히 자주 쓰이는 function(){ } 을 말한다. 일반함수에서 this 는 언제나 전역 객체를 가리키는데, 전역 객체는 자바스크립트에서 최상위 객체를 의미한다. (참고) 전역 객체 자바스크립트의 대부분은 객체로 구성되어 있다. 그 객체를 모두 포괄하는 최상위 객체를 전역 객체라고 한..
[react] 리액트 환경에서 <input type =range> 사용 시 Uncaught TypeError: Cannot read properties of null (reading 'value') 가 뜬다면 아래와 같이 range의 속성값을 useState 에 저장하여 , 버튼을 조작하려는 상황에서 const [rangeVal,setRangeVal] = useState('') return ( { console.log(e.currentTarget.value); setRangeVal((rangeVal) => {return rangeVal = e.currentTarget.value}); }}> ) 에러와 함께, 백지와 같은 페이지를 만나게 된다면 sortbyDate.tsx:22 Uncaught TypeError: Cannot read properties of null (reading 'value') 다음과 같이 click 이벤트를 실행할 함수를 외부에 정의하면 에러가 해결된다. onClick 의 콜백함수 내에서 ..
[javascript] 함수의 매개변수 디폴트(기본) 값은 바꿀 수 있다. 함수는 일반적으로 다음과 같은 형태를 가진다. function myFun(매개변수1, 매개변수2){ //코드 } 즉, 함수의 식별자인 myFun의 ( ) 내 인자로는 매개변수를 가질 수 있고, 할당된 매개변수는 함수 스코프 내부에서 선언 및 할당된 변수의 역할을 수행한다. 또한 함수의 매개변수에 아무런 값을 전달하지 않으면, 기본적으로 undefined 가 할당되기 때문에 어찌 보면 undefined가 함수 매개변수의 기본값이라고 할 수 있다. ㅁ 매개변수에 아무런 값을 전달하지 않은 경우 function myFun(a,b){ console.log(a,b) } //함수 호출 myFun() //출력결과) 이것을 통해서 a,b 에는 undefined가 할당된 것을 확인할 수 있다. undefined unde..
[javascript] (함수)스코프와 스코프 체인? 스코프(scope)가 뭐시여?? 자바스크립트는 기본적으로 변수를 어느 부분에 정의 하느냐에 따라서 변수가 접근이 가능한 지점을 결정한다. 전역에 변수를 선언하면, 그 변수는 어느 곳에서든 참조할 수 있지만, 만일 함수 내부나 for문과 같은 반복문, if문과 같은 조건문의 { } 내부에 변수를 선언하게 되면, 그 이외의 지역에서는 해당 변수를 참조하거나 접근할 수 없게 된다. 이렇듯, 자바스크립트에는 변수가 접근하거나 혹은 변수 자체에 접근할 수 있는 유효한 범위가 존재하며, 이를 유효 범위 혹은 스코프라고 한다. 이를 더 쉽게 말하면, '한계(리미트)' 라고 보면 될 것 같다. 전역 스코프와 지역 스코프 다음과 같이 접근하면 과연 i 는 출력이 될까? (참고로 함수를 둘러싼 { } 까지를 함수 스코프라..
[npm] axios 사용법 보호되어 있는 글입니다.
[javascript]Array.sort() 사용 시 숫자 정확하게 정렬하기(1,5,10,...) 2024/02/27 기준 | 오름차순과 내림차순 설명이 반대로 되어 있는 것을 보고 수정하였습니다. 숫자정렬 Array.sort() 함수는 인자값으로 비교함수를 받으며, 만일 비교함수를 인자로 입력하지 않으면 Array의 모든 요소를 문자로 변환하고, 유니코드 기준에 따라서 크기 순서대로 정렬하는 함수이다. 때문에, 비교함수를 넣지 않고 10의 자리로 넘어가는 경우 1,10,100,2 와 같은 형식으로 정렬된다. 따라서 문자열은 문자로, 숫자는 숫자 타입으로 정렬하기 위해서는 인자값으로 배열의 각 요소를 비교할 수 있는 비교함수를 정의하여 호출해줘야 한다. function numberSort(num1,num2){ // 선택적 비교 함수 return num1 – num2 // num1 – num2가 음수를..
[javascript] webpack dev server 오픈 시 이미 열린 포트가 있다면, webpack dev server 를 오픈하다가 다음 문제가 발생했다. 이는 오픈 하고자 하는 포트가 이미 열려 있어서 생긴 문제 였다. 사실 다음 절차를 안 거쳐도 그냥 포트 번호를 수정하면 되지만, 그래도 알아두면 좋을 것 같아서 정리해 둔다. 명령 프롬포트나 파워 쉘 등에 들어가서 다음과 같이 입력하면 된다. netstat -ano | findstr 포트번호 //입력 시 해당 포트번호가 열려 있는지 확인할 수 있다. taskkill /f /pid "젤 우측 번호" //입력 시 해당 포트를 닫는다. // 참고로 'pid 번호' 는 프로세스의 id 번호를 의미한다.(id 번호는 프로세스를 구분하기 위한 식별자이다.)
[css] 태그 가운데 정렬 하는 법 부모 태그의 자식 태그를 대상으로 가운데 정렬함을 가정 세로 여백을 0으로 설정하고, 가로 여백을 `auto`로 설정하면, 브라우저가 알아서 여백을 조절하여 중앙정렬을 해준다. 이 때 부모 태그의 가로 넓이를 작게 설정하고, 자식의 가로넓이를 그 부모태그의 100%으로 설정하면, 중앙정렬이 되는 동시에 브라우저 크기에 따라 태그의 크기를 조절할 수 있다. margin 속성 유형 /* 네 면 모두 적용 */ margin: 1em; margin: -3px; /* 세로방향 | 가로방향 */ margin: 5% auto; /* 위 | 가로방향 | 아래 */ margin: 1em auto 2em; /* 위 | 오른쪽 | 아래 | 왼쪽 */ margin: 2px 1em 0 auto; margin 에서 auto 속성..
반응형

티스토리툴바