분류 전체보기35

• 

  [react native windows] native module 연결하기 https://microsoft.github.io/react-native-windows/docs/native-modules React Native for Windows + macOS · Build native Windows & macOS apps with Javascript and ReactBuild native Windows & macOS apps with Javascript and Reactmicrosoft.github.io공식 가이드를 보고 따라했는데 연결이 안돼서 일주일 내내 끙끙댔다. 왜 자꾸 native module이 null이 나오지 고뇌하고 빌드를 정말 수십번 해본 끝에 reddit까지 서치해가며 이유를 알아냈다. Open the Visual Studio solution in the win.. APP/React Native 2024. 12. 30.

• 

  [react native windows] react native windows 실행하기 react native로 윈도우/맥 프로그램을 만들 수 있다는 정보를 발견하고 데스크톱앱을 만들다니 완전 짱이자나? 하는 마음으로 설치 후 구동해봤다. react native windows는 마이크로소프트가 개발한 라이브러리며 native 코드의 언어는 C++ 또는 C#이다. react native로 pc, 앱, 웹 모두 일관되게 개발이 가능하다니 정말 멋지지 않는가근데 react native는 메타가 개발했는데 windows는 왜 마소가..? react native windows의 설치 방법은 다음과 같다. 1. React Native CLI먼저 react native 프로젝트를 CLI를 통해 생성한다. 여기서 주의해야할 점이 있는데 react-native-windows의 버전과 일치해야하기 때문에 최.. APP/React Native 2024. 12. 30.

• [React Native for Windows] Getting started with React Native for Windows 번역 웹 개발에 익숙하다면 React를 분명 알고 있을 것입니다. Facebook에서 개발한 이 프레임워크는 클라이언트 측 웹 경험을 구축하는 데 점점 더 인기를 얻고 있습니다. Vue.js나 Angular와 같은 다른 프레임워크와 달리, React는 웹 애플리케이션의 View 컴포넌트에만 집중합니다.React는 jQuery나 Angular처럼 모든 것을 다루는 완전한 프레임워크가 아닙니다. 이러한 프레임워크들은 HTML 템플릿부터 HTTP 요청을 처리하는 API까지 다양한 작업을 수행할 수 있는 많은 기능을 제공하며 강한 방향성을 가지고 있습니다. 반면, React는 이러한 기능을 제공하지 않기 때문에 일반 JavaScript(혹은 TypeScript를 선호한다면 그것도 가능)나 외부 3rd-party 라이.. APP/React Native 2024. 12. 25.

• [react-query] useInfiniteQuery 로 무한 스크롤 사용시 주의점 useInfiniteQuery로 무한스크롤을 구현하며 사용하고 있었다. const Component = () => { const {ref, inView} = useInView(); const {data, fetchNextPage} = useGetData(); useEffect(() => { if (inView) { fetchNextPage(); } }, [inView]);} 이게 게시판이라고 치면 게시글들을 useGetData를 통해 가져오고 해당 목록을 클릭하면 상세페이지로 이동하여 해당 게시물의  조회수가 갱신되는 로직이다.그런데 잘 작동하는 듯 했지만 게시글의 목록이 fresh한 상태로 조회되지 않는 것을 발견하였다. export const u.. 카테고리 없음 2024. 11. 20.

