korean-hong 님의 블로그

다행히 글쓰는 것에 흥미를 느끼고 있다. 조금 더 알아보자리액트에서 react-router-dom을 사용하여 라우팅을 설정하는 데 있어 심화 개념들을 다루는 것은 애플리케이션의 복잡한 네비게이션을 효과적으로 관리하는 데 도움이 됩니다. 여기서는 리액트 라우터의 고급 기능들을 설명하고, 복잡한 라우팅 요구 사항을 처리하는 방법을 살펴보자1. LINK네비게이션 링크를 추가하려면 Link 컴포넌트를 사용하면 좋음Link 태그 내에 to 옵션을 통해 URL path를 지정해 줄 수 있음./componets/pages/Nav/NavBar.jsimport { Link } from 'react-router-dom';function Navbar() {  return (          Home |       About..

리액트는 결과적으로 App.js 파일이 페이지에 노출이 된다. 그럼 페이지를 이동 시킬때는 어떻게 해야하는걸까?  App.js 내용을 바꿔줘야 하는건데 일일히 바꾸는건 개발상식에 맞지 않고.. 어떻게 하면 될까? 라는 궁금증이 생긴다.  위 고민을 해결하기 위해 리액트에선 React Router 라이브러리를 제공한다. React Router는 리액트 애플리케이션에 페이지 내비게이션을 쉽게 추가할 수 있게 도와준다. 1. React Route 라이브러리 설치설치 명령어npm install react-router-dom※설치후 package.json을 들어가 잘 설치되어 있는지 확인해보자. 공부했으면 한번은 봐야지 다음부턴 어련히 잘 설치되어 있겠지 하자! 2. 페이지 컴포넌트 생성컴포넌트를 관리하기 위한 ..

작성하기에 앞서 직장선배가 했던 말이 생각났다. 어떤 언어를 새로 공부할떈 항상 공식사이트를 꼭 살펴보라고 그래서 먼저 React 공식 사이트(https://react.dev/) 에 들어가 살펴보자.  튜토리얼이라도 간단하게 나마 읽어보는걸 추천함.리액트 코드 작성 시작하기1. Node.js 설치먼저 리액트 애플리케이션을 만들기 위해선 Node.js가 설치가 되어 있어야 한다.(공식사이트:https://nodejs.org/en)설치를 했다면 cmd창에 아래 명령어를 입력하고 버전이 나온다면 정상적으로 설치된거임$ node -v v20.2.0추가적으로 npm 또는 Yarn이 필요하지만 node.js 설치시 npm이 자동으로 설치됨Yarn이 좋으면 추가적으로 설치하면됨2. 프로젝트 생성 및 실행vscode를..

작성자는 원래 백엔드 개발자인데, 우연히 프론트엔드 구축 업무를 맡게 됐다. 그래서 팀원 몇 명과 함께 Vue3를 공부해서 프론트엔드 시스템을 구축했던 경험이 있다. 최근에 구인구직 사이트를 둘러보니 프론트엔드는 주로 React와 Vue로 나뉘는 것 같던데.. 대부분의 많은 기업들이 React를 더 많이 요구하는 것 같아서 나 또한 React를 공부하게되어 이렇게 글을 쓰게 됨! 리액트(react)란?리액트(React)는 페이스북에서 개발한 오픈 소스 자바스크립트 라이브러리로, 사용자 인터페이스(UI)를 구축하는 데 사용됩니다. 특히, 단일 페이지 애플리케이션(SPA)과 모바일 애플리케이션의 사용자 인터페이스를 만들 때 많이 사용함. 리액트특징 컴포넌트 기반 구조: 리액트는 UI를 여러 개의 독립적이고 ..