기억보다 기록

React js와 Vue js 등의 자바스크립트 프레임워크를 공부하고 사용하며 프로젝트를 하고 있지만, 그 기본이 되는 바닐라 자바스크립트나 html, css 에 대한 이해가 솔직히 거의 없다고 생각해서 노마드 코더 강의를 선택해서 그에 관해 수강하기로 했다. 그래서 첫번째로 코코아톡 클론코딩이라는 강의를 수강하기로 했고, 2주마다 매일 아침 6시마다 숙제가오고 그 숙제를 모두 완료하면 30퍼센트 할인쿠폰을 주는 챌린지라는 프로그램이 있다고 해서 그것도 같이 신청했다. 사실 웹, html, css 전반적으로 완전히 입문자 혹은 초보자는 아니기때문에 초반에 그냥 지나쳐도 될부분이 있다고 생각했는데 그런 생각은 버리고 다 체득하기 위해서 강의를 구매한 거기 때문에 강의를 들으면서 내가 필요하다고 생각하는 부..

보통 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을 변경하는 부분이 있었고 그것 때문에 렌더링이 다시 되는 것이었다.

원래 구현하려고 했던 것은 밑의 사진에서 '재평가'를 클릭하면 모달이 나오고 거기서 수정을 할 수 있는 것이었는 데, 모달안에서 해당 데이터의 id가 식별이 되지 않았고 데이터를 수정할 수 없었다. 그래서 아래 사진과 같이 모달이 열렸는지 확인 하는 flag가 true가 되면 그냥 TableCell 내에 바로 보이도록 수정했다. 그리고 이 부분에서 구현하려고 했던 것은 위와 같이 해당 음악 데이터의 코멘트를 수정할 때 그 데이터 만의 input form 이 렌더링 되는 것이 었지만, 어느 이유에서인지 모든 열의 input form 이 렌더링 되었다. 데이터가 들어가 있는 musics 를 map함수 (musics.map ( m =>{ ...}))로 각 TableCell에 뿌리는 방식으로 되어있었고, 해당 ..

음악 수정 기능을 추가했다. 정확히 말하면 음악 데이터의 속성중 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이고 변경이 있을..

음악 관리 프로그램을 만들던 도중 메인 페이지에 렌더링되는 음악들을 Material-ui 의 Table API를 사용하여 구현했다. 제목, 장르, 별점 부분은 TableHeader로 그에 맞는 데이터들은 TableCell을 이용했다. {title} {genre} {rate} Material-ui 공식 홈페이지를 참조해 자체적으로 정렬이 가능한 props인 align을 사용하여 오른쪽 정렬을 했는 데 다음과 같이 나왔다. 위를 해결하기 위해 공식 홈페이지 외에 다른 곳에서 정보를 얻으려고 했지만 원하는 정보가 나오지 않았고 이것은 정렬의 문제라기 보다 TableCell의 크기가 어떻게 할당되어있는 지 궁금했다. style에 backgroundColor를 추가해서 어떻게 되어있는 지 확인했다. 위와 같이 어..

얼마전 vue 공부를 시작했다. Vue-CLI 를 설치하여 진행하던 와중 ~.vue 확장명인 파일에는 하이라이트 기능이나 에러 체킹 기능이 적용되지 않았다. 마치 코드들의 무덤에 있는 것 같았다. 따로 플러그인을 설치해야 될 것 같아서 찾아보던 중 공부를 진행중인 vs code에서 ~.vue 파일을 위해 extension을 설치하라는 알림이 떴다. 이게 내 문제를 해결해줄 수 있을 것같아서 설치를 했더니 해결이 되었다. 해결된 그 자체가 이 기능이다. Syntax-Highlighting, Erro Checking, Formatting, Debugging, Auto Completion 등 원활한 코딩을 위해 도움을 준다. 다른 플러그인들도 있지만 다운로드 수 가 많고 기능성이 좋다고 한다. 아래의 링크로 ..

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