bravo my life!

1. 개요 replace는 특정 문자열을 찾고, 내가 지정한 문자열로 변경하는 함수다. 특정 문자열을 찾을 때 동일한 문자열이 여러개라면 첫번째로 검색된 문자열만 변경이 된다. 이런 경우에는 정규식을 통해 검색된 모든 문자를 변경할 수 있다. 2.기본 사용 replace('찾을 문자열', '변경할 문자열') let string = 'hello world, JavaScript' string.replace('Java', 'Type') // 기대값 // string = 'hello world, TypeScript' 특정 문자열이 여러개라면 첫번째로 검색된 문자열만 변경이 된다. let string = 'hello world, JavaScript, JavaScript, JavaScript' string.repl..

Set 객체 자바스크립트의 표준내장객체로 원시값, 객체 모두 유일한 값을 저장할 수 있다. 사용 수단중 하나로 중복을 제거한 값을 저장하는 방법으로 사용될 수 있다. 사용방법 let numberArr = [39, 40, 41, 0, 1, 2, 40, 41, 0, 1] //중복된 값이 존재한다. 39, 40, 41, 0, 1 let newArr = new Set(numberArr) //기대값 //Set(6) { 39, 40, 41, 0, 1, 2 } let newArr = new Set(numberArr).size //Set의 요소의 개수는 .size를 사용한다. //기대값 //6 let newArr = new Set(numberArr).add(99) //Set의 요소의 추가는 .add를 사용한다. //기..

1. 개요 연속되는 요소가 있고 그 요소들의 CSS 속성을 다르게 지정하고 싶을 때, child 선택자를 사용하여 CSS의 속성을 다르게 줄 수 있다. 2. child 선택자의 종류 only-child 자식요소가 하나인 경우 적용이 된다. first-child 자식요소가 여러개인 경우 가장 첫번째 자식요소가 선택이 된다. last-child 자식요소가 여러개인 경우 가장 마지막 자식요소가 선택이 된다. nth-child() 자식요소가 여러개인 경우 소괄호 안에 지정한 숫자에 대응하는 순서인 요소가 선택이 된다. nth-last-child() 자식요소가 여러개인 경우 소괄호 안에 지정한 숫자에 역순으로 대응하는 순서인 요소가 선택이 된다. 이번 포스팅에서는 last-child를 다루어 보겠다. 3. 사용법..

1. 데이터 타입 JavaScript가 어떠한 데이터를 처리함에는 규칙이 존재한다. 기본적으로 지켜야 할 것은 데이터 타입을 지켜줘야 하는 것인데, 사용되는 데이터의 타입은 아래와 같다. ⚬ 원시데이터 - boolean - null - undefinded - number - string - symbol ⚬ object JavaScript를 하며 대표적으로 사용할 것은 number, string일 것이다. 2. number, string 숫자열이, 문자열이라고도 한다. 숫자열의 가장 큰 특징은 연산이 가능한 것이다. console창에 alert(1+1) 을 입력해보자. 브라우저에서 경고창이 뜨고 내용으로는 2가 표시될 것이다. alert의 인자로 숫자열을 입력했기 때문에 연산의 결과가 표시되는 것이다. 문..

앞으로 JavaScript를 배워보려 한다. 기초라 생각하고 가볍게 넘어간 부분이 너무 많기 때문에 복습겸 공부를 시작했다. 1. JavaScript? 유저와의 상호작용을 위한 언어. HTML은 정적인 언어이기 때문에 유저에게 정보를 전달하는 기능으로 제한된다. 하지만 JavaScript는 동적인 언어이기 때문에 유저와 상호작용을 하고 유저가 적극적으로 웹을 조작할 수가 있다. 2. 상호작용은 어떻게? 유저와 상호작용할 수 있는 이벤트는 여러가지가 있다. 그 중 가장 기본적인 세가지는 다음과 같다. onclick(): 클릭을 감지하는 속성. onchange(): 내용의 변경을 감지하는 속성. onkeydown(): 키보드의 키 입력을 감지하는 속성. 3. JavaScript의 작동은 브라우저에서 확인이 ..

