기억보다 기록

보통 Vue Cli를 통해 Vue 프로젝트를 시작하면 index 파일에 직접적으로 다음과 같이 라우터가 설정이 되어있다. //index.js import Vue from 'vue' import Router from 'vue-router' import This from '../This' import Is from '../Is' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'This', component: This }, { path: '/is', name: 'Is', component: Is } ] }) 하지만 여러개의 라우터가 필요할 수 있고, 별도로 파일을 지정해 사용하는 것이 용의할 수 있다. 그럴 때는 그냥 자동으로..

중첩 라우터를 설정할 때는 다음과 같은 방식으로 설정한다. const routes = [ { path: "/", component: { template: "this is yes " }, children: [ { path: "number1", component: { template: "this is number1" } }, { path: "number2", component: { template: "this is number1" } } ] } ]; export default routes; 위와 같이 라우터를 설정했다면, /yes 가 최상위 경로가 되고 children 에 포함되는 경로 i, can 이 하위 경로로 지정된다. 그리고 주의할 점이 최상위 경로가 되는 컴포넌트의 템플릿에는 라우터가 설정된 파일에..

특정 아이템 위에 커서를 올리면 폰트가 커지는 코드를 작성하고있었는데, 커서를 위로 올릴때 마다 렌더링이 되었다. 처음엔 코드안에 useEffect가 있어서 해당 부분때문에 렌더링이 되는게 아닌가 했는데, 의존값을 잘 설정해두었고 그것이 아님을 확인했다. state가 변경될 시 해당 컴포넌트는 렌더를 재실행한다... 기본적인 건데 모르고 있었다는게 정말 잘못됐다. 커서가 올라갈때 실행되는 함수안에 state을 변경하는 부분이 있었고 그것 때문에 렌더링이 다시 되는 것이었다.

음악 수정 기능을 추가했다. 정확히 말하면 음악 데이터의 속성중 comment를 수정하는 기능이다. 어떻게 동작을 하였는지 다시 공부하는 차 입력을 하고 그 입력한 데이터로 요청을 하고 데이터베이스를 수정하는 과정을 다시 복기해보겠다. 1. App.js //App.js import MusicDataService from './services/MusicService'; /*...*/ const [musics, setMusics] = useState([]); /*...*/ useEffect(() => { retrieveMusics(); }, [refresh]) const retrieveMusics = () => { MusicDataService.getAll() .then(res => { setMusics(r..

메인 페이지에는 모든 음악 데이터를 전송받는 함수가 실행되고 있었고 데이터가 추가되고 삭제되었을 때 메인 페이지의 업데이트가 필요했다. /*...*/ useEffect(() => { retrieveMusics(); }, []) /*....*/ const retrieveMusics = () => { //모든 데이터를 전송받는다. MusicDataService.getAll() .then(res => { setMusics(res.data); }) .catch(e => { console.log(e) }) } 1. 두 번째 파라미터에 실질적인 음악 데이터가 들어가게 되는 musics 객체를 의존값으로 설정한다. 무슨 이유에서인지 무한 루프가 발생했다. musics는 음악 데이터를 다루는 state이고 변경이 있을..

기존에 mysql과 raw하게 연결했던 음악 관리 프로그램을 쿼리문을 직접 작성하지 않고 데이터를 생성, 삭제, 변경 등을 할 수 있는 Sequelize를 사용하도록 개편했다. Sequelize란 ORM의 일종이다. 간단히말해 ORM 이란, 객체(Object) 와 관계형 데이터베이스 (Relational Database)의 데이터를 자동으로 맵핑(Mapping) 해주는 것 이다. express에 Sequelize를 사용하는 것은 이 분의 유튜브 를 보고 진행했다. react와 express, Sequelize를 모두 함께 쓰는 코드를 찾기 어려웠는데 결과적으로 아주 원활히 성공했기 때문에 정말 만족했다. 하지만 그 와중에 몇 가지 에러가 발생했다. 프론트 엔드단인 리액트의 App.js에서 MySQL 테이..

음악 관리 프로그램에서 며칠 전부터 Invalid Hook Call(유효하지 않은 Hook을 요청)하고 있다며 에러가 발생해 구동되지 않았다. useEffect(() => { callApi() .then(res => setMusics(res)) // 에러가 발생한 부분 .catch(err => console.log("this is error " + err)); }, []) const callApi = async() => { const response = await fetch('http://localhost:5000/musicdata') const body = await response.json(); return body; } setMusics에서 Hooks을 호출할때 에러가 발생한 것 같았다. 인터넷에 ..

React 의 App.js 에서 fetch를 통해 express 에 연동된 DB 데이터를 불러들이는 과정에서 계속해서 에러가 났다. useEffect(() => { callApi() .then(res => setMusics(res)) .catch(err => console.log("this is error " + err)); }, []) async function callApi() { const response = await fetch('/musicdata') const body = await response.json(); // { connection.query('SELECT * from musicdata', (error, rows) => { if (error) throw error; res.header..

나동빈님의 고객 관리 프로그램 예제를 하던 도중 AWS FREE TIER에 있는 RDS를 이용해 DB를 구축하는 과정에서 나는 내가 생각했을 때 더 대중적인 MySQL을 DB로 사용하기로 했다. 이 블로그 를 통해 MySQL 설치, 새로운 모델 생성, 실질적인 DB 구축 등 연동에서 MySQL에서 필요한 부분을 모두 완료했다. 사실 처음에 MySQL을 설치하지 않은 상황에서 MySQL 워크벤치만 가지고 서버를 실행시키려다 문제가 시켜 MySQL 설치가 안되있음을 깨닫고 설치후 재진행했었다. 나같은 사람이 있을 지 모르지만 MySQL이 설치 안되어있다면 이 링크를 따라서 먼저 설치를 하고 진행해야한다. 블로그를 따라서 마지막 까지 완료하고 실험용 데이터도 하나 삽입했다. 1. MySQL 에 연결하기 우선 ..

리액트와 node.js 의 express를 연동하는 연습을 진행하면서 첫번째에 환경을 설정할 때 yarn eject 라는 커맨드를 입력해야 했다. 하지만 다음과 같은 에러가 등장했고 나는 구글에 'yarn error'라고 검색을 했다. 여기에 대해서 나와 같은 에러가 나는 사람들이 꽤있었고 해결방법도 있었다. 보통 해결방법은 다음과 같았다. $ npm uninstall react-scripts $ npm install react-scripts-cssmodules $ git add . $ git commit -m "Save before ejecting" $ yarn eject 왜 이 작업을 하는 지는 정확히 이해는 안갔지만 밑의 블로그에 따르면 create-react-app 보일러플레이트 코드자체가 git..