TIL - 2020.12.09~10

이틀전과 어제 TIL을 늦어서 못 써서 작성한다 ㅠㅠ 인강 내용이랑 조금 정리하려고 해서 길어질까봐 낮임에도 불구하고 쓴다!

👉 오늘 한 일

• Udemy 인강 시청
• 드림코딩 유튜브 시청
• Hooks 공부
• 면접

👉 공부한 내용

• 50 Projects In 50 Days - HTML, CSS & JavaScript 강의를 시청하며 여러 기능들을 구현했다. 질문 탭에 질문 외의 정보들도 올라와서 유익하니 만약 강의를 듣는 분이 계시다면 한번씩 보는 추천 드립니다!

• 리액트 공부를 시작했던 노마드 코더 강의를 시청했다. 다음주부터 출근인데 함수형 컴포넌트를 쓸 때 많이 사용하게 될 거 같아서 노마드 코더 리액트 hooks youtube를 보며 개념을 다시 한번 살펴봤다. 유용한 hooks를 한번 정리해봤는데 코드는 아래와 같다.
  input 값을 받는 커스텀 Hook이다.
  useState라는 hook을 활용했다.

  function useInput(defaultValue) {
  	const [value, setValue] = useState(defaultValue);
  
  	const onChange = e => {
  		const {
  			target: { value}
  		} = e;
  		setValue(value);
  	};
  
  	return { value, onChange };
  }

  다음은 데이터를 받는 커스텀 hook이다.
  fetch

  function use Fetch(url) {
  	const [palyload, setPayload] = useState(nulll);
  	const [loading, setLoading] = useState(true);
  	const [error, setError] = useState("");
  
  	const callUrl = async () => {
  		try {
  			const { data } = await Axios.get(url);
  			setPayload(data);
  		} catch {
  			setError("Error");
  		} finally {
  			setLoading(false);
  		}
  	};
  
  	useEffect(() => {
  		callUrl()
  	}, [])
  
  	return { payload, loading, error };
  }

  그리고 useRef를 사용해 해당 태그 바깥쪽이 클릭됐는지 확인하는 hook이다.

  useRef

  function clickOutside(fn) {
  	const ref = createRef();
  	const handleClick = e => {
  		if (!ref.current.contains(e.target)) {
  			fn();
  		}
  	};
  
  	useEffect(() => {
  		document.addEventListener("click", handleClick);
  	}, []);
  	return ref;
  }
  
  function App() {
  	const onClickOutside = () => {
  		console.log("Clicked Outside");
  	};
  	const ref = clickOutside(onClickOutside);
  	return (
  		<div className="App">
  			<div ref={ref}>
  				<h1> Hello cook&coding </h1>
  				<h2> This should be a popup</h2>
  			</div>
  			<input type="text" />
  		</div>
  	);
  } 

• 그리고 javascript 공부를 위해 드림코딩 엘리님의 유튜브를 시청했다. 자바스크립트 배우기전 꼭 봐야할 영상 | 자바스크립트의 역사와 현재 그리고 미래 (JavaScript, ECMAScript, JQuery, Babel, Node.js)을 보면 자바스크립트가 어쩌다 탄생하게 되었는지 등을 확인할 수 있으므로 철학을 살펴볼 수 있다. 한번 보는 것을 추천한다!

☕️ 잡담

면접을 봤는데 다행히 좋게 봐주셔서 합격을 했다. 다음주부터 바로 출근이어서 걱정 반, 기대 반인데 잘하면 좋겠다,,,! 열심히 해보고 다양한 경험을 쌓고 싶다.
그리고 NH 해커톤을 신청했는데 이번주에 바로 개발이어서 주말에 작성하려고 했던 후기를 아마 다음주에 작성할 거 같다,,, ㅠㅠㅠ 좋은 결과를 얻을 수 있으면 좋겠다!

📑 참고사이트

• 노마드 코더 리액트 hooks youtube - 노마드 코더 리액트 훅 재생목록
• 자바스크립트 배우기전 꼭 봐야할 영상 | 자바스크립트의 역사와 현재 그리고 미래 (JavaScript, ECMAScript, JQuery, Babel, Node.js) - 드림코딩 유튜브
• 50 Projects In 50 Days - HTML, CSS & JavaScript