기억보다 기록

음악 관리 프로그램에서 며칠 전부터 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을 호출할때 에러가 발생한 것 같았다. 인터넷에 ..

노트북을 항시 켜두다가 오랜만에 껐다가 켜 음악 관리 프로그램의 MySql 서버를 열었는데 접속이 불가했다. 인터넷에 검색 해본 결과 작업관리자 -> 서비스 에서 MySQL80 항목의 상태가 중지됨으로 되었음을 알게 되었고 이를 실행중으로 바꾸었더니 서버가 정상적으로 작동되었다. 보고 해결한 곳 : m.blog.naver.com/leenuri7/221765825089

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 에 연결하기 우선 ..

리액트를 다루는 기술 책을 공부하다가 16장에서 'Parcel로 프로젝트 만들기' 라는 챕터가 나왔고 Parcel이라는 것이 무엇인지 찾아보다가 그것이 '웹 어플리케이션 번들러(모듈 번들러)'의 일종이란 것을 알게 되었고 번들러라는 것에 대해 찾아 봤다. 우선 모듈(Module)이라는 것은 프로그래밍의 관점에서 보았을 때 '특정 기능을 갖는 작은 코드 단위'라고 할 수 있다. // math.js function sum(a, b) { return a + b; } function substract(a, b) { return a - b; } const pi = 3.14; export { sum, substract, pi } 위의 math.js는 합을 구하는 sum 함수, 차를 구하는 substract 함수, ..

나동빈님의 React와 Node.js로 만드는 고객 관리 시스템 개발 강좌 를 사용해 음악 관리 웹 어플리케이션을 만들고 있다. 그런데 프로젝트 실행을 yarn dev 로 특이하게 해서 package.json을 살펴 봤는데 scripts 부분이 밑에 처럼 되어있었다. "scripts": { "music": "cd music && yarn start", "server": "nodemon server.js", "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn music\"" }, dev 는 concurrently --kill-others-on-fail \"yarn server\" \"yarn music\" 라는 명령어를 실행하기 위해 만든 ..

리액트와 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..

이전 포스트에서 인사를 하고 요일을 보여주는 데 사용하기위해 계속 등장한 것이 있다. console.log("hello!") 여기서 console.log()는 ()안에 "hello!"가 들어간 것을 보면 function처럼 보인다. 또한 .(점)을 찍고 접근하는 것을 보면 Object처럼 보이기도 한다. 여기서 console은 브라우저에 내장되어있는 (브라우저가 제공하는) Object이다. 그렇다면 Object의 요소들에 접근한 것 처럼 console.log()는 console이라는 Object의 log()라는 함수를 실행하겠다는 의미이다. console.log(console)을 입력해서 확인해보자. 다음 처럼 console이라는 Object안에는 log라는 함수가 있었고 그 외에 수많은 함수들이 있었다..

지난 시간에는 변수, 이번 시간은 함수이다. Function 만일 console.log 라는 코드 조각으로 반 친구들에게 인사를 하고싶다면 어떻게 해야할까? console.log("hello Oh!") console.log("hello Kim!") console.log("hello Jung!") console.log("hello Park!") . . . 여기까진 좋지만 만약 집에 갈때가 되서 인삿말을 "Bye"로 바꾸고 싶다면, 반에 100명이 있다면 100번을 쳐야할 셈이다. 중복을 줄이는 것이 컴퓨터 프로그래밍에서 발전해 온 길이다. (생활코딩에서 들은 말) 그러므로 100번의 console.log("hello ***")을 하나의 완전한 코드로 인사가 필요할 때마다 꺼내 쓸 수 있다면 아주 좋을 것이..

나는 뭔가 나중에 볼것같으면 일단 저장해 두는 버릇이 있는데 정리하지 않는 습관이 겹쳐져서 항상 내 노트북은 쓰레기통 같았다. 따로 분류하는 폴더를 안만들어놔서 다 바탕화면에 집어넣다보니 나중에는 화면을 꽉차고 화면을 넘어 저장해도 어디에있는지 찾을 수 없는 지경에 이렀다. 이건 너무한것 같아서 오늘 정리를 했다. 사실 이렇게 노트북정리는 가끔씩하는데 문제는 어김없이 쓰레기장으로 돌아온다는 것이었다. 더이상 그렇게 살고싶지 않았기 때문에 고민을 하다가 바탕화면에 직관적으로 분류를 하자는 생각이 들었다. 저렇게 구분지어놓으면 나 스스로 다른데에 들어가면 보기싫으니까 카테고리화를 할 수 있을 것 같았다. 저것만으로도 분류는 되지만 나는 조악한게 좋기때문에 포토샵으로 바탕화면을 만들어서 쓰면 재밌을 것 같았다..