웹팩 2

React.js와 Codeigniter 연결하기

얼마 전 회사의 새로운 프로젝트에서 코드이그니이터와 리엑트를 연결하는 경험을 하였다. 코드이그나이터는 php로 작성된 웹 프레임워크이며, 언어와 프레임웍 모두 비교적 레거시라고 평가받고 있다. 반면 리엑트는 비교적 새로운 프론트 프레임워크인 상황이었다. 이 상황에서 둘 사이의 연결을 설명해놓은 자료를 찾기는 쉽지 않았다. 레거시에 새로운 프레임 웍을 연결하는 작업은 개발팀이 더 효율적으로 개발을 할 수 있는 첫 시발점을 만드는 것이었기에 흥미가 많이 갔던 작업이었다. 코드이그나이터에 리엑트를 도입해보고자 하는 누군가에게 도움이 되고자 경험을 공유해본다. 코드이그나이터와 리엑트 라우터 연결 구성 코드이그나이터는 서버사이드 렌더링을 하며, 폴더 경로가 라우터가 되는 특징이 있다. 하지만 index.html ..

react 2021.04.26

리액트 웹팩 기본 설정하기

웹팩 설정의 큰 흐름 1. 엔트리 파일을 설정한다. 2. 엔트리 파일에 모듈의 옵션을 적용한다. 3. 추가적으로 플러그인까지 적용한다. 4. 아웃풋으로 나온다. 이와 같이 큰 흐름을 알고 접근하면 웹팩설정을 이해하기 쉽다. ​ 설치 모듈 npm i -D webpack webpack-cli npm i -D babel-loader @babel/core npm i -D @babel/preset-env // 옛날 브라우저에서도 사용 가능한 코드로 변환 npm i -D @babel/preset-react //jsx사용 가능하게 변환 webpack.config.js const path = require('path') module.exports = { name: 'word-relay-setting', mode: 'd..

react 2019.10.24