리엑트를 활용하기 위해서 간단하게 자바스크립트의 내용을 압축해서 알아보자. 변수선언 (const, let) Javascript의 에서 변수선언은 const, let으로 할 수 있다. let은 값을 수정할 수 있는 변수를 선언할 때 사용하고 const는 값을 수정할 수 없는 변수를 선언할 때 사용한다. 그럼 일반적으로 let으로 변수를 선언하면 되지 않을까라고 생각이 들겠지만 const 키워드를 사용하면 의도치 않은 재할당을 방지를 도와주기 때문에 이를 구분하여 사용하는 것이 좋다. const a = 1; let b = 2; 🔖 var 선언 방식이 존재하지만 ES6에서는 호이스팅이라는 문제 때문에 추천하지 않는 방식이다. 참고 : https://developer.mozilla.org/ko/docs/Glos..
📚 import, export 프로그램을 작성하다보면 다른 모듈에서 함수나 변수들을 가져와 활용하는 경우가 많은데, 이를 사용하기 위해서는 import, export 문을 통해서 해당 행위를 실행한다. 간단하게 보자면, import은 자신의 스페이스에 다른 모듈의 것을 불러온다는 의미이며, export는 반대로 다른 모듈에게 함수나 값을 전달하는 의미로 받아드리면 된다. 📚 Named Export와 Default Export Export 하는 방법은 2가지가 있는데 차이점은 다음과 같다. Default Export - 한 파일 내에서 단 한개의 변수/클래스/함수만을 Export 할 수 있다. - from 뒤에 명시한 파일에서 단 한개의 모듈만 가져오기 때문에 as 키워드 없이 원하는대로 이름을 바꿀 수 ..
📚 Javascript에서 Date 객체 Javascript는 Date라는 내장 객체를 가지고 있다. 이는 날짜와 시간을 저장하고 그걸 처리하는 메소드를 포함하고 있다. 📚 Date 사용 일반적인 Date 객체의 생성은 다음과 같이 한다. const date = new Date(); // result : "2023-03-22T09:48:29.222Z" 📒 Date 객체를 이용한 년,월,일 구하기 const now = new Date();// 현재 날짜 및 시간 const year = now.getFullYear();// 연도 const month = now.getMonth();// 월 const date = now.getDate();// 일 📒 Date 객체를 이용한 시간, 분, 초 구하기 var now..
📚 Local Storage란 브라우저에 Key-Value 값을 저장할 수 있는 공간을 의미한다. 저장한 데이터는 세션간에 공유되며, 세션이 바뀌어도 저장한 데이터는 유지가 된다. 📚 Local Storage 사용 아래는 localStorage에 아이템을 CURD 방법이다. 📒 setItem() localStorage에 아이템을 추가하기 위해서 setItem() 함수를 사용한다. localStorage.setItem(key, value) 📒 getItem() localStorage에 아이템을 읽기 위해서 getItem() 함수를 사용한다. localStorage.getItem(key) 📒 removeItem() localStorage에 아이템을 삭제를 위해서 removeItem() 함수를 사용한다. lo..
event listener - DOM 객체에서 이벤트가 발생할 경우 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트 (비유하자면 이벤트라는 소리가 발생했을 때, 듣는 객체를 listener라고 명한다.) - 특정 DOM에 위에 Javascirpt 이벤트가 발생할 때 특정 함수를 호출할 수 있다. 다음은 Click 이벤트에 대한 이벤트리스너를 설정하여 제작된 예제이다. 해당 코드는 a 요소에 마우스 클릭 이벤트가 발생하면 콘솔로그로 hi 라는 글자가 찍혀 나오게 된다. 클릭 event의 종류 이벤트의 종류가 많기 때문에 공식 문서를 참고하여 이벤트 찾자 문서 : https://developer.mozilla.org/ko/docs/Web/API/Window#%EC%9D%B4%EB%B2%A4%ED%8A%B8
📚 getElement*, querySelector*로 요소 접근하기 DOM 탐색 프로퍼티를 사용해 목표 요소에 쉽게 접근할 수 있다. 🔖 DOM : Document Object Model로 웹페이지를 자바스크립트로 제어하기 위한 객체 모델을 의미한다. 📒document.getElement* 을 통해 요소 검색하기 요소에 id 속성이 있으면 위치에 상관없이 메서드 document.getElement* 을 통해 접근이 가능하다. Element 📒document.querySelector* 을 통해 요소 검색하기 document.querySelector* 주어진 CSS 선택자에 대응하는 요소 중 첫번째 요소를 반환한다. 따라서 모든 요소를 반환하는 것을 원한다면, document.querySelectorAll..
📚 Javascript undefined vs null undefined은 변수를 선언하고 값을 할당하지 않은 상태, null은 변수를 선언하고 빈 값을 할당한 상태(빈 객체)이다. 즉, undefined는 자료형이 없는 상태이다. 📒 undefined undefined는 원시값으로, 선언한 후에 값을 할당하지 않은 변수나 값이 주어지지 않은 인수에 자동으로 할당된다. 이 값은 전역 객체의 속성 중 하나로, 전역 스코프에서의 변수이기도 하다. 따라서 undefined 변수의 초기 값은 undefined 원시 값이다. undefined는 예약어가 아니기 때문에, 전역 범위 외에서 변수 이름으로 사용할 수 있다. 그러나 유지보수와 디버깅에 어려움을 겪을 수 있으므로 피하는 것이 좋다. 아래의 경우에 변수가 ..
