FrontEnd

Recoil 공식 문서를 참고한 글입니다. 1. Recoil 기본 개념recoil이란 React를 위한 상태 관리 툴이다. recoil을 사용하려면, atoms에서 selectors를 거쳐 React 컴포넌트로 내려가는 data-flow graph를 만들 수 있다.  Atomsatom은 상태 단위로, atom 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독하기 때문에 atom에 어떤 변화가 생기면 자동적으로 재렌더링이 된다. 디버깅이나 지속성 등을 위해 고유한 key가 필요하고, React 컴포넌트 상태처럼 기본 값도 가진다.const fontSizeState = atom({ key: 'fontSizeState', default: 14,}); atom을 읽고 쓸 때는 useRecoilState라는 ..

현재 개발 중인 앱에서는 로그인 후 메인 화면에 들어가면, 서버로부터 해당 달에 해당하는 모든 정보를 불러와 사용자에게 제공한다. 그러나, 달별, 일별로 각각 데이터가 있는 바람에 앱의 성능이 좋지 않았다. 메인 화면에 들어갔을 때, 서버에서 데이터를 가져오는 시간 + 이미지와 데이터를 불러오는 시간 때문에 앱이 동작하지 않는 것처럼 10초 정도 멈춰있었다. 그래서 로딩 이펙트나 skeleton UI를 사용해서 실제 로딩 시간보다 사용자가 느끼는 체감 로딩 시간을 줄이려고 했다. 로딩이 된다는 사실을 사용자에게 알리는 건 좋지만, 오히려 로딩 시간이 실제보다 더 길게 느껴지는 단점이 있었다.  오히려, 사용자 체감 시간을 줄이는 것보다도 물리적 시간을 줄여보자는 생각으로 앱의 전반적 성능을 개선하기 위해..

1. JWTJWT와 같은 Bearer 토큰은 access token만으로도 서버에서 디지털 서명을 통해 위변조 확인 후 사용자 인가를 처리할 수 있다. 그러나 탈취 가능성을 고려하여 access token의 만료 기간을 짧게 설정하여 탈취 가능성을 낮추는데, 클라이언트는 access token의 짧은 만료 기간 때문에 자주 발급받아야 하는 불편함이 있다. 이 문제를 해소하기 위해서 사용하는 것이 refresh token이다. refresh token을 사용하면 access token보다 만료 기간이 길어 access token이 만료되었다면 refresh token으로 access token을 갱신하도록 돕고 access token의 stateless한 특성에서 발생하는 취약점을 보완할 수 있다.  2...

메인에서 여러 개의 네비게이션을 구현했는데, 요구사항에 맞추어 서로 다른 네비게이션에 존재하는 페이지로 이동하는 것을 구현해야 했다. 만들고 있는 앱의 라우터 구조가 아주 복잡하게 되어 있어 네이게이션 스택 간 이동이 쉽지 않았다.  먼저 라우터 구조를 보면, Router라는 파일 안에 GolfFieldNavigation, CaddyNavigation이 존재하고, GolfFieldNaviagation 안에 TabNavigation인 TabBar 안에 또 여러 Navigation이 존재했다. 리팩토링을 거치지 않은 순수그자체라 아쉬운 부분이 있지만, 현재로서 Stack 간 이동을 구현할 방법을 고민했다.Router - GolfFieldNavigation - TabBar : Tab Navi..

프로젝트를 진행하면서 한 페이지에 요청하는 API가 많거나, 불러와야 할 데이터가 많은 경우에 사용자 경험을 어떻게 개선할 수 있을까 고민했다. 예를 들어서 앱에 필요한 패키지를 다운로드하거나 파일을 업로드할 때 단순 로딩 이펙트보다는 어떤 작업을 처리하고 있는지 표시하면, 확실히 기다림이 줄었다. 유튜브 같은 경우 메인 화면에서 영상이 불러오기 전에 스켈레톤 화면을 보여주는데, 그렇게 많은 데이터를 불러오면서도 로딩 시간이 길다곤 전혀 느껴지지 않았다. 그래서 다양한 서비스에서 이러한 스켈레톤 화면을 어떻게 활용하고 있고 사용자 경험을 개선하기 위해서 어떤 노력을 하고 있는지 궁금해 대표적으로 카카오페이 사례를 알아보았다. 카카오페이에서 스켈레톤 화면을 활용하는 방법카카오페이는 아래와 같이 Progre..

