STUDY/react5 react-i18next 알아보기 코드를 읽어보고있는데 코드에 텍스트가 하나도 없고 t(' dddd')이런 식으로 적혀있어서 이게 뭔가 했는데 react-i18next 를 이용해서 다국어 번역을 적용하기위한 것임을 알게되었다. i18n은 Internationalization의 약어로, "i"와 "n" 사이의 18자를 줄여 부른 표현이다. i18n은 애플리케이션을 여러 언어와 지역에 맞게 조정하여 사용자의 문화와 언어에 맞는 경험을 제공하는 프로세스다. 이는 특히 글로벌 서비스를 제공하는 웹사이트나 앱에서 중요하다. i18n을 통해 애플리케이션이 다양한 언어, 날짜 형식, 통화 표기, 시간대 등을 지원하도록 할 수 있다. react-i18next 설치 및 기본 설정먼저 react-i18next와 i18next 패키지를 설치해야 한다.$ n.. 2024. 11. 3. 리액트에서 `key`에 `index`를 넣으면 안 되는 이유 리액트에서 `key`는 리스트의 각 항목을 고유하게 식별하기 위한 속성이다. 이 `key`는 리액트가 DOM을 효율적으로 업데이트하는 데 중요한 역할을 한다. 하지만 리스트 렌더링 시 `index`를 `key`로 사용하는 것은 권장되지 않는다. 이 글에서 그 이유와 다른 대안을 설명하겠다. `key`의 역할리액트는 컴포넌트 리스트를 렌더링할 때, 각 항목을 추적하기 위해 `key`를 사용한다. `key`는 리액트가 어떤 항목이 변경, 추가, 또는 제거되었는지 식별하는 데 도움을 준다. 만약 `key`가 없거나 적절하지 않다면, 리액트는 변경 사항을 제대로 감지하지 못해 불필요한 렌더링을 하거나 오류가 발생할 수 있다.const items = ['Apple', 'Banana', 'Cherry'];retu.. 2024. 9. 22. 리액트에서 줄바꿈 처리하는 방법 - CSS white-space 속성 쓰기 리액트에서 줄바꿈 처리하는 방법 - CSS `white-space` 속성 쓰기리액트로 개발하다 보면 텍스트 부분에서 줄바꿈이 제대로 안 돼서 열받잖슴?줄 바꿈 넣겠다고 \n넣고 해도 적용이 안됨...근데 해결법 간단함. 그거 `white-space` 속성 하나면 됨. 문제 상황 예를 들어, 우리 데이터가 이렇게 있다고 치자:const projectslist = [ { id: 1, type: "team", title: "GROW UP", description: "화면이나 캠을 공유하며 다른 사람과 함께 공부할 수 있는 웹 사이트입니다.", descriptionDetail: `GROWUP은 화면이나 캠을 공유하며 다른 사람과 함께 공부할 수 있는 웹 커뮤니티 사이트입니다.\n .. 2024. 5. 27. [react-fullpage] 리액트 화면 딱맞게 스크롤 되는거 새로고침문제 https://www.npmjs.com/package/react-fullpage react-fullpage An implementation of fullpage.js in react based on react-fullpage. Latest version: 0.1.19, last published: 6 years ago. Start using react-fullpage in your project by running `npm i react-fullpage`. There are 3 other projects in the npm registry using react www.npmjs.com 웹 사이트에서 스크롤 했을때 딱 맞게 스르륵 스크롤되는걸 fullpage, onepage라고 한다.. 직접 구현하기 귀찮.. 2024. 4. 17. 이전 1 2 다음
