개발+공부/웹
-
java.lang.ClassNotFoundException: com.mysql.cj.jdbc.Driver (java.lang.ClassNotFoundException: com.mysql.jdbc.Driver) : mysql-connector-java를 사용하면서 다음과 같은 에러가 발생했다. 이는 mysql과 java가 제대로 연동되지 않았음을 의미한다. 어떻게 해결할 수 있을까? 인프런의 JSP 강의에서도 해당 내용을 다루고 있다. 하지만 mysql 버전이 5.X로 내가 사용하는 8.0과는 다르다. MySQL 8.0 버전은 mysql-connector-java 5.X버전으로는 해결이 안 된다. 여기서 8.0버전의 connect파일을 다운받아 프로젝트의 src/main/webapp/WEB-INF/lib에..
[MySQL] java.lang.ClassNotFoundException: com.mysql.cj.jdbc.Driver | MySQL JDBC Driver Not Foundjava.lang.ClassNotFoundException: com.mysql.cj.jdbc.Driver (java.lang.ClassNotFoundException: com.mysql.jdbc.Driver) : mysql-connector-java를 사용하면서 다음과 같은 에러가 발생했다. 이는 mysql과 java가 제대로 연동되지 않았음을 의미한다. 어떻게 해결할 수 있을까? 인프런의 JSP 강의에서도 해당 내용을 다루고 있다. 하지만 mysql 버전이 5.X로 내가 사용하는 8.0과는 다르다. MySQL 8.0 버전은 mysql-connector-java 5.X버전으로는 해결이 안 된다. 여기서 8.0버전의 connect파일을 다운받아 프로젝트의 src/main/webapp/WEB-INF/lib에..
2022.07.18 -
React.js를 사용해 개발한 웹사이트가 localhost의 npm 또는 yarn에서 정상적으로 작동한다. 따라서 이 사이트를 netlify에 배포하려는 상황이다. 이런! 에러가 발생했다! Page Not Found Looks like you’ve followed a broken link or entered a URL that doesn’t exist on this site. React Router를 사용하는 React 사이트를 netlify에 배포하는 경우 다음과 같은 에러가 발생할 수 있다. 왜 Page Not Found가 발생할까? React Router는 client에서 라우팅을 처리한다. 따라서 root가 아닌 페이지(ex: https://yoursite.netlify.com/login 등)에..
[netlify] Page Not Found Error (React Router)React.js를 사용해 개발한 웹사이트가 localhost의 npm 또는 yarn에서 정상적으로 작동한다. 따라서 이 사이트를 netlify에 배포하려는 상황이다. 이런! 에러가 발생했다! Page Not Found Looks like you’ve followed a broken link or entered a URL that doesn’t exist on this site. React Router를 사용하는 React 사이트를 netlify에 배포하는 경우 다음과 같은 에러가 발생할 수 있다. 왜 Page Not Found가 발생할까? React Router는 client에서 라우팅을 처리한다. 따라서 root가 아닌 페이지(ex: https://yoursite.netlify.com/login 등)에..
2022.01.03 -
Netlify로 배포 도중 다음과 같은 에러가 발생했다. Treating warnings as errors because process.env.CI = true. Most CI servers set it automatically. 공식 netlify docs에서 해결법을 확인할 수 있었다. https://docs.netlify.com/configure-builds/troubleshooting-tips/#build-fails-on-warning-message 프로젝트마다 설치된 라이브러리들이 warning을 error로 감지할 수 있다고 한다. 해결 방법 굉장히 간단하다. Site settings> Build & deploy> Edit settings Build command의 npm run build를 ..
[Netlify] Treating warnings as errors because process.env.CI = true.Netlify로 배포 도중 다음과 같은 에러가 발생했다. Treating warnings as errors because process.env.CI = true. Most CI servers set it automatically. 공식 netlify docs에서 해결법을 확인할 수 있었다. https://docs.netlify.com/configure-builds/troubleshooting-tips/#build-fails-on-warning-message 프로젝트마다 설치된 라이브러리들이 warning을 error로 감지할 수 있다고 한다. 해결 방법 굉장히 간단하다. Site settings> Build & deploy> Edit settings Build command의 npm run build를 ..
2022.01.03 -
웹 서버에 요청을 보내는 방식은 여러 가지가 있다. 인터넷 표준으로 정해 둔 이러한 요청 방식을 메소드(Method)라고 부른다. 메소드의 대표적인 예로는 GET과 POST방식이 있다. HTTP 클라이언트는 GET과 POST 둘다 다른 웹 서버에 데이터를 요청할 수 있다. 그럼 GET 방식과 POST 방식의 차이점은 무엇일까? HTTP 요청 포맷은 크게 헤더(Header)와 본문(Body) 부분으로 이루어져 있다. GET 방식은 헤더 부분에 요청 정보들을 넣어 보낸다. http 객체의 get() 메소드를 사용하면 다른 사이트에 요청을 보내고 응답을 받아 처리할 수 있다. get() 메소드의 첫번째 파라미터는 다른 사이트의 정보를 담고 있는 객체이다. 두번째 파라미터는 callback 함수이다. 응답 데이..
[Node.js] GET과 POST의 차이는 무엇일까?웹 서버에 요청을 보내는 방식은 여러 가지가 있다. 인터넷 표준으로 정해 둔 이러한 요청 방식을 메소드(Method)라고 부른다. 메소드의 대표적인 예로는 GET과 POST방식이 있다. HTTP 클라이언트는 GET과 POST 둘다 다른 웹 서버에 데이터를 요청할 수 있다. 그럼 GET 방식과 POST 방식의 차이점은 무엇일까? HTTP 요청 포맷은 크게 헤더(Header)와 본문(Body) 부분으로 이루어져 있다. GET 방식은 헤더 부분에 요청 정보들을 넣어 보낸다. http 객체의 get() 메소드를 사용하면 다른 사이트에 요청을 보내고 응답을 받아 처리할 수 있다. get() 메소드의 첫번째 파라미터는 다른 사이트의 정보를 담고 있는 객체이다. 두번째 파라미터는 callback 함수이다. 응답 데이..
2021.12.08 -
처음 학교 '웹 프로그래밍' 과목에서 ==와 ===가 다름을 배웠을 때, "굳이 이렇게까지...?"라고 생각했다. 며칠 전, 이제 웹을 시작한 친구가 둘의 차이점을 물어봐서 "아마... type까지 검사하고 안하고일껄...?"라고 대답했다. 떠오른 김에 정리해보자. Equality vs Identity Javascript는 엄격한 비교와 type 변환 비교를 모두 지원한다. Equality ==와 !=는 Equality 연산자이다. Javascript에서 Equality 연산자를 사용하면, 먼저 피연산자들의 type을 비교할 수 있는 형태로 변환 후 연산을 수행힌다. 555 == '555' // true true == 1 // true 'Hello' === new String('Hello') // tru..
[Javascript] '==' 와 '===' 뭐가 다를까?처음 학교 '웹 프로그래밍' 과목에서 ==와 ===가 다름을 배웠을 때, "굳이 이렇게까지...?"라고 생각했다. 며칠 전, 이제 웹을 시작한 친구가 둘의 차이점을 물어봐서 "아마... type까지 검사하고 안하고일껄...?"라고 대답했다. 떠오른 김에 정리해보자. Equality vs Identity Javascript는 엄격한 비교와 type 변환 비교를 모두 지원한다. Equality ==와 !=는 Equality 연산자이다. Javascript에서 Equality 연산자를 사용하면, 먼저 피연산자들의 type을 비교할 수 있는 형태로 변환 후 연산을 수행힌다. 555 == '555' // true true == 1 // true 'Hello' === new String('Hello') // tru..
2021.02.24 -
2.6 useScroll & useFullscreen useScroll user가 scroll하여 무언가 지나쳤을 때, 색상을 바꾸는 등 무엇이든 할 수 있다. const useScroll = () => { const [state, setState] = useState({ x: 0, y: 0 }); const onScroll = () => { setState({ y: window.scrollY, x: window.scrollX }); }; useEffect(() => { window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); return state; }; c..
#2-2 USEEFFECT2.6 useScroll & useFullscreen useScroll user가 scroll하여 무언가 지나쳤을 때, 색상을 바꾸는 등 무엇이든 할 수 있다. const useScroll = () => { const [state, setState] = useState({ x: 0, y: 0 }); const onScroll = () => { setState({ y: window.scrollY, x: window.scrollX }); }; useEffect(() => { window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); return state; }; c..
2021.01.12