[JS] Library | 01. Superstruct
·
Language/JavaScript
https://docs.superstructjs.org/ Introduction | SuperstructIntroduction Superstruct makes it easy to define interfaces and then validate JavaScript data against them. Its type annotation API was inspired by TypeScript, Flow, Go, and GraphQL, giving it a familiar and easy to understand API. But Superstruct is desigdocs.superstructjs.org Superstruct는 특정 데이터가 의도된 형식으로 작성되어 있는지 확인하는 유효성 검사를 도와주는 패키지입..
[JS] Syntax | 09. Promise.all()
·
Language/JavaScript
.all()은 여러 개의 Promise를 일괄적으로 처리할 때 사용합니다..all의 인자로는 Promise 객체의 배열 등을 넘겨줄 수 있습니다.const promises = []const asyncFunc = async (i) => { const res = await fetch(`http://.../${i}`) console.log(res)}for (let i=0; iPromise.all()은 배열의 모든 Promise가 fufiled 상태가 될 때 fulfiled 상태가 됩니다.만약 하나 이상의 요소가 rejected 상태가 된다면, Promise.all() 역시 rejected가 됩니다.
[JS] Syntax | 08. .then()
·
Language/JavaScript
1. .then().then은 Promise를 반환하는 작업이 끝난 뒤 작업을 이어 할 수 있게 해주는 구문입니다.사용할 때는 목표하는 함수 뒤에 .then()을 붙이고, 이어서 할 작업을 인자로 넘겨줍니다.const thenFunc = () => { fetch("https://something.com") .then(console.log("fetch done")) // fetch()가 끝난 뒤 이어할 작업을 작성합니다.}then에서 작성할 작업에서 이전 함수(여기서는 fetch입니다)의 결과값을 사용해야 한다면,아래와 같이 함수의 매개변수로 넘겨줄 수 있습니다.const thenFunc = () => { fetch("https://something.com") .then((res) => re..
[JS] Syntax | 07. await & async
·
Language/JavaScript
1. awaitawait은 Promise를 반환하는 함수가 일을 모두 끝마치고 그 결과값을 반환할 때까지 대기하는 구문입니다.// fetch는 promise를 반환합니다.const response = await fetch('https://...')// response.json도 promise를 반환합니다.const data = await response.json()비동기 함수가 작동하는 동안, Promise는 세 가지 상태를 가집니다. Pending은 함수의 일이 마칠 때 까지 대기하고 있는 상태입니다.Fulfilled는 함수의 일이 모두 끝마치고 결과를 반환한 상태입니다.Rejected는 함수가 오류로 인해 일을 끝마치지 못한 상태에서 종료된 상태입니다. 여기서 await 구문은 pending 상태의 ..
[JS] Syntax | 06. Promise
·
Language/JavaScript
콜백(Callback)은 함수의 매개변수로 또 다른 함수로 전달하는 것입니다.콜백은 비동기 처리가 가능하다는 장점이 있지만, 콜백 헬 현상이 나타날 수도 있다는 단점 또한 존재합니다.이 문제를 해결하기 위해 사용하는 문법이 Promise입니다. Promise는 비동기 작업이 완료되면 값을 알려주는 객체입니다.작업이 완료되면 값을 알려줄 것을 '약속'하기 때문에 promise라고 부릅니다.fetch(links.requestToServer, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(this.sampleData),}).then((res) => res.json()) .then((..
[JS] Syntax | 05. Callback
·
Language/JavaScript
콜백(Callback)은 함수의 매개변수로 또 다른 함수로 전달하는 것입니다.이렇게 전달되는 매개변수 함술를 콜백함수(callback function)라고 합니다. 콜백 함수를 매개변수로 전달할 때는 괄호() 없이 이름만 입력하며,함수내에서는 일반 함수를 사용할 때와 동일하게 사용할 수 있습니다.function a(){ console.log('this is function a');}function b(){ console.log('this is function b');}function printFunc(func){ func(); // 일반 함수처럼 호출합니다.}// 인자로 함수 a, b를 넘겨줍니다.printFunc(a);printFunc(b);새로 선언할 필요 없는 간단한 함수의 경우, arrow fun..
[Solid] Solid Start에 대해서
·
Frontend/SolidJS
Solid Start는 Vinxi를 사용하는 SolidJS기반의 오픈소스 프레임워크입니다. Solid Start는 다양한 종류의 템플릿을 제공하기 때문에, 사용자의 용도(SSR, CSR, SSG 등)에 따라 적절한 도구를 불러와 사용할 수 있습니다. ※ Vinxi : 풀스택 JS SDK의 한 종류 Solid Start에 대한 자세한 가이드는 아래에서 확인할 수 있습니다.https://docs.solidjs.com/solid-start/getting-started Getting started - SolidDocs? Which template do you want to use? › - Use arrow-keys. Return to submit.docs.solidjs.com
[Solid][CSS] SolidJS에서 macaron 사용하기
·
Frontend/SolidJS
SolidJS 환경에서 Macaron js를 설치해서 사용하는 방법입니다.자세한 내용은 공식 사이트에서 확인할 수 있습니다.https://macaron.js.org/docs/installation macaron — Colocated CSS-in-JS with zero-runtimeTypesafe CSS-in-JS with zero runtime, colocation, maximum safety and productivity. Macaron is a new compile time CSS-in-JS library with type safety.macaron.js.org 1. 라이브러리 설치설치를 원하는 프로젝트 폴더에서 다음 명령어를 실행합니다.# npmnpm install @macaron-css/core ..