REACT

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

문제 숫자를 넣었을 때, 3자리 수마다 콤마 ','가 찍히는 input을 구현하는 중에 느닷없는 도전과제가 발생했다. 일반적으로 사용하는 수는 16자리 이내이기 때문에 아래의 코드로도 충분히 동작하지만 아래 코드는 치명적인 문제가 하나 있었다. 입력된 숫자의 길이가 16을 넘어가면 값이 뭉개지는 문제가 있다. 지수형 값으로 변환되어 발생하는 것으로 예를 들어 “1234567890123456789” 라는 숫자를 입력한 경우 “1,234,567,890,123,457,000”로 출력된다. // 값이 변경되면 저장하는 함수, 천단위마다 ','를 입력함 const priceChangeHandler = function (event) { let inputPrice = event.target.value.replace(..

드디어 주특기 입문 주차에 진입했다. 그동안 배운 것은 모두 이번 주를 위한 준비엿다. 드디어 리액트라고하는 주특기의 상자를 열어보는 날이 찾아온 것이다. 리액트는 메타(구 페이스북)에서 설계한 오픈 소스 JavaScript 라이브러리입니다. UI, UI 구성요소를 구축하는데 사용됩니다. SPA(Single Page Application) 아키텍쳐 한 개의 페이지로 이루어진 애플리케이션으로 MPA(Multi Page Application)과는 상반된 개념입니다. 리액트는 SPA 기반의 프론트엔드 개발 프레임워크 중 하나로써 컴포넌트 단위의 독립적인 블록을 이용한 개발 방법을 이용합니다. SPA의 장점과 단점 SPA는 많은 장점을 가지고 있습니다. 대표적인 장점은 다음과 같습니다. 빠른 사용자 경험: SP..

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