개발공부/Javascript 8

[원티드 25.3 프리온보딩 3회차]타입 시스템, 테스트 코드 기준

📌 발표 요약 (타입 시스템과 트레이드오프)1. JavaScript vs TypeScript의 타입 시스템 비교구분JavaScriptTypeScript타입 시스템동적 타입 (Dynamic), 약타입 (Weakly Typed)정적 타입 (Static), 강타입 (Strongly Typed)타입 검사 시점런타임 (Runtime)컴파일 타임 (Compile Time)형 변환암묵적 형변환 허용 (암묵적 변환 다수)명시적 형변환 필요 (타입 명확)예시"2" + 3 // "23" (문자열 덧셈됨)add(2, "3") 에러 (형 일치하지 않음)결과 예측 가능성낮음 (예상 외의 결과 많음)높음 (형 검사로 안정성 확보)2. Typing - Static vs Dynamic / Strong vs Weak기준설명Stati..

[프로그래머스]옹알이(1)

https://school.programmers.co.kr/learn/courses/30/lessons/120956 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr내 답function solution(babbling) { var answer = 0; let count = 0 for(i=0;i  다른 사람 풀이(의도에 맞는) 더보기더보기function solution(babbling) { var answer = 0; const regex = /^(aya|ye|woo|ma)+$/; babbling.forEach(word => { if (regex.test(word)) answer+..

[Javascript]JavaScript 이터러블과 이터레이터

JavaScript에서 데이터를 순회할 때 이터러블(iterable)과 이터레이터(iterator) 개념을 이해하는 것이 중요합니다. for...of, 스프레드 연산자(...), Array.from() 등이 이터러블 프로토콜을 기반으로 동작하기 때문입니다. 오늘은 이터러블과 이터레이터의 개념부터, 내부 동작 방식, 그리고 실전 예제까지 확실하게 이해해보겠습니다! 🔥1️⃣ 이터러블(Iterable)과 이터레이터(Iterator)란?✅ 이터러블(Iterable) 객체이터러블 객체란 Symbol.iterator 메서드를 구현한 객체입니다. 즉, Symbol.iterator를 호출하면 이터레이터(Iterator) 객체를 반환해야 합니다.const myIterable = { data: ['A', 'B', 'C..

try catch finally 는 항상 비동기를 기다리지 않는다

개요JavaScript의 try...catch...finally 구문을 사용할 때, finally 블록이 항상 비동기 코드가 끝날 때 실행된다고 착각하는 경우가 많다. 하지만 finally 블록은 try가 종료되면 즉시 실행되며, 내부의 비동기 코드가 완료되길 기다리지 않는다. 이를 이해하지 못하면 로딩 상태 관리나 비동기 작업의 순서를 제어하는 데에서 문제가 발생할 수 있다.문제 상황아래의 슈도코드를 살펴보자. 이 코드는 네트워크 요청을 수행한 후, 데이터를 다운로드하는 동안 로딩 상태를 표시하려는 의도로 작성되었다.function downloadFile() { setLoading(true); // 로딩 시작 try { fetchDataFromServer() // 비동기 요청 .the..

ECMAScript 6

ECMAScript 2015로도 알려져 있는 ECMAScript 6는 ECMAScript 표준의 가장 최신 버전입니다. ES6는 새로운 언어 기능이 포함된 주요 업데이트이며, 2009년도에 표준화된 ES5 이후로 언어 기능에 대한 첫 업데이트이기도 합니다. 현재 주요 JavaScript 엔진들에서 ES6 기능들을 구현 중에 있습니다. ES6는 아래의 새로운 기능들을 포함하고 있습니다. const and let Arrow functions(화살표 함수) Template Literals(템플릿 리터럴) Default parameters(기본 매개 변수) Array and object destructing(배열 및 객체 비구조화) Import and export(가져오기 및 내보내기) Promises(프로미스..

DOM 이란?

DOM 이란? DOM 소개 - Web API | MDN 이 문서는 DOM에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 HTML, XML (en-US) 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 developer.mozilla.org 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 구조화된 nodes와 ..

번들링(Bundling)

정확하게 번들링이란 모듈들의 의존성 관계를 파악하여 그룹화시켜주는 작업을 뜻합니다. 모듈(module)이란 분리된 파일입니다. 즉, 분리된 녀석들을 하나로 합쳐주는 구나 라고 이해할 수 있습니다. https://lihano.tistory.com/17 번들링(Bundling)이란? 번들링(Bundling) 프로그래밍을 하다보면 자주 마주치는 단어 중에 번들링이란 단어가 있습니다. 번들이라는 것은 묶는다는 뜻으로 뭔가를 묶는 작업이라는 걸 이름에서 유추할 수가 있죠. 그렇다 lihano.tistory.com 그냥 모듈끼리 import하고 export하면 되지 번들링이 필요해? 라는 의문에는 이렇게 대답할 수 있습니다. - 하나. 여러 개의 파일을 브라우저에서 로딩한다면 네트워크가 그만큼 소모되어 속도가 저하..