반응형 react21 1. React와 Node.js를 사용한 게시판 웹 애플리케이션 만들기 - 게시판 만들기, 게시글 목록 자동 갱신, 글 추가, Router 설정, CORS 설정, MySQL Todo구현할 기능 : CRUD(게시글 작성, 조회, 수정, 삭제) RESTful API 이해하기https://tiny-immj.tistory.com/88 REST, REST API, RESTful의 기본 개념과 간단한 api 만드는 방법 진행=> RESTful API는 데이터를 표준화된 방식으로 주고 받을 수 있게 해주고, " data-og-host="tiny-immj.tistory.com" data-og-source-url="https://tiny-immj.tistory.com/88" data-og-url="https://tiny-immj.tistory.com/88" data-og-image="https://scrap.kakaocdn.net/dn/bICe3y/hyXsQys4qa/0opy8CRGgvfm.. 2024. 11. 6. [REACT] Failed to compile. Module not found : Can't resolve 'react-router-dom' * 이슈 상황 *리액트에서 버튼을 클릭하면 페이지가 이동하도록 만들어주는데 compile 에러가 발생했다(useNavigate를 사용해 이벤트를 설정 중) ※ 참고 : useNavigate란 ? 리액트 라우터 v6에서 새롭게 추가된 hook이다 useNavigate를 사용하면 JavaScript 함수 내 다른 페이지로 이동할 수 있다 useNavigate는 주소 표시줄의 URL을 변경하지 않으며 페이지 이동만 수행한다 Failed to compile. Module not found : Can't resolve 'react-router-dom' * 해결 방법 * => react-router-dom을 설치해준다 yarn 명령어, npm 명령어 둘다 해봤는데 결국 npm으로 설치함1), 2) 패스하셔도 되.. 2024. 11. 4. [REACT] npm 패키지 설치 중 warn 이슈 - fsevents, requires a peer of typescript * 이슈 증상* npm install mysql 해당 명령어 실행으로 패키지 설치 시 아래 경고들이 나타남 1. fsevents npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.3 (node_modules\fsevents): 혹은 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) 그게 뭔데? fsevents는 macOS 운영체제에서 사용되는 모듈이며 디렉터로리에 변경사항이 발생했을 때 알림을 전달해주는 역.. 2024. 10. 31. React Context API로 전역 상태 관리 구현 이전 글 React Router로 SPA(Single Page Application) 구현하기https://tiny-immj.tistory.com/86 React Router로 SPA(Single Page Application) 구현하기, SPA를 사용하는 이유React RouterReact Router는 여러 페이지로 구성된 웹 애플리케이션에서 페이지 간의 이동을 쉽게 관리해주는 라이브러리이다해당 라이브러리를 사용하여 url 경로에 따라 다른 컴포넌트를 렌더링 할tiny-immj.tistory.com Context API로 전역 상태 관리Context API는 컴포넌트 트리 내 props 전달 없이 데이터를 공유할 수 있도록 도와주는 기능으로상태 관리를 쉽게 할 수 있다 1. 개념과 사용하는 목적 Co.. 2024. 10. 30. React Router로 SPA(Single Page Application) 구현하기, SPA를 사용하는 이유 React RouterReact Router는 여러 페이지로 구성된 웹 애플리케이션에서 페이지 간의 이동을 쉽게 관리해주는 라이브러리이다해당 라이브러리를 사용하여 url 경로에 따라 다른 컴포넌트를 렌더링 할 수 있다 1. 프로젝트 폴더 생성npx create-react-app react-router-app 2. react 개발 서버 실행npm run start=> 개발 서버 실행되는지 확인 완료http://localhost:3000 3.React Router 설치npm install react-router-dom => 설치 확인React 프로젝트 폴더\package.json 내에서 찾아볼 수 있다 package-lock.json에서 react-router-dom의 버전과 정보 확인 가능 4. R.. 2024. 10. 30. useState, useEffect 이해, Counter 만들기 - React, Node.js 프로젝트 React의 상태 관리 useState와 useEffect useState와 사이드 이펙트 처리를 위한 useEffect는 React에서 상태 변화를 관리하고컴포넌트가 렌더링될 때 특정 동작을 처리하는 중요한 역할을 한다=> 간단한 Counter를 구현해보자 1. useState1-1. 개념useState : 상태 관리 기초를 위해 사용되는 훅.컴포넌트 내에서 상태 값을 설정하고, 해당 값을 변경할 수 있도록 해준다. 상태가 변경될 때마다 컴포넌트가 다시 렌더링됨. 1-2. 사용법> Counter.js 생성 이전에 state, props를 이용해 Couter.js를 만들어보았었다 https://tiny-immj.tistory.com/84 React 컴포넌트 재사용하기, props와 state - Re.. 2024. 10. 24. 이전 1 2 3 4 다음 반응형