useEffect는 리액트에서 컴포넌트가 Rendering 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook이다. 이에 대해 알기 위해서는 리액트 생명주기에 대해 알아야 한다. 생명 주기리액트에는 '생명 주기'가 존재하는데, 컴포넌트가 렌더링이 시작되는 시점부터 끝나는 시점까지를 말한다. 이때 렌더링이 시작되는 지점을 mount, 렌더링이 끝나는 지점을 unmount라고 한다. 아래 그림을 통해서 생명 주기에 대해서 자세히 알아보자.컴포넌트는 생성(Mount) - 업데이트(Update) - 제거(Unmount)의 주기를 갖는다. Mount먼저 Mount는 DOM 객체가 생기고 브라우저에 나타나는 것을 말한다. 이때 호출되는 함수는 다음과 같다.- constructor() : 컴포넌트 클래스의 생성자..

이전 글에서 리액트의 상태 관리가 필요한 이유와 그 역사를 알아봤다. 이번에는 Flux 패턴이 무엇인지 알아보려고 한다. Flux 패턴이란?Flux 패턴이란 사용자 입력을 기반으로 Action을 만들고 이를 Dispatcher로 전달해서 Store(Model)의 상태를 변경해서 View에 반영하는 단반향 흐름의 아키텍처이다.  Action데이터를 변경하는 행위로 예를 들면 사용자가 앱에서 버튼을 클릭하는 행위나 정보를 입력하는 행위를 말한다. Action Creator 메서드는 새로 발생한 Action의 type과 새로운 페이로드를 묶어서 Dispatcher로 전달한다. Dispatcher모든 데이터의 흐름을 관리하는 중앙 허브라고 할 수 있다. Action을 받아서 Store에 전달하는 역할을 하는데,..

State란?리액트에서 state란 이벤트에 의해서 변경되는 값이다. 보통 특정 컴포넌트에서만 쓰는 State도 있고, 여러 컴포넌트들 간에 공유되는 State도 존재하고 전역으로 영향을 미치는 State도 존재한다. 컴포넌트 간, 전역 state로 사용하는 경우, Props Drilling을 통해서 state를 전달해야 한다. State Drilling이란?컴포넌트 트리에서 데이터를 하위 컴포넌트로 전달하기 위해 중간 컴포넌트를 통해 프로퍼티를 내려주는 것을 의미이때 중간 컴포넌트는 해당 프로퍼티를 사용하지 않음에도 불구하고 하위 컴포넌트로 전달하기 위해서 프로퍼티를 받아 전달해야 하는 일이 발생 왜 State를 관리해야 할까? 서로 다른 두 컴포넌트에서 같은 데이터를 공유한다고 하자. 그러면 서로 부..

카카오테크캠퍼스 과제를 수행하던 중 새로고침 시 값이 변경되지 않도록 하는 방법이 궁금해 찾아보았다. 기존 코드const [todos, setTodos] = useState([])const [filter, setFilter] = useState('all')... {todos.length > 0 && ( )}  기존코드는 사용자로부터 TodoInput을 받아와서 addTodo 함수를 통해서 새로운 리스트를 형성한다.  이 로직은 addTodo 함수를 통해 input으로 받은 값을 띄우는 것일 뿐이다.그래서 브라우저의 local storage 영역에 들어가면 아무런 값이 저장되어 있지 않다.그래..

event.preventDefault()가 뭐지 a 태그나 submit 태그는 누르게 되면 href를 통해 이동하거나 창이 새로고침이 되는데, 이때 preventDefault를 사용해서 동작을 멈출 수 있다. const checkbox = document.querySelector("#id-checkbox");checkbox.addEventListener("click", checkboxClick, false);function checkboxClick(event) { let warn = "preventDefault() won't let you check this!"; document.getElementById("output-box").innerHTML += warn; event.preventDefaul..