1. 무한 스크롤 이란? 흔히 저희가 웹 서핑을 하다 보면 수많은 글 들이 세로로 끝이 없이 나열되어 있는 것을 보실 수 있습니다. 그렇다면 이들은 어떻게 구성되는 걸까요? 1. 한 번에 모든 게시물을 불러온다. 2. 10 ~ 15개씩 끊어서 부른다. 단순하게 생각해 봐도 게시물의 개수가 500개 이상이 된다면 한 번에 모든 데이터를 단일 통신으로 받아오는 데는 latency와 서버에 부하가 될 수 있겠죠? 요번에는 FE 관점에서 무한 스크롤을 적용할 수 있는 방법에 대해서 알아보려고 합니다. 2. 어떤 식으로 구성할까? 무한 스크롤을 적용하는 방법은 생각보다? 간단합니다. 다음과 같은 방식으로 스크롤을 쭉 내리다가 초록색이 보였을 때 다음 아이템들을 불러올 수 있는 API를 call 하면 됩니다. 물론..

스토리북 상태 변경 이번 팀 프로젝트를 하면서 미루고 미루던 공통 UI 컴포넌트들을 스토리북을 통해 제공을 하기로 마음을 먹었습니다. 단순하게 컴포넌트에 대한 UI 적인 스토리북을 만드는 것은 정말 많은 곳에서 찾아볼 수 있는데 Controls를 통해 제공하는 상태값을 통해 화면을 핸들링할 수 있는 요소에 대한 예제는 정말 없는 것 같아서 이번 기회를 통해 정리를 해두려고 합니다 😃 1. 컴포넌트 준비하기 일단 요번 예제에서 사용될 컴포넌트 입니다. 토글 형식으로 ON, OFF 상태를 바꿀 수 있는데요 아래의 코드를 보고 어떤 UI를 가지는지 혹시 예상이 가시나요? interface Props { offText: string; onText: string; isToggle: boolean; setToggl..

스켈레톤 UI에 대하여 우리가 흔히 웹사이트나 앱들을 이용하면 서버에서 필요한 응답을 받아오기 까지 시간이 걸리기 때문에 본문 내용 대신 애니메이션이 포함된 로딩되는 화면을 바라볼 때가 많습니다. 지나가며 본 글로 사용자는 3초 이상 빈 화면을 바라보게 되면 페이지를 이탈하게 된다는데 어찌 보면 저도 "이거 왜 이래" 하면서 껐다 켜는 경우가 많은 것 같네요🧐 이를 개선하는 과정에서 SSR, SSG, ISR 같이 여러 노력이 있었지만 결국 클라이언트에서 비동기 데이터가 필요한 시점에서는 이를 해결할 무언가가 필요한 거죠. 로딩 상태를 표현하는 법 우리가 흔히 봐왔었던 로딩 표시는 어떤 것들이 있을까요? 1. 로딩 스피너 2. 프로그래스 바 3. 스켈레톤 UI 그럼 WHY 스켈레톤? 일단 제 마음에 들었습..

Eslint 분명 편리하긴 한데 너무 깐깐한 느낌이 든다. → R/N의 경우 기본적으로 eslint를 내장해서 기본 템플릿을 제공하기 때문에 익숙해질 필요가 있다고 생각 너무 오류가 많이 난다. 🥲 코딩을 하는데 계속 빨간줄이 떠있으니까 내가 맞게 하고 있는데도 잘못하는 느낌인 경우가 많이 들음 가장 큰건 Custom Hooks를 작성할 때... import {useEffect} from 'react'; export const useTimeout = ( // -1- callback: () => void, duration: number, deps: any[] = [], // -1- ): void => { // -2- useEffect(() => { if (duration === 0) return; cons..

react-native-vector-icons 아이콘 페이지로 이동 ios 6.0 부터는 link를 이용한 수동적인 방법이 다음 R/N release 에서는 더 이상 지원하지 않는다고 나온다. npx react-native link react-native-vector-icons npx react-native unlink react-native-vector-icons 결론적으로 열심히 구글링... 해결법 1. Podfile을 열고 코드 추가 cd ios && code Podfile && cd.. pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons' 8번째 줄에 추가 2. info.plist 열고 코드..

최적화 관련 HOOKS React를 공부하보면 가장 궁금하고 신기하다고 느끼던게 Hook 이였다. 공부를 하면서 배웠던 점들을 정리 해보려고 한다. 최적화는 왜 필요한데? 🤔 최적화를 생각한다면 정보를 캐싱해서 사용하는 것을 일반적으로 생각할 수 있다. React 에서는 특히 페이지 새로고침(reRender) 에 대해서 최적화에 대해 예민하게 생각해야 하는 것이 사실 물론 간단한 페이지의 경우 이를 신경쓰지 않아도 문제가 없는 경우가 많다. 그래도 공부를 하려면 제대로 해야 한다는 생각이 큰 건 사실이다. 간단하게 예를 들어보자 title의 경우 렌더링 시 계속 새로 생성이 된다는 점이 문제가 되는 점 - → 이는 App이 함수(fucntion) 형태이고 - → title의 값이 지역 변수(local v..