• 

  간단하게 사용해보는 React Hook Form & zod (useFieldArray) "use client";import React from "react";import { zodResolver } from "@hookform/resolvers/zod";import { useFieldArray, useForm } from "react-hook-form";import { z } from "zod";type Props = {};type FormValues = { testObj: { name: string; gender: string; }; pets: { name: string; species: string }[];};const formSchema = z.object({ testObj: z.object({ name: z.string().min(1, "이름은 필수입니다.").. Web/React 2024. 11. 7.

• 

  error boundary로 행복하게 에러처리하기 (react-query) UI의 한 부분에서의 자바스크립트 에러가 전체 앱을 망가뜨려서는 안된다. 에러 처리를 어떻게 공통화해야 할 지 골머리를 앓았다.하염없이 try catch만을 붙이는건 정말 비생산적인 일임을 깨닫고 error boundary를 본격적으로 도입했다. 익숙하게 사용하던 axios와 react query를 계속 사용하는 것을 전제로 error 처리를 했다. 1. axios interceptor에서는 별다른 에러 처리를 하지 않는다. 2. 전역으로 사용할 Errorboundary를 설정한다. class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false, error.. Web/React 2024. 11. 5.

• accesstoken 갱신 더 쉽게 하는법 이전에 accesstoken 만료로 401 error가 발생할때 refresh token을 사용하여 새로운 accesstoken을 발급하고 에러가 났던 api 통신들을 다시 시도하는 방법을 장황하게 작성했다. https://030822-verbena.tistory.com/entry/Refresh-token-%EC%9E%90%EB%8F%99-%EA%B0%B1%EC%8B%A0-%EB%B0%A9%EB%B2%95 access token 자동 갱신 방법문제 상황 JWT 인증 방법을 사용할 때 access token이 만료되었으면 클라이어트단에서 어떻게 처리를 해야할까? 보통은 만료되었기 때문에 로그아웃시키는 것이 일반적이다. 하지만 로그아웃 시키030822-verbena.tistory.com 그런데 이것보다 갱신.. 카테고리 없음 2024. 10. 24.

• env안에 있는 변수를 package.json에서 사용할때 chromatic cli를 사용하던 와중에 실행 명령어를 chromatic에서 친절하게 기입해뒀다. 문제는 token이 함께 적혀있어서 그대로 git에 올리면 당연히 안되기 때문에 env에 넣는 등의 보안 조치를 취해야했다. env 변수를 어떻게 꺼내 써야 할까 열심히 검색하는 와중에 방법 두가지를 설정했다. 1. root에 scripts 폴더를 만든 후 chromatic_publish.sh 파일에 해당 내용을 적은 후 CHROMATIC_PROJECT_TOKEN=$(grep CHROMATIC_PROJECT_TOKEN .env | cut -d "=" -f2) npx chromatic --project-token=$CHROMATIC_PROJECT_TOKENpackage.json에 다음과 같이 작성후 chro.. Web 2024. 10. 22.

• hover시 나타나는 헤더 네비게이션바 헤더의 메뉴 아이템에 마우스가 호버되었을때 아래에 네비게이션이 나타나는 것을 구현해야 했다. 좌측 네비게이션을 구현할 때와 마찬가지로 ref를 사용해서 mouseover target 이벤트 대상을 확인하면 되겠지 생각했는데 복병이 있었다. 좌측 네비게이션은 ref를 하나만 써서 상관이 없는데 상단 네비게이션은 ref가 두개 필요했다.  -> position relative // 다른 요소 ... ... // -> position absolute // 다른 요소 ...NavContainer의 아이템에  mouseover 이벤트를 걸고 state를 저장후 해당 state에 따라 HoverNavContainer의 visibility를변화시키는 UI이다. 이때 중요한.. Web/React 2024. 8. 26.

• 

  turborepo + shadcn 에서 tailwind.config.ts의 주의사항... turborepo를 모두 구성하고 ui 도구를 어떻게 구성할까 고민하던 와중에 shadcn을 알게되어 사용하게 되었다. 모두 구성을 마친뒤 실행시켰는데 컴파일 시간이 30초가 넘게 나왔다. tailwind의 config가 잘못된줄 알고 3일 내내 고민하고 몇번이고 프로젝트를 지우고 깔고 비교해보고 테스트를 계속했다. 결국 문제였던 것은 tailwind.config가 맞았다..config content안에 ts, tsx 파일 이외의 다른 파일 확장자를 넣었기 때문에 그 파일들을 모두 다 찾아서 컴파일하느라 시간이 오래걸렸던 것이다... 허..monorepo를 처음 구축해보는 것이기도 하고 환경에 대해 막연한 두려움을 가지고 있기 때문에 더욱 조급하게 해결하려고 한 것 같다. Web 2024. 7. 31.

• [react query] react query 사용시 주의점(invalidateQueries) react query의 캐싱된 데이터는 invalidateQueries를 통해 refetch 시킬 수 있다. When a query i invalidated whit invalidateQueries, tow things happen- It is marked as stale. This stale state overrides any staleTime configurations being used in useQuery or related hooks- If the query is currently being rendered via useQuery or related hooks, it will also be refetched in the background 나 또한 오래된 값을 갱신시키기 위해 해당 메서드를 사용.. Web/React 2024. 7. 3.

• Storybook (UI component) Why Storybook?문제점웹의 보편성은 프론트엔드에 더 많은 복잡성을 부여하고 있다. 이는 반응형 웹 디자인에서 시작되었으며 시강니 지나면서 기기, 브라우저, 접근성, 성능, 비동기 상태 등의 추가 요구 사항들이 더해졌다. 컴포넌트 기반 도구들은 복잡한 UI를 간단한 컴포넌트들로 분해하는 것에 도움을 주지만 만능 해결책은 아니다. 프론트엔드가 성장함에 따라 컴포넌트 수는 급증한다. 성숙한 프로젝트는 수백 개의 컴포넌트를 포함할 수 있으며 이는 수천 개의 개별 변형을 만들어낸다.이러한 UI들이 비즈니스 로직, 상호작용 상태, 앱 컨텍스트와 얽혀 있어 디버깅을 어렵게한다. 해결책UI를 독립적으로 빌드하기스토리북에서 모든 UI 조각은 컴포넌트이다. 컴포넌트의 강점은 전체 앱을 실행하지 않고도 렌더링 결과.. Web 2024. 6. 22.