개발자 도담씨

해당 카테고리는 단순히 글쓴이가 공부 후 정리해놓기 위한 목적으로 글쓴이가 추후 이해하기 쉽게 자기 멋대로 정리한 글입니다 :) 참고1 : sujinlee.me/webpack-react-tutorial/ 참고2 : 3트째 참고한 블로그 저번에 혼자 맨땅에 헤딩으로 리액트를 하면서 DB붙이고 하려니 구조를 어떻게 해야하는지 혼동이 오면서 접었었는데... 해당 참고글을 보고 2트해본다! 1트는 버전 문제 때문에 잘 안됐는데 오늘은 다시 해결해보는걸로 😥 준비사항에 있는 node와 yarn을 설치해주고 React Route는 또 몰라서 공부해왔다... 살펴보고 역시 이렇게 있었어 라고 생각이 들었다. 나 역시도 이 친구를 모를때 다른 주소에 따라 다른 뷰를 보여주고싶은데 어떻게 하는지 몰라서 조건문으로 1번을..

[ Node.js / Webpack ] 이번엔 웹팩 🤜 [ Node.js / Webpack ] 자산 관리 ( css, image, font, file, loader ) [ Node.js / Webpack ] 출력 관리 이번 챕터 - https://webpack.js.org/guides/development/ 오 나름 꾸준히 잘 하구 있다 :) 이번 챕터의 장은 Development 개발이라고 제목지어져 있다. 포스팅하면서 읽어 내려가겠지만 대충 훑어보니 개발환경에 관한 webpack의 기능을 설명해주려 하는가보다. mode 3편의 출력관리의 코드들을 가지고 이어서 해볼 것이다. 그리고 문서에서 대뜸 webpack 모드를 development 모드로 설정하라고 한다. 문서를 찾아 보니 webpack에서는 ..

1편 - [ Node.js / Webpack ] 이번엔 웹팩 🤜 2편 - [ Node.js / Webpack ] 자산 관리 ( css, image, font, file, loader ) 관련 문서 - https://webpack.js.org/guides/output-management/ 2편에 이어 출력관리에 대해 정리하려한다. 자산관리편을 하면서 파일을 하나 생성할때마다 import해주어야 한다면 기존과 관리면에서 어떻게 좋다는건지 의문을 가졌었는데 이번 출력관리편에서 설명을 해주겠다 :) 문서에서도 이와 같이 설명하고 있다. "우리가 2편에서 수동으로 파일을 관리 했으나 시스템이 커짐에 따라 한계가 있다. 따라서 우리는 몇 가지의 플러그인을 사용해 프로세스들을 관리하려 한다. " 우선 /src 에 p..

1탄 - [ Node.js / Webpack ] 이번엔 웹팩 🤜 참고 문서 - https://webpack.js.org/guides/asset-management/ 저번주에 이어 두번째 섹션을 진행해보려한다. 공부하기 싫은데 남자친구한테 끌려 왔다. 두번째는 자산 관리라고 표현되어 있다. 저번엔 javascript만 관리를 했다면 이번엔 이미지와 css와 같은 파일들도 관리를 해보자는 의미인 듯 하다. 저번에 작성했던 index.html 을 다음과 같이 변경한 후 시작해보자. main.js가 아닌 bundle.js를 불러온다고 해놨으니 webpack의 설정도 main.js가 아닌 bundle.js를 생성하도록 변경해주어야 할 것이다. ( webpack.config.js ) const path = requ..

멀티 채팅에 이어서 진짜 맛보기만 하고 있는 느낌이긴 하지만 그래도 한다는거에 나로썬 만족하겠다 :) ( 뻔뻔쓰 ) 이번에 관심을 가진건 웹팩이다. 저번처럼 등장배경및 친구소개먼저 받을꺼다. 우리가 CSS를 header에 적고 script를 body이후에 적을때가 있을 것이다. 브라우저 렌더링 과정을 보면 1. HTML읽은 후 파싱 2. DOM, CSSOM 생성 3. 렌더링 트리 생성 4. 레이아웃 계산 5. 페인트🎨 여기서 HTML을 읽는 과정중 스크립트를 만나게 되면 스크립트를 읽고 파싱 후 HTML을 다시 읽어내려간다. 자바스크립트를 분할 하여 여기저기서 여러개 불러올탠데 생각만 해도 엄청 느리지 않은가 -ㅅ- 이런 단점을 Webpack을 통해 브라우저 랜더링 시 파일들을 단일 파일로 만들어 주어 ..