Router 을 설명하기 앞서서React에서의 Page 이동을 한 마디로 표현 하자면, 빨간색 레고블럭을 뜯고 파란색 레고블럭으로 변경한다라는 의미이다.이를 정확하게 알기 위해서는 Component라는 개념을 먼저 숙지를 하고 있으면 매우 좋다. React에서 한 페이지를 표현 할 수 있는 것을 Component라고 부른다.Component는 독립적이며, Component 하나가 하나의 React 코드이자, 이 하나로 하나의 페이지를 표현이 가능하다.그런 이를 한 개의 소스코드라고 가정할 때, 이러한 Component들이 모여서 하나의 페이지를 이룬다. 그러면 하나의 페이지를 이루기 위해서 최소 1개의 Component에서 여러개의 Component들의 집합이 형성 되었다.그렇다면, 만약 이 하나의 페이..
Error 상황 리엑트 프로젝트 생성 명령어를 입력했지만, ERROR가 발생되면서 실행이 되지 않는 상황이다. 이럴 때는 기존의 갖고 있는 npm에서 문제가 발생했을 수도 있으니 그 부분부터 먼저 살펴봐야 한다. 📃 대처방법 ✔️ 대안 1 기존의 npm을 지웠다가 다시 설치한다. # 기존 npm 삭제하기 npm uninstall -g create-react-app # npm 설치하기 npm install -g create-react-app # 프로젝트 다시 생성하기 npx create-react-app [프로젝트명] 기존의 npm의 create-react-app를 삭제하고 다시 설치하는 방법이다. npm의 create-react-app가 문제가 생길 경우 설치가 안 될 수도 있다. ✔️ 대안 2 관리자모..
프로젝트 만들기 프로젝트를 만들 때, 내 프로젝트 위치를 먼저 정의한다. 필자는 D드라이브 안의 Project명을 정의하였다. 프로젝트 저장경로는 가급적 한글이 없는 것을 추천한다. 그러면 나의 프로젝트 저장위치의 폴더에서 Shift + 마우스 우클릭을 하게 되면, 설치한 PowerShell창 열기가 작성된다. npx create-react-app [프로젝트명] 프로젝트 설치 명령어를 작성하면 끝. 나의 프로젝트 파일을 불러왔을 때, 이렇게 src, App.js가 있으면 정상적으로 완료된 것이다. 만약 해당 파일이 없을 때는 project 생성 명령어를 다시 입력해야 한다. project 생성시 Error 발생할 경우 2023.11.12 - [Web/React] - [React] npx create-ap..
React 설치 전 React를 설치하기 전, 필요한 것에 대해서 먼저 설치를 진행하려고 한다. 단순하게 React설치하기 위한 또는 향후 React프로젝트하는 도중 lib 설치를 하기 위한 단계이기도 하다. 이 부분에 대해서 문제가 없다고하면 그냥 넘어가도 된다. Node 설치하기 먼저 Node를 설치해야 한다. Node.js는 Google에서 'node' 검색만 해도 쉽게 나온다. https://nodejs.org/en Node.js nodejs.org 혹은 링크를 통해서 받으면 된다. 버전 상관없이, 가급적이면 왼쪽 LTS로 받는 것을 추천한다. PowerShell 설치하기 2023.11.08 - [Computer/기타] - PowerShell 설치하기 PowerShell 설치하기 링크 https:..
사용하기 전에 알아두면 좋은 글 React, props 사용방법 2023.11.11 - [Web/React] - [React] props 사용하기 [React] props 사용하기 앞의 설명한 사용자정의 Component에 값을 전달하는 방법 중 하나이다. 이 부분을 이해하기 위해서는 다음 글을 이해하는 것을 추천한다. React, 사용자정의 Component 2023.11.11 - [Web/React] - [React] 사용자 mollangpiu.tistory.com React, 사용자정의 Component 2023.11.11 - [Web/React] - [React] 사용자 정의 Component 만들기 [React] 사용자 정의 Component 만들기 Component 💡 재사용이 가능한 각각의 ..
앞의 설명한 사용자정의 Component에 값을 전달하는 방법 중 하나이다. 이 부분을 이해하기 위해서는 다음 글을 이해하는 것을 추천한다. React, 사용자정의 Component 2023.11.11 - [Web/React] - [React] 사용자 정의 Component 만들기 [React] 사용자 정의 Component 만들기 Component 💡 재사용이 가능한 각각의 독립된 모듈. 웹 컴포넌트는 W3C에서 새로 정의가 되었으며 보통 Header, Footer등 각 영역을 담당하기도 한다. 대표적으로 Header, Nav, Aside, Footer 등이 있다. 사용방 mollangpiu.tistory.com JavaScript, Object 이해하기 2023.06.01 - [Web/JavaScri..
Component 💡 재사용이 가능한 각각의 독립된 모듈. 웹 컴포넌트는 W3C에서 새로 정의가 되었으며 보통 Header, Footer등 각 영역을 담당하기도 한다. 대표적으로 Header, Nav, Aside, Footer 등이 있다. 사용방법은 첫글자는 반드시 대문자로 시작되며, 해당 영역만 재사용을 목적이다. import logo from './logo.svg'; import './App.css'; function App() { return ( ); } function Modal() { return test 입니다. } export default App; 여기서 우리가 확인해야 할 것은 Modal이라는 함수 사용이다. 사용자 Component를 만드는 방법은 매우 단순하다. function을 통해..
import React, { useState } from 'react'; React에서 사용하는 대표적인 변수이다. useState를 사용하기 위해서는 반드시 useState를 import 해야 한다. const [email, setEmail] = useState(""); useState를 사용하는 방법 중 하나이다. 변수명은 앞의 변수명1과 뒤의 변수명2가 있다. 변수명1은 값을 불러올 때 사용한다. 변수명2는 변수명1을 변경할때 사용한다. 변수명1을 변경하고 싶을때는 set변수명2(’변경 값’)으로 사용한다. ex) setEmail(”입력할 email 값”); ⏯️ 사용하기 setEmail(e.target.value)} autoComplete="off"/> 위의 useState를 input에 적용하였..
React, axios 사용하기 axios 사용 JQuery에 ajax가 있다면, React에는 axios가 있다. axios를 다음과 같이 import 할 경우, axios를 사용할 수 있다. axios.get('http://localhost:8080/joinAction.ad?Email=MOLLANG101@test456.com&password=mollang') .then(function(response) { alert('성공'); }); axios.get(URL) 할 경우, 해당 action을 호출할 수 있다. axios 사용하기 - 2 function joinAction() { let param = { Email : 'test@mollang.com', Password : '1234' } const j..
React, onClick 이벤트 만들기 회원가입 클릭시 회원가입 버튼 눌렀을 경우, Event가 발생되도록 하는 Event를 간단하게 만드려고 한다. HTML하고 비슷하지만 onClick 이벤트의 들어있는 값이 다른 것을 확인할 수 있다. joinAction이라는 명칭을 찾는 것인데, 이는 변수명 혹은 function명 모두 동일하게 적용된다. 해당 코드에서는 function명을 정의하는 코드명이며, joinAction을 찾아서 결과를 출력한다.
React, Route 사용하기 Route 사용하기 Route는 여럿 React의 js를 관리 및 사용하기 위해 배웠다. Html의 a링크처럼 클릭해서 서로 다른 React 기능을 관리하기 위해 배웠지만 사용하고 느껴보니 a 링크하고 무언가 다른 기능이었다. jsp의 include의 개념과 비슷하며, 페이지 이동한다기보다는 그 화면의 영역을 해당 Component로 바꾸고 있었다. https://www.youtube.com/watch?v=WLdbsl9UwDc&t=595s Route는 YOUTUBE를 통해서 공부를 했다. 코딩생활, 코딩악마등 다양한 유튜브를 활용했다. 사용 결과 MollangPiu Blog에서 위의 Link를 통해서 아래 영역이 변경되는 모습을 볼 수 있었다. 먼저 결과를 보여준 이유는,..
React, NPM 최신으로 업데이트 npm Error Code npm WARN config global '--global', '--local' are deprecated. Use '--location=global' insted. npm을 이용해서 react-router-dom을 설치하는 과정 속에서 에러가 발생된 모습이다. 발생되는 원인에 대해서는 명확하지는 않으나 nodeJS의 버전문제로 원인으로 생각된다. 오류 해결하기 1. Set-ExecutionPolicy Unresticted -Scope CurrentUser -Force PowerShell에서 스크립트 실행을 위한 권한을 부여하는 명령어. 2. npm install --global --production npm-windows-upgrade n..
React, JAX 사용방법 유튜브 - 출처 https://www.youtube.com/watch?v=FqnAFX9lQPQ 본 내용은 코딩애플님의 Youtube 내용을 참고하여 공부하였습니다. 데이터 바인딩 방법 데이터 바인딩, JavaScript에서 Script의 데이터를 HTML에 넣기 위해서는 .innerHTML 함수가 필요했다. 그러나 React는 중괄호를 이용해서 데이터 바인딩을 쉽게 할 수 있다. 그리고 이는 함수 또한 데이터 바인딩이 가능하다. test() 함수의 return 값은 100이므로, 출력값은 100으로 출력된다. 이미지 불러오기 이미지 또한 간단하게 가져올 수 있다. 상단의 import를 이용하여, 이미지의 경로를 지정하면, logo라는 image를 쉽게 불러올 수 있다. Cla..