Front-end/React

시작하기에 앞서 사용자의 프로필 사진 데이터를 아마존 S3에 이미지를 업로드 하여 사용하고 있었는데 이미지 업로드 시에 별도의 제한 없이 업로드할 수 있도록 생각했지만 서버에서 1MB 이상은 업로드할 수 없는 문제가 있었습니다. 업로드 가능한 용량을 프론트에서 제한하거나 서버에서 제한을 수정하는 것으로 문제를 해결할 수도 있겠지만 프로필 사진의 경우 항상 같은 크기로 사용자들에게 노출되며 그다지 큰 해상도가 필요하지 않았습니다. 따라서 큰 이미지를 굳이 서버에 저장하고 커다란 이미지를 내려 받는 것을 비효율적이라고 생각했습니다. 그러므로 이미지를 업로드하기 전 압축해서 서버에 업로드하도록 합시다! 이미지를 압축하는 방법은 여러가지 있습니다. 브라우저에서 이미지를 압축하는 방법과 서버에서 압축하는 방법에 ..

리액트에서 전역 상태 관리가 필요한 이유는 애플리케이션의 규모가 커지고 복잡해질수록 컴포넌트간의 데이터 공유와 상태 관리를 보다 효율적으로 처리하기 위해서입니다. 우리는 다양한 이유로 전역 상태 관리의 필요성을 느끼게 됩니다. 저는 주로 컴포넌트간의 데이터 공유와 복잡성 관리를 위해 사용한다고 생각했지만 조사해보니 보다 다양한 이유로 전역 상태 관리를 하고 있는 것을 알 수 있었습니다. 1. 컴포넌트간 데이터 공유 여러 컴포넌트에서 공통적으로 사용되는 상태가 있을 수 있습니다. 예를 들면 사용자 인증 정보, 로그인 상태, 언어, 테마, 설정 등 애플리케이션의 여러 곳에서 공유해야하는 데이터가 있을 때입니다. 2. 상태의 일관성 유지 리액트는 단방향 데이터 흐름을 가지고 있으며 그 방향은 하향식으로 고정되..

마치 텍스트 에디터에서처럼 커서가 깜빡이고 글자가 타이핑하여 입력하는 것처럼 보이도록 애니메이션을 만들어 보고자 했다. 개인적인 편의를 위해서 styled-components를 이용했으나 기본적인 CSS를 이해하고 있다면 쉽게 구현할 수 있다. 커서가 깜빡이는 것은 CSS를 이용하면 간단하다. 우선 keyframes을 선언하고, 이를 blink라는 id를 가진 태그에 적용해준다. 1초에 한번씩 무한히 순환되도록 하면 된다. const blinkAnimation = keyframes` 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } `; // 투명도를 세단계로 나눠서 순환시키는 것으로 깜빡이는 듯한 애니메이션을 연출할 수 있다. const StNa..

내가 만든 간단한 Todo List 앱은 새로고침/재접속 시에 초기화 된다. 별도의 DB를 사용하지 않고 브라우저 상에서만 데이터가 처리되기 때문이다. 데이터를 기억하기 위해서는 서버에 데이터를 보내서 DB에 저장하거나, 브라우저가 가지고 있는 임시 저장 공간에 저장하는 방법이 있다. 별도의 서버가 필요하지 않은 프로젝트이고 사용할 데이터양이 많지 않으므로 Local Starage에 데이터를 저장해서 사용할 수 있도록 하였다. Session Storage는 브라우저를 종료하면 데이터가 사라지는 휘발성 저장공간이다. Local Starage는 브라우저를 청소하지 않는 이상 사라지지 않는다. 브라우저마다 다르지만 약 5MB 정도의 텍스트를 저장할 수 있다. Local Storage 사용하기 데이터 저장 방법..