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 settingsBuild command의 npm run build를 CI= npm..

웹 서버에 요청을 보내는 방식은 여러 가지가 있다. 인터넷 표준으로 정해 둔 이러한 요청 방식을 메소드(Method)라고 부른다. 메소드의 대표적인 예로는 GET과 POST방식이 있다.HTTP 클라이언트는 GET과 POST 둘다 다른 웹 서버에 데이터를 요청할 수 있다. 그럼 GET 방식과 POST 방식의 차이점은 무엇일까?HTTP 요청 포맷은 크게 헤더(Header)와 본문(Body) 부분으로 이루어져 있다. GET 방식은 헤더 부분에 요청 정보들을 넣어 보낸다. http 객체의 get() 메소드를 사용하면 다른 사이트에 요청을 보내고 응답을 받아 처리할 수 있다. get() 메소드의 첫번째 파라미터는 다른 사이트의 정보를 담고 있는 객체이다. 두번째 파라미터는 callback 함수이다. 응답 데이터를..

처음 학교 '웹 프로그래밍' 과목에서 ==와 ===가 다름을 배웠을 때, "굳이 이렇게까지...?"라고 생각했다. 며칠 전, 이제 웹을 시작한 친구가 둘의 차이점을 물어봐서 "아마... type까지 검사하고 안하고일껄...?"라고 대답했다. 떠오른 김에 정리해보자. Equality vs Identity Javascript는 엄격한 비교와 type 변환 비교를 모두 지원한다. Equality ==와 !=는 Equality 연산자이다. Javascript에서 Equality 연산자를 사용하면, 먼저 피연산자들의 type을 비교할 수 있는 형태로 변환 후 연산을 수행힌다. 555 == '555' // true true == 1 // true 'Hello' === new String('Hello') // tru..

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.0 Introduction to useEffect useEffect componentDidmount의 역할을 해서 새로고침하면 sayHello를 실행한다. 2개 인자를 받음 - function으로서의 effect - dependency : 만약 deps가 있다면 effect (deps)리스트에 있는 값일 때만 값이 변하도록 활성화 된다. useEffect는 여기서 componentDidMount, componentWillUpdate이다. dependency일 때만 update한다. 📌 dependency에 change가 발생할 때만 update! + useEffect로부터 function이 return된다. -> componentWillUnmount! import React, { useState, u..

1.0 Introduction to useState리액트의 불편한 점 2가지 1. handling input 2. fetching data hooks는 class component, render등을 고려할 필요가 없다.import React, { useState } from "react";const [item, setItem] = useState(1)item: 변경할 statesetItem: item의 modifier Hooks vs Class componentimport React, { useState } from "react";// Hooks로 구현한 경우function App() { const [item, setItem] = useState(1); const incrementItem = () =..