Nextjs 1417 썸네일형 리스트형 [Next.js 14] Custom 404 페이지 만들기 404 페이지를 만들어야 하는 이유 3가지 웹사이트를 개발할 때, 사용자가 올바르지 않은 경로로 접근했을 때도 처리해주는 것도 중요하다. 일반적으로 사용자가 이상한 경로로 접근했을 때 띄워주는 것이 404 페이지인데, 이 페이지를 직접 작성해주는 것이 좋다. 그 이유에는 크게 3가지가 있다. 보안상의 이유 404 페이지를 따로 만들지 않으면, 소스코드의 일부가 사용자에게 공개될 수 있다. 404 에러가 뜨면 해당 에러가 어디서 발생했는지 코드의 위치를 알려주는 경우가 있다. 대부분의 사용자는 대수롭지 않게 생각하겠지만 일부 사람들에 의해 악의적으로 사용될 수 있으므로, 그 가능성을 미연에 방지할 필요가 있다. 사용성 향상 웹사이트와 같은 디자인 시스템을 적용한 커스텀 404 페이지를 작성하면, 디자인과 .. 웹 개발/Nextjs 142024. 3. 24. [Next.js 14][React] API 두 번씩 호출되는 현상 [useEffect][Typescript] Nextjs든 React든 개발하다보면 useEffect를 이용하여 컴포넌트를 처음 렌더링 할 때 실행해야 할 동작을 구현할 필요가 생긴다. 나의 경우에는 서버에 data-fetch 요청을 넣고, 이 결과로 받아 온 데이터를 이용해 컴포넌트를 렌더링해야 하는 상황이었다. 그런데, 이상하게 api가 두 번씩 호출되는 현상이 계속 발생했다. (사진 참고) useState를 이용해 boolean 상태를 선언하고 한번 실행한 후에 false로 변환하여 if 문으로 실행하지 않도록 했는데도 소용이 없었다. (대강 이런 느낌의 코드) const [refresh, setRefresh] = useState(true); useEffect(() => { if (refresh) { console.log("hello"); c.. 웹 개발/소소한 팁, 버그 해결2024. 3. 22. [Next.js 14] Google SpreadSheets를 이용한 다국어 지원 서비스 자동화 및 발생한 오류 해결 방법 정리 [i18next][Javascript] 얼마 전(?)에 작성한 App router 기반 Localization 기능을 자동화하기로 했다. [Next.js 14] App router 기반 Localization / Internationalization [i18next] 다국어를 지원하는 웹에 들어가보면 드롭다운으로 언어를 바꾸고, 그에 맞게 텍스트가 휙휙 바뀌는 것을 본 적이 있을 것이다. 이번 포스팅에서는 i18next 모듈을 이용해서 앱 라우터 기반의 Next.j hotsunchip.tistory.com 설명 지금 자동화할 부분은 구글 스프레드시트에서 단어를 가져와서 각 나라별 json으로 변환하는 부분이다. 이런 비슷한 로직을 유니티 uiToolkit 이용해서 ui 다국어 지원을 구현할 때 파이썬으로 작성했었다. 간단하게 설명하자면 exc.. 웹 개발/Nextjs 142024. 3. 20. [Next.js 14] 간단하게 화면 새로고침하기 데이터가 업데이트 되거나 변경 사항을 반영해야 할 때 화면을 새로고침해야 하는 경우가 있다. 이럴 때는 아래와 같이 router.reload()를 사용하면 간단하게 화면을 새로고침할 수 있다. import {useRouter} from "next/navigation"; export default function Home() { const router = useRouter() return ( router.reload()}> 새로고침 ) } 웹 개발/소소한 팁, 버그 해결2024. 3. 20. [Next.js 14] 새 탭에서 링크 열기 [React] 태그에 target="_blank" 속성을 추가해준다. Google 도 마찬가지로 작성해주면 된다. Google rel="noopener noreferrer" 속성에 관한 설명은 아래 링크가 잘 설명하고 있어 첨부한다. 링크에 noopener noreferrer 사용하는 이유 얼마전 공신력 있는 어떤 단체의 HTML 오픈 소스를 보다가 rel="noopener noreferrer"라는 코드를 처음 보았습니다. noopener와 noreferrer는 어떤 역할을 하고 일반적으로 필요한 코드일까요❓ joshua-dev-story.blogspot.com 끗~ 웹 개발/소소한 팁, 버그 해결2024. 3. 20. [CSS] 간단한 아이콘 회전 애니메이션 [Tailwind CSS] 완전 초 간단한 회전 애니메이션 .spin-object { animation: spin 5000ms infinite linear; } @keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } [CSS] icon 회전하기 / 태그 회전하기 CSS에서 transform를 rotate를 이용해 회전했을 때, 아이콘이 회전하지 않는 경우가 있다. 결론만 말하면, 아래의 속성을 추가해준다. .rotate-45 { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-tran hotsunchip.tistory.com 위에서 설명한 아이콘 회전 + 크기.. 웹 개발/소소한 팁, 버그 해결2024. 3. 20. 이전 1 2 3 다음
