3기_주모

리액트에서 도넛 차트를 만들어보자 목차 도넛 차트 Canvas? DIV? SVG? stroke-dasharray stroke-dashoffset 직접 만들어보기 애니메이션 keyframes 도넛 차트 Canvas? DIV? SVG? 도넛 차트는 Ca…

목차 SVG란 viewBox란 의미 기본 예시 위치 조정 예시 확대, 축소 예시 SVG란 SVG에 대해서 간단하게 알아보자. SVG란 Scalable Vector Graphics의 약자로 , 다시 말해 이라고 할 수 있다. 여기서 이라는 의미는 우리…

팀 프로젝트 백중원에서 프론트앤드 배포 인프라로 AWS의 S3와 CloudFront를 사용하고 있다. 하지만 배포 과정에서 자동화가 적용되지 않은 상태라, 실제 서비스에 사용되는 브랜치나 브랜치가 최신화될 때 매번 수동으로 S3에 객체를 업로드하…

이 글은 webpack에 대한 기본적인 이해가 필요한 글입니다. 웹 애플리케이션을 제작하면서 HTML, CSS, JS와 더불어 아이콘, 사진, 비디오 등 다양한 Asset을 추가하게 된다. Asset Modules은 로더를 추가하지 않아도 이러한 a…

누구나 쉽게 읽을 수 있는 글입니다. 0. Intro 어느 조사에 따르면 이미지 파일은 6.3퍼센트만을 제외하고 모든 웹 사이트에서 사용된다. 그만큼 이미지는 사용자에게 친숙하고 당연히 있어야 할 것처럼 여겨진다. 이런 이미지 파일은 그 목적에 따라…

cypress에 대한 기본적인 이해가 필요한 글입니다. 0.Intro 바닐라 자바스크립트에서 cypress를 통해 테스트를 진행한 경험은 있지만, react에서는 아직 적용해보지 못했다. 이번에 프로젝트를 진행하면서 테스팅 도구를 고민하다가 cypr…

리액트를 사용할 수 있는 독자를 대상으로 작성한 글입니다. 0. Intro 프로젝트를 진행하면서 이미 친숙한 리액트를 포함하여 다양한 라이브러리들을 npm 또는 yarn으로 설치해서 이용합니다. 그렇다면 이런 라이브러리들은 어떻게 만들어지는 걸까요.…

바벨을 사용하는 게 익숙하지 않은 독자를 대상으로 작성한 글입니다. 0. Intro 보통 프로젝트를 시작하기 위해 초기 설정을 하며 바벨을 처음 만나게 됩니다. 필요하다고 하니깐 사용하기는 하는데, 초기 설정 이후 우리는 바벨을 잊곤 합니다. 어렴풋…

이번 글에서는 리액트에서 key를 사용하는 이유와 올바른 사용법에 대해서 알아보고자 한다. key를 사용하는 이유 간단한 이해를 위해서 다음과 같은 배열이 있다고 하자. 그리고 위 배열을 다음과 같이 렌더링 한다고 가정해보자. 이후 a, b, z, …