티스토리

i'm done

검색하기

블로그 홈

i'm done

all-done.tistory.com/m

프론트엔드 개발자

구독자: 0

방명록 방문하기

주요 글 목록

[MindBook] Nextron + Typescript + TailwindCSS 설치하기 개요 Electron은 NodeJS를 기반으로 Javascript, HTML, CSS를 사용해 데스크톱 애플리케이션을 만들 수 있는 프레임워크입니다. 웹에 윈도우, 맥, 리눅스 환경에 모두 사용 가능한 애플리케이션을 지원합니다. (대학 과제로 MindBook 프로젝트를 만들었을 때 데스크톱 애플리케이션을 구현하고 싶었는데, 당시엔 Javascript는 물론 React가 뭔지도 모르는데다 서칭 능력도 형편 없어서 그냥 Vue.js로 부랴부랴 웹 환경의 프로토타입을 만든 적이 있습니다. 그때 조금 더 자세히 공부했으면 좋았을텐데.. 지금이라도 간간히 MindBook을 데스크톱 애플리케이션 버전으로 다시 만들어볼까 싶습니다) Nextron 프로젝트 빌드하기 아래 명령어를 통해 Nextron applicatio.. 공감수 1 댓글수 1 2024. 2. 3.
[Portfolly] ErrorBoundary로 컴포넌트 단위 에러 화면 띄우기 문제 상황 기존 Portfolly 홈페이지는 클라이언트 화면에서의 에러 처리가 상황 별로 이루어지지 않았습니다. 멘토링 시간 때 멘토님께서 현업에서는 ErrorBoudary 형식으로 에러 처리를 많이 한다고 알려주셔서, 저도 그 방법을 공부한 뒤 리팩터링에 적용해보기로 했습니다. 결론적으로 다음과 같은 컴포넌트 단위의 api 에러 화면을 만들 예정입니다. 구현 과정 Error Boundary에 대해 처음 접근하게 된 건 아래 카카오 기술 블로그를 통해서였습니다. React의 Error Boundary를 이용하여 효과적으로 에러 처리하기 | 카카오엔터테인먼트 FE 기술블로그 정호일(harry) 카카오페이지에서 웹 프론트엔드를 개발하고 있습니다. 집보다 밖에 돌아다니는 걸 좋아합니다. fe-developer.. 공감수 0 댓글수 0 2024. 1. 11.
[Portfolly] 북마크, 좋아요 낙관적 업데이트로 개선하기 들어가면서... Portfolly 프로젝트를 react-query로 마이그레이션 하면서, 하는 김에 낙관적 업데이트도 구현해보자! 했습니다. 코드가 다소 지저분하나 과정을 기록하며 깨닫는 데 의미를 두고 기록해보려 합니다..ㅎㅎ 북마크, 좋아요 버튼 낙관적 업데이트 낙관적 업데이트란, '무조건 요청이 성공했을 경우' 모습을 화면에 그렸다가, 진짜 서버 요청에 대한 결과가 응답으로 도착했을 때 실패하면 다시 원래대로 돌려놓고, 성공하면 그대로 놔두는 기법입니다. 서버 요청 대기 시간이 길어서 사용자가 요청에 대한 변화를 빨리 파악하지 못 할 때 사용하면 좋습니다. 좋아요/북마크의 경우 좋아요 버튼을 누르고 몇초 뒤 하트가 채워지면 사용자에게 어색한 UX를 제공하기 때문에 낙관적 업데이트 방식을 많이 적용합.. 공감수 0 댓글수 0 2024. 1. 10.
[Portfolly] react-query로 뒤로 가기 가능한 무한 스크롤 재구현 문제 상황 기존 Portfolly 홈페이지에서 무한스크롤 기능이 제대로 구현되지 않은 것 같아 리팩터링합니다. react-query로 마이그레이션 하는 김에 useInfiniteQuery 훅을 사용해 구현할 예정입니다. 더하여 무한 스크롤에서 포트폴리오 한 개를 클릭한 뒤, 다시 뒤로가기 했을 때 스크롤 위치를 기억할 수 있게 만들 계획입니다. 구현 과정 useInfiniteQuery로 데이터를 페이징 해서 가져오기 useSuspenseInfiniteQuery 훅을 반환하는 usePortfoliosQuery 훅 입니다. 메인 페이지의 PortfolioList 데이터를 GET 요청하는 게 주요 목적입니다. 저는 PortfolioList를 지연 로딩하고 Suspense에 스켈레톤 UI를 적용해서, 그냥 us.. 공감수 0 댓글수 0 2024. 1. 9.
[Portfolly] 포트폴리오 CRUD를 react-query로 마이그레이션 들어가면서... 기존 Portfolly 프로젝트에 react-query 라이브러리를 도입해 모든 비동기 데이터를 쿼리에 저장하고 업데이트 하는 형태로 마이그레이션 하겠습니다. Read - 포트폴리오 불러오기 useQuery 훅으로 포트폴리오 목록 데이터를 불러오는 건 아래 게시물에서 다뤘습니다. [Portfolly] react-query로 불필요한 서버 요청 감소하기 문제 상황 기존 Portfolly 홈페이지는 5개의 포트폴리오 카테고리 탭을 바꿀 때마다 서버에 새로운 데이터를 요청합니다. 데이터에 큰 변동이 없음에도 서버에 잦은 요청을 하는 건 꽤 낭비라고 생 all-done.tistory.com 포트폴리오 상세 보기 페이지에서 호출하는 포트폴리오 1개 detail 데이터를 받아오는 건, 포트폴리오 목.. 공감수 0 댓글수 0 2023. 12. 25.
[Portfolly] 직접 반응형 카테고리 Slider 만들기 문제 상황 MainPage에 필요한 카테고리 슬라이더를 구현 중 문제가 발생했습니다. 구현하고자 하는 카테고리 슬라이더는 아래와 같이 생겼습니다.(mobbin 홈페이지 캡쳐) PortfolioSlider 를 구현했을 때 react-slick을 사용했기 때문에 카테고리 슬라이더 또한 slick slider를 사용하려고 했으나 몇가지 문제들이 있었습니다. 일단 구현하고자 하는 카테고리 슬라이더는 한 페이지 당 보여주는 슬라이드 개수가 정해져 있지 않습니다. 카테고리 버튼 길이에 따라 가로 길이를 벗어난 만큼 화살표로 넘겨 볼 수 있으며, 마지막 버튼에 도달하면 화살표가 사라집니다. react-slick의 옵션에서 variableWidth: ture 로 설정하면 한 페이지당 슬라이드를 딱 정하지 않고 유연하게.. 공감수 0 댓글수 0 2023. 12. 24.
[Portfolly] 메인 페이지 UI/UX를 개선해보자(feat. mobbin) 문제 상황 기존 Portfolly 홈페이지의 UI를 조금 더 사용자 친화적으로 개선시키는 과정을 기록합니다. 아래는 기존 Portfolly의 메인 화면입니다. 앱/웹/일러스트/사진/비디오 5개 카테고리 별 포트폴리오 목록을 구경할 수 있습니다. 그런데 급하게 설계한 UX/UI라 아쉬운 점이 몇가지 있습니다. 가장 큰 문제는 홈페이지에 가장 처음 들어왔을 때 홈페이지의 용도가 잘 보이지 않는 것 같았습니다. 따라서 기존에 존재하는 mobbin 이라는 홈페이지를 참고해 UX/UI를 개선시키려고 합니다. 개선 과정 포트폴리오 캐러셀 썸네일 첫 번째는 포트폴리오 썸네일 입니다. 기존 Portfolly 썸네일도 mobbin을 참고한 거라, 앱과 웹 포트폴리오 썸네일이 각각 가로세로 비율이 다릅니다. 그런데 이왕 .. 공감수 0 댓글수 0 2023. 12. 24.
[Portfolly] react-query로 불필요한 서버 요청 감소하기 문제 상황 기존 Portfolly 홈페이지는 5개의 포트폴리오 카테고리 탭을 바꿀 때마다 서버에 새로운 데이터를 요청합니다. 데이터에 큰 변동이 없음에도 서버에 잦은 요청을 하는 건 꽤 낭비라고 생각했습니다. 아래 영상을 보면 탭을 바꿀 때마다 서버에 GET 요청을 하는 걸 우측 네트워크 대시보드에서 확인할 수 있습니다. 해결 방안 react-query의 데이터 캐싱을 사용해 변화가 적은 포트폴리오 데이터의 재요청 빈도수를 줄입니다. 구현 과정 다음과 같이 비동기 데이터를 받는 컴포넌트 를 불러옵니다. export default function MainPage(){ return( ... ); } 컴포넌트는 usePortfolioQuery 훅을 호출해 포트폴리오 목록 데이터를 받아옵니다. usePortfo.. 공감수 0 댓글수 0 2023. 12. 13.
<ErrorBoundary> fallback 타입 에러: Type '({ error, resetErrorBoundary }: FallbackProps) => JSX.Element' is not assignable to type 'ReactElement<unknown, string | FunctionComponent<{}> | typeof Component>'.ts(2322) 문제 발생 react-error-boundary를 설치한 뒤 컴포넌트에 fallback 함수를 props로 전달하던 중 발생한 문제입니다. fallback 함수 globalErrorFallback을 별도로 만들어 props로 전달하려는데 다음과 같은 에러가 발생했습니다. Type '({ error, resetErrorBoundary }: FallbackProps) => JSX.Element' is not assignable to type 'ReactElement'.ts(2322) 그래서 다음과 같이 타입 별칭으로 Fallback 이라는 타입을 지정했지만(ㅋㅋ..) 에러는 변함 없었습니다. type Fallback = ReactElement; fallback props의 타입이 선언된 types.d.ts .. 공감수 0 댓글수 0 2023. 8. 25.
Type '(event: MouseEvent) => void' is not assignable to type 'MouseEventHandler<HTMLDivElement>'.ts(2769) 문제 발생 SearchModal.tsx 에 다음과 같이 onClick 이벤트 리스너를 등록하려고 하는데 발생한 에러입니다. const eventStopPropagation = (event: MouseEvent)=>{ event.stopPropagation(); }; onClick 함수에 다음과 같은 에러 메세지가 발생했습니다. Type '(event: MouseEvent) => void' is not assignable to type 'MouseEventHandler'.ts(2769) 원인 JS에서 기본으로 제공되는 MouseEvent를 타입으로 지정해서 발생한 에러입니다. React에서 MouseEvent는 반드시 React.MouseEvent를 사용해야 합니다. 해결 방법 다음과 같이 코드를 수정합니.. 공감수 0 댓글수 0 2023. 8. 23.
Intro 페이지의 스크롤바가 사라지지 않는 문제 문제 발생 Intro 페이지는 스크롤을 내릴 때 (화면을 채운)컴포넌트 단위로 슬라이딩됩니다. 더 자연스러운 ui를 위해 스크롤바를 지우려 합니다. 그런데 Intro.tsx 페이지를 감싸는 가장 바깥 엘리먼트인 에 스크롤 제거 css를 추가해도 스크롤바가 사라지지 않는 문제가 발생했습니다. 단, body에 적용하면 지워집니다. 하지만 그렇게 하면 스크롤바가 필요한 다른 페이지들도 다 지워집니다 과 에 모두 스크롤을 허용하고, 다음과 같이 body의 css에 padding 값을 주면 Intro.tsx의 스크롤바가 따로 존재하는 걸 볼 수 있습니다.(Screenshots 참고) background-color: red; padding: 30px; 이 상태에서 의 css에 스크롤 제거 코드를 추가하면 안쪽 스크.. 공감수 0 댓글수 0 2023. 8. 23.
react-slick 캐러셀 Prev, Next Arrow 버튼 더블 클릭 버그 문제 발생 PortfolioItem.tsx 컴포넌트의 캐러셀에서 Prev/Next 버튼에 더블 클릭이 적용되지 않는 문제가 발생했습니다. 여러번 빠르게 클릭한 만큼 캐러셀이 빠르게 넘어가지 않습니다. 사용한 캐러셀 라이브러리는 react-slick 입니다. 캐러셀 맨 처음 페이지, 맨 끝 페이지에 도달했을 때 각각 Prev, Next 버튼이 보이지 않도록 만들기 위해 캐러셀의 인덱스를 파악해야 했고, 이를 useState로 관리했습니다. const [currentSlideIndex, setCurrentSlideIndex] = useState(0); Prev 버튼 클릭 시 prev - 1 Next 버튼 클릭 시 prev + 1 되어 페이지가 증가/감소합니다. 버튼을 빠르게 클릭한 만큼 currentSlid.. 공감수 0 댓글수 0 2023. 8. 20.
An index signature parameter type cannot be a literal type or a generic type 문제 발생 PortfolioItem.tsx 컴포넌트에서 사용할 디자인을 별도로 관리하던 중 발생한 문제입니다. PortfolioItem은 포트폴리오 섹션(App, Web, Illustration...)에 따라 크기 비율이 다릅니다. 따라서 디자인 토큰처럼 별도 관리하려고 했습니다. 무슨 포트폴리오인지 구분하기 위해 props를 받게 되고, 그 props를 더 정확히 할 Section 타입을 정의했습니다. type Section = 'Android/iOS' | 'Web' | 'Illustration' | 'Graphics' | 'Video'; 그리고 스타일 객체를 위한 타입을 정의했습니다. // src/types/style.ts import { Section } from "./portfolio" expor.. 공감수 0 댓글수 0 2023. 8. 20.
Type '{ type: string; }' is not assignable to type 'IntrinsicAttributes & PopperType'.ts(2322) 문제 발생 Popper.tsx 컴포넌트 구현 중 발생한 에러입니다. Popper의 종류(header, portfolioItem)를 구분하기 위해 type Popper를 정의했습니다. (Popper 종류에 따라 메뉴 구성이 다릅니다) export type PopperType = 'header' | 'portfolioItem'; Header.tsx 컴포넌트의 메뉴 버튼을 클릭했을 때, header 타입의 Popper가 나타나야 하므로 다음과 같이 호출했습니다. // Header.tsx { menuOpen && } 그리고 다음과 같은 에러가 발생했습니다. Type '{ type: string; }' is not assignable to type 'IntrinsicAttributes & PopperType'.t.. 공감수 0 댓글수 0 2023. 8. 17.
Property 'env' does not exist on type 'ImportMeta'.ts(2339) 문제 발생 아래 코드와 같이 Vite + TypeScript 환경에서 env를 설정하던 중 // firebase-config.ts const { VITE_FIREBASE_API_KEY, VITE_FIREBASE_AUTH_DOMAIN, VITE_FIREBASE_PROJECT_ID, VITE_FIREBASE_STORAGE_BUCKET, VITE_FIREBASE_MESSAGING_SENDER_ID, VITE_FIREBASE_APP_ID, VITE_FIREBASE_MEASUREMENT_ID, } = import.meta.env; const firebaseConfig = { apiKey: VITE_FIREBASE_API_KEY, authDomain: VITE_FIREBASE_AUTH_DOMAIN, projectI.. 공감수 0 댓글수 0 2023. 8. 16.
Firebase로 React 프로젝트 구축하기 들어가면서... 이전에 만들었던 프로젝트 Portfolly를 Firebase 서버를 기반으로 새롭게 다시 만들고, 그 과정을 천천히 기록하려 합니다. 프로젝트 폴더 생성 & Firebase 연동하기 이번에도 Vite + React + Typescript 환경을 기반으로 프로젝트를 만들려고 합니다. 터미널에 아래 코드를 입력해 프로젝트 폴더를 생성합니다. npm create vite@latest portfolly --template react-ts Firebase CLI를 설치해 로컬 컴퓨터에서 파이어베이스 프로젝트를 관리할 수 있게 만듭니다. npm install -g firebase-tools 터미널에서 다음 명령어로 Firebase에 로그인합니다. firebase login 아래 명령어로 Fireba.. 공감수 0 댓글수 0 2023. 8. 16.
로그인 정보를 리덕스로 관리하는 이유에 대하여 개요 프로젝트 코드를 구경하다보니 대부분 로그인 정보를 리덕스로 관리한다는 것을 알게되었습니다. Portfolly 팀 프로젝트에서도 리덕스를 사용해 로그인 정보를 전역 상태로 저장해두고 불러와 사용합니다. 그런데 문득 사용자 권한, 로그인 여부, 토큰 등을 LocalStorage에 저장해놓고 또다시 리덕스 전역 상태로 저장해서 사용하는 특별한 이유가 있는지 궁금해졌습니다. 절대적인 코드의 양은 LocalStorage 데이터를 바로 불러오는 게 리덕스 스토어에 접근하는 것보다 적었기 때문입니다. 웹 스토리지(Web Storage) 먼저 웹 스토리지 개념을 알아보겠습니다. 웹 스토리지란 클라이언트에 데이터를 저장하는 저장소 입니다. 클라이언트 데이터인 만큼 서버에 전송되지 않기 때문에 서버 트래픽 부담이 없.. 공감수 0 댓글수 0 2023. 8. 2.
[Portfolly] 메인 페이지 Lighthouse 분석 들어가면서... Portfolly 메인 페이지 Lighthouse를 분석하고 추후 리팩터링 계획을 자세하게 세워보려고 합니다. 현업에서는 딱히 Lighthouse 점수를 깐깐하게 따져가며 개발하지 않는다지만, 최적화를 학습하고 싶다면 객관적인 지표를 제공하고 자세한 개선 방법을 안내해서 좋은 것 같습니다! Lighthouse 점수 그렇게 나쁜 점수는 아닙니다. 그런데 그럴 수밖에 없는 게, 메인 페이지에 마땅한 자료가 없습니다. 게시물 테스트 한다고 몇 개 올려놓은 포트폴리오가 전부이고, 계속해서 동적으로 바뀌는 컴포넌트라든가 큰 비용이 들만한 것들이 없어서 그런 듯 합니다. 그래도 일단 부족한 부분은 있다고 하니 알아보겠습니다. 아래 지표에서 붉게 표시된 부분에 집중하겠습니다. Largest Contn.. 공감수 0 댓글수 0 2023. 8. 1.
[Portfolly] 프로젝트를 마치며 들어가면서... 드디어 코드스테이츠 부트캠프 Main-Project가 끝났습니다. 프로젝트 자체는 끝이 멀었지만 공식적인 데모데이를 치뤘습니다. 이제 남은 일이라곤 개인적인 기능 추가 및 코드 리펙토링 뿐입니다. 일단 스프린트 4주차, 마지막 프로젝트 회고를 해보려고 합니다. (그리고 지금까지 작성한 스프린트 회고를 첨부합니다) [Portfolly] 스프린트 1주차 회고 벌써 메인 프로젝트(Portfolly)의 1주 차 스프린트 기간이 지났습니다. 정확하게는 주말 제외 7월 7일(금)까지였지만, 늘 주말까지 넉넉하게 추가 사용하기 때문에 매주 일요일마다 회고를 가지게 all-done.tistory.com [Portfolly] 스프린트 2주차 회고 벌써 2주가 지났다는 게 충격적입니다. 초반에는 '이 정도.. 공감수 0 댓글수 0 2023. 7. 27.
[Portfolly] 코드 Depth를 최대한 줄여보자 문제 상황 Portfolly 홈페이지의 '포트폴리오 상세보기 페이지' 컴포넌트인 PortfolioDetail.tsx 파일의 Depth가 너무 깊고 복잡해 보였습니다. 코치님께 말씀 드리니 일단 무조건 리팩터링이 필요해 보인다고..!! 당연한 말입니다. 팁을 하나 주셨는데, 아예 1 Depth 그 이상은 안 된다! 라는 극한의 조건을 스스로 걸고 코드를 작성하는 게 도움이 된다고 하셨습니다. 막상 코드를 작성할 땐 몰랐는데, 한 발짝 뒤로 물러나서 보니까 고쳐야 할 부분들이 눈에 들어옵니다. 그 과정을 기록해보려 합니다. 해결 과정 창피하지만 처음 작성한 코드입니다. export default function PortfolioDetail() { const [isModalOpen, setIsModalOpen.. 공감수 0 댓글수 0 2023. 7. 27.
[Portfolly] KISS 원칙으로 코드를 바꿔보자 개요 Portfolly 프로젝트 중 재사용 컴포넌트라고 만든 코드가 조금 많이 복잡해져버리는 문제가 발생했습니다. 보다 단순한 KISS 원칙을 적용해 재사용 컴포넌트를 만드는 과정을 정리해보려고 합니다. 기존의 고집스러운 코드 MemberProfile.tsx 컴포넌트는 props에 따라 다양한 형태의 사용자 프로필을 반환하는 함수형 컴포넌트입니다. type 이라는 props가 그 생김새를 결정합니다. 게시판에서 사용되는 프로필의 경우 type='board', 댓글에서 사용되는 프로필은 type='comment' 이런 식으로 전달합니다. 그래서 작성한 게 바로 다음 코드입니다. interface MemberProfile { type: 'board' | 'comment' | 'portfolio' | 'bla.. 공감수 0 댓글수 0 2023. 7. 27.
[Portfolly] Five Lines of Code 규칙을 (최대한) 지켜보자 개요 Portfolly 프로젝트의 '포트폴리오 작성 페이지'에서 사용되는 컴포넌트인 TitleForm.tsx 파일이 너무 복잡해지는 문제가 발생했습니다. 따라서 useTitleForm 커스텀 훅을 만들어 로직을 분리했으나, 다시 useTitleForm.ts 파일이 복잡해지는 굴레에 빠지고 말았습니다. 다행히 실시간 멘토링 코드 리뷰를 통해 코드를 정리하게 되었고, 그 과정을 기록합니다. 기존 복잡한 방식의 코드 기존 useTitleForm.ts 코드는 다음과 같습니다. // useTitleForm.ts import { useNavigate } from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; import { P.. 공감수 0 댓글수 0 2023. 7. 27.
[Portfolly] 스프린트 3주차 회고 마지막 개발 주간이 끝났습니다. 포트폴리오 조회/등록 관련 주요 기능은 구현되었지만 아직 100%라고 딱 잘라 말할 수 없어 불안한 마음이 큽니다. 계획했던 의뢰 요청 기능은 데모데이 이후 백엔드 팀원분과 별도로 추가 개발을 하기로 했고, 디테일한 프론트 성능 개선 리펙토링은 배포 후 정확하게 측정해보려 합니다. 당장 이번주에는 서버 통신 테스트를 했어야 하는데 계획에 차질이 생겨 이것저것 다른 디테일한 부분들을 개선하는 것에 집중하게 되었습니다. 1. 나의 약점은 무엇인가 1) 코드를 어느 범위까지 분리해야 하는지 기준을 잡지 못 합니다. 당장 지난주만 해도 '코드를 잘 분리한다'라고 자만해놓고 이번주에 다시 자신감이 누그러들었습니다. 함수를 어디까지, 무슨 기준으로 분리해야 하는지 갈팡질팡하는 제 모.. 공감수 1 댓글수 0 2023. 7. 23.
[React-Quill] inline style 적용하기 개요 react-quill 에디터에서 비디오를 임베드할 때 항상 동일한 크기로 출력하고 싶었습니다. 그런데 react-quill의 html content 크기를 멋대로 조정할 수 있는 방법을 찾지 못했습니다. 문제 상황 따라서 이미지 핸들러처럼 커스텀 비디오 핸들러를 만드는 시도를 했습니다. ql-hidden 클래스가 사라지면 video url을 입력하는 tooltip이 나오는 방식을 활용하여 다음과 같은 핸들러를 작성했습니다. const videoHandler = useCallback((editor: any) => { const tooltip = document.querySelector('.ql-tooltip'); if (tooltip) { tooltip.className += ' ql-editing'.. 공감수 0 댓글수 0 2023. 7. 22.
DOMpurify를 사용하면 iframe 태그를 불러오지 못 하는 이유 문제 발생 Portfolly 프로젝트에서 '포트폴리오 등록 페이지'를 구현하던 중, dangerouslySetInnerHTML 를 안전하게 사용하기 위해 DOMpurify를 사용했습니다. 그런데 그 결과 태그가 화면에 출력되지 않는 문제가 발생했습니다. 원인 그 이유는 DOMpurify에서 허용하는/허용하지 않는 디폴트 태그/속성이 정해져있기 때문입니다. DOMpurify에서 허용하지 않는 목록 중 태그가 있었던 것입니다. 더 다양한 금지 목록은 아래 링크에서 확인할 수 있습니다. Default TAGs ATTRIBUTEs allow list & blocklist DOMPurify - a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathM.. 공감수 0 댓글수 0 2023. 7. 22.
뒤로가기/새로고침 시 '정말 나가시겠습니까?' 모달 만들기 개요 Portfolly 프로젝트에서 '포트폴리오 작성 페이지' 구현 중, 에디터를 통한 게시물 작성 중에 뒤로가기/새로고침 클릭 시 현재 페이지를 정말 나갈 것인지 확인하는 경고 모달을 띄워야 했습니다. 브라우저 뒤로가기 이벤트 뒤로가기 버튼을 클릭했을 때 경고 모달을 띄우려면, 우선 뒤로가기 이벤트를 감지해야합니다. window 객체는 활성 히스토리(active history)가 변하게 되면 popstate 이벤트를 발생시킵니다. 즉 뒤로가기, 앞으로가기를 클릭해서 직전/직후 히스토리로 이동하게 되면 발생한느 이벤트입니다. 현재 목표는 뒤로가기 버튼을 클릭했을 때 곧바로 페이지가 이동하지 않고, 한 번 경고 알람을 띄우는 것입니다. 어떻게 해야 뒤로가기 버튼을 클릭했는데도 뒤로 가지 않을 수 있을까요?.. 공감수 0 댓글수 0 2023. 7. 18.
[Portfolly] 스프린트 2주차 회고 벌써 2주가 지났다는 게 충격적입니다. 초반에는 '이 정도 기간이면 다 구현하고 남겠다'라고 생각했는데, 어느 시점에서 블랙홀에 빠진 것처럼 시간이 증발해 버렸습니다. 어쩌면 처음엔 큼지막한 기능만 생각하고 충분히 할 수 있다고 생각했다가, 막상 해보니 디테일하게 신경 써야 할 부분들이 뒤늦게 떠올라 급해진 것 같습니다. 그래도 이번주에 기본적인 기능은 돌아가는 걸 확인했으니 기분 좋게 한 주를 되돌아볼 수 있게 되었습니다. 1. 나의 약점은 무엇인가 1) 틀에 찍어낸 코드처럼 늘 작성하던 방식대로만 작성하려고 합니다. react-quill 이미지 업로드를 위한 이벤트 핸들러를 훅으로 분리하여 작성하던 중, 훅에 에디터의 ref를 전달해야 하는 일이 발생했습니다. 하지만 훅에 초기값이 전달되는 시점에는 .. 공감수 0 댓글수 0 2023. 7. 16.
Custom Hook에 ref를 전달하기 (Feat. React-Quill) 문제 발생 React-Quill에서 이미지를 삽입할 때 사용할 이미지 핸들러를 만들고 사용하려는 과정에서 발생한 문제입니다. 이미지 핸들러에 대한 커스텀 훅을 만들었고, 이미지 핸들러는 ref를 통해 DOM에 접근해서 현재 마우스 커서 위치를 파악해야 하는데, 커스텀 훅에 ref 값을 전달할 방법이 없었습니다. 에 다음과 같이 ref를 등록했습니다. const quillRef = useRef(); return ( { if (element !== null) { quillRef.current = element; } }} /> ) useImageHandler 훅에게 초기값을 전달하고 반환 값을 받습니다. const [imageUrlHandler, imageHandler] = useImageHandler({ q.. 공감수 0 댓글수 0 2023. 7. 14.
[TypeScript] enum+union으로 문자열 타입 상수화하기 문제 발생 Portfolly 프로젝트 중 카테고리 드롭다운 컴포넌트를 만들다가 발생한 문제입니다. [Main-Project] 카테고리 드롭다운 만들기 [Main-Project] 카테고리 드롭다운 만들기 Studying/Proj 과정 2023. 7. 12. 13:46 all-done.tistory.com 메인 프로젝트에서 카테고리는 다음 다섯 가지로 고정 됩니다. 웹, 앱, 3D/애니메이션, 디자인/일러스트, 사진/영상 그러다보니 카테고리 관련 타입을 명시할 때 저 다섯 가지 외 값을 고정시키고 싶었습니다. 만약 타입을 string이라고만 명시할 경우, "배고파" 라는 값이 전달 돼도 동작 자체는 정상적으로 되기 때문입니다. 그래서 string 대신 다음과 같이 유니온으로 타입을 명시했습니다. catego.. 공감수 0 댓글수 0 2023. 7. 14.
[react-quill] 커스텀 이미지 핸들러 구현하기 개요 Quill 에디터는 이미지를 첨부하면 base64 인코딩 형식 변환되어 저장됩니다. 이를 서버에 그대로 전송할 경우에는 자체 string이 너무 길어서 서버에 저장되지 않습니다. 따라서 Quill 에디터를 사용할 때는 자체 커스텀 이미지 핸들러를 만들어 base64 인코딩 방식을 피해 서버에 저장해야 합니다. 이미지 업로드 순서 Quill 에디터에서 기본 제공하는 base64 이미지 업로드 대신, 직접 서버에 이미지를 보내는 방식을 사용해보겠습니다. 이미지가 업로드되는 순서는 다음과 같습니다. 1. 파일 탐색기에서 이미지를 선택한다. 2. 이미지를 받자마자 서버로 보낸다. 3. 서버에서 storage에 이미지를 저장한다. 4. 서버에서 이미지 url + id 값을 반환한다. 5. 업로드한 이미지 u.. 공감수 0 댓글수 0 2023. 7. 14.

문의안내

티스토리
로그인
고객센터

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