전체 글

[JS] 배열 특정 값 포함 여부(includes, indexOf, some, every)

1. includes() includes() 메서드는 특정 문자열이 어떤 문자열에 포함되어 있는지 판별 결과를 true 또는 false로 반환 구문 str.includes(searchString) str.includes(searchString, position) 매개변수 searchString 찾으려는 문자열 position (선택사항) 문자열에서 찾기 시작하는 위치를 나타내는 index 값 기본값은 0이며, 문자열 전체에서 찾게 된다. 반환값 searchString이 있으면 true, 없으면 false이다. let ice = ['예은', '지수', '희수', '서아', '수진', '예지']; let friend = ['수민', '인정', '민송']; ice.includes('예은') // true fr..

[JS] 배열에서 특정 값의 개수 구하기

배열(Array) 1. for문 ▶ 가장 기본적으로 배열의 모든 요소를 순회하며 특정 값이 있을 경우 count를 증가시킴 const arr = ['A', 'B', 'B', 'C', 'D' ]; let count = 0; for(let i = 0; i { if ..

[React] Virtual DOM

DOM(Document Object Model) 기존 웹이 사용하는 DOM의 Document는 HTML을 말한다. 브라우저를 공장이라고하면 html문서는 이 공장들에 보내주는 주문서이다. 이 주문서에는 내가 원하는 웹페이지의 요소들과 그 구조가 설계도처럼 표현되어 있다. (ex) 바디 태그 안에는 header태그랑 main 이런 구체적인 구조를 html이란 주문서에 담아 웹에 접속할 때 쓰는 브라우저에 보냄. 그러면 이 브라우저라는 공장에서 이 주문서를 보고 그 안의 html요소들 body, div,li,span, 같은것들을 실제 제품들로 제작함. 이 브라우저라는 공장에 들어가면 빈칸 또는 체크박스로 기능을 갖춘 실제 input 오브젝트로 만들어짐. 이처럼 html의 각 요소들이 브라우저에서 실제로 제작..

[JS] Templete Literal : 백틱(``), 달러(${})

Template Literal (템플릿 리터럴) ES6부터 새로 도입된 문자열 표기법 내장된 표현식을 허용하는 문자열 리터럴 문자열 생성 시 따옴표 대신, 백틱(``)을 사용 var str = `Hello World!`; console.log(str); [출력결과] Hello World! 템플릿 리터럴을 사용하는 이유 1. 줄바꿈(개행) 백틱(`)으로 템플릿 리터럴을 사용하면, 개행문자(' \n ') 없이도 줄바꿈 가능 var str = ` hello! world! JavaScript! very good`; console.log(str); [출력결과] hello! world! JavaScript! very good 2. 표현식 삽입 ES6 이전의 따옴표 방식에서는, + 연산자를 이용 백틱(` `)안에 달..

[JS] Javascript 이론 (1)

변수 선언 var var i; // 선언, "undefined"가 저장됨 var sum = 0; // 선언과 초기화 var i, sum; // 한 번에 여러 개의 변수를 함께 선언할 수 있음 var i=0, sum=10, message=”Hello”; // 선언과 초기화를 동시에 해줄 수 있음 name = "javascript"; // 선언되지 않은 변수는 전역 변수가 됨 var문에서 변수에 초기 값을 지정하지 않는다면, 변수는 값이 설정될 때까지 undefined 값을 갖게 된다. hosting 자바스크립트 코드는 함수 안에 있는 모든 변수를 함수 맨 꼭대기로 끌어올린 것처럼 동작한다. var scope = “global”; function f() { console.log(scope); //"undef..

[HTML&CSS] HTML&CSS 이론

html의 DOM 이란 무엇인가 ? 문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스입니다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다. 이러한 DOM은 W3C의 표준 객체 모델이며, 다음과 같이 계층 구조로 표현됩니다. HTML DOM은 HTML 문서를 조작하고 접근하는 표준화된 방법을 정의합니다. 모든 HTML 요소는 HTML DOM를 통해 접근할 수 있습니다. HTML 전체 적인 구조와 필수 태그에 대해서 학습하기 태그 : 제가 생각하기에 가장 중요한 태그는 바로 이 태그 입니다. div는 네모난 박스 처럼 생겼습니다. 모든 웹(레이아웃)은 이 div로 구성됩니다. 그러므로 ..

[JS] join() 메서드

join() 메서드 배열의 모든 요소를 연결해 하나의 문자열로 만듦 const elements = ['js', 'hufs', 'yeeun']; console.log(elements.join()); // js,hufs,yeeun console.log(elements.join('')); // jshufsyeeun console.log(elements.join('-')); // js-hufs-yeeun 구문 arr.join([separator]) 매개변수(separator) 배열의 각 요소를 구분할 문자열 생략시 배열의 요소들이 쉼표로 구분됨 반환 값 배열의 모든 요소들을 연결한 하나의 문자열을 반환 arr.length가 0인 경우, 빈 문자열 반환

[JS] Math 객체

Math 수학에서 자주 사용하는 상수와 함수를 위한 속성과 메소드를 가진 내장 객체 함수 객체가 아님 Number 자료형만 지원하며 BigInt와는 사용 불가능 생성자가 존재하지 않아서 따로 인스턴스를 생성하지 않더라도 Math 객체의 모든 method나 property를 바로 사용 가능 [가장 많이 사용되는 대표적인 Math 메소드] Math.min(x, y, z...) 가장 작은 값을 반환 Math.max(x, y, z...) 가장 큰 값 반환 Math.random() 0보다 크거나 같고 1보다 작은 무작위 숫자 반환 Math.round(x) 소수점 첫번째 자리에서 반올림 후 반환 Math.floor(x) 인수와 같거나 작은 수 중에서 가장 큰 정수 반환 Math.ceil(x) 인수와 같거나 큰 수 ..

[JS] Number vs parseInt

Q. 알고리즘 문제를 풀며 문자열을 숫자로 바꿀 때 Number을 사용했는데 다른 사람들의 코드를 보며 parseInt도 많이 사용됨을 알았다. 그리고 이 둘의 차이가 궁금했다. Number(str) Number 메서드는 문자열을 인자로 받으면 해당 문자열을 숫자로 바꿔줌 const number = Number("12345"); // 12345 문자열이 숫자가 아닌 경우 num에는 NaN이 저장됨 const price = Number('1000원'); // NaN 소수점은 모두 표시되며, 숫자형으로 바뀜 const num = Number('12.345'); // 12.345 parseInt(str) Number(str)와 동일하게 문자열을 인자로 받으면 해당 문자열을 숫자로 바꿔줌 const number..

[JS] const vs let vs var

변수 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 메모리 공간을 식별하기 위해 붙인 이름 변수 선언 방식 1. var 변수 선언 방식에 있어서 큰 단점을 가지고 있음 var name = 'yeeun' console.log(name) // yeeun var name = 'javascript' console.log(name) // javascript 변수를 한 번 더 선언했음에도 불구하고, 에러가 나오지 않고 각기 다른 값이 출력됨 코드량이 많아진다면 어디에서 어떻게 사용됐는지 파악 어려움 값이 바뀔 가능성 높음 2. let let name = 'yeeun' console.log(name) // yeeun let name = 'javascript' console.log(name) // Uncaught..

[JS]백준에서 node.js 입출력 받기

fs 모듈을 이용 1) 한 줄로 입력을 받을 때 let fs = require('fs'); let input = fs.readFileSync('/dev/stdin').toString().split(' '); 2) 여러 줄로 입력을 받을 때 let fs = require('fs'); let input = fs.readFileSync('/dev/stdin').toString().split('\n'); # vscode에서 테스트용 1) vscode 터미널에 'npm install fs'로 파일시스템을 설치 2) 문제를 풀 때마다 예제.txt에다가 예제를 복사한 후 실행해보려고 예제.txt를 만든다 3) 아래와 같이 readFileSync의 경로를 예제.txt의 위치로 수정 let input = require(..

[JS] match()함수

match() 함수 특정 텍스트 안에 검색할 단어, 찾고 싶은 단어가 있는 경우 해당 텍스트가 문구에 포함되어 있는지 확인할 수 있음 인자에 포함된 문자를 찾으면 이를 반환함. 해당 문자열.match('찾을 단어') # match() 함수 예제소스 var str = 'red is impressive.' str.match('red'); // red가 있으므로 red를 출력함 # 정규표현식을 사용한 match() 함수 예제 var test = 'love you. love me. love everything!' var regExp = /love/gi; test2 = test.match(regExp); g : 발생할 모든 pattern에 대한 전역 검색 i : 대/소문자 구분 안함 ['love', 'love',..