react4 페이지를 벗어나기 전에 prompt 띄워주기 (react-router v6) 사용자 시나리오 사용자가 어떤 페이지에 접속해서 폼을 작성하다가 브라우저 뒤로가기를 누르거나 내비게이션 메뉴를 클릭할 수 있습니다. 사용자가 실수로 누른건데 열심히 작성중이던 폼 내용이 사라진다면..? 생각만 해도 아찔하네요. 이런 경우를 방지하기 위해서 페이지를 벗어나기 전에 프롬프트(Prompt)를 띄워서 다시 한번 사용자에게 확인을 받으려고 합니다. react-router v5에는 라는 컴포넌트를 제공합니다. 프롬프트에서 보여줄 message와 트리거인 when을 props로 받습니다. 단점은 내부적으로 윈도우의 컨펌을 사용하기 때문에 커스텀 다이알로그를 띄우는 데 한계가 있다는 것입니다. 그런데 안타까운 것은 이 마저도 react-router v6에서는 사라지고 말았다는 것입니다. (이 좋은걸 왜.. 2022. 11. 21. 크롬 Lighthouse를 사용한 웹성능 개선하기 크롬에서 제공하는 Lighthouse는 웹의 성능, 접근성, SEO 등을 평가해주는 서비스입니다. 평가뿐 아니라 개선 방향까지도 제안해주기 때문에 웹사이트를 향상시키는 데 도움이 됩니다. Lighthouse를 참고해서 성능에 대한 React App을 개선하는 방법들을 살펴보았습니다. 웹 성능 개선 적용 전후 비교 Lighthouse에서 성능 개선을 위해 제안해준 몇 가지를 적용해봤습니다. 다음과 같이 평가점수가 높아졌습니다. Lighthouse 점수 전 후 모바일 17 53 데스크탑 71 92 적용해본 웹성능 개선 방법은 아래와 같습니다. 이미지 - WebP 이미지 형식 사용하기 전통적인 이미지 포맷인 PNG나 JPEG에 비해 25–35% 가량 파일 사이즈를 줄일수 있다. 지원하지 않는 브라우저를 위해 .. 2021. 2. 11. 02. 프론트엔드 신입 개발자 취업, 포트폴리오 구상부터 지난 4개월간 공부는 열심히 해왔는데 막상 포트폴리오를 만들자니 막막합니다. 뭐든 입문자에게는 앞서간 분들의 수기와 경험담이 유용한거 같습니다. 저도 종종 유튜브와 구글 검색으로 다른 사람들 이야기를 찾아보곤 하는데요. 오늘은 아래 글을 발견했습니다. 저와 같은 신입 개발자, 비전공자라는 점이 와닿았어요. www.inflearn.com/pages/weekly-inflearn-14 [주간 인프런 #14] 신입 개발자 포폴로 취업하기 - [주간 인프런 #14]인프런이 만난 사람 - 김병욱 ‘꼭 만들어야 할까?’ 🤔시간이 많이 들 것 같아 망설여지는 포트폴리오 제작. 쉽고 멋지게 만든 포트폴리 www.inflearn.com 눈여겨본 내용을 몇 가지 추려봤어요. 포트폴리오에 내 이야기 녹여내기 (내 경험, 개발.. 2020. 12. 18. 01. 프론트엔드 입문, 4개월 간의 여정 프론트엔드 신입 개발자 취업에 대한 기록을 남겨보려 합니다. 저는 비전공자입니다. 나이도 적지 않구요. 쉽지 않은 선택들을 하면서 기록을 남기는게 의미도 있고 재밌을거란 생각이 들었어요. 저는 학부에서 기계공학을, 대학원에서 디자인을 전공했어요. 한번은 대학원에서 자율주행 배달 로봇을 만드는 프로젝트를 하게 되면서 개발에 발을 들여놓게 됐죠. 지금 생각해보면 개발 체질을 단련할 수 있던 계기였던거 같아요. 로봇을 계속 할까 하다가 어차피 개발이라면... 프론트엔드 분야가 더 끌리더라고요. 2020년 8월 중순부터 프론트엔드로 커리어 전환을 결심한지 4개월이 흘렀네요. 결정을 내리고 본격적으로 공부에 돌입하기 앞서 여러 선택지들에 고민이 되더라구요. 국비지원교육, 유료 인강, 코딩부트캠프... 그런데 당시.. 2020. 12. 17. 이전 1 다음
