전체 글
-
Object MethodJavaScript 2022. 5. 24. 17:35
Object Method Object.entries() 객체를 순회하며 모든 프로퍼티를 [key, value] 쌍의 배열 형태로 반환한다. 반환된 배열은 객체가 정의된 순서와 상관 없이 나오기 때문에 sort()로 정렬을 하는 것이 좋다. ⇒ Object.entries(obj).sort((a, b) => b[0].localeCompare(a[0])) obj = { a: 1, b: 2, c: 3 } console.log(Object.entries(obj)) // [ [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] ] Object.keys() 객체를 순회하며 해당 객체가 갖는 key 값으로 이루어진 배열을 반환한다. const score = { math: 100, english: 95, his..
-
Object (객체)JavaScript 2022. 5. 24. 17:21
Object (객체) Object(객체) 란? key, value 쌍을 가지는 구조이다. ⇒ object = { key: value } key와 value 한 쌍을 속성 (property) 라고 한다. value 에 문자, 숫자, 배열, 객체, 함수를 할당할 수 있다. Object 생성방법 // 1. object literal syntax const obj1 = {} // 2. object constructor syntax const obj2 = new Object() // Ex const hizini = { name: 'Hizini', job: 'developer' } Object 데이터 접근방법 const hizini = { name: 'Hizini', job: 'developer' } console..
-
React - 저장된 데이터 불러올 때 개행처리React 2022. 5. 20. 17:01
TextArea 작성 데이터 데이터 출력 결과 출력 결과를 확인하였을 때 줄바꿈이 반영되지 않았다.. DB 저장시 \n 과 함께 저장이 되는데, React에서는 텍스트 형태로만 랜더링하게 설정되어 있다고 한다. 개행처리 방법 1 {info.memo.split("\\n").map((line) => { return ( {line} ) })} 받아온 데이터에 \n을 기준으로 나누어 태그를 추가하여 개행 처리를 해준다. 방법 2 .memo { white-space: pre-line; } white-space 스타일을 사용한다. normal : HTML의 기본 값으로 여러개의 공백은 하나로 표시되고, \n은 무시되며 긴 행은 필요시에 wrap 된다. nowrap : normal과 같은데 긴행이 wrap 되지 않는..
-
스택(Stack) 구현하기JavaScript 2022. 5. 19. 19:18
스택(Stack) 이란? 스택은 자료구조형에 속한다. 먼저 들어간 자료가 나중에 나오는 후입선출 자료구조로, LIFO(Last In First Out)라고도 부른다. 데이터를 입력하는 push()와 데이터를 제거하는 pop() 등의 작업을 할 수 있다. ctrl+Z로 이전 작업을 취소하는 동작 등에서 사용된다. Stack의 멤버변수 c언어로 스택을 구현할 때는 구조체(struct)를 사용하면 되지만, 자바스크립트에서는 구조체가 없어 class로 새로운 객체를 만들어 사용해 보자! size : 해당 스택의 max_size top : 해당 스택의 데이터 높이 array : 데이터를 담을 배열 constructor(size){ this.size = size this.top = 0 this.array = [] ..
-
String MethodJavaScript 2022. 5. 13. 17:28
String Method String.indexOf() / String.lastIndexOf() String.indexOf(): String 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환한다. String.lastIndexOf(): String 객체에서 주어진 값과 일치하는 마지막 인덱스를 반환한다. 일치하는 값이 없으면 -1을 반환한다. 문자열을 찾을 때 대소문자를 구분한다. 첫 번째 인자: 찾으려는 문자열(주어지지 않으면 “undefined”를 찾음) 두 번째 인자: 문자열에서 찾기 시작하는 위치를 나타내는 인덱스 값 (생략가능) // 구문 str.indexOf(searchValue[, fromIndex]) const str = "abcDEFabc" str.indexOf('abc') // 0 ..
-
제어문 (조건문, 반복문, 분기문)JavaScript 2022. 5. 13. 17:15
제어문 (조건문, 반복문, 분기문) 제어문 제어문은 프로그램의 흐름을 제어할 수 있도록 도와주는 실행문을 말한다. 제어문은 조건문, 반복문, 분기문으로 나뉜다. 조건문 조건문 혹은 선택문이라고 한다. 조건식같은 분기로 나누어 결과에 따라 다른 코드를 실행할 수 있게 해주는 구문이다. if문, if else문, switch문 등이 있다. 조건문이란? 프로그램 내에서 주어진 표현식의 결과에 따라 별도의 명령을 수행하도록 제어하는 실행문이다. 특정 조건 만족 시 실행하는 명령의 집합이다. if...else 문 if (조건식) { // statment1 } else if (조건식) { // statment2 } else { //statment3 } if 안에 있는 조건식이 참인 경우 해당하는 if 문, else..
-
RefReact 2022. 2. 25. 11:31
Ref 일반적으로 Javascript에서 DOM에 직접 접근할 때는 document.getElementById 등을 통해서 접근한다. React에서는 ref 라는 것을 사용해서 접근하게 된다. Ref 란? ‘reference’의 약자로 ‘참조'라는 뜻이다. 노드나 컴포넌트에 ref 값을 만들어서 해당 요소의 값을 얻어오거나 해당 요소를 제어하는 데 사용된다. render 메소드에서 생성된 DOM 노드나 React element 를 엑세스 하는 방법을 제공하는 것이다. React에서 Ref를 사용하는 경우는 다음과 같다. input / textarea 등에 포커스를 해야 할때 특정 DOM 의 크기를 가져와야 할 때 특정 DOM 에서 스크롤 위치를 가져오거나 설정을 해야 할 때 외부 라이브러리 (플레이어, ..