나는 오늘도 멋있다

[학습계기] NextJS를 학습하려다가 너무 돌아갔다가 지금 도착했다.. Webpack을 공부하고, module의 차이점을 비교하였다. 단순히 NextJs만 사용해서 SSR을 단순히 구현할 수 있지만 NextJS가 React의 프레임워크 인데 React로는 SSR을 구현할수 없을까? 라는 의문점과 NextJS 의 편의성을 좀더 직관적으로 느껴보고 싶어서 React로 SSR을 구현해보고 싶었다. 이것저것 고생도 했지만 해보길 잘한 것 같다. [클라이언트 설정] 1. react & typescript 패키지 설치 npm i react react-dom react-router-dom npm i -D typescript @types/react @types/react-dom 2. 기본파일구성 /* src/cli..

너무 오랜만에 글을 작성한다. 가족여행을 갔다와서 글을 작성하기전에 이것저것 테스트해보고 확인을하는데 해결하다보니 시간이 오래걸렸다. 시간이 좀 지나다보니 지날글에서 했던것들을 간단히 정리해보고 가려한다. 지난글들에서는 webpack을 이용하여 개발서버를 열었고, babel-loader를 사용하여 preset - react,typescript,js등 설정하고, css또 적용하였다. 하지만 현재는 많은것들이 추가되어 작성한 코드를 토대로 리뷰하는 형식으로 작성하려한다. 1. webpack.dev.js const path = require('path'); // HTML파일 생성을 단순화하며, 나만의 템플릿을 제공하도록 할수있다. const HtmlWebpackPlugin = require('html-webp..

아 시리즈1때는 아침6시에 일어났는데.... 오늘은 새벽에 소라운스러운 일이 있어서 7시30분 되서야 시작한다... 저번 글에서는 CRA처럼 npm run start를 입력했을때 개발중인 웹을 확인할 수 있도록 webpack-dev-server를 열었다. 정말 열릴정도로만의 패키지를 사용하였고, 이번글에서는 추가적인 모듈들을 추가할예정이다. (지난번에 추가해야했어할 모듈들도 있었지만 하나씩 어디에 쓰이는지 확인하고자 추가하지 않았던 모듈들을 추가할예정이다) 1. Polyfill 이 뭘까? 폴리필은 JS의 최신문법을 지원하지 않는 구형 브라우저에서 해당기능을 구현하는 코드 조각이다. 즉 오래된 브라우저에서 최신 기능을 사용할 수 있도록 도와주는 코드 조각이나 라이브러리를 말한다.(약간 모방해주는?) 이러한..

SSR을 구현하기위해 Next.Js를 공부하게 되었고, SSR을 React로만으로도 구현하고싶어서 express를 이용하여 구현하였다. 이후에는 SSR, CSR의 차이점을 보게되었고, SSR은 webpack을 이용하여 설정했기때문에 CSR도 webpack으로 구현해야하는 상황이다. 그래서 여기까지 와버렸다. 하나를 시작하려했더니 갑자기 해봐야 할 것 들이 늘어났다... Webpack이란? JS 애플리케이션을 번들링하기 위한 JS모듈 번들러이다. 프로젝트에서 사용되는 여러 모듈과 종속성을 효율적으로 관리하고, 번들로 묶어 하나의 파일로 만드는 것 이다. 나는 기본적으로 React를 시작할때 CRA명령어를 통해 프로젝트를 시작하거나, 테스할때도 해당 명령어를 사용해서 빠르게 사용한다. webpack은 초반에..