1. 프로젝트 디렉토리 생성. 2. VSCODE에서 생성한 디렉토리 열 것. 3. 터미널을 켠다. 4. npm init -y를 입력하고 package.json 파일을 생성한다. 5. 생성한 package.json을 다음과 같이 편집한다. 6. npm i -D typescrip를 입력하고 typescript를 설치한다. -D를 입력했기 때문에 devDependency에 설치된다. 7. 루트폴더에 tsconfig.json이라는 파일을 생성하고 다음과 같은 내용을 입력한다. 8. package.json으로 돌아와서 아래의 내용을 추가한다. 9. 루트폴더에 src폴더를 만들고 src 폴더안에 index.ts파일을 만든다. index.ts 내용은 간단하게 테스트용으로 다음과 같이 작성한다. 10. 터미널에 npm..

1. Call Signatures : 미리 type을 선언하자 Call Signatures란 위의 사진처럼 편집기 상에서 함수나, 변수, 인수 등등에 마우스 커서를 올리면 볼 수 있는 말풍선안의 내용을 말한다. 함수를 어떻게 호출 할 수 있는지 알려주는 용도로 사용하는 기능이다. 타입스크립트를 사용하다 보면 타입을 일일히 명시하지 않아야 하는 상황이 생긴다. 위의 사진을 예로 든다면 변수명은 다르지만 변수의 내용이 같은 코드가 무수히 반복되는 경우가 있을 수 있다. 이럴 때에 Call Signatures를 사용하여 미리 선언을 해둔다면 컴포넌트를 재활용하는 것과 같은 느낌으로 타입 선언을 사용할 수 있다. 미리 선언된 타입을 변수에 지정해 주었다. 이렇게 내용이 같은 다른 변수들에도 같은 타입을 지정해 ..

1. unknown으로 변수의 타입을 미리 알 수 없을 때를 대비하자. 내가 받아올 타입을 당장 알 수 없을 때 unknown을 사용한다면 어느정도 대비가 가능하다. let a: unknown; let b = a + 1; 위와 같은 코드를 작성한다면 오른쪽 사진과 같은 오류를 알려주는데 unknown을 사용하는 방법이 잘 못 되었기 때문이다. let a: unknown; if (a === "number") { let b = a + 1; } if (a === "string") { let b = a.toUpperCase(); } 이처럼 unknown으로 타입을 지정해 두었다면 나중에 "알게 되었을 때"의 조건을 만들어 줘야 한다. 2. 아무것도 return하지 않을 때는 void. function hello..

1. readonly로 읽기 전용 타입을 만들 수 있다. readonly 속성을 지정하게 된다면 속성이 적용된 타입이 실수로 수정되는 것을 막아준다. 불변성이 생기게 되는 것이다. type Name = string; type Age = number; type Player = { readonly name: Name; age?: Age; }; const playerMaker = (name: string): Player => ({ name, }); const pjm = playerMaker("pjm"); pjm.age = 12; pjm.name = "lkjj" 배열에도 적용이 가능하다 const numbers: readonly number[] = [1, 2, 3, 4]; numbers.push(1) array..

1. 선언할 수 있는 타입들. 굉장히 많은 타입들을 선언할 수 있다. 많은 타입을 지정할 수 있으니 다른 것들은 차차 알아가 보기로 하고, JsvaScript를 사용해 보았다면 알만한 number, string, boolean을 먼저 공부해 보았다. 타입을 선언할 때는, const a: string = "Tom" 이런식으로 타입을 선언 할 수 있다. 또 각각의 타입을 배열로 지정할 수가 있는데 타입명 뒤에 []을 사용하면 가능하다. 예. string[] 2. 타입 선언을 한다면 보다 더 컴퓨터와의 대화에 가까워진다. 깊이 들어가보자. 객체로 타입을 선언하고 싶다면 const player : object = { name : "pjm" } player.name 이 방법을 생각했지만 틀린 방법이었다. 우측 사..