본문 바로가기

WEB

 (37)
[Javascript] 구조 분해 할당(Destructuring assignment) 구조 분해 할당이란? 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식 배열 구조 분해 let users = ['Mike', 'Tom', 'Jane']; let [user1, user2, user3] = users; console.log(user1); // 'Mike' console.log(user2); // 'Tom' console.log(user3); // 'Jane' let [user1, user2, user3] = users; 은 let user1 = users[0]; let user2 = users[1]; let user3 = users[3]; 과 같다. let str = "Mike-Tom-Jane"; let [user1, user2, user3] = str.split(..
[React] 컴포넌트 만들기 js 파일을 만들고 함수를 만들고 export 해주면 간단하게 컴포넌트를 만들 수 있다. Hello 컴포넌트와 Welcome 컴포넌트를 만들었다. App.js에서 컴포넌트들을 import하고 html 태그처럼 원하는 위치에 적어주면 된다. World 컴포넌트를 만들고 Hello 컴포넌트 안에서 World 컴포넌트를 import 했다. 이 때 return 안에 div 태그로 묶어주지 않으면 에러가 발생한다. 현재 컴포넌트 구조는 다음과 같다. 한 컴포넌트를 여러 번 사용하는 것도 가능하다.
[Javascript] 배열(Array), 배열 메소드(Array methods) 배열: 순서가 있는 리스트let students = ['철수', '영희', ..., '영수'];console.log(students[0]); // 철수console.log(students[1]); // 영희console.log(students[29]); // 영수students[0] = '민정';console.log(students); // ['민정', '영희', ...]  배열은 문자, 숫자, 객체, 함수 등을 포함할 수 있다.let arr = [ '민수', 3, false, { name : 'Mike', age : 30, }, function(){ console.log('TEST'); }];반복문 : forlet ..
[Javascript] 문자열 메소드(String methods) 문자열 여러 줄 백슬래시(`)로 감싸 여러 줄을 입력하거나 \n으로 줄바꿈을 할 수 있다. let desc = `오늘은 맑고 화창한 날씨가 계속 되겠습니다. 내일은 비소식이 있습니다.`; let desc = '오늘은 맑고 화창한\n날씨가 계속 되겠습니다.'; let desc = '오늘은 맑고 화창한 // error! 날씨가 되겠습니다. 내일은 비소식이 있습니다.'; 특정 위치에 접근 let desc = '안녕하세요.'; desc[2] // '하' desc[4] = '용'; console.log(desc); // 안녕하세요. 한 글자만 바꾸는 것은 허용되지 않는다. 문자열 길이 : str.length let desc = '안녕하세요.'; desc.length // 6 검색 : str.indexOf(text..
[Javascript] 숫자, 수학 method(Number, Math) toString() 10진수 -> 2진수/16진수 let num = 10; num.toString(); // "10" num.toString(2); // "1010" let num2 = 255; num2.toString(16); // "ff" 괄호 안에 숫자를 쓰면 그 숫자의 진법으로 변환한다. Math 자바스크립트에는 수학과 관련된 프로퍼티와 메소드들을 가지고 있는 Math라는 내장객체가 있다. 대표적인 프로퍼티의 예로 Math.PI;를 입력하면 원주율을 구해준다. Math.ceil() : 올림 let num1 = 5.1; let num2 = 5.7; Math.ceil(num1); // 6 Math.ceil(num2); // 6 Math.floor() : 내림 let num1 = 5.1; let num..
[Javascript] 심볼(Symbol) 지금까지 객체의 property key는 문자형으로 만들었다. const obj = { 1: '1입니다.', false: '거짓' } Object.keys(obj); // ["1", "false"] obj['1'] // "1입니다." obj['false'] // "거짓" 숫자형이나 boolean형으로 만들어도 Object.keys로 key들을 가져오면 문자형으로 반환되며, 실제로 접근할 때도 문자형으로 접근할 수 있다. 문자형 외에 Symbol형이 가능하다. Symbol은 유일한 식별자를 만들 때 사용한다. const a = Symbol(); // new를 붙이지 않는다!! const b = Symbol(); console.log(a) // Symbol() console.log(b) // Symbol()..
[Javascript] 계산된 프로퍼티(Computed property), 객체 메소드(Object methods) 계산된 프로퍼티(Computed property)[] 을 이용해서 객체의 변수명에 미리 계산된 변수를 넣는 것이 가능하다.let a = 'age';const user = { name : 'Mike', [a] : 30 // age : 30}식 자체가 들어가는 것도 가능하다.const user = { [1 + 4] : 5, // 5 : 5 ["안녕"+"하세요"] : "Hello" // 안녕하세요 : "Hello"} 객체 메소드(Object methods)Object.assign() : 객체 복제const user = { name : 'Mike', age : 30,}// const cloneUser = user;const newUser1 = Object.assi..
[Javascript] 생성자 함수 개발을 하다보면 비슷한 객체를 여러 개 만들어야 하는 상황이 생긴다. 그럴 때 쓸 수 있는 것이 생성자 함수이다. 생성자 함수는 첫 글자를 대문자로 해서 함수로 만들어준다. new 연산자를 사용해서 함수를 호출한다. function User(name, age){ this.name = name; this.age = age; } let user1 = new User('Mike', 30); let user2 = new User('Jane', 22); let user3 = new User('Tom', 17); 비슷한 객체 3개를 만들었다. 생성자 함수는 와플 틀이라면 생성되는 객체들은 와플이라고 생각하면 된다. 동작하는 방식은 function User(name, age){ //this = {}; this.nam..

티스토리툴바