아카이브

JavaScript의 객체에서는 속성 이름에 표현식을 사용할 수 있습니다. 이를 계산된 속성명(computed property name)이라고 합니다. 사용하고자 하는 표현식을 대괄호 [ ] 로 감싸서 사용하면, 그 표현식의 결과로 나오는 값이 속성명으로 들어가게 됩니다. 함수 또한 표현식으로 나타낼 수 있으므로, 그 반환값이 속성명으로 들어가게 됩니다.const attr1 = 'a' + 'b';const attr2 = () => "cd";const obj = { [attr1]: 1; // "ab": 1 [attr2]: 'ace'; // "cd": 'ace'}이는 객체의 속성값을 호출할 때도 동일하게 사용할 수 있습니다.console.log(obj.[attr1]); // "ab"

JavaScript에서 배열은 call-by-reference입니다. 따라서, 배열을 담은 변수는 배열의 값들 자체가 아닌, 배열을 가리키는 주소값을 담고 있습니다. 때문에 배열을 담은 변수를 다른 변수에 할당하면, 주소값을 할당받아 같은 배열을 공유하게 됩니다.const lst1 = [1, 2, 3];const lst2 = lst1;lst1.push(4); // lst1에 4를 추가console.log(lst1); // [1, 2, 3, 4]console.log(lst2); // [1, 2, 3, 4]따라서 주소값을 공유하지 않는 완전히 새로운 배열로 복사하려면, 동일한 요소로 구성된 리스트를 새로 선언해야 합니다. 이 때 유용한 문법이 spread입니다. Spread를 사용하면 배열의 값을 펼쳐..

Arrow function은 ES2015부터 새로 추가된 함수 선언 방식입니다. 기존의 function 예약어를 사용해 선언하던 함수를 다음과 같이 선언할 수 있습니다.// 이 함수와const func = function(arg) { return arg * 2;}// 이 함수는 동일합니다.const func = (arg) => { return arg * 2;}만약 받는 매개변수가 하나 뿐이라면, 매개변수의 괄호( )를 생략할 수 있습니다.const func = arg => { return arg * 2;}만약 함수 부분이 return 문 하나로만 구성되어 있다면, 함수 부분의 중괄호{ }도 생략할 수 있습니다.const func = (arg) => arg * 2;단, 객체를 반환할 때는 ..

1. argumentargument는 함수에서 가변적인 매개변수들을 받아 접근할 때 사용할 수 있습니다. argument는 유사 리스트의 형태로 반환되어 리스트와 관련된 메소드를 사용할 수는 없습니다. 단, argument.length와 argument[0] 등의 인덱스 접근은 가능합니다.const func1 = (arg1, arg2) => { console.log(arg1); console.log(arg2);}func1(1); // 1, undefinedfunc1(1, 2); // 1, 2func1(1, 2, 3); // 1, 2 (3은 출력되지 않음)const func2 = (arg1, arg2) => { for (const arg of arguments){ ..

JavaScript에서는 and(&&)와 or(||) 연산을 할 때 첫 번째 값에 무엇이 오느냐에 따라 출력값이 달라집니다.operand 1operand 2ANDORTruthyTruthy operand 2operand 1TruthyFalsyoperand 2operand 1FalsyTruthyoperand 1operand 2FalsyFalsyoperand 1operand 2그리고 이를 이용하여 특정 변수에 기본값을 지정하는 코드를 작성할 수도 있습니다.const perhapsNull = null;// perhapsNull이 false라면 'notNull'을, true라면 perhapsNull을 반환합니다.const value = perhapsNull || 'notNull';여기서 true / false 값..

JavaScript를 다루다보면 es6 혹은 es 접두사가 붙은 용어를 볼 수 있습니다. 이 es는 ECMA Script의 약어로, ECMA에서 명시한 문서자료를 가리킵니다.ECMA?ECMA(또는 Ecma) international은 정보와 통신 시스템을 위한 국제적 표준화 기구입니다. JavaScript는 그 역사가 오래된 만큼, 시간이 지남에 따라 많은 부분이 수정되어 왔습니다. Ecma international은 이러한 수정 사항들을 Ecma-262라는 이름의 문서에서 기록/관리해오고 있습니다. 이 문서에 기반한 언어 지침을 Ecma Script, 즉 ES라고 합니다.ES는 개정판이 나오면서 넘버링을 부여했고, ES1에서 시작해 2015년 ES6가 출시된 후로는 넘버링 대신 매 년도를 버전 이름으로..

Solid-Meta와 Solid-Router를 사용합니다.App.tsximport Pages from './pages';const App: Component = () => { return ( );};/Pages/index.tsxconst Pages = () => { return ( {/* ... */} )}export default Pagesindex.tsx 파일이 있다면 다른 곳에서 Pages 폴더만 호출해도 index.tsx가 기본 파일로 호출되기 때문에, Pages 컴포넌트를 불러올 수 있습니다.

Solid-Router는 React Router를 기반으로 한 패키지로, DOM 구조에서 URL 주소를 기반으로 한 페이지 전환을 위해 설계된 패키지입니다. 이를 통해 Solid에서 여러 개의 페이지를 가진 DOM 구조를 구현할 수 있습니다. Solid-Router의 컴포넌트들은 아래와 같이 호출할 수 있습니다.import { A, HashRouter, MemoryRouter, Navigate, Route, Router } from "@solidjs/router";1. Router & HashRouter라우팅을 구성하는 최상단 컴포넌트입니다. Route들을 포함하는 wrapper역할을 합니다. {/* routes */}만약 URL에 해시값이 포함되어 있다면, HashRouter를 사용합니다. {/* ro..