JavaScript: padStart(), padEnd()   ❗️기본 문법str.padStart(targetLength[, padString])str : 문자열targetLength : 목표로 하는 문자열 길이를 적음, 이 길이에 맞게 문자열이 채워질 수 있음padString(옵션) : 필요한 경우 채우기에 사용할 문자열임, 기본값은 공백 문자열(' ')이다.  ❗️padStart() padStart 함수는 문자열의 앞부분을 특정 길이로 채우는 역할을 함 예시코드const str = "123";const paddedStr1 = str.padStart(7, "0");console.log(paddedStr1); // 출력 : "0000123"const paddedStr2 = str.padStart(10)..

JavaScript: 논리 연산자 정리    & : 비트 연산자비트의 논리 합을 하는 연산자 && :  논리곱 연산자&&는 모든 조건이 참이여야 true  || :  논리합 연산자||는 둘중 하나가 참이면 true  >  : 비트 이동 연산자왼쪽, 오른쪽으로 비트를 밀어내는 연산자  !   , !!  : 부정 연산자! :  입력값을  boolean으로 변환하는데, true이면 false로 , false이면 true로 값을 반대로 반환한다.!! : boolean타입으로 명시적으로 형 변환   ?. : 옵셔널 체이닝객체의 속성이 없는 경우, typeError가 발생하지 않고 undefined가 반환됨  ?? : Null 병합 연산자앞에 오는 값이 null 또는 undefined이면 뒤에오는 값을, 아니면 n..

URL.createObjectURL, URL.revokeObjectURL    사용자가 업로드한 파일을 미리보기하거나, 서버에서 받은 데이터를 로컬에서 처리할 때 유용한 두 가지 메서드 URL.createObjectURL, URL.revokeObjectURL에 대해 설명하겠습니다! ❗️URL.createObjectURLURL.createObjectURL 메서드는 File, Blob, MediaSource 객체를 가리키는 임시 URL을 생성합니다.이 URL을 통해 해당 객체에 쉽게 접근할 수 있으며, 웹 애플리케이션에서 이미지, 동영상, 오디오 등의 미디어 파일을 미리보기할 때 유용하게 사용할 수 있습니다. 예제// 파일 입력 요소에서 파일을 선택할 때const fileInput = document.que..

점 표기법(정적속성) vs 대괄호 표기법(동적속성)    ❗️상황 공부를 하면서 문득 이렇게 작성한 코드를 보고 점 표기법으로 작성을 안하는 이유가 뭐지 하고 의문이 들었다.export default function App() { const [order, setOrder] = useState("createdAt"); const sortedItems = items.sort((a, b) => b[order] - a[order]); /.../ } ❗️공부하고 깨달은 점 점 표기법으로 접근하려면 속성 이름이 고정된 경우에만 사용할 수 있습니다.예를 들어, b.order와 같이 접근하는 경우에는 order가 객체의 정적 속성이어야 합니다. 그런데 지금 코드는 order값이 상태 값으로 동적으로 설정되어..

e.target 속성들    ❗️e.target은 이벤트가 발생한 요소를 나타내는 객체다!이벤트의 종류에 따라 e.target 객체의 속성은 다를 수 있지만, 일반적으로 다음과 같은 속성들이 포함될 수 있습니다:nodeName: 요소의 태그 이름을 나타냅니다.nodeType: 요소의 노드 유형을 나타냅니다.tagName: 요소의 태그 이름을 나타냅니다.value: 입력 요소에서 사용자가 입력한 값(텍스트, 체크 상태, 선택된 옵션 등)을 나타냅니다.name: 입력 요소의 이름을 나타냅니다.type: 입력 요소의 타입을 나타냅니다.checked: 체크 박스나 라디오 버튼의 체크 상태를 나타냅니다.selected: 선택된 옵션 요소인지 여부를 나타냅니다(선택 상태인 경우 true).id: 요소의 고유 식별자..

객체 리터럴 중복 허용   ❗️상황export default function ReviewForm() { const [values, setValues] = useState({ title: "", rating: 0, content: "", imgFile: null, }); const handleChange = (name, value) => { setValues((prevValues) => ({ ...prevValues, [name]: value, })); }; /.../여기서 prevValues에는{ title: "", rating: 0, content: "", imgFile: null,}이 객체 리터럴이 들어갈 거고[nam..

자바스크립트 내장함수(메서드) 정리   내장 함수1) 타이머 함수setTimeout(function, millisecond) : 지정된 시간 후 함수를 한 번 실행(밀리초 단위)setInterval(function, millisecond) : 지정된 시간마다 함수를 반복 실행*위 두 함수는 타이머 id를 리턴값으로 가짐 -> id를 변수에 저장해둬야 중지 가능clearTimeout(id) : setTimeout 함수 중지clearInterval(id) : setInterval 함수 중지 2) 인코딩과 디코딩 함수escape(), unescape()영문 알파벳과 숫자, 일부 특수문자(@ * - _ + . /)를 제외하고 인코딩1바이트 문자는 %XX, 2바이트 문자는 %uXXXX 형태로 변환encodeURI..

JavaScript - undefined, null의 차이   undefined 변수나 인수를 선언하고 초기값을 할당하지 않은 상태의 값이다. 즉, 자료형이 없는 상태를 말한다. null 변수를 선언하고 빈 값을 할당했다고 지정한 상태를 말한다. 자료형은 object가 나온다. typeof null; //'object'typeof undefined; //'undefined' typeof를 찍어봐도 이런 차이가 있지만 null의 경우  object가 나와서 타입을 체크하는 경우 아래와 같은 문제가 발생할 수 있다. typeof []; //'object'typeof null; //'object' 배열을 체크하고 싶을 때, 배열도 object로 구분된다. 배열인지 체크를 하고 있지만 null인 경우에도 체크가..

JavaScript Event Handler 모음    onabort이미지의 다운로드를 중지할 때 (브라우저의 중지버튼)onactivate개체가 활성화될 때 발생(태그의 기능이 작용할 때 발생하는 이벤트로 예를 들어 링크를 누를 경우 링크가 옮겨질때 발생하는 것을 감지하는 이벤트 핸들러)onafterprint문서가 출력되거나 혹은 출력하기 위해 출력미리보기를 한 후에 발생onafterupdate데이터영역 개체에서 발생하는 이벤트로 데이터 소스 오브젝트내의 데이터가  업데이트 되었을 때 발생(데이터 개체부분 참조)onbeforeactivate개체가 활성화 상태로 되기 바로 직전에 발생 (onactivate 참고)onbeforecopy선택 영역이 시스템의 클립보드로 복사되기 바로 직전에 발생onbeforec..