1월 17일 챌린지 시작일
... 인 줄로만 알고 있었다.
50일간 진행되는 공부 챌린지와 함께 아침 시간 활용을 조금 더 타이트하게 진행해 볼 야심 찬 계획을 가지고 있었다.
최종 목표는 5시에 기상 후, 6시30분까지 스터디, 8시까지 러닝과 홈웨이트를 마친 후 샤워까지 끝내는 게 목표이다. 현재는 30분 스터디와 러닝, 웨이트까지 하고 있는데 조금 더 일찍 일어나서 스터디 시간을 늘리는 게 목적이 되는 것이다.
우선 첫 째날이라 기상이 잘 적응이 안돼서 6시가 조금 못돼서 기상을 했다.
그리고 곧 바로 책상에 앉아 1일 차 스터디를 진행했다. 아무래도 출근 전에 스터디와 러닝, 홈웨이트까지 하려다 보니 스터디 내용을 정리하거나 기록을 꼼꼼하게 할 여유는 없는 것 같다.
그런데 개발 공부는 자고로 따라서 쳐보고 다시 한번 내 스타일대로 쳐보는거 아닐까.
미션 내용중에 블로그에 500자 이상의 포스팅을 해야 하는 미션이 있는데 코드만 몇 줄 쳐도 500자는 충분히 넘고도 넘을 거다.
그렇게 첫째 날 하루 미션을 성공했다고 생각하고 있었다.
오늘(17일) 미션 안내 메일이 온다고 했는데 왜 메일이 안 올까 생각했다. 오후에 미션 안내 메일이 왔는데, 아뿔싸...
맞다 미션 시작일은 오늘이 아니었다. 오늘은 안내 메일만 발송하는 날이었고 미션은 그다음 주였던 것이다. 오늘 나는 아침부터 무엇을 한 걸까? 꼭 반에 이런 애들 하나씩 있는데 오늘은 그게 나였나 보다.
자, 긍정적으로 생각해서!
1. 미리 포스팅해서 포스트의 레이아웃이나 어떤 식으로 작성해야 할지 테스트해 볼 수 있는 기회가 주어졌다.
2. 다음 주부터 라고 해서 다시 리셋하지 않는다. 그냥 다른 사람들보다 1주일 먼저 미션이 시작되었다.
3. 듣고 싶은 강의는 강의 중반부부터 시작된다. 그래서 실제 미션이 시작하기 전에 7일 동안 초반 커리큘럼을 다 훑어볼 생각이다.
그리고, 이 챌린지의 포스팅 방식은,
교육 과정의 내용을 포스트 별로 나누는 게 아니다. 날짜별로 한 개씩 포스팅되는 방식이다 보니 사실상 어떤 과정을 공부하면서 목록 정리를 꼼꼼하게 해서 누군가 이 블로그의 포스팅을 보면서 따라서 공부하는 내용의 포스팅은 한계가 있을 수밖에 없다고 판단된다.
그래서 어차피 다이렉트로 직접 포스팅하지는 않고 개인 개발 노트에 목록별로 작성할 예정이라 그나마 목록별로 볼 수 있지 않을까 싶다. 그렇지만 이 내용도 극 축약된 내용으로만 적을 것 같아서 사실상 누군가에게 학습 목적을 가지고 보일 포스팅은 되지 않을 것 같다.
오로지 패스트캠퍼스의 챌린지에 포커싱 된 포스팅이 될 것 같다. 사진도 아래와 같은 사진이 매일 포스팅될 것인데 이왕 올리는 거 뭐 좋은 거 없을까 생각 중인데 아직 답이 없다.
20. Ref로 DOM 다루기
Input Element가 있고 화면이 뜨자마자 focus를 주고 싶다면?
?.focus(); 와 같이 사용했다.
React에서는 useRef를 사용한다.
Why React? 왜 리액트는 useRef를 사용했을까?
document.geElementById 류를 사용하지 않고 useRef라는 별도의 방법을 제공할까?
useRef는 element만 담는 것이 아니다. 특정 value를 설정하고 useRef.current로 접근한다.
Ref로 DOM 다루기
Vanilla JS → document.get~ / document.query~
React → useRef / ref
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const rootElement = document.getElementById("root");
const App = () => {
const inputRef = React.useRef();
const divRef = React.useRef();
React.useEffect(() => {
inputRef.current.focus();
// document.getElementById("input").focus();
setTimeout(() => {
divRef.current.style.backgroundColor = "pink";
}, 1000);
}, []);
return (
<>
<input ref={inputRef} />
<div
ref={divRef}
style={{ height: 100, width: 300, backgroundColor: "brown" }}
/>
</>
);
};
ReactDOM.render(<App />, rootElement);
</script>
</body>
</html>
21. Form 다루기 1
기본 Form
- label
- input
- submit
console.dir(객체) 를 넣으면 객체 내부의 console에서 객체 내부의 구조를 확인할 수 있다.
https://developer.mozilla.org/en-US/docs/Web/API/console/dir
onSubmit → event.preventDefault()
event.target.elements → console.dir(element)
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const rootElement = document.getElementById("root");
const App = () => {
const handleSubmit = (event) => {
event.preventDefault(); // 이벤트의 기본동작 막기
console.dir(event.target);
alert(
`FirstName: ${event.target.elements.fname.value}, Choosed Car: ${event.target.elements.cars.value}`
);
};
return (
<form onSubmit={handleSubmit}>
<label htmlFor="fname">First name:</label>
<br />
<input type="text" id="fname" name="fname" defaultValue="John" />
<br />
<label htmlFor="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="submit" defaultValue="Submit" />
</form>
);
};
ReactDOM.render(<App />, rootElement);
</script>
</body>
</html>
댓글