i18n 사용중 JSON으로 정리하는데 원래 줄바꿈이 되어있는 하나의 텍스트가 존재했엇다.예를 들어 이런식으로 간단한 줄바꿈으로 2줄을 만들어 놓은 텍스트들을 i18n사용을 위해 json형식에 저장하다보니 줄바꿈을 어떤식으로 해야하나 고민에 빠졌다.처음에 시도한 방법은

i18nexti18next는 자바스크립트에서 국제화 프레임워크로 쓰인다. Node.js, PHP, iOS, Android 및 기타 플랫폼과 함께 i18next를 사용할 수도 있다.npm install react-i18next --saveReact+TypeScript 환

LightHouse에 중독되어서 뭐 하나가 튀어나올때마다 읽고 있었다.이미지 최적화도 하고 열심히 했는데 이놈의 이미지는 쉬지않고 최적화 해달라고 나오는데 예전부터 보던 loading="lazy"에 대해서 알고는 있엇는데 아직 사용은 안해봐서 이참에 써보자 해서 써보게

window.onload 스크립트: 이 스크립트는 window.onload 이벤트가 발생할 때 실행됩니다. 주로 페이지가 완전히 로드된 후 추가 작업을 수행하려고 사용됩니다. 이 경우에는 페이지의 URL 경로에 따라 다른 스크립트를 동적으로 생성하여 삽입하고 있습니다.

오늘도 회사 홈페이지를 어떤걸 추가해야 더 이뻐보일까 고민하던중 전부터 해보고 싶었던 풀페이지 스크롤(Fullpage)를 구현해보고 싶었다.하지만 그냥 내가 구현하기에는 시간이 부족해 라이브러리를 찾아보던 중 fullpage.js가 많이 쓰이지만 결제가 필요하기에 np

https://bennettfeely.com/clippy/

요즘IT - 개발자에게 웹 폰트 최적화가 중요한 이유우선적으로 나의 상황은 ttf파일들을 다운 받아서 src/Fonts/(각 폰트 이름)/(폰트이름).ttf 경로로 저장해놓고 Font.css파일을 만들어서 이런 형식으로 저장을 한뒤에 사용할 컴포넌트에 import 해와

통계자료를 보면, 웹 페이지에서 대부분의 용량을 차지하는 것은 이미지이다.이미지 최적화를 통해 이미지 용량을 줄인다면, 다음과 같은 이점을 얻을 수 있다.따라서 사이트 성능 또한 향상할 수 있다.클라이언트의 대역폭에 여유가 생긴다.최적의 사용자 경험을 제공할 수 있다.

보통 리액트를 시작하면 가장 먼저 배우는것 CRA(creat-react-app)은 React 프로젝트를 빠르게 초기설정하고 구성할 수 있게 해준다.초보자나 가벼운 프로젝트에 알맞으며 복잡한 빌드 요구사항이 있는 프로젝트에는 제한적일 수 있고 표준 설정을 벗어나는 커스텀

코드 스플리팅 (Code Splitting):리액트에서는 코드 스플리팅을 적용하여 번들 파일의 크기를 줄일 수 있습니다. 이렇게 하면 초기 로딩 속도가 향상됩니다. React의 React.lazy와 Suspense를 사용하여 컴포넌트 레벨에서 코드 스플리팅을 구현할 수

오늘도 어김없이 회사 홈페이지 제작 작업중에 콘솔에 빨간색이 눈에 들어왔다.엥 이게뭐지 분명히 혹시나 작동이 안되는게 있나 매일 확인하던 나에겐 좀 충격이엿다.분명히 작동 안되는게 없는거 확인 했는데 콘솔에 떡하니 에러가 떠있엇다.우선 바로 복사한뒤에 구글링 여행을 떠

https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-componentsvscode에서 이걸 다운받자자동완성 플러그인

홈페이지 개인 프로젝트를 하던 중 갑자기 옛날에 봤던 사용자 스크롤에 맞춰 나타나고 없어지는 css를 봤던 기억이 났다.나도 해봐야지 하면서 구글링을 하며 쌩으로 만들어보려고 하던 찰나에https://all-dev-kang.tistory.com/entry/%E

문자열을 자를때 원래 내가 쓰던 자바스크립트에서는 split(), slice()등 방법을 쓸 수 있다.오늘 파이썬 공부를 하면서 파이썬은 문자열 자르는 방법이 어떤게 있을까? 찾아보던중 Stringstart:end:step 문법을 찾을 수 있었고 문제의 답을로 적어서

8월 17일 대전 두 기업에서 대면면접을 실시하였다.두곳 모두 프론트엔드 개발자로 지원 하였고 이력서 합격 상태였다.첫번 째 11시 경 면접을 본 기업에서는 기존 인원이 건강상의 이유로 빠져있기도 하였고 대표님 말씀으로는 프론트엔드 개발자 한명이 필요하다고 생각해서 채

input 태그의 속성인 defaultValue와 value에는 차이가 있다.defaultValue: input tag에서 처음 보여줄 값value: input tag에서 계속 보여줄 값defaultValue를 지정하고 input 박스에 값을 입력하면 값이 수정이 된다

Next.js의 API Route에서는 요청(request)과 응답(response) 객체에 대한 타입 지정을 해주는 것이 좋습니다.이를 위해서는 Next.js에서 제공하는 타입 정의를 사용하면 됩니다.타입 지정을 위해서는 NextApiRequest 와 NextApiR

router.push('/어쩌구') 실행하면 /어쩌구 경로로 페이지이동이 가능합니다.router.back() 실행하면 뒤로가기해줍니다. 실행하면 앞으로가기해줍니다. 실행하면 새로고침해줍니다.근데 페이지를 처음부터 다시 로드하는게 아니라 이전과 바뀐점을 분석해서 바뀐부분

이 코드에서 let result: Result | null = await db 부분을 살펴보면 타입이 Result 혹은 null일 경우를 생각해서 적었지만 오류가 뜬다. > Type 'WithId | null' is not assignable to type 'Resu

폴더를 만들 때 폴더이름을 폴더이름 이렇게 만들면 '이 부분에 아무거나 입력했을 때' 라는 뜻이 됩니다. 예를 들어 /photo/어쩌구/page.tsx 이렇게 만들어놓으면누가 /photo/아무문자 로 접속했을 때 page.tsx 를 보여줍니다.예를 들어 /detail