react
-
Expo SDK 47 정리Expo 2022. 11. 10. 15:40
React 생태계는 확실히 업데이트가 무척 빠른 것 같습니다. Next.js가 13 버전이 나온 것처럼 Expo 역시 47 버전의 Beta가 나온 지 얼마 안 되어 47 버전이 정식 출시되었습니다. React Native CLI를 대체하기 위해 많은 고민과 노력을 하고 있다는 것이 보이는 업데이트였습니다. 아래의 4가지 항목 이외에도 지원하는 React, React Native버전이나 iOS의 최소 지원 버전과 같은 내용들도 있지만 이번 정리는 제가 업데이트를 봤을 때 가장 흥미로웠던 부분들 위주로 정리해 봤습니다. 1. Expo modules 정식 출시 Alpha단계였던 Expo modules가 SDK 46 > SDK 47인 한 번의 업데이트 만에 1.0으로 정식 출시를 했습니다. 개인적으로 무척 기대..
-
hint: The '.husky/pre-commit' hook was ignored because it's not set as executable. 해결하기Git 2022. 10. 29. 18:15
2021.11.10 - [Git] - husky + lint-staged를 활용하여 git hook걸기 husky + lint-staged를 활용하여 git hook걸기 이 글에서는 가장 많이 사용하는 git hook인 pre-commit을 기준으로 설명하겠다. 먼저 이 글을 작성하게 된 가장 큰 원인인 husky@4에서 사용하던 아래와 같은 방법을 사용할 수 없게 되면서 였다. // pack kir93.tistory.com 이전 글을 통해 husky를 설정해 사용하던 중 새로운 pc를 사용할 때 husky가 동작하지 않는 문제가 발생했다. 그리고 아래와 같은 hint가 제공되었다. hint: The '.husky/pre-commit' hook was ignored because it's not set ..
-
버튼의 크기는 고정한 채 선택 영역만 늘리기CSS 2022. 10. 26. 17:00
프로젝트를 진행할 때 버튼의 사이즈는 무척 중요한 요소입니다. 특히 모바일이나 태블릿의 경우에는 그 중요성이 더 커진다고 생각합니다. 왜냐하면 PC의 경우 작은 사이즈의 버튼이라도 마우스라는 도구를 이용하기 때문에 상대적으로 정확한 위치를 선택하기 편한 반면 모바일이나 태블릿의 경우 선택의 주체가 대부분 손가락이기 때문입니다. 물론 버튼의 사이즈 자체를 키우는 것이 가장 이상적인 방법이지만 그렇지 않은 경우에 자주 사용하는 팁에 대해 설명해 보겠습니다. const Button = styled.button` position: relative; width: 20px; height: 20px; border-radius: 10px; background: tomato; &::after { content: ""; ..
-
Next Image 똑똑하게 사용하기(feat. Vercel Deploy)Next.js 2022. 10. 24. 18:56
1. 개요 웹 사이트를 제작할 때 로딩 속도와 퀄리티에 있어 가장 중요한 부분은 이미지라고 생각합니다. 너무 낮은 화질의 이미지를 사용할 경우 로딩 속도는 빨리질 수 있지만 사이트의 전체적인 퀄리티는 무척 낮아 보이는 문제가 발생하며, 이미지가 너무 높을 경우 이미지를 로딩하는데 긴 시간이 걸려 레이아웃 쉬프트가 발생하거나 사이트의 전체적인 로딩이 늦어질 수 있습니다. 그렇기 때문에 웹 사이트를 제작한 뒤 최적화를 진행할 때 가장 먼저 진행해야 되는 부분이 이미지를 최적하는 것이라고 생각합니다. 이번 글에서는 Next를 사용하는 데 있어 제가 이미지를 최적화하는 방법에 대해 소개하겠습니다. 2. Web에서 주로 사용하는 이미지 형식 JPEG : 가장 널리 사용하는 파일 형식으로 거의 모든 브라우저에서 ..
-
React 디자인패턴React 2022. 10. 7. 15:30
1. Data 관점1. MVC제작시기 : 1979.12.10제작회사 : XEROX PARC제작 목적 : MVC의 기본 목적은 사용자의 멘털 모델과 컴퓨터에 존재하는 디지털 모델 간의 차이를 연결하는 것입니다.특징ModelViewController로 구성됩니다.Model : 순수 데이터 모음입니다.View : 시각적 요소로 Model에 데이터를 요청합니다.Controller : 사용자와의 상호작용을 담당합니다.2. MVVM제작시기 : 2005.10.08제작회사 : Microsoft제작 목적 : MVC를 현대 UI 개발 플랫폼에 맞게 제작됐습니다.특징ModelViewViewModel로 구성됩니다.Model, View : MVC에서와 동일합니다.ViewModel : Controller에서 좀 더 UI 측면으로..
-
window init 느리거나 useEffect 인식 안 되는 라이브러리 사용 팁Tip 2022. 9. 2. 15:14
외부 라이브러리(특히 window에 생성되는)를 이용할 때 useEffect로 가지고 올 수 없는 경우가 존재한다. 이 경우 많은 사람들이 setTimeout 등을 이용해 타이밍을 맞춰주고는 한다. 하지만 이렇게 할 경우 단점이 존재한다. 네트워크가 느린 환경들을 고려해 타임을 여유롭게 잡거나 느린 환경을 고려하지 않아 에러가 발생하는 문제다. 이 문제 해결을 위해 처음 생각한 방법은 반복문을 활용해 retry를 거는 방법이었는데, 이 경우 다른 호출 스택을 반복문이 잡고 있어 다른 호출들이 먹통이 되는 문제가 발생했다. 그래서 내가 선택한 방법은 setInterval을 이용하는 방법이다. setInterval은 setTimeout과 마찬가지로 작업 큐에 작업을 저장하는 방식이기 때문에 다른 호출 스택이..
-
react-query useInfiniteQuery 데이터 편하게 사용하기Tip 2022. 8. 31. 17:45
(이 글은 react-query@3.19.1을 바탕으로 작성되었습니다) react-query를 사용할 때 useQuery만큼이나 많이 사용하는 것이 useInfiniteQuery이다. 특정 웹 사이트의 경우 useQuery보다 많이 사용한다. 사용 방법 자체도 무척 간편하게 되어 있어서 문서를 확인하고 사용하는데 별다른 제약이 없다. 그런데 데이터가 오는 방식이 특이하다. 만약 데이터를 axios로 받아왔을 때의 형식은 아래와 같다. { data: { posts: [...] } } 이런 데이터 형태는 추가로 받아올 때 역시 동일하다. 나의 경우 react-query를 사용하기 전 redux-toolkit을 사용할 때는 아래와 같은 방법을 사용했다. // lodash 미사용 state.posts = [....
-
NextJS Data Fetching (feat. CSR, SSR, SSG, ISR)Next.js 2022. 8. 29. 16:43
1. Data Fetching이란 SPA가 Web 세상에서 새로운 시대를 열었다는 것에 의문을 제시할 사람은 없을 것이다. 기존에 페이지를 이동할 때마다 새로고침이 되며 빈 화면을 봐야 했던 이용자들은 이제 로딩이 없는 것과 비슷한 환경에서 사이트를 사용할 수 있게 되었기 때문이다. 이는 확실히 획기적이었고 대다수의 웹사이트가 이제는 SPA로 되어있고 변화하고 있다. 하지만 SPA에도 치명적인 문제가 있었다. 웹사이트의 운영자들은 어떻게든 네이버나 구글 등의 검색 결과에 자신의 웹사이트가 노출되기를 원하는데 SPA의 경우 페이지를 모두 그린 뒤 데이터를 가지고 오는 CSR방식이 기본이기에 검색 사이트들의 Bot이 웹사이트에 접속했을 때 아무것도 없는 빈 페이지로 판별해 버렸기 때문이다. (물론 최근 구글..