프론트엔드 개발/개발 로그6 페이지를 벗어나기 전에 prompt 띄워주기 (react-router v6) 사용자 시나리오 사용자가 어떤 페이지에 접속해서 폼을 작성하다가 브라우저 뒤로가기를 누르거나 내비게이션 메뉴를 클릭할 수 있습니다. 사용자가 실수로 누른건데 열심히 작성중이던 폼 내용이 사라진다면..? 생각만 해도 아찔하네요. 이런 경우를 방지하기 위해서 페이지를 벗어나기 전에 프롬프트(Prompt)를 띄워서 다시 한번 사용자에게 확인을 받으려고 합니다. react-router v5에는 라는 컴포넌트를 제공합니다. 프롬프트에서 보여줄 message와 트리거인 when을 props로 받습니다. 단점은 내부적으로 윈도우의 컨펌을 사용하기 때문에 커스텀 다이알로그를 띄우는 데 한계가 있다는 것입니다. 그런데 안타까운 것은 이 마저도 react-router v6에서는 사라지고 말았다는 것입니다. (이 좋은걸 왜.. 2022. 11. 21. 반응형 텍스트 줄바꿈 효율적으로 하기 (br 태그, wbr 태그) 줄바꿈이 민감한 카피 문구 카피 문구의 경우 줄바꿈 위치가 중요합니다. 저희는 기본적으로 모바일, 태블릿, 데스크탑 세가지 스크린 사이즈를 대응하고 있는데요. 프로젝트에 기존에 작성된 코드를 보니 개행문자가 삽입된 텍스트 파일을 모바일, 태블릿, 데스크탑 각각에 대해 갖고 있는 구조였습니다. 아래처럼 각 스크린 사이즈별로 개행문자(\n)가 다른 위치에 적용되는 것이죠. // mobile "동해물과 백두산이\n마르고 닳도록\n하느님이 보우하사\n우리나라 만세" // tablet (개행문자 위치가 mobile과 다름에 유의) "동해물과 백두산이 마르고\n닳도록 하느님이 보우하사 우리나라 만세" // desktop "동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세" 이렇게 하면 기기별로 텍스트.. 2022. 11. 14. React 17에서 React 18로 업그레이드하기 (프로젝트 ver2.0 만들기) 이제 때가 되었다 웹사이트를 배포한 지 어느덧 2년이 되어가고 있습니다. 2년이란 시간은 꽤 길었습니다. 새로운 버전인 React18도 출시되고, 최근에는 Next.js13까지 세상에 나왔네요. 라이브러리의 버전을 업그레이드하는 동시에 나타날 수많은 에러와 마주하기 싫은 마음에 미루고 미뤄왔는데요. 더 늦어지기 전에 프로젝트를 업그레이드해줘야 할 것 같습니다. 버전을 업그레이드하는 김에 코드를 개선하는 작업도 하려고 합니다. 언젠가 해야지 생각만 해두었던 작업들을 나열해 보았습니다. 큼지막하다고 생각하는 것들은 아래 세 가지 정도 되네요. 한꺼번에 하기보다는 시간차를 두고 하나씩 해보려고 합니다. React17에서 React18로 업그레이드하기 - 오늘 진행할 작업입니다. 부디 너무 힘들지 않기를.. N.. 2022. 11. 12. Headless CMS, Strapi를 적용해본 소감 아래의 요구사항을 만족하는 서비스를 혼자서, 가능한 빠른 시일 내에 개발해야 한다면 어떻게 하겠는가? 단, 백엔드에서 처리해야 할 비즈니스 로직이 복잡하지는 않지만 어느 정도의 커스텀은 필요하다. 관리자페이지, 백엔드 개발, 커스텀 프론트엔드 프론트엔드 개발자로서 내린 결론은 Headless CMS를 도입하는 것이었다. 아직 국내에 많이 알려지진 않은것 같지만, 지난 3개월 간 Headless CMS를 도입하여 개발 및 운영을 해보니 본 프로젝트에 적합한 선택이었다는 생각이 든다. Headless CMS라는 개념을 처음 접하게 된 것은 작년쯤 Jamstack이라는 개발 트렌드를 접하게 되면서이다. 프론트엔드 개발자로서 백엔드 개발의 부담을 덜어주는 컨셉이나 서비스는 항상 관심이 간다. Jacstack도 .. 2022. 9. 28. 이전 1 2 다음
