다른 분이 퍼블해주신 파일을 git으로 받아 서버에 띄웠다.. 그러니 갑자기 빨간 화면으로 Failed to construct 'WebSocket' 하면서 실행이 안되는 거 실화? 일단 우선 급하게 검색을 해봤더니 https가 설정된 환경에서 안전하지 않은 ws 실행되었을 때 나오는 오류라고 한다 심지어 vue로 검색하면 안나오고 다들 react 환경만 검색이 된다,, vue 도 좀 사랑해주세요.. 엉엉..그렇지만 꼭 올려야되는 파일이라서 검색의 검색,,한 10분동안 검색만 하면서 찾아봤다 누군가가 이걸 본다면 꼭 10분 검색하지말고 제 걸 보고 해결하세요,,  우선 나는 vue-cli 환경이다vue.config.js 가서 기존에 있는 module.exports = { devServer:  } 에서 mo..

npm install -g @vue/cli  해서 먼저 vue 깔아주기 npm이 없다고 뜨는 사람은 node 깔기 맥은 homebrew 깔고, nvm깔고 노드 설치하는 거 추천 그 후 npm create vite  하면  아래처럼 나오는데 여기서  아래 방향키 눌러서 vue 선택하고 엔터  이 때 자율성 높고 프로젝트용이라면 자바스크립트를 추천하고회사 프로젝트 같은 경우에는 타입스크립트를 추천! 나는 테스트로 가볍게 할 것을 만들어주는 중이라 자바스크립트 선택   다 만들어졌다!! 이 때 내가 만든 프로젝트를 루트 폴더로 잡아주면  뷰 파일이 잘 만들어진 걸 볼 수있다! 터미널 창 켜서 npm i 해서 노드 모듈들 깔아주면 진짜 준비 끝   이제 프로젝트 다 만들었으니깐 로컬에 한번 띄어보자!!npm r..

프로젝트를 만들다 보면 그 값을 저장해 놓고 계속 불러오는 걸 진행할 때가 있다 ex) 투두리스트, 일기장, 기록장 등등 https://mm-study-front.tistory.com/47 [Vue.js] 투두리스트 진행사항학원 다닐 때 만들었던 거 수정 진행 중  1. 파이어베이스 기간이 만료되었기에 파이어베이스 읽고 쓸 수 있는 기한 없앰2. 디자인 변경   내가 하고 싶은 것 Vue 라우터를 이용해 버튼을 누를mm-study-front.tistory.com  이것도 파이어베이스와 연동을 시켜서 만들었지롱  근데 웹 브라우저 안에 내장된 DB가 있다는 걸 이제야 알았다.. Web Storage -> 내장기능이기 별도의 프로그램필요 없고, 라이브러리 설치 필요 없고,, javascript로 접근할  수..

라우터는 사실 react뿐만 아니라 자바스크립트 기반 프레임워크에 다 공통된 내용이다 react는 SPA기반 → 싱글 html로 구성  그전에는 대부분 MPA 기반이라페이지마자 html이 따로 존재하였다 실제로 내가 만들어본 페이지도 메인페이지 html서브페이지 html 다 따로 만들어서 진행했는데 이 방식은 페이지 이동이 굉장히 느리고 파일도 되게 무거워진다 그러나 SPA는 html은 하나고 jsx를 여러개로 만들어 구조 html 은 하나로 두고안에 있는 내용만 jsx로 바꾸면 되서 페이지 이동이 빠르고 실제로 페이지는 재시작 되지 않는다 관련 jsx에 접근할 수 있게 만들어주는 역할이 라우터이다!  라우터 라이브러리는 터미널에서 npm i react-router-dom 쳐주면 깔린다번외로 vue에서 ..

https://mm-study-front.tistory.com/55 [React.js] Context컴포넌트 간의 데이터를 전달하는 방법 기능은 https://mm-study-front.tistory.com/36 [React.js] Props부모컴포넌트가 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달하는 것 모듈화 할 때 버튼mm-study-front.tistory.com   이전 글 Context는 props을 대신하여 데이터를 보낸 것props를 안 쓰면 데이터를 받아 쓰는 방법은?? → 리액트 훅의 종류인 useContext 사용  https://mm-study-front.tistory.com/43 [React.js] React Hooks클래스 컴포넌트의 기능을 함수 컴포넌트에서 사용..

컴포넌트 간의 데이터를 전달하는 방법 기능은 https://mm-study-front.tistory.com/36 [React.js] Props부모컴포넌트가 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달하는 것 모듈화 할 때 버튼을 만들고 속성만 바꿔주면 되기 때문에 굉장히 편하다 일반적인 문자열같은 자바스크립mm-study-front.tistory.com와 동일한데  props의 단점까지 보완 가능 → props는 부모에서 자식으로만 데이터 전달 가능       그래서 프로젝트 진행할 때  트리구조식 자식의 자식에게 주고 받을 수가 없어  app.jsx에 많은 코드들이 쌓이게 됨     →이를 프롭스 드릴링(Props Drilling)이라 함context는 props가 전해주던 데이터들을 ..