배경 라이브러리없이 밑바닥부터 개발하는 경험은 정말 소중하다. 1년전 우아한테크캠프를 통해서 이를 배웠으며 한번씩 기회가 될때마다 공부해왔다. 그리고 이제 좀 쓸만한? 리액트 비스무리한 라이브러리를 만든것 같아서 글을 적는다.(참고로 컴포넌트에 관한 3번째 글이다...) 사전지식 리액트를 만들어야하는데 리액트의 동작방식을 몰라서는 안된다. 최소한 공식문서는 정독하고 혼자서 가볍게라도 만들어보는 걸 추천한다. 이미 나와있는 자료들을 보고 내가 새롭게 만들어보는것도 좋은 방법이지만 아무것도 머리속에 넣지 않고서 머리를 쥐어뜯으면서 생각해보는 것이 더 도움이 된다고 생각한다. best practive를 찾아서 공부하는 건 좋은 방법이지만 그것만 쫓아서는 좋은 개발자가 될 수 없다고 생각한다. 혼자서 코딩해보고..
배경 바닐라 자바스크립트 또는 타입스크립트로 라이브리리, 프레임 워크없이 꽤나 많은 프로젝트를 했다. 그리고 리액트와 비교했을 때 여러가지 어려운 점이 있었지만 jsx를 사용하지 못하는 것도 조금 아쉬웠다. 그런데 리액트없이 바벨 플러그인 하나를 설치하면 jsx를 사용할 수 있다는 것을 알게 되었다. 그래서 한번 적용해보려고 한다.(사실 리액트 없이 jsx 세팅하는 것 보다 그냥 만드는 게 편하다) 웹팩 설정 나는 바벨을 웹팩에서 같이 설정하는 것을 선호한다. 물론 나눠도 상관없다. yarn add -D @babel/plugin-transform-react-jsx로 플러그인을 설치하고 바벨 플러그인에 @babel/plugin-transform-react-jsx 를 넣어주면 된다. 바벨을 따로 설정하는 분..
바닐라 자바스크립트로 프로젝트 만들기(컴포넌트)
새롭게 글을 썼습니다. diff알고리즘을 적용해서 https://ms3864.tistory.com/409 바닐라자바스크립트(ts)에서 컴포넌트 만들기1(diff 알고리즘) 배경 사실 이전에도 글을 올렸었다. 그런데 많이 부족한 내용이였고 버그도 많이 있었다. 이번에 기회가 있어서 새롭게 간단한 프로젝트를 만들었는데 저번보다 훨씬 괜찮게 만들었다고 생각해 ms3864.tistory.com 배경 우아한테크캠프에서 바닐라 자바스크립트로 프로젝트를 했었다. 그때 아쉬웠던 부분들을 생각하며 조금 더 보완해보려고 한다. 그리고 황준일님의 블로그를 참고했다. 개요 나는 리액트, 리덕스를 사용한 경험이 있다. 이를 바탕으로 생각해보자. 리액트부터 생각을 해보면 리액트는 컴포넌트를 기반으로 동작하며 jsx를 바벨을 통해..