하얀 코딩

styled-components에서 keyframes 함수를 사용하여 CSS 애니메이션을 정의할 수 있습니다. keyframes 함수를 사용하면 애니메이션의 이름과 애니메이션 키프레임을 정의할 수 있습니다. import styled, { keyframes } from 'styled-components'; // keyframes로 회전 애니메이션 정의 const rotateAnimation = keyframes` 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } `; // 애니메이션을 적용할 컴포넌트 const AnimatedDiv = styled.div` width: 100px; height: 100px; background-colo..

styled-components의 attrs 함수를 사용하면 스타일 컴포넌트에 속성(attribute)을 추가할 수 있습니다. 이를 통해 스타일 컴포넌트에 동적인 속성을 전달하고, 해당 속성에 기반한 스타일을 정의할 수 있습니다. attrs 함수는 첫 번째 매개변수로 속성을 포함한 객체를 받습니다. 각 속성은 이름과 값을 가지며, 해당 속성을 스타일 컴포넌트에 전달할 때 사용됩니다. import styled from 'styled-components'; const Input = styled.input.attrs( { type: 'text', placeholder: "Enter text" } )` padding: 10px; border: 1px solid #ccc; `; const App = () => {..

활용하기 1 Styled Component로 만든 컴포넌트도 React 컴포넌트처럼 props를 내려줄 수 있습니다. 내려준 props 값에 따라서 컴포넌트를 렌더링 하는 것도 가능합니다. Styled Components는 템플릿 리터럴 문법(${ })을 사용하여 JavaScript 코드를 사용할 수 있습니다. props를 받아오려면 props를 인자로 받는 함수를 만들어 사용하면 됩니다. 활용하기 2 Styled Component로 만든 컴포넌트도 React 컴포넌트처럼 props를 내려줄 수 있습니다. 내려준 props 값에 따라서 컴포넌트를 렌더링 하는 것도 가능합니다. 위 코드의 경우는 삼항 연산자를 활용해 컴포넌트에 skyblue라는 props가 있는지 확인하고, 있으면 배경색으로 skyblue..

CSS 코드를 다룰 때 다음과 같은 불편함을 느껴보신 적 있으신가요? class, id 이름을 짓느라 고민한 적이 있다. CSS 파일 안에서 내가 원하는 부분을 찾기 힘들었다. CSS 파일이 너무 길어져서 파일을 쪼개서 관리해 본 적이 있다. 스타일 속성이 겹쳐서 내가 원하는 결과가 나오지 않은 적이 있다. 이 외에도 여러 가지 어려움이 있을 수 있는데요. 이런 불편함을 CSS를 컴포넌트화 시킴으로써 해결해 주는 라이브러리가 있습니다. 바로 React 환경에서 사용 가능한 Styled Components라는 라이브러리입니다. Styled Components는 앞서 배운 CSS in JS라는 개념이 대두되면서 나온 라이브러리입니다. 기존에 HTML, CSS, JS 파일로 쪼개서 개발하던 방법에서, Reac..

async async는 function 앞에 위치합니다. async function f() { return 1; } function 앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환합니다. 프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스(resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 합니다. await // await는 async 함수 안에서만 동작합니다. let value = await promise; 자바스크립트는 await 키워드를 만나면 프라미스가 처리될 때까지 기다립니다. (await '기다리다’). 결과는 그 이후 반환됩니다. 1초 후 이행되는 프라미스를 예시로 사용하여 await가 어떻게 동작하는지 살펴봅시다. async function f() { ..

Promise.prototype.all() let promise = Promise.all([...promises...]); Promise.all()은 여러 개의 비동기 작업을 동시에 처리하고 싶을때 사용합니다. 인자로는 배열을 받습니다. 해당 배열에 있는 모든 Promise에서 executor 내 작성했던 코드들이 정상적으로 처리가 되었다면 결과를 배열에 저장해 새로운 Promise를 반환 해줍니다. 앞서 배운 Promise chaining을 사용했을 경우는 코드들이 순차적으로 동작되기 때문에 총 6초의 시간이 걸리게 됩니다. 또한, 같은 코드가 중복되는 현상도 발생하게 됩니다. // Promise chaining을 사용 const promiseOne = () => new Promise((resolve,..

본 내용은 Promise 개념의 내용을 포함하고 있지 않습니다. Promise를 모른다면 다음 사이트에서 Promise의 개념을 이해하고 보시길 바랍니다. [JavaScript - 21] Promise Promise 비동기로 작동하는 코드를 제어할 수 있는 다른 방법 중 Promise를 활용하는 방법이 있습니다. Promise는 class이기 때문에 new 키워드를 통해 Promise 객체를 생성합니다. 또한 Promise는 비동기 처 white120.tistory.com Promise.prototype.then() executor(실행자)에 작성했던 코드들이 정상적으로 처리가 되었다면 resolve 함수를 호출하고 then()으로 접근할 수 있습니다. 또한 then() 안에서 리턴한 값이 Promise..

Promise 비동기로 작동하는 코드를 제어할 수 있는 다른 방법 중 Promise를 활용하는 방법이 있습니다. Promise는 class이기 때문에 new 키워드를 통해 Promise 객체를 생성합니다. 또한 Promise는 비동기 처리를 수행할 콜백 함수(executor)를 인수로 전달받는데 이 콜백 함수는 resolve, reject 함수를 인수로 전달받습니다. let promise = new Promise((resolve, reject) => { // executor(실행자): 여기에는 개발자가 수행할 작업을 알아서 코딩합니다. resolve(1); // 일이 성공적으로 끝난 경우 그 결과를 나타내는 1 값과 함께 호출을 표현했다. reject(error); // 실패 했을 경우 에러 객체를 나타..