리액트

React 라이브러리 리액트는 오픈소스 자바스크립트 라이브러리로 2013년 페이스북(현재 Meta)에 의해 개발되었다. 리액트를 사용할 때 가장 큰 특징은 개발자가 사용자와 소통할 수 있는 사용자 인터페이스(UI)를 훨씬 쉽고 간편하게 개발할 수 있다는 점이다. 리액트를 사용하는 이유단순히 바닐라 자바스크립트로 웹 페이지를 개발한다면 코드가 상당히 길어지고 개발자는 같은 코드를 여러 번 작성해야 하는 불편함을 겪는다. 이런 경우에 리액트와 같은 자바스크립트 라이브러리를 사용한다면 더욱 편리하게 사이트를 개발할 수 있다. 이와 같이 사용자 인터페이스를 개발하는 데에 도움이 되는 라이브러리 또는 프레임워크에는 React 뿐만 아니라 Angular, Next.js, Vue.js 등이 있다. 리액트의 특징1. ..

폰트 깜빡임 현상(Flash of Unstyled Text) 웹에서 @font-face를 사용하여 폰트를 설정할 때 렌더링이 일어날 때마다 브라우저가 해당 폰트를 다운로드하기 전에 기본 폰트를 잠시 표시했다가 커스텀 폰트가 표시되는 현상이다. 마치 폰트가 잠시 깜빡이는 것처럼 보인다.  그동안 웹 페이지를 무수히 이용하면서 이런 현상을 자주 마주했기 때문에 고칠 수 없는 웹 페이지 현상으로 이해하고 있었으나, 웹 서핑을 하다가 위 현상을 고칠 수도 있다는 점을 알게 되었다.   Styled components를 이용할 때 FOUT가 발생한다. FOUT가 발생하는 많은 원인이 있겠지만 나의 경우 styled-components의 GlobalStyles에서 font를 설정한게 원인이었다. FOUT는 기본적으..

페이지네이션(Pagination)이란?페이지네이션은 많은 양의 콘텐츠를 탐색하기 쉽도록 여러 페이지에 나누고, 분할된 화면을 탐색하는 데 사용되는 요소이다. 화면에 표시해야 할 콘텐츠가 많아 스크롤바가 과도하게 길어지면 사용자에게 불편함을 줄 수 있기 때문에 페이지네이션을 통해 여러 콘텐츠들을 페이지로 나눈다. 이 때 사용자는 페이지 하단의 숫자 형식의 링크를 클릭하여 다른 페이지로 이동할 수 있다.   페이지네이션 vs 무한 스크롤페이지네이션 구현을 고려할 때 무한 스크롤에 대해서도 고려하게 된다. 무한 스크롤(Infinite scroll)이란 사용자가 페이지를 스크롤해 페이지 최하단에 도착하면 그제서야 아래 페이지를 마저 로드하는 방식이다. 페이지네이션과 무한 스크롤 중 어떤 방식을 사용할 지는 앱이..

트위터 클론코딩 – 노마드 코더 Nomad CodersReact Firebase for Beginnersnomadcoders.co  Firebase란?구글이 운영하는 백엔드 서비스를 제공하는 앱 개발 도구로 프론트에서 파이어베이스를 사용하여 백엔드를 쉽게 구현할 수 있다. Authentication, DB, Cloud Storage 등을 제공하는 것이 장점이며 호스팅 기능 또한 제공한다. 무료로 사용할 경우 쿼리 할당량이 정해져 있지만 개인 프로젝트 수준에서 사용할 경우 무료 버전으로도 충분히 사용이 가능하다. Firebase | Google's Mobile and Web App Development Platform개발자가 사용자가 좋아할 만한 앱과 게임을 빌드하도록 지원하는 Google의 모바일 및 웹..