이론/Frontend76 Canvas API 사용해보기 이번에 사이드 프로젝트를 다시 설계하는 작업을 진행하며 처음으로 Canvas API를 직접 사용하게 되었습니다. 이전에는 라이브러리를 통해 Canvas를 간접적으로 다루어 잘 몰랐었는데, 참 특이하면서도 재미있는 API라는 생각이 들었습니다. 이번 포스트에서는 Canvas API의 기본적인 사용법부터 사용하면서 직접 겪었던 문제들까지 함께 공유해보도록 하겠습니다. Canvas API Canvas API는 주로 2D 그래픽 요소를 그리기 위해 사용됩니다. 간단한 도형 뿐 아니라 이미지를 추가하거나 편집하는 용도로도 많이 사용되며, jpg, png, base64 등 다양한 형식으로 출력이 가능합니다. 예시로 이렇게 사용할 수 있습니다. HTML Javascript const canvas = document... 2022. 12. 9. Context API 개념 잡기 리액트의 데이터 전달 방식 리액트는 컴포넌트 사이의 데이터를 전달할때 Props라는 이름의 속성을 사용합니다. 이 Props는 부모 컴포넌트에서 자식 컴포넌트 방향으로만 전달되는 특징이 있는데, 이 덕분에 리액트는 단방향 데이터 바인딩 구조를 형성할 수 있게 됩니다. 이러한 단방향 데이터 바인딩은 데이터의 흐름을 추적하기 쉽고 디버깅이 편하다는 장점이 있지만, 단점이 하나 있습니다. 바로 아래와 같은 경우입니다. 부모 컴포넌트에 있는 데이터가 아래쪽에 있는 컴포넌트에서도 필요한 경우, 해당 데이터를 한 번에 전달해 줄 방법이 없고 그 사이에 있는 모든 자식 컴포넌트들을 거쳐서 전달해야합니다. 이런 데이터들이 많아질수록 컴포넌트의 인자들은 각종 Props들로 자연스럽게 두툼해지기 마련이죠. 이렇게 많아진 .. 2022. 11. 22. Recoil + React-query 삽질기 이 글은 모두 모여라 기술 블로그에도 업로드 되었습니다. 현재 진행하고 있는 프로젝트의 스프린트가 마무리 되고, 본격적인 유지보수와 리팩토링 작업에 들어갔습니다. 시간적인 여유가 생겨 사용되고 있는 기술 스택들을 깊게 공부해보며 발견했는데 현재 사용중인 라이브러리들 중 라이브러리가 추구하는 방향 또는 기능과 일치하지 않는 부분을 발견하였습니다. 무엇인가 이상한 점을 느껴 전체적인 데이터 관리 플로우를 점검해보았는데, 나름 잘 사용하고 있었다는 초기의 생각과는 달리 데이터 관리의 일관성이 무너진 상태였습니다. 저희 팀이 처음보는 라이브러리를 사용하며 어떤 착각을 했었는지, 그 실패의 경험을 글로 옮겨보려합니다. 무엇이 문제였을까? 문제가 되는 라이브러리는 프로젝트의 상태 관리를 담당하는 recoil과 통신.. 2022. 10. 28. 자바스크립트의 index.js 우리가 자바스크립트를 사용하여, 정확히는 노드를 이용하여 프로젝트를 만들다보면 굉장히 독특한 파일 시스템 규칙 하나를 자연스레 발견하게 됩니다. 바로 index 파일입니다. index란? 사전에서의 색인과 같은 의미로 프로그래밍에서 널리 사용되는 단어입니다. 메모리 구조 상의 위치를 나타낼때도 많이 사용되고, 반복문의 카운트에 자주 사용되는 i 가 바로 "index" 의 약어입니다. 이렇게 사용하는 인덱스가 자바스크립트에서는 조금 다른 용법으로 쓰이기도 합니다. index를 이용한 간결한 import / export 이러한 파일 구조를 가진 프로젝트가 있다고 하겠습니다. 현재는 많은 파일을 불러오지 않아 import 구문이 그다지 길지 않습니다. 그러나 프로젝트가 점점 복잡해지며 점점 많은 모듈을 불러오.. 2022. 8. 23. JSX 알아보기 JSX는 리액트를 사용한다면 많은 분들이 익히 만나보셨을 문법입니다. 저도 리액트 프로젝트를 하며 당연하게 사용하고 있지만 안타깝게도 JSX가 무엇인지, 정확히 어떤 역할을 하고 있는지는 잘 모르고 있습니다. 오늘은 공식 문서와 몇 가지 예제를 통해 JSX에 대해 조금 더 깊게 알아보겠습니다. JSX가 왜 필요할까요? const element = Hello, world!; 위 코드는 공식 홈페이지에 기재된 가장 간단한 JSX 예시입니다. 변수 element에 할당된 태그로 감싸진 구문이 바로 우리가 알고있는 JSX입니다. 잠시 리액트가 아닌, 순수한 자바스크립트를 사용하던 시절로 돌아가보겠습니다. 우리의 프로젝트는 대략 이런 방식을 따라 흘러가게 됩니다. 자바스크립트 파일이 정적인 HTML, CSS 문서.. 2022. 7. 24. React.Memo 사용하기 React의 컴포넌트는 props라고 하는 입력을 받아 화면을 나타내는 JSX 엘리먼트를 반환합니다. 이러한 컴포넌트의 조합을 통해 우리가 보는 페이지를 구성하고, 하나의 완성된 결과물을 출력할 수 있게 됩니다. 리액트는 상황에 따라 다양한 화면을 보여주기 위해 지속적으로 컴포넌트를 갱신하는데, 이를 리렌더링이라고 합니다. 리렌더링 덕분에 컴포넌트는 정적인 반환에서 벗어나 많은 역할을 할 수 있었습니다. 컴포넌트가 사용자가 원하는 화면을 반영하려면 언제 리렌더링이 일어나야 할까요? 가장 확실한 방법으로는, 매 밀리초마다 컴포넌트를 렌더링 하면 정보의 누락없이 항상 최신 상태의 컴포넌트를 보여줄 수 있습니다. 하지만 그 방법은 너무 많은 리렌더링이 일어나고, 많은 리렌더링은 나쁜 사용자 경험으로 이어지기 .. 2022. 7. 11. 이전 1 2 3 4 5 6 7 8 ··· 13 다음
