FE37 [Vue.js] Vue.js 설치 및 환경 세팅 알림 본 포스팅은 공부 목적으로 작성된 글이며 상업적 목적으로 절대 사용되지 않았음을 밝힙니다. Vue.js 설치 npm install -g @vue/cli 리액트와 똑같이 npm의 도움을 받아 기본 개발 환경 세팅을 좀 편하게 해줍니다. VSCode 확장 플러그인 Vue 개발을 할 때 VSCode에서 지원하는 확장 플러그인 몇 개를 설치해 주고자 합니다. 제가 듣고 있는 인터넷 강의(코딩애플)에선 다음과 같은 세 개를 설치하라고 했기 때문에 저도 강의 따라서 설치해 줬습니다. 1. Vetur 2. Vue 3 Snippets 3. HTML CSS Support 프로젝트 파일 생성 vue create '프로젝트명' # 원하는 프로젝트명으로 생성 저는 처음에 프로젝트명을 firstVue로 변수명 짓듯 카멜표.. 2022. 3. 27. [React] props 대신 Redux + Redux 복습 Redux npm install redux react-redux redux를 사용하는 이유? 속된 말로 props 쓰기 귀찮아서입니다. Redux 세팅 1. index.js에 import {Provider} from 'react-redux'; 2. App을 Provider로 묶어주기 3. store란 변수에 state 담기 4. Provider에 props 전송 + 수정 import {Provider} from 'react-redux'; 밑에 추가해주기 JS 파일에 가져오기 1. export default () 대신 export default connet()() 사용 2. connet를 사용하기 위해서, 위에 import {connet} from 'react-redux'; 입력 3. function으로 .. 2021. 8. 15. [React] React에서의 Ajax Ajax Ajax: 서버에 새로고침 없이 요청 할 수 있게 도와주는 것. 요청의 종류에는 여러가지가 있습니다. 이건 제가 예전에 인프런 무료 강의에서도 작성한 내용인데요. 1. GET 요청 주소창에 URL 때려 박는 요청 특정 페이지 / 자료 읽기 2. POST 요청 서버로 중요 정보 전달 아이디와 비밀번호 같이 조금 숨겨서 전달할 때 Ajax 사용하는 방법? 1. jQuery 설치 후 $.ajax() 2. axios 설치 후 axios.get() 3. 자바스크립트에서 fetch() npm install add axios 이번에도 똑같이 라이브러리 설치 후 import로 axios 추가해주면 됩니다. axios.get(URL).then().catch() then() 안엔 성공하면 실행할 코드를 작성하는 .. 2021. 8. 12. [React] React 스타일 - Style-components과 SASS Style-components npm install style-components # 설치 import로 'styled-components'를 불러와 사용할 수 있게끔 세팅을 끝냅니다. 변수 = style.태그명 SASS npm install node-sass # 설치 1. scss 파일 생성 후, import로 가져오기 2. 변수에 데이터를 저장해서 쓰자 3. nesting 문법 4. 복붙 말고 @extend 5. @mixin 함수(), @include 함수() @mixin 함수()를 위에다 작성하고, 아래에 @include 함수()로 불러와 줘야 합니다. 2021. 8. 11. [React] Router 설치 및 환경 설정 Router npm install react-router-dom # react router 초기 세팅 여기서, BrowserRouter 대신 HashRouter로도 입력이 가능한데, 둘의 기능은 같으나 차이점이 뭐냐하면, HashRouter의 경우, 주소 뒤에 #이 붙는데(ex) localhost:3000/#/), # 뒤에 적는 것은 서버로 전달 X 즉, 라우팅을 리액트가 아닌 서버에 전달할 수 있어서 위험하단 이유 때문에 비교적 안전하게 라우팅을 할 수 있다는 차이점이 있습니다. 지난번 포스팅 때엔 제가 Route에 대해 잘 모르고 무작정 공부한 탓에, Route에 exact를 붙이고, 왜 붙여야 하는지에 대해선 언급이 없었는데요. Route에 경우, path 뒤에 일치하는 게 있으면 전부 화면에 출력.. 2021. 8. 10. [React] React Bootstrap React bootstrap npm install react-bootstrap bootstrap # React bootstrap 설치하기 https://react-bootstrap.github.io/ React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io Getting Started → CSS에서 link로 시작하는 라이브러리 index.html에 복사 붙여넣기 src에 넣은 파일은 파일명 변경 + 압축이 가능 public에 넣은 파일은 파일이 보존됨 public에 있는 파일은 절대경로/파일명.jpg 2021. 8. 6. 이전 1 2 3 4 5 6 7 다음
