본문 바로가기

JS

 (44)
1. React Quick Start - React.dev 정리 배우게 될 것 1. 컴포넌트를 만들고 중첩하는 방법 2. 마크업과 스타일을 추가하는 방법 3. 데이터 표시 방법 4. 조건문과 리스트를 렌더링하는 방법 5. 이벤트에 반응하고 화면을 업데이트하는 방법 6. 컴포넌트 간 데이터를 공유하는 방법 1. 컴포넌트 생성 및 중첩 React 앱은 컴포넌트로 구성되어 있다. 컴포넌트는 UI(User Interface)의 일부분으로 자체적인 로직과 외형을 가지고 있다. 컴포넌트는 작은 버튼일 수도 있고 혹은 전체 페이지처럼 커다란 요소일 수도 있다. React 컴포넌트는 마크업을 반환하는 JavaScript의 함수이다 : function MyButton() { return ( 버튼 ); } 이렇게 MyButton을 선언하였고, 이제 다른 컴포넌트와 중첩할 수 있다. e..
16. 기본, 참조 자료형 / 배열 함수 map() 기본 자료형(number, string, boolean) const num1 = 1; // 기본형 const num2 = number; console.log(num2) // 결과: 1 number, string, boolean은 모두 기본 자료형으로, 값을 재할당하거나 변수를 다른 변수에 저장할 때마다 값을 복사한다. 참조 자료형(배열, 객체) const person = { name : "Kim" }; const secondPerson = person; console.log(secondPerson); // 결과 //[object Object] { // name: "Kim" //} person과 같은 값을 출력하지만, 값을 복사한 것이 아니라 객체 person은 메모리에 저장되어 있고, 상수 person에..
15. Spread & Rest Operator / Destructuring Spread Operator 배열의 원소나 객체의 프로퍼티를 나누는 데 사용한다.(배열이나 객체를 펼침) const newArray = [...oldArray, 1, 2] → newArray에 oldArray의 내용과 원소 1, 2를 추가 const newObject = {...oldObject, newProp : 5 } → oldObject의 모든 프로퍼티와 값을 꺼내 새 객체의 키 값으로 추가 const numbers = [1, 2, 3]; const newNumbers = [...numbers, 4, 5]; const newNumNoDot = [numbers, 4, 5] // 점이 없으면 새 배열에 하나의 원소로 포함. console.log(newNumbers); // 결과: [1, 2, 3, 4,..
14. 클래스 클래스 객체를 생성하기 위한 틀(Tamplate)로, 객체의 상태를 나타내는 속성과 객체가 수행할 수 있는 동작을 나타내는 메서드를 포함한다. * 생성 방법 1. 클래스 정의(속성, 메서드) - 속성: name, age - 메서드1: constructor() → name, age를 매개변수로 받아 this.name, this.age 속성을 초기화. - 메서드2: printMyName() → this.name, this.age 속성을 사용하여 인사말 출력. 2. 클래스를 사용하여 객체 생성(클래스의 인스턴스 생성) - new 키워드를 사용하여 Person 클래스의 새로운 인스턴스 생성하여 prs 변수에 할당. * 인스턴스: 클래스는 객체의 특성을 정의하는 것이고 그 클래스를 통해 생성된 구체적인 실체(Ob..
🥸 To Do List 만들기 기본 로직 할 일을 입력하고 + 버튼을 누르면 화면에 출력됨. let userInput = document.getElementById("user-input") let addBtn = document.getElementById("add-button") // 할 일들을 저장할 변수 let myList = []; // 버튼을 누르면 할일이 추가되도록 이벤트 리스너 addBtn.addEventListener("click", addTask) // 할 일이 추가되는 함수 function addTask(){ myList.push(userInput.value) // console.log(myList) -- 확인용 render(); // + 버튼을 누르면 화면에 출력되게 하는 함수 호출 } let taskBoard = ..
2. jQuery 선택자 테스트1 테스트2 테스트3 테스트1 테스트2 테스트3 5. 속성 선택자 - 요소[속성] : 특정 속성을 가지고 있는 객체 선택 - 요소[속성 = 값] : 속성 안의 값이 특정 값과 같은 객체 선택 - 요소[속성 ~= 값] : 속성 안의 값이 특정 값을 같은 단어로서 포함하는 객체 선택 - 요소[속성 ^= 값] : 속성 안의 값이 특정 값으로 시작하는 객체 선택 - 요소[속성 $= 값] : 속성 안의 값이 특정 값으로 끝나는 객체 선택 - 요소[속성 *= 값] : 속성 안의 값이 특정 값을 포함하는 객체 선택 성별: 남자 여자 확인 prop() 메소드 - prop("속성명") : 해당 속성이 요소에 존재하면 true, 아니면 false - prop("속성명, true | false ") : 해당 속성을 c..
13. 최신 자바스크립트 기술: ES6 문법 객체 1. 객체 초기화 const name = "Kim"; const age = 21; const major ="Math"; const student = {name:name, age:age, major:major} console.log(student) // 결과: { name: 'Kim', age: 21, major: 'Math' } 이렇게 원래 객체를 선언할 시에는 {key:value, key:vakue} 로 선언하였다. const name = "Kim"; const age = 21; const major ="Math"; const student = {name, age, major} console.log(student) // 결과: { name: 'Kim', age: 21, major: 'Math' }..
12. 함수 기본적인 함수의 선언, 정의, 호출 function 함수명([매개변수]) { // 함수 선언 console.log("코드 == 함수정의") // 함수 정의 } 함수명([매개변수]) // 함수 호출 익명함수 - 필요 시 마음대로 호출하는 것이 불가(이름이 없기 때문) - 선언된 함수가 여러 곳에서 재사용 되는 것이 아닌, 이벤트핸들러와 같은 특정 동작이나 상황에서만 수행하는 함수가 필요한 경우 사용 - 매개변수로 전달되는 함수의 형태가 일정하지 않을 때 사용 A.addEventListener("click", function(){ // 함수 선언(함수명X) console.log("함수 정의") }) 즉시 실행 함수 - 익명 함수의 한 종류로, 함수가 정의되자마자 실행되는 함수 - 사용이유 1) 함수 선언 및..

티스토리툴바