분류 전체보기 124

[JS] 배열에 요소 추가하는 방법⭐️⭐️

맨 뒤에 요소 추가 const arrLength = arr.push(item) 맨 앞에 요소 추가 const arrLength = arr.unshift(item) 두 배열 이어 붙이기 const newArr = arr1.concat(arr2, ..) https://www.freecodecamp.org/korean/news/javascript-array-insert-how-to-add-to-an-array-with-the-push-unshift-and-concat-functions/ Push, Unshift 및 Concat 메서드를 사용해 JavaScript 배열에 요소를 추가하는 방법 JavaScript 배열은 제가 가장 좋아하는 데이터 유형 중 하나입니다. 동적이고 사용하기 쉬우며, 프로그래머가 활용할..

A-HA💡/JS 2023.12.27

[JS] 배열에서 특정 값 찾는 방법 ⭐️

return array Array.filter((el, idx, arr) => el === value) return 주어진 정규식에 부합하는 배열 | [] 얕은 복사 return element Array.find((el, idx, arr) => el === value) return 주어진 값이 일치하는 첫번째 요소 | undefined return index Array.indexOf(value, fromIndex) return 주어진 값이 일치하는 첫번째 인덱스 | -1 Array.findIndex((el, idx, arr) => el === value) return 주어진 값이 일치하는 첫번째 인덱스 | -1 return boolean Array.includes(value, fromIndex) ret..

A-HA💡/JS 2023.12.22

[JS] HTML in JS (document 객체) 📌

document 우리가 JS에서 HTML에 접근할 수 있는 방법 브라우저에 이미 존재하는 객체 HTML이 app.js를 로드하기 때문에 존재하는 것 HTML은 CSS, JS를 가져와 브라우저와 연결해주는 접착제 같은 존재 HTML과 상호작용하기 위해 JS를 사용하고, HTML의 element들을 JS로 변경하고 읽을 수 있다. JS는 HTML에 접근하고 읽을 수 있다. + 변경 document.title document.title = "new title" JS는 HTML의 항목들을 읽어올 수 있고, 추가할 수 있다. document.body JS에서는 HTML을 표현하는 Object를 보여준다. 우리는 HTML에서 항목들을 가지고 와서, JS를 통해 항목들을 변경한다. Grab me! Grab me! c..

Front-end/Vanila JS 2023.12.21

[TS] HW - Polymorphism, Generic Type

Question Second Answer // 배열의 마지막 요소 반환 type lastItem = (arr: T[]) => T const last: lastItem = (arr) => arr[arr.length-1] console.log('last item', last([1, 2, 3])) // 배열 시작부에 item 삽입 및 반환 type fullArr = (arr: T[], item: T) => T[] const prepend: fullArr = (arr, item) => [item].concat(arr) console.log('prepend item', prepend([1, 2, 3], 0)) // 두 개의 배열을 섞어서 하나의 배열로 반환 type mixedArr = (arr1: T[], arr..

[TS] Polymorphism 다형성

in 그리스 poly : many, several, much, multi morpho- : form(형태), structure(구조), 모양 poly + morphos = many different structures.shapes.forms before type SuperPrint = { (arr: number[]): void (arr: boolean[]): void (arr: string[]): void (arr: number|boolean)[]): void } const superPrint: SuperPrint = (arr) => { arr.forEach(i => console.log(i)) } superPrint([1, 2, 3, 4]) superPrint([true, false, true]) su..

[TS] Why not JavaScript

∵ Type Safety (타입 안정성) → 확실한 버그 감소 1. 잘못된 코드 작성 불가 이 코드를 실행하면 런타임 에러가 발생할 것이라고 경고 2. 함수 파라미터 개수 검사 JS는 지나치게 유연해서 에러를 잘 보여주지 않음 // ex1 [1, 2, 3, 4] + false // '1,2,3,4false' // ex2 function divide(a, b) { return a / b } divide("xxxxxx") // NaN // ex 3 const a = { a: 'A' } a.hello() // 실행 후 에러 발생 그 중 최악은 런타임 에러 좋은 프로그래밍 언어는 잘못된 코드면 실행조차 안되고 컴파일 실패 코드가 실행되기 전 에러 경고 알림

웹1, 웹2, 웹3

https://kr.beincrypto.com/learn-kr/%EB%8B%B9%EC%8B%A0%EB%A7%8C-%EB%AA%A8%EB%A5%B4%EB%8A%94-%EC%9B%B92-0%EA%B3%BC-%EC%9B%B93-0-%EC%B0%A8%EC%9D%B4%EC%A0%90-%EC%A0%95%EB%A6%AC/ 당신만 모르는 웹2.0과 웹3.0 차이점 정리 웹3.0 공간에 수많은 빅테크 기업들이 진출하면서 웹3.0이 화제의 중심에 섰다. 하지만 웹3.0이란 도대체 무엇일까? 현재 인터넷 세대인 웹2와 어떻게 다를까? 이번 글에서는 웹2.0와 웹3.0의 차이점 kr.beincrypto.com

A-HA💡 2023.12.15

[JS] Conditionals 조건문

(legacy) prompt() 사용자의 답변을 받기 위해서, 브라우저로 할 수 있는 가장 직접적인 방법 사용자가 응답하기 전까지 코드의 실행을 멈추게 함 + CSS 적용할 수 없음 → 브라우저랑 JS는 여전히 지원하지만 사람들은 더 이상 쓰지 않는다. → 어떤 브라우저는 이런 팝업을 제한하기도 함 function은 내부에서 외부로 실행된다. isNaN() return boolean typeof 15 → number 👉 isNaN: false typeof '15' → string 👉 isNaN: true typeof parseInt('15') → number typeof parseInt('abcd') → NaN if - else if - else condition은 boolean 타입이어야함 if (co..

Front-end/Vanila JS 2023.12.15