1일차 (12/16 수)
나는 지금 아무 생각이 없다. 무엇부터 시작해야할까. 코딩을 다시 시작하려고 했던 시도가 벌써 4번째다. 일단 내가 생각하고 있는 사이트가 트렐로와 가장 유사하지만, 우선은 포모도로 시계를 만들도록 하겠다. 우선 udemy JS 기초 프로그램 + 인프런 웹 게임을 만들며 배우기을 병행하면서 진행하고자 한다.
Hooks는 페이스북이 요즘 밀고 있는 리액트 표준. 3-4년전까지는 Class였음 (현존하는 코드의 99%)
React를 사용하는 이유 → "사용자 인터페이스"를 편하게 만들기 위해서. Single page application이라고 하는데 React 공식 블로그를 확인하면 알 수 있음. 또 데이터를 쉽게 처리하고자 하는 목적도 있음. 페이스북이 단일 웹페이지 중에서 가장 데이터가 많을 것. 이를 jQuery로 만들었다면 몇 억 명의 인구가 동시에 좋아요를 누를텐데 이를 처리하고자 한다면 매우 힘들 것. 또 다른 이유는 데이터-화면을 일치(synchronzie)가 용이하고 중복된 컴포넌트의 재활용성이 좋아짐.
react를 어려워하는 이유는 component 때문. 특히 퍼블리싱하던 분이 힘들어하는데 사고 전환이 힘든 부분이 있음. 머리가 말랑말랑할 필요가 있음
webpack은 쪼개진 js 파일들을 html이 실행할 수 있도록 js로 합친다는 개념
상태를 정의하기 전
<script>
const e = React.createElement;
class LikeButton extends React.Component{ // Like란 컴포넌트를 만들 예정
constructor(props){
this.state // 상태(state)를 적는 곳
}
render(){
return e('button', {onClick : () => {console.log('clicked')}, type:'submit' }, 'Like'); // <button onclick="onclick">Like</button> 를 "만들겠다"
}
}
</script>render(){return e('button', null , 'Like'); // <button onclick="onclick">Like</button> 를 "만들겠다" }render(){return e('button', {onClick : () => {console.log('clicked')}, type:'submit' }, 'Like');}render () { return e('button'), null, 'Like')} // null 부분에 HTML 속성이 들어감
상태를 정의하는 법
바뀔 여지가 있는 부분을 상태(state)라고 부른다 (Ex : Like → Liked)
<script>
const e = React.createElement;
class LikeButton extends React.Component{ // Like란 컴포넌트를 만들 예정
constructor(props){
super(props)
this.state = { // 상태(state)를 적는 곳
liked : false,
};
}
// 버튼을 눌러도 버튼 내 글자 'Like'는 바뀌지 않는 버전
render(){
return e('button', {onClick : () => {this.setState({liked : true})}, type : 'submit' }, 'Like');
}
// 버튼을 누르면 버튼 내 글자가 'Liked'로 바뀌는 버전
render(){
return e(
'button',
{ onClick : () => {this.setState({liked : true})}, type : 'submit' },
this.state.liked === true ? 'Liked' : 'Like',
);
}
}
</script>'clicked' 했을 때 상태(state)를 바꿔주고자 하는 코드
JSX와 바벨(babel)
문법이 많이 생소할 수 있음. 위 코드가 더럽다는걸 알기 때문에 코드 가독성을 향상시킴
return <button type="submit"
onClick={() => {this.setState({ liked : true })}}> Like</button> //JSX (Javascript + XML)그러나 자바스크립트에서는 위 문법을 지원하지 않기 때문에 Babel을 사용하게 된다.
2일차(12/17 목)
문법공부와 병행.
3일차(12/18 금)
놀았다. 집중이 잘 안됨
4일차(12/19 토)
본가에 와서 계속 놀다가 밤늦게 좀 찝찝해서 공부
문법공부+인프런 구구단 만들기
onChange = (e) => this.setState({ value : e.target.value- 자꾸 등장하는 e가 어떤 약자인지 찾아봤더니 event의 줄임말이었음. 이런걸 안 찾아보면 직성이 안 풀리는 성격. 이런 성격이 가끔은 답답하다.
- 자바스크립트 로직은 클래스 내에 메서드로 들어가는 것이 좋다.
- 변할 것들은 모두 state로 만들어라
5일차(12/20 일)
class 구구단 extends React.component(
constructor(props){
super(props);
this.state = {
상태1
상태2
상태3...
}
함수1 = (e) => {
함수1 동작 정의
}
함수2 = (e) => {
함수2 동작 정의
}
render(){
<>
렌더링 결과값
</>
}
}- 기본적으로 위 구조를 가져가는 듯
- 직접 만든 함수에는 화살표 함수를 써야 함
setState()
- 새로운 state를 리턴할 수 있는 함수
this.setState({
value : this.state.value + 1,
});
this.setState({
value : this.state.value + 1,
});
this.setState({
value : this.state.value + 1,
});- 예를들어 버튼을 누를 때마다 1씩 증가하는 버튼이 3개 있다고 가정.
- 그러나 비동기이기 때문에 기존 value에 +3이 아니라 +1씩만 증가함
this.setState((prevState) => {
return {
value : prevState.value + 1
};
});ref
- input에 focus 효과를 주고 싶을 때
- DOM에 직접 접근하고 싶을 떼
- this.setState를 할때마다 렌더링이 발생하기 때문에 알아둬야 함. 함수를 따로 빼는 이유도 있음
hooks
- class를 쓰게될 경우 render()도 들어가게 되면서 복잡해지지만 함수로 만들면 코드량이 줄어들면서 간단해짐
- 함수에서도 state와 ref를 쓸 수 있게끔 만들어줌 ⇒ react hooks
- useState에서 초기값을 정해줌
const Gugudan = () => {
const [first, setFirst] = React.useState(Math.ceil(Math.random() * 9));
const [second, setSecond] = React.useState(Math.ceil(Math.random() * 9));
const [value, setValue] = React.useState('');
const [result, setResult] = React.useState('');
return <div> {first} + "x" + {second} + ":" + {result}
}- class에서는 state를 하나로 묶었다면 hooks에서는 분리해줌
- 참고로 render() 내에 라벨 속성은 바꿔줘야 함 class - className, for→htmlFord
Webpack
- 웹사이트에는 컴포넌트가 수 십가지, 수 백가지임
- 수 백개, 수 천개 이상의 자바스크립트 파일을 하나로 합친 것
- 웹팩을 하려면 노드를 알아야 함. 노드는 서버, 백엔드가 아니라 자바스크립트 실행 툴이다.
npm i react react-dom
npm i -D webpack webpack-cli- 위 4개를 설치하고
client.jsx 파일과 webpack.config.js 파일 2개를 만든다.