기록의 힘

프로젝트에서 다국어 지원 모바일 웹 사이트를 만들면서 번역 기능은 필수였다. 팀원이 맡아 구현했던 기능이지만 생각보다 간단하고 나중에 개인 프로젝트에도 적용해보고 싶어서 기록해보려고 한다.json 방식으로 직접 보관하는 방법을 사용. 단계 1: 패키지 설치$ npm i react-i18next i18next 단계 2: i18n.js설정import i18n from "i18next";import { initReactI18next } from "react-i18next";import translationEN from "locales/en/translation.json";import translationKO from "locales/ko/translation.json";import translationJP f..

function App() { return ( }> } /> } /> } /> );}export default App;function Home() { return ( Home {/* 여기에 자식 경로 컴포넌트가 렌더링됩니다. */} );}export default Home;=> 이 경우 h2태그는 그대로이고 Outlet부분만 계속 path별로 바뀐다. 부모 컴포넌트에서 자식 컴포넌트로 이동..

- 참고 : https://velog.io/@velopert/react-context-tutorial

useNavigate사용방법import { useNavigate } from 'react-router-dom';react-router-dom으로부터 useNavigate를 import 해온다.const navigate = useNavigate();useNavigate를 호출하면 양식이 제출된 후 프로그래밍 방식으로 탐색할 수 있는 함수를 반환한다고 공식문서에 나와있는데 이것을 변수에 담는다.useNavigate 훅을 실행하면 페이지 이동을 할 수 있게 해주는 함수를 반환한다.반환하는 함수를 navigate라는 변수에 저장 후 navigate의 인자로 설정한 path값을 넘겨주면 해당 경로로 이동할 수 있다.조건이 필요한 곳에서 navigate 함수를 호출해서 경로를 이동할 수 있다.ex) 로그인 페이지에..

컴포넌트 확장자리액트에서 컴포넌트를 만들 때 어떤건 확장자가 .jsx이고 어떤건 .js일 때도 있었다. 무엇을 쓰는게 더 나은지 둘의 차이점은 무엇인지 알아보자.JSX란?우선 JSX는 JavaScript XML의 약자로 JavaScript를 확장한 문법이다. 자바스크립트에서 HTML 문법을 사용할 수 있다. 공식 문서에서 설명하기로는 UI 관련 작업을 위해 권장이 되며 React에서 에러, 경고 메세지를 표시해준다고 한다.JSX 코드// JSXrender() { return ( Click here )}위의 JSX 코드는 자바스크립트 컴파일러인 @babel을 통해 javascript로 변환된다.JS 코드// JSReact.createElement( "button", {cl..

React hooks: 클래스형 컴포넌트의 기능을 할 수 있는 함수형 컴포넌트이다.라이프 사이클과 state관리 모두 가능하다.함수형 컴포넌트 최상단에서만 사용 가능. (일반함수 불가능)리액트 버전 16.8에서 추가되었다.Hook은 단순한 함수이고 커스텀 Hook을 만들 수 도 있다.Hook 종류useStateuseState 사용하여 컴포넌트 내에서 바뀌는 값을 관리할 수 있다.클래스 컴포넌트를 사용하지 않아도 state를 관리할 수 있다.(상태를 관리) [state이름, setter이름] 순으로 반환 받아서 사용한다.const [state, setState] = useState(initialState);useEffect: 라이프 스타일을 관리하는 Hook이다.화면에 렌더링이 완료된 후에 수행되며comp..

패키지 설치 결과물을 github pages에 업로드 할 수 있게 해준다. github pages는 깃허브에서 제공하는 무료 서비스로 html css js를 올리면 웹사이트로 만들어서 전세계에 무료로 배포해준다. *업데이트하는데 시간이 좀 걸릴 수 있음. $ npm i gh-pages package.json 파일 열고 내용 추가한다. { ... "scripts": { ..., "deploy": "gh-pages -d build", "predeploy": "npm run build" //deploy하면 depoly되기 전에 먼저 실행되는 것. }, ... }, "homepage": "https://깃허브주소/react-movie-web" //깃허브 레파지토리에 업로드 } *깃허브 레파지토리가 없으면 생성하..

Movie App - part One https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year 1. async-await 영화 api url을 fetch할 때 .then() 대신 async-await을 사용. function App() { const [loading, setLoading] = useState(true); const [movies, setMovies] = useState([]); useEffect(() => { fetch( `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year` ).then((response) => response.json()) .th..

보호되어 있는 글입니다.

보호되어 있는 글입니다.