본문 바로가기

자바스크립트 끄적끄적

(23)
자바스크립트는 왜 그 모양일까? 시작 이 책은 자바스크립트를 철저하게 ‘프로그래밍 언어’ 관점에서 접근하고 있다. 엔진이나 웹의 구동 환경 등을 다루지 않고, 언어 자체에 대해 모든 개발자가 알아야 할 것들을 다룬다. 오히려 배우는 사람이 그런 것을 알지 않기를 바란다. “언어의 간결하고 분명한 부분만 가까이 하라” 는 것이 필자의 주장이며, 자바스크립트는 그렇지 않은 부분이 충분히 많다. 책 전반에 걸쳐서 이야기하는 부분 중 하나가 “다음 세대의 프로그래밍 패러다임은 ‘분산 비동기 프로그래밍’ 이 될 것이다” 이다. 그리고 자바스크립트는 그 과도기적 언어로서 충실하게 역할을 수행하고 있다고 볼 수 있다. 챕터별 메모 너무 어려워서 개념적인 부분만 그리고 내가 납득 가능한건만 정리 했다. 납득이 가지 않거나 하는건 혹시 내가 이해를 제..
html 에서 html 로 데이터 보내기 with 바닐라 자바스크립트 # 리액트나 뷰 이런 프레임워크에서는 props로 데이터를 간단하게 보낸다. 그런데 문득 그러한 프레임워크를 쓰지 않고, 어떤 식으로 데이터를 보낼지가 궁금하다. 또한 가끔 일을 하다 보면 그러한 코드를 마주할 때가 있다. 그런 상황에서 좀 더 쉽게 어려움을 해결하고자 이 글을 정리한다. ## 들어가기에 앞서 우선 로컬스토리지, 세션, 쿠키로 저장해서 가져다 쓰는 방법은 언급하지 않겠다. 또한 서버가 있다고 가정하고 서버에 데이터를 보내고 받아오는 형식도 고려하지 않겠다. 단순히 두 html 간에 데이터를 간단하게 전송하고자할 때의 상황을 고려하겠다. #### 보내는 페이지: pageA.html Send Message from Page A ##### 설명 간단한 코드이다. sendButton을 id로 가..
커링 함수 커링(Currying)은 함수를 여러 인자를 받는 일련의 함수들로 변환하는 프로그래밍 기법입니다. 커링을 사용하는 이유는 여러 가지가 있습니다: // 주어진 함수 function sum(a, b, c) { return a + b + c; } // 커링 함수 정의 function curry(func, ...zeroth) { return function(...wunth) { return func(...zeroth, ...wunth); }; } // 커링 함수를 사용하여 부분적으로 값을 지정한 함수 생성 const curriedSum = curry(sum, 1); // 커링된 함수 호출 const result = curriedSum(2, 3); console.log(result); // 6 해당 커링 함수를 ..
[JSX] 자바스크립트 꿀팁 {addPackageMaps?.length > 0 && ( {'패키지'} {addPackageMaps?.map(({ brandName, partsName, partsCode, typeId }) => { return isServiced[typeId] === false ? ( {`${brandName} / ${partsName} / ${partsCode}`} ) : ( {`${brandName} / ${partsName} / ${partsCode}`} ); })} )} .map 같은 매서드를 써서 순회하면서 return을 하려고 할때 위에 처럼 분기 처리할 수 있다. const [isServiced, setIsServiced] = useState({}); if (addPackageMaps !== undefi..
타입스크립트 설명 1. 타입스크립트 개요 TypeScript는 JavaScript에 타입을 추가한 슈퍼셋(Superset) 언어입니다. TypeScript는 Microsoft에서 개발하고 관리하며, JavaScript의 기능을 확장하고 개선하여 JavaScript 개발자들이 타입 체크를 수행하고 오류를 더 쉽게 잡을 수 있도록 돕습니다. TypeScript는 JavaScript와의 호환성이 높으며, TypeScript로 작성된 코드는 JavaScript로 변환할 수 있습니다. 또한 TypeScript는 대부분의 개발 도구에서 지원되며, 코드 에디터에서 타입 체크와 코드 완성 기능을 지원합니다. TypeScript의 주요 기능은 다음과 같습니다. 1-1. 주요 기능 * 타입 시스템(Type System): TypeScrip..
자바스크립트로 csv 파일 읽기 방법 # csv 샘플은 해당 주소에서 다운 받으실 수 있습니다. # https://github.com/goodsosbva/JS_Algorithm-DataStructuer/blob/main/codingTest/BRIQUE/sample.csv GitHub - goodsosbva/JS_Algorithm-DataStructuer: 자바스크립트의 역량 강화를 위해 자료구조 & 알고리즘을 자 자바스크립트의 역량 강화를 위해 자료구조 & 알고리즘을 자바스크립트 복습 용도 저장소. Contribute to goodsosbva/JS_Algorithm-DataStructuer development by creating an account on GitHub. github.com # 목적: . fs모듈을 이용하여 csv 파일을 읽..
자바스크립트 Cannot read properties of null (reading 'classList') 에러 해결 방법 아래와 같은 에러가 뜨는 경우 Cannot read properties of null (reading 'classList') 위 에러의 원인은 스크립트 로드 우선순위가 잘못되었거나, 로드가 되지 않았거나, (ex. 태그(아이디, 클래스)를 제대로 찾지 못했거나 하는 경우 ) 이 부분을 체크해보면 해결 됩니다. Uncaught TypeError: Cannot set properties of null (setting 'innerText') 이런 것도 위에 상황과 마찬가지다. 아이디나 클래스 이름을 가지는 태그를 찾지 못하고, 넣으려고 해서 문제가 발생하는 것이다. const counter = document.querySelector("anything"); const counter = document.getE..
자바스크립트 배열 선언 및 초기화 시 편안한 방법 정리 /* Array.from()으로 길이가 5, 값이 0인 배열 생성하기 */ const arr = Array.from({length: 5}, () => 0); console.log(arr); // => Array(5) [0, 0, 0, 0, 0] console.log(arr[0]); // => 0 console.log(arr.length); // => 5 Array.from()의 첫번째 매개변수로 {length: 원하는 길이} 객체를, 두번째 매개변수로 원하는 값을 반환하는 콜백함수를 넘겨주면 된다. /* Array.from()으로 길이가 5, 값이 (0~5)인 배열 생성 */ const arr = Array.from({length: 5}, (v, i) => i); // i(index) 1씩 증가 cons..

728x90