React6 React에서 다국어 지원하기 Next.js 없이 i18next와 react-i18next를 사용하여 다국어를 지원할 수 있다.1. 패키지 설치npm install react-i18next i18next i18next-http-backend i18next-browser-languagedetector 2. i18next 설정 파일 생성src/에 i18n.ts 파일을 만들어 기본 설정을 추가한다.import i18n from "i18next";import { initReactI18next } from "react-i18next";i18n .use(initReactI18next) .init({ lng: "en", // 기본언어 fallbackLng: "en", // 언어가 없을 경우 대체 언어 debug: true, .. 2024. 8. 21. 리액트가 선언형 프로그래밍인 이유? 명령형 프로그래밍(Imperative Programming)과 선언형 프로그래밍(Declarative Programming)은 두 가지 주요 프로그래밍 패러다임이다 명령형 프로그래밍 "어떻게(How)" 작업을 수행해야 하는지를 명시적으로 세부적으로 기술한다 명령어들이 순차적으로 실행되며, 각 단계에서 상태를 변경하는 방식으로 동작한다특정 작업의 세부적인 제어가 필요한 경우에 더 적합하다 예시: C, Java, Python과 같은 대부분의 프로그래밍 언어, 절차적 프로그래밍let string = 'THis is the midday show with Cheryl Waters';let urlFriendly = "";for(let i = 0 ; i 선언형 프로그래밍프로그램이 "무엇(What)"을 하는지를.. 2024. 5. 3. React로 채팅앱 구현 시 스크롤 맨 아래로 내리는 법 채팅창에서는 내가 메세지를 보낼 때마다, 또는 상대가 나에게 메세지를 보낼 때마다 스크롤이 맨 아래로 내려가게 만들고 싶었다. scrollIntoView element.scrollIntoView() scrollIntoView를 사용하면 element가 사용자에게 보여지도록 스크롤이 된다 따라서 채팅 메시지 맨 밑에 빈 div를 만들어서 ref를 연결해준 뒤, useEffect에서 chatData 상태가 변할 때마다 위의 빈 div로 스크롤해준다. const msgBottom = useRef null; useEffect(() => { if (msgBottom && msgBottom.current) { msgBottom.current.scrollIntoView({ behav.. 2024. 4. 16. [React] TTF, OTF 폰트 적용하기 처음 프로젝트를 하면서 기본폰트를 사용하였는데 OS 환경이나 브라우저에 따라 폰트가 다르게 적용되는 것을 알게되었다. 그래서 화면의 통일성을 위해 폰트를 적용하기로 했다. 폰트 다운받기 예전에 개인적으로 맘에 들어서 저장한 카카오폰트를 사용하였는데 그 외에 다양한 온라인 폰트가 있으니 맘에 드는 걸 otf, ttf 형식으로 다운받으면 된다. 프로젝트에 적용하기 React 애플리케이션에서 폰트를 설정하고 사용하는 다양한 방법 중 나는 @font-face를 사용하여 폰트파일을 로드하고 적용했다. 1. 폰트파일을 프로젝트에 추가하기 먼저 TTF 또는 OTF 형식의 폰트 파일을 src/public/font 폴더 안에 추가한다. src/ └── public/ └── fonts/ ├── KakaoBold.ttf ├.. 2023. 12. 5. Manifest: Line: 1, column: 1, Syntax error 에러 해결하기 CRA로 리액트 프로젝트를 생성하면 minifest.json이 생성된다 manifest는 웹앱에 대한 정보를 담고있는 json인데 배경색, 파비콘, 어떤 확장자 등을 담고있다 해결법 manifest 앞에 / 를 붙인다. => 2023. 12. 4. CRA에서 .less파일 사용하기 react 18버전이후 config를 ejecting할 필요없이 CRA한 프로젝트에서 .less파일을 사용할 수 있다 먼저 react-app-rewired를 설치한다 npm i react-app-rewired less와 less-loader을 설치한다 npm install less less-loader --save-dev package.json의 scripts를 아래와 같이 수정한다. "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", 앱에 추가해야할 config를 추가하기 위해 최상단 위치에 config-overrides.js 파일을 만들어서 아래의 코드를 입력한다... 2023. 10. 30. 이전 1 다음
