분류 전체보기 (108) 썸네일형 리스트형 [Vue] ERROR - NavigationDuplicated 이제 새로고치을 해도 404에러는 뜨지 않는데...댓글을 입력하면 바로 새로고침을 해주도록 만들어두었는데 아래 에러가 반환되었다.현재 페이지 주소가 이동하려는 페이지의 주소와 같기 때문에 발생한 에러라고 한다. 아래 사진이 현재 상태이다! 수정 후!this.$router.go(this.$router.currentRoute); 현재 페이지의 경로로 가라는 뜻인데 새로고침과 같은 역할이라고 한다! 이제 에러는 안뜬다! 댓글 작성 후 새로고침 잘 된다! !~! [Vue.js 에러] NavigationDuplicated (부제: 현재 경로에서 새로고침 하고 싶을 때 - router.reload, router.go, cur진행 중인 프로젝트에서 네비게이션바를 이용하고 있는데 현재 페이지에서 또 같은 경로를 .. [Vue] 새로고침 시 404Error / Connect-history-api-fallback 새로고침을 했는데 404 에러가 떴다.찾아보니, SPA 이라서 발생한 에러라고 한다.SPA는 단일 html 페이지를 로드하고, JavaScript를 통해 페이지의 콘텐츠를 동적으로 변경하여 사용자에게 여러 페이지가 있는것 처럼 보이게 한다. 이는 클라이언트 사이드 라우팅(Client Side Routing)으로 구현된다.클라이언트 사이드 라우팅을 통해 사용자가 웹사이트에서 다른 주소로 방문 하려 할 때 서버에게 새로운 HTML파일 요청을 막고 클라이언트에서 JavaScript를 이용해 다른 주소를 방문한 것처럼 만들게 해준다.필요한 컨텐츠만 동적으로 불러오기 때문에 부드러운 화면 전환이 가능한 것! 즉 하나의 파일(html)만을 사용하는데 사용자가 새로고침을 하거나 주소창에 직접 입력을 하면, 해당 파.. 라우팅처리 브라우저 url이 바뀔때마다 보여줄 컴포넌트를 맵핑 시켜서 우리에게 보여주는것을 라우팅 처리 라고 한다. 리액트에서 라우팅 처리를 하려면 추가적으로 모듈을 설치해야한다. 터미널을 하나 더 연다음에 모듈을 설치해준다. npm install react-router-dom@ 그럼 package.json에 react-router-dom이 추가된 것을 볼 수 있다. 그럼 이제 라우팅 기능을 만들어보쟈ㅑㅑ 라우팅 기능을 하기 위해 About.js 파일도 하나 삭 만들어준다. 먼저 index.js에 BrowserRouter를 import 해준다. 'react-router-dom'에서 BrowserRouter를 가져오는데, 브라우저 라우터는 리액트에서 웹브라우저 라우팅을 처리할때 가장 보편적인 라우터라고 한다..! 그.. 함수형 컴포넌트 VS 클래스형 컴포넌트 / 컴포넌트 만들기 리액트 컴포넌트를 만드려면 두가지 방법이 있는데, 함수형 컴포넌트 VS 클래스형 컴포넌트 함수형 컴포넌트 자바스크립트의 funtion을 이용한 클래스형 컴포넌트 둘중에 뭘 쓰든 상관없지만 함수형 컴포넌트로 개발하는 추세라고 한다..! 함수형 컴포넌트로 만들기 컴포넌트로 만들어서 사용할 Home.js 파일을 만들고 이걸 App.js 파일에 넣어주면 된다! State란?! State란?! 자료를 잠깐 저장할땐 변수를 사용한다리액트에서 State도 자료를 저장하고 싶을 때 사용할 수 있다. post 변수처럼 자료를 잠깐 저장할땐 변수를 사용한다.react에서도 자료를 잠깐 저장할때 state를 써도된당useState를 입력하고 엔터를 치면 상단에 import {useState} from 'react'가 자동으로 입력된다! State를 만드려면!1. import {useState} useState를 가져온다.2. useState(보관할 자료를 담아준다)3. let [ a, b ]보관할 자료를 사용하고 싶다면 위처럼 코드를 짜준다. 이때 a는 state에 보관했던 자료다! a를 불러오면 '남자 코트 추천' 이 불러와진다.b는 state 변경을 도와주는 함수이다. 이때 l.. JSX란?! javascript를 확장해서 xml태그를 쓸 수 있도록 지원해준게 jsx html을 javascript 환경에서 쓸 수 있도록 만들어준게 jsx라고 생각하면 된다~ 자바스크립트 파일인 App.js파일의 return 안에 html을 사용할 수 있다. 이게 JSX! react에서 html태그 자동 완성 만들기 (수정중) vue를 사용했을때는 html 태그 자동완성이 잘됐었는데....! 리액트에서는 왜인지 안된다ㅠㅠㅠ 해결방법! F1을 누른뒤 setting > Preferences: Open Workspace Settings(json) 을 선택해준다.그럼 아래와 같은 창이 뜬다. 여기에 아래 코드를 복붙한다."emmet.includeLanguages": { "javascript": "javascriptreact"}입력하고 저장만 해주면, 자동 완성이 아주 잘된당!~!~! 자동 완성 기능은 emmet이라는 놈이 해주는 것인데, vscode에서는 html에서만 emmet기능을 지원해준다고 한다. 리액트파일에서 emmet기능이 적용되지 않는 이유는 html과 js가 혼합된 jsx 문법을 사용하기 때문이다..! 그래서 emm.. react 생성하기 1. 프로젝트 폴더를 만들고 shift+우클릭 후 여기에 powershell 창 열기 클릭!2. npx create-react-app create react 라는 라이브러리를 이용해 프로젝트 생성을 쉽게 해준다.이 라이브러리를 이용하기 위해서는 npm을 사용해야하니까 node.js 설치해줘야함성공적인 생성..! 3. vscode에 해당 폴더 불러오기! 4. 미리보기 띄우기는 터미널에서 npm startTerminal > new terminal 클릭하고 터미널에 npm start를 입력해주면 된다.node_modules프로젝트 구동에 필요한 모든 라이브러리들의 소스코드를 모아놓은 폴더 public 폴더 static 파일을 모아놓는 곳html, 이미지 파일 등 잠깐 보관하고 싶을때 쓰는 파일 src 폴더.. 이전 1 2 3 4 5 ··· 14 다음
