개발20 [Chromatic] Pass --allow-console-errors to succeed this command regardless of runtime build errors. 우리 팀에서는 Storybook의 변경사항이 포함된 PR을 생성하면, Chromatic에서 UI Review를 진행하기위해 Storybook을 Chromatic에 배포를 한다. 이 작업을 자동화해놨기때문에, PR이 생성되면 github action이 자동으로 실행되어서 알아서 배포를 해준다. 그런데 한 PR을 올렸는데, chromatic에 배포하는 스크립트에서 에러가 났다. 에러가 발생한 부분을 보니 Pass --allow-console-errors to succeed this command regardless of runtime build errors. 위와같은 설명이 적혀있었다. 구글에 검색을 해봄 https://github.com/chromaui/chromatic-cli/issues/156 Capt.. 2022. 11. 23. [Typescript] 짝수, 홀수 타입 만들기 타입스크립트로 짝수 또는 홀수에 대한 타입을 만들어보는 방법을 찾아보다가 기록하면 좋을것같아서 포스팅해봄 일단 처음엔 어떻게 접근해야할지 감이 잘 안와서 구글에 찾아봄 https://dev.to/tylim88/typescript-odd-number-type-1fj Typescript Odd Number Type Most people: No, you cannot create an odd number type with Typescript Meanwhile me: type... dev.to 그러다가 위 블로그를 보게되었당! Acid Coder선생님 감사합니다ㅜㅠㅜ흐릏그ㅡ 홀수 타입 type OddNumber< X extends number, Y extends unknown[] = [1], Z extends n.. 2022. 11. 18. 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. 이전 1 2 3 다음
