티스토리

꾸준히만 가자

검색하기

블로그 홈

꾸준히만 가자

padd60.tistory.com/m

Frontend Developer blog

구독자: 0

방명록 방문하기

주요 글 목록

프론트엔드에서 서버 데이터 파생 상태 관리하기: TanStack Query와 상태 관리 전략 최근 들어 서버 데이터를 프론트 state로 변형해 관리하여 처리하는 경우가 종종 있었습니다.모든 서버에 API 응답값이 페이지 내에서 구현해야 하는 비즈니스 로직에 알맞으면 좋겠지만 그러지 못한 경우가 대다수일 것 입니다. 당시에는 서버 응답값을 기반으로 파생 상태를 만들어 로직을 전개했지만 파생상태를 정의하는 과정이 매끄럽지 못한것을 인지하고 있었습니다. 지금 돌이켜서 어떻게 하면 더 좋은 방법으로 서버 데이터로부터 프론트 파생 상태를 정의할 수 있는지 고민해보았습니다. 여러 방법들이 눈에 띄었지만 다음 두가지 방법이 적용과 이해가 쉬웠습니다. 1. TanStack Query의 select 옵션 사용import { useQuery } from '@tanstack/react-query';const us.. 공감수 0 댓글수 0 2024. 9. 22.
Flutter에서 갤럭시 폴드 5(안드로이드) 카카오톡 열기 이슈 및 해결 (window.open & intent) 어떤 이슈? 회사에서 하이브리드 앱 개발 중 웹뷰단에서 카카오톡 문의하기를 눌렀을때 안드로이드 기기에서만 카카오톡이 안 열리는 문제가 있었다. 이슈 유형 정리 기본 메인 이슈는 카카오톡 문의하기 클릭 시 카카오톡이 안 열리는 문제 아이폰 너무나도 잘 열림 카카오톡 없으면 다운로드하라는 브라우저 창도 띄워짐 있으면 해당 카톡 열어서 1대1 채팅까지도 가능 갤럭시 S 시리즈 카카오톡이 있을때는 잘 열림 미설치시에는 아무현상도 일어나지 않거나 살짝의 코드 수정시 intent 주소와 함께 UNKOWN_SCHEMA 이슈가 나옴 갤럭시 폴드 시리즈 접었을때는 S 시리즈와 동일한 현상임 펼쳤을때는 아예 아무 현상도 벌어지지 않음 위와 같은 기종 별 현상이 차이가 나서 왜 그런지 정말 고민과 고생이 많았지만 해결을 했.. 공감수 0 댓글수 1 2024. 1. 24.
Flutter로 개발하고 Xcode에서 앱 띄울때 스플래쉬에 로고가 안나오는 이슈 원인과 해결 사건의 발단 회사에서 새롭게 출시할 웹뷰로 이루어진 앱을 출시하기 위해 고군분투 중이었을때였다. 웹 개발만 했던 나로써는 앱 배포와 개발 환경 세팅은 너무나도 어색했다. 물론 웹뷰 환경에서 개발은 계속 해왔지만 마켓에 배포하는 일은 거의 없었기에 조금은 신선했고 재밌었지만 동시에 답답했다. 아이폰을 개발자모드로 연결하고 앱을 켜보니 원래 안드로이드 환경에서는 나타났던 로고가 스플래쉬 화면에 안 뜨는것이다... 이건 뭔가 이상하다 싶어 수정작업을 하려고 했다. 아는 지식이 전무한 상태 한 3시간을 삽질하다가 해결을 했다. 해결책이 너무 간단해서 허무했지만 이렇게 배운다고 생각이 들었다. 원인과 해결책 원인은 Xcode에서 인식하는 Launch screen storyboard가 있는 폴더에 해당 해당 로고 .. 공감수 1 댓글수 1 2024. 1. 20.
Module federation에서 겪은 tailwind css 이슈 그리고 해결방법 최근 실무를 하면서 Module federation 환경에서 tailwind css를 사용해서 개발을 이어가고 있다. 헤드리스 UI가 부각되면서 Radix UI 기반의 Shadcn UI를 사용하려다보니 tailwind css를 사용하게 되었다. 하지만 역시 시행착오는 있다. 실제 잘 작동할 줄 알았던 스타일링에 문제가 발생했다. 문제 상황 remote 패키지에서 작성한 tailwind css의 class name이 제대로 host 패키지에서 서빙될때 스타일링이 되지 않는 문제 원인 파악 브라우저에서 실제 클래스 네임과 테일윈드의 클래스 네임이 mapping이 잘되는지 확인해보는게 우선이었다. 브라우저에서 스타일링이 정상적이지 않는 요소를 검사해보니 클래스 네임은 들어갔지만 스타일링 mapping이 되지 .. 공감수 0 댓글수 2 2024. 1. 15.
Cypress 적용 및 github actions CI 붙히기 cypress 설치 및 예제 주입 각 패키지 매니저에 맞춰서 설치한다. pnpm으로 프로젝트를 진행하므로 pnpm add cypress -D 터미널로 설치한다. 설치를 하고 npx cypress open 을 터미널에서 치게 되면 위와 같은 가상 브라우저가 뜨고 진행하면 위와 같이 스펙 선택 창이 나오는데 이는 아무 스펙도 작성하지 않아서이다. 좌측 예제를 누르고 진행하면 위와 같이 테스트를 할 수 있게 되고 눌러서 테스트를 실행시켜 볼 수 있다. cypress 문법의 ts 컴파일을 위해 위 내용을 생성된 cypress 폴더 하위에 넣어주면 위 이미지와 같이 파일이 새로운 폴더와 파일이 생긴다. cypress config 세팅 import { defineConfig } from 'cypress'; expo.. 공감수 2 댓글수 2 2024. 1. 13.
아카이빙 : 프론트엔드 아티클 모으기 아카이빙을 하는 이유 1. 기억은 휘발된다 제일 큰 이유이지 않을까 싶습니다. 실무 영역에서 개발을 하다보면 많은 버그를 만나고 많은 챌린지에 도전하게 됩니다. 이때마다 많은 구글링, Chat GPT의 도움을 받아 해결하고는 하죠. 그때마다 해결을 하는데에만 초점을 두어 이슈를 처리하면 그 다음 작업을 하기 바빠지게 됩니다. 그러다보면 다른 분들의 이슈를 도와줄때 어디서 봤던 내용일 경우 도움을 줌과 동시에 관련 참조글을 공유해주면 더 설명이 빠르거나 도움이 될 것 같은 기분이 들때가 많습니다. 그때마다 머리를 쥐어뜯어서 아는만큼 설명드리고 관련 문서를 공유드리지만 정확하고 빠르지 않죠. 그러다보니 이슈 해결에 도움이 되는 글이나 영감을 얻은 글을 기록해 두는 것도 의미가 있겠다란 생각이 들었습니다. 2.. 공감수 0 댓글수 0 2023. 12. 27.
프론트 배포 자동화 git action편 배포조건 CSR, SSG 등의 호스팅 서버가 필요없는 렌더링 조건 AWS S3, Cloud front 사용시 MFA, Monorepo를 도입해서 운용하는 프로젝트 배포 트리거 develop 또는 main, master에 PR이 merge되어 Close될때 MFA 구조에 맞게 배포하도록 조건 분할하기 Host, Remote와 같이 패키지별로 관리되어 레포 내에서 분할되어 빌드, 배포 등의 관리가 이루어져야 함 PR시 Label로 구분하여 action 트리거 작동시키도록 구현 Label 정의 deploy host remote deploy-skip invalidation-skip release Label 별 추가시 작동하는 액션 상세내용 deploy 빌드, 배포, 캐시무효화와 같은 배포 로직 실행 all 모든.. 공감수 0 댓글수 0 2023. 11. 1.
jest 세팅 및 zustand 전역 스토어 테스트 구축 jest 세팅 모듈 다운 사용하는 패키지 매니저에 맞춰 필요한 모듈을 다운받는다. 예시 pnpm pnpm add -D jest ts-jest @types/jest @types/node ts-loader ts-node babel-jest @babel/core @babel/preset-env @babel/preset-typescript @testing-library/react @testing-library/user-event config 파일 작성 babel.config.js module.exports = { presets: [ '@babel/preset-env', ['@babel/preset-react', {runtime: 'automatic'}], '@babel/preset-typescript', ], .. 공감수 0 댓글수 0 2023. 11. 1.
Storybook 도입 및 배포 정리 Storybook이란 디자이너 및 개발자 외의 사용자에게 개발자가 정의한 UI를 쉽게 공유하고 테스트 해볼 수 있는 디자인 시스템 관련 라이브러리 Chromatic이란 스토리북을 정적 빌드한 내용을 무료로 배포해주는 스토리북에서 제공하는 배포툴 도입 방법 1. Storybook init 각 프로젝트별 번들러에 맞는 dev server 및 경로 관련해서 자동세팅하기 위해 아래 CLI를 실행시킨다. npx storybook@latest init 위 두가지 폴더 및 파일 생성확인 npm run storybook 또는 yarn storybook, pnpm run storybook 각 패키지 매니저에 맞게 로컬 dev 서버에서 실행 후 화면 확인 2. Storybook 배포 (Chromatic) Automatic.. 공감수 0 댓글수 0 2023. 10. 27.
AWS Lambda CloudFront SubRouting으로 버전별로 정적 호스팅 서빙하기 이슈사항 클라우드 프론트를 사용해서 s3내 정적파일들을 서빙할때 등록한 도메인으로 접속시 루트 기본 객체로 지정한 index.html만 반환되고 하위 폴더로 서브라우팅(domain/**)로 접근하면 해당 객체를 찾을 수 없거나 권한 오류가 나서 오류 페이지를 보게 된다. 대안으로 서브라우팅 주소 뒤에 index.html을 붙혀 명시적으로 html 파일을 가져와 서빙하면 되지만 UX적으로 도메인에 파일 이름이 노출되는것은 매우 불쾌하고 혼란을 가중시킬 수 있다. 따라서 여러 버전을 하나의 도메인에서 관리, 접근하기 위해 클라우드 프론트에서 서브라우팅을 지원해 각 폴더 내 index.html을 자동 반환하게 구현해주어야 한다. 이를 위해 CloudFront와 같은 환경에서 동작할 수 있는 Lambda@Edg.. 공감수 0 댓글수 0 2023. 10. 24.
선언적 에러처리 : Vue ErrorBoundary 구현 (feat : Sentry를 곁들인...) ErrorBoundary가 뭘까 에러 바운더리는 선언적으로 에러를 처리할 수 있게 컴포넌트 형태로 사용되는 에러 헨들링 방법 중 하나입니다. 상세내용 참고 https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary Component – React The library for web and native user interfaces react.dev vue 기반의 서비스에서 저 좋은 에러 헨들링 기법을 적용하고 싶다는 강렬한 생각이 들었습니다...🔥 Vue에서 ErrorBoundary 구현하기 먼저 Vue에는 다행이도 에러를 감지해주는 라이프사이클 함수가 존재합니다. 이를 적극적으로 이용해 리액트에서와.. 공감수 0 댓글수 1 2023. 10. 24.
웹 성능 최적화 : Dynamic Import로 js 코드 스플릿하기 ⏳ 동적 불러오기(Dynamic Import)에 대해 알아보자 🤨 동적 불러오기가 필요한 이유 일반적으로 spa 구조의 어플리케이션을 빌드할 때 js가 하나로 나오며 그 크기가 비대해지는 경험을 해봤을 것이다. 이렇게 되면 브라우저가 처음 index.html을 불러오고 DOM을 그릴때 js 로딩을 기다리는 시간이 길어지므로 FCP 즉 첫 화면이 그려지는데까지 오랜시간이 걸린다. 이는 CSR SPA 구조의 문제점이었다. 그렇다면 하나로 번들링되는 js를 쪼개서 빌드할 수 없을까? 라는 생각에서 나온 대안 중 하나가 바로 동적 불러오기이다. 동적 불러오기를 적용하게 되면 js를 쪼개서 빌드할 수 있게되고 이는 브라우저가 DOM을 그릴때 첫화면에 필요한 js만 로드해서 페인팅할 수 있다는 말로 FCP가 앞당겨.. 공감수 0 댓글수 1 2023. 10. 24.
우리도 해보자 : MFA(Micro Frontend Architecture) 도입기 with Module Federation MFA 도입 시도하기로 했다... 그 과정을 풀어보려한다, 가자 ~~~ 🏃 아 MFA에 대한 기초적인 개념이 없다면 아래 링크를 눌러 보는것을 추천한다. https://maxkim-j.github.io/posts/runtime-integration-micro-frontends/ 위 링크의 방법 중 Run-time Integration via javascript를 사용해 구현하였다. Vite기반 프로젝트에 도입하기 도입 과정 중 문제점 발견해서 다른 방향 찾기로 함...😥 🤯 문제점 monorepo 기반 vite module federation 적용 https://github.com/originjs/vite-plugin-federation host, remote 폴더를 기반으로 테스트 완료 별도의 빌드결과.. 공감수 0 댓글수 1 2023. 10. 24.
PnP 그리고 Yarn berry가 뭐길래 쓰는지 이제 알아보자 회사에서 신규 프로젝트를 시작할때 사용할 보일러플레이트를 만들다가 적용하게된 yarn berry를 적용하면서 알게된 내용을 정리해본다. yarn berry 적용하게된 이유 기존에 사용하던 yarn classic에서 monorepo를 적용하고 싶어 리서치하다가 yarn berry에 있는 workspace를 사용해 구현한 블로그를 보게 되어 따라 적용하다가 체택하게되었습니다. 나중에 알고 보니 yarn classic에도 workspace가 지원되서 monorepo사용에 문제가 없는것을 알게되었을때는 좀 허탈했지만 그래도 공부했다는 마음으로 지내고 있습니다. 그러면 yarn berry 쓰면 뭐가 좋은데? PnP(Plug'n'Play) yarn 2버전부터 지원되는 기능으로 해당 기능을 사용하면 의존성 라이브러리.. 공감수 0 댓글수 0 2023. 10. 24.
Vue3 setup에서 defineProps 사용하기 With Typescript 2022년 5월 경에 작성한 블로그 글을 이관한 포스트입니다. Vue3 setup에서 props 사용 vue2는 export default{ props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, } 위처럼 사용을 해왔을 것입니다. 하지만 vue3 setup composition API에서는 defineProps({ title:{ Type: String, required: true } }) 위와 같이 사용하게 됩니다. defineProps에 타입스크립트 적용하기 타입스크립트를 사용하는 개발자라면 위 defineProp에 Type 지정에 사용하는 타입과 타.. 공감수 0 댓글수 0 2023. 10. 23.
Vue에서 scoped된 컴포넌트의 하위로 scss 스타일을 강제로 줘보자!(::v-deep, :deep) 2022년 5월 경에 작성한 블로그 글을 이관한 포스트입니다. Vue에서 scoped란..? vue 개발을 하면서 보통 스타일 태그에 보통 scoped를 주어 사용할 것입니다. 하지만 이렇게 되면 컴포넌트로 정의해놓은 UI를 적용 페이지에 맞게 입맛대로 커스텀해서 사용하기가 힘들 것 입니다. 특히나 페어코팅을 하고 컴포넌트가 내가 만든것이 아니라면 더욱이 그렇죠. 그래서 입맛대로 바꾸려면 어떻게..? 이런 경우를 대비해서 vue에서 정확히는 vue-loader에서는 Deep Selectors를 제공하고 있습니다. 일반적인 css에서는 .a >>> .b {...} 위 처럼 주면 되지만 scss를 사용한다면 위 명령어가 정상작동하지 않을 것입니다. scss에서는 .a::v-deep .b {...} 위로 공식.. 공감수 0 댓글수 0 2023. 10. 23.
네이버, 카카오 로그인 뿌수기 🔥 2021년 12월 경에 작성한 블로그 글을 이관한 포스트입니다. ✅ 전체적인 OAuth 로그인 방법 💻 네이버 로그인 클라이언트(리액트) 코드 네이버 로그인 JDK 사용하는 방법 로그인 페이지 컴포넌트 import LoginNaver from './LoginNaver'; 네이버 로그인 JDK 사용로직 import React, { useEffect } from 'react'; import { naverClientId, naverRedirectURL, naverSecret } from '../../utils/OAuth'; const { naver } = window; const LoginNaver = () => { const initializeNaverLogin = () => { const naverLogi.. 공감수 0 댓글수 0 2023. 10. 23.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.