전체 글38 Intersection Observer API #2 사용 예시 - 무한 스크롤 구현하기. 근데 이제 useInfiniteQuery를 곁들인 Intersection Observer를 사용해서 무한 스크롤 예시를 만들어보자! Using 1. CRA with typescript 2. react-query 3. randomstring 간단하게 만들어보겠다. 먼저 react-query 사용환경 설정해주기 최상단 컴포넌트에서 QueryClientProvider로 감싸줘야한다. 나는 App.tsx에서 적용해줌 import { QueryClient, QueryClientProvider } from "react-query"; import List from "./List"; const client = new QueryClient(); function App() { return ( ); } export default App; 그리고 데이터를 생성해줄 함수를 간.. 2022. 11. 15. Intersection Observer API #1 정의 회사 프로젝트를 진행하면서 무한스크롤 구현할때 Intersection oberver를 사용해서 구현했다. 그런데 무한스크롤을 구현하는 예시를 보고 참고한거라, 정확한 동작방식에 대한 이해없이 무작정 사용했었기때문에 한번 정리를 해보고자 한다. Intersection Observer 란? 타겟 요소와 상위 요소 또는 최상위 document의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법이다. Intersection Observer는 그들이 감시하고자하는 요소(target)가 다른요소(root)에 들어가거나 나갈때 또는 요청한 부분만큼 두 요소의 교차부분이 변경될때마다 실행될 콜백함수를 등록할 수 있게 한다. 정확히 몇 픽셀이 겹쳐졌는지는 감지할 수 없고, 몇퍼센트정도.. 2022. 11. 10. [React Native] No bundle URL present.Make sure you're running a packager server or have included a .jsbundle file in your application bundle 후우...일주일만에 React native 프로젝트를 실행시켜보니 켜지질 않고, 타이틀에 보여지는 에러메시지가 찍힌다. 일주일동안 내가 무엇을했길래 안켜지는것인가...,, 에러 메시지를 구글링해보다가 아래 방법을 찾았다! cd into YOUR_PROJECT/ios and rm -r build, then run again react-native run-ios https://stackoverflow.com/questions/43949607/no-bundle-url-present-react-native 2022. 11. 6. [CSS] Attribute selectors란? href$로 쓰는 예시를 봤는데 이 문법이 궁금해서 한번 정리해봄 Attribute selectors CSS의 attribute selector는 주어진 속성과 일치하는 엘리먼트를 찾는다. Syntax [attr] 속성의 이름을 가지고있는 엘리먼트를 의미한다. /* elements with a title attribute */ a[title] { color: purple; } 만약 title이라는 어트리뷰트를 가지고있는 a태그에 대해 위 스타일이 적용된다. 나는 태그에 내장되어있는 어트리뷰트 이름만 써야한다고 생각했는데 내가 커스텀하게 만든 어트리뷰트도 사용할 수 있다. 예를들면 아래처럼 작성했을때 custom이라는 attr에 정의한 스타일도 적용된다. 예시로 그려짐 그럼 data-로 추가한 속성들을 선.. 2022. 11. 3. 프론트엔드 치트키[1] - MSW(Mock Service Worker) 사실 어그로를 끌려고 제목을 저렇게 적어봤다ㅎ 근데 난 치트키라고 생각하긴함. 왜냐면 프론트작업에서 귀찮은 작업을 줄여주기때문임! MSW DX를 위한 Mock Service Worker 웹 프론트 개발자가 API구현 작업의 영향을 덜 받게 하여 DX를 개선하는것이 목표 브라우저에 몰래?숨어있다가 마치 백앤드 API인 척하면서 프론트엔드의 요청이 발생하면 Mock 데이터를 응답해줌 위 그림이 프론트엔드 작업 플로우를 잘 표현한다고 생각해서 첨부해봄 새로운 기능이나 페이지를 만들때, api가 아직 준비가 안되어 있는 경우가 많다. 그럴때마다 우리 팀은 mock파일을 만들어 가짜 데이터를 만들었다. 그리고 비동기에 대한 처리(로딩 표현, state에 값 넣어주기 등)도 나중에 api를 연결할때 처리를 해주는경.. 2022. 10. 19. [React Native] CocoaPods could not find compatible versions for pod "FBReactNativeSpec": In Podfile: FBReactNativeSpec (from `../node_modules/reactnative/React/FBReactNativeSpec`) 후우 이건또 무슨에러냐 arch -x86_64 pod update 를 실행하니 제목과 같은 에러가 떴다. 그래서 ios > Podfile 안에있는 platform :ios, '11.0' 을 platform :ios, '15.0' 로 변경해주니 위 에러는 사라졌다. (근데 다른에러가 또 뜨긴함ㅋ쿠ㅜㅠㅜ) 2022. 10. 2. [React Native] Failed to install CocoaPods dependencies for iOS project, which is required by this template. 기존에 인텔 맥에서 진행하던 프로젝트를 m1맥에서 실행시켜보면 아래와 같은 에러가 났다. pod install이 실행이 안되는문제인데, 이것저것 찾아보다가 이 블로그를 찾았다. 해결책은 #1 Install ffi 터미널에서 입력 sudo arch -x86_64 gem install ffi #2 Re-install dependencies ios/ 위치에서 입력 arch -x86_64 pod install 라고 한다. 그래서 이 코드를 실행해보니 pod도 잘 설치되고, simulator에서도 잘 켜진다. 흑......다행이다.... 이젠 pod install을 실행하면안되고, 저 위의 코드를 실행시켜야한다! 2022. 10. 2. [javascript] 숫자에 소수점과 천단위 쉼표를 동시에 표현하기 소수점이 포함되어 있는 숫자(number 타입의 데이터)를 표현할 때 소수점 몇자리까지 표현 + 천단위마다 쉼표찍기 를 나타내고 싶을때 const myNum = 12345.6789 myNum.toFixed(1).toLocaleString() 위처럼 실행해봤다. Number.toFixed() toFixed(n)는 소수점 n번째자리까지 표현한다. 소수점 이하가 길면 숫자를 반올림하고, 짧아서 부족할 경우 뒤를 0으로 채울 수 있다. Number.toLocaleString() 숫자를 언어별로 구분하여 나타내는 문자열을 반환한다. 데이터를 다양한 형태로 나타낼때 사용하면 좋을듯! 제공하는 기능이 많으니 설명을 따로 적는것보다 doc을 읽으면 좋을듯하다 암튼, 나는 천단위마다 쉼표를 찍기위해 이 메서드를 사용했다.. 2022. 9. 26. 자바스크립트 패키지 매니저란? 패키지 매니저란? 패키지 매니저는 패키지를 다루는 작업을 편리하고 안전하게 수행하기 위해 사용되는 툴이다. 패키지 매니저의 도움으로 패키지를 설치, 제거, 업데이트 및 업그레이드하고, 프로젝트 설정을 구성하고, 스크립트를 실행하는 등의 작업을 수행할 수 있다. 대부분의 자바스크립트 패키지 매니저는 Node.js 실행 환경(runtime)에서 돌아가며 package.json이라는 파일에 프로젝트가 의존하고 있는 패키지 목록을 명시한다. 패키지란? 라이브러리가 코드의 작성을 위해 사용되는 코드의 묶음이라면, 패키지는 코드의 배포를 위해 사용되는 코드의 묶음이다. 패키지 매니저가 하는일 패키지의 dependency 관리 패키지의 보안관리 ㅡ 신뢰할 수 있고(authenticity), 손상되지 않음(integr.. 2022. 9. 26. 이전 1 2 3 4 5 다음
