전체 글33 페이지를 벗어나기 전에 prompt 띄워주기 (react-router v6) 사용자 시나리오 사용자가 어떤 페이지에 접속해서 폼을 작성하다가 브라우저 뒤로가기를 누르거나 내비게이션 메뉴를 클릭할 수 있습니다. 사용자가 실수로 누른건데 열심히 작성중이던 폼 내용이 사라진다면..? 생각만 해도 아찔하네요. 이런 경우를 방지하기 위해서 페이지를 벗어나기 전에 프롬프트(Prompt)를 띄워서 다시 한번 사용자에게 확인을 받으려고 합니다. react-router v5에는 라는 컴포넌트를 제공합니다. 프롬프트에서 보여줄 message와 트리거인 when을 props로 받습니다. 단점은 내부적으로 윈도우의 컨펌을 사용하기 때문에 커스텀 다이알로그를 띄우는 데 한계가 있다는 것입니다. 그런데 안타까운 것은 이 마저도 react-router v6에서는 사라지고 말았다는 것입니다. (이 좋은걸 왜.. 2022. 11. 21. HTML 표준 명세 읽어보기 웹의 근간이 되는 HTML. 하지만 자바스크립트나 웹 프레임워크 공부에 밀려 그만큼 심도있게 공부하지는 못했던 것 같습니다. 웹개발 시 간과해서는 안되는 SEO, 웹 접근성 등을 위해서라도 HTML과 더 친해지려고 합니다. HTML을 학습하기 위한 유용한 곳들 1. HTML 예제를 보면서 배우기 구글에 HTML 요소를 검색하면 가장 먼저 등장하는 곳으로 가장 유명한 곳들이 아닐까 합니다. 여러 예제를 확인할 수 있어 유용합니다. https://www.w3schools.com/ W3Schools Free Online Web Tutorials W3Schools offers free online tutorials, references and exercises in all the major languages o.. 2022. 11. 15. 반응형 텍스트 줄바꿈 효율적으로 하기 (br 태그, wbr 태그) 줄바꿈이 민감한 카피 문구 카피 문구의 경우 줄바꿈 위치가 중요합니다. 저희는 기본적으로 모바일, 태블릿, 데스크탑 세가지 스크린 사이즈를 대응하고 있는데요. 프로젝트에 기존에 작성된 코드를 보니 개행문자가 삽입된 텍스트 파일을 모바일, 태블릿, 데스크탑 각각에 대해 갖고 있는 구조였습니다. 아래처럼 각 스크린 사이즈별로 개행문자(\n)가 다른 위치에 적용되는 것이죠. // mobile "동해물과 백두산이\n마르고 닳도록\n하느님이 보우하사\n우리나라 만세" // tablet (개행문자 위치가 mobile과 다름에 유의) "동해물과 백두산이 마르고\n닳도록 하느님이 보우하사 우리나라 만세" // desktop "동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세" 이렇게 하면 기기별로 텍스트.. 2022. 11. 14. 배포 환경에서 Next.js 이미지 최적화 이슈 ("w" parameter (width) of ${width} is not allowed) 이슈 내용 next/image 컴포넌트 및 sizes 속성을 부여하여 렌더링하는 이미지가 로드에 실패하는 현상이 발생했습니다. 모든 스크린 사이즈에서 실패하는 것은 아니고 몇 개의 특정한 사이즈에서만 생기는 이슈였습니다. 로드에 실패한 이미지를 크롬 개발자도구의 네트워크 탭을 확인해보면 아래와 같은 에러 메시지와 함께 400 에러가 뜨는 것을 확인할 수 있었습니다. "w" parameter (width) of ${width} is not allowed 구글에 위의 에러메시지를 검색했을 때 검색 결과가 얼마 없었고, 크게 공론화된 이슈가 아니라는 것을 확인할 수 있었습니다. 경험적으로 봤을 때 이러한 경우는 원래 이슈가 문제라기보다는 설정값이 잘못되었다든지 엉뚱한 곳이 잘못된 경우가 대부분입니다. next.. 2022. 11. 14. 이전 1 2 3 4 ··· 9 다음
