22-04-05

4월 4일 ~ 팀프로젝트 진행중!

환경설정

처음으로 어디서 바로 복붙해서 사용하는 게 아닌 직접 한땀 한땀 babel, webpack 등의 환경설정을 해 보았다..!

하다보니 모르는 것 투성이어서 시간이 정말 오래걸렸다..😇

이번에 새로운 것을 많이 접해보고 사용해 보게 되었다!! 시간은 오래걸리더라도 많이 공부하고 성장하고 싶다🌱

오늘 작성한 환경설정은 여기 (opens new window)에 저장해 두었다.

PostCSS

PostCSS (opens new window)도 사용해본다!

다양한 플러그인을 사용할 수 있다. (create-react-app을 사용했을때 기본으로 설치되어있다!)

:fullscreen { // 생략}

:-webkit-:full-screen {
}
:-moz-:full-screen {
}
:full-screen {
}

CSS속성의 vendor prefix를 자동으로 붙여준다.

모듈화가 가능하다 👉 오늘 작성한 것은 CSS-in-JS (opens new window) ? ✔️ 더 공부해보기

등등... 더 공부해보자

useState

vanilla JS로 만들어보자!

<div id="app"></div>
<button id="button">Increment</button>
<script src="src/index.js"></script>

function useState(기본값) {
  let value = 기본값;
  function 값가져오기() {
    return value;
  }
  function 값설정하기(새로운값) {
    value = 새로운값;
  }
  return [값가져오기, 값설정하기];
}

const [counter, setCounter] = useState(0); // 0으로 시작

const app = document.querySelector("#app");
const button = document.querySelector("#button");

button.addEventListener("click", onClick);

function render() {
  app.innerHTML = counter();
}

function onClick() {
  setCounter(counter() + 1);
}

render();

클로저를 이용하여 만드는구나...🤔 더 더 공부해보자!