최근 개인 프로젝트인 'Pin-Plate(맛집 기록 서비스)'를 개발하며 웹으로 만든 기능을 모바일 앱 내 웹뷰로 이식하는 작업을 진행했습니다.분명 웹 브라우저에서는 장소 검색 기능이 아주 잘 작동했는데, 유독 모바일 앱(안드로이드 웹뷰) 환경에서만 검색 결과가 빈 화

프론트엔드 개발을 하다 보면 피그마에서 아이콘을 가져오는 과정이 정말 번거롭다.아이콘 하나하나 Export 해서 다운로드하고, IDE 프로젝트 폴더에 옮기고, 파일명 컨벤션 맞추고, 다시 React 컴포넌트로 만드는 반복 작업을 하다보면 이 짓을 계속 해야 하나? 생각

사이드 프로젝트를 하다가 pr를 생성할때마다 내용을 작성하는게 귀찮아서 자동화 해줄 수 있는 방법이 없을까? 생각했다. 내가 commit을 올린 파일들을 기반으로 AI로 파일들의 내용을 요약하면 어떨까?먼저 github action이란 뭘까? GitHub Actions

apps/web 프로젝트에서 Vite/Rollup을 사용하여 프로덕션 빌드를 수행하던 중, 생성된 자바스크립트 에셋 파일에서 다음과 같은 Parse error가 발생하여 빌드가 실패했습니다.에러 로그:이 현상은 Rollup이 여러 모듈을 하나의 파일로 병합하고 압축하는

현재 사내 서비스에서는 Jira REST API와 연동하여 등록된 이슈의 상세 내용을 보여주는 기능을 제공하고 있습니다. Jira 이슈의 description에는 텍스트뿐만 아니라 여러 장의 이미지가 포함될 수 있습니다.하지만 기존 방식에는 두 가지 큰 문제점이 있었습

현재 회사 프로젝트는 안정적인 코드 품질 유지를 위해 husky를 이용한 pre-push 체크를 수행하고 있다. 하지만 체크 과정에서 약 4분 30초가 소요됨에 따라 개발자의 집중력이 저하되고 배포 흐름이 끊기는 문제가 발생하여 이를 최적화하기로 했다.빌드 관련 작업(

Promise와 같은 타입에 감싸인 타입이 있을 때, 안에 감싸인 타입이 무엇인지 어떻게 알 수 있을까요?정답PromiseLikePromise뿐만 아니라 then을 가진 커스텀 객체나 구형 라이브러리의 Promise까지 모두 포함. MyAwaited<U>만약 T가

배열(튜플) T를 받아 첫 원소의 타입을 반환하는 제네릭 First<T>를 구현하세요.정답infer FT extends \[infer F, …any\[]] ? F : never infer F 는 해당 원소 타입의 첫 부분을 이런 타입으로 받아오겠다는 뜻. T가 \

T에서 K 프로퍼티만 선택해 새로운 오브젝트 타입을 만드는 내장 제네릭 Pick<T, K>을 이를 사용하지 않고 구현하세요.정답keyof T여기서 keyof T가 핵심. K 는 T의 키의 일부여야하기 때문에 이러한 제약 조건을 둬야한다. Mapped Type K는

Storybook 8에서 9로 마이그레이션 하는겸 react 버전도 같이 올림 (18 → 19)기본적으로 크게 달라진건 @storybook/blocks 제거 → 이젠 @storybook/addon-docs/blocks 를 사용해야함. @storybook/blocks가

https://github.com/toss/es-toolkit/pull/1362type CamelCase를 보면 snake_case만 고려가 되어 있고 PascalCase는 고려가 되어 있지 않는 걸 확인할 수 있다. PascalCase를 고려하도록 함. in

JSX render won't allow webkitdirectory and directory to be used.React v18input의 속성인 webkitdirectory를 사용할 수 없는 현상=> React내에서 typescript를 사용시 발생하는 현상. D

Detected multiple Jotai instances. It may cause unexpected behavior with the default store. context가 중첩되면 나오는 에러. Provider 파일 내부에 사용자 정보를 불러오는 로직을 추가

오늘 할 일 폴더 구조 표시 방법 생각해보기 (path를 이용해서 트리구조를 만들기) (내일) 로그아웃 기능 만들기 (완료) 로그인 후 유저 정보 불러오기 (완료) 파일 업로드시 hidden 파일은 불러오지 않도록(전송되지 않도록) 로직 작성하기 (완료) 배운점

파일 업로드 drag n drop (~ing)drag n drop 으로 파일 및 폴더를 업로드시 webkitGetAsEntry 메소드를 이용해야한다.이걸로 만든 directoryReader(entry.createReader)는 비동기처리를 해줘야해서 Promise로 감

파일 관리 시스템 요구사항 읽어보기 (완료)초기 세팅 (frontend-boilerplate 확인) (완료)파일 업로드 UI 간단하게 구현input의 webkitdirectory 속성을 사용하여 폴더를 업로드 할 수 있다.근데 react에서 사용하려고하면 에러 발생.u

mouse:down은 fabric canvas instancemousedown은 fabric object instance자세하게 말하자면canvas에서 이벤트 핸들을 하려면 mouse:down형식으로 작성합니다. fabric의 object에서 이벤트 핸들을 하려면 mo

fabricjs 공부? (어느정도…)요즘 우아한 개발 스터디 (완료)좋은 문화가 뭔지 다시 한 번 생각해보는 계기가 되었다.fabricjs의 event중 mouse:down과 mousedown 의 차이가 뭔지 알게 되었다.https://www.notion.so

리액트는 하위 컴포넌트의 모든 코드와 모든 데이터가 출력되기 전까지 fallback을 표시한다. lazy를 이용한 지연 로딩 컴포넌트 코드데이터 패칭Effect나 이벤트 핸들러 내부에서 페칭하는 경우는 감지하지 않음.처음 List 컴포넌트가 렌더링 완료 후 SubLis

상태 업데이트할 때 우선순위를 정하는데 도움을 준다. 리액트팀은 상태 업데이트 대상을 두 가지로 분류를 했다. Urgent updates: 버튼 클릭, 키보드 입력과 같이 직관적으로 보았을 때 업데이트가 즉각적으로 일어나는 것을 기대하는 상태 값들.Transition