webpack3 [React] Create-react-app 없이 Webpack, Babel 빌드 해보기 2020.05.22 - [Front/React] - Create-React-App으로 React 시작하기 Create-React-App으로 React 시작하기 이번 포스팅은 첫번째 React 프로젝트, create-react-app으로 시작해보기 입니다 create-react-app 명령어는 최신 모듈들이 적용되어 생성된다는 사실! React Project의 Generator 라고 칭해도 될만큼 빠른.. sihus.tistory.com 현재 사내 뿐만 아니라 토이프로젝트들도 CRA (Create React App) 로 빌드한 React 프로젝트들이 많았습니다. 하지만 많은 라이브러리 추가와 프로젝트 규모가 커지면서 빌드 및 구동 속도가 느려지고 무거워지기 시작했습니다. 이것에 대한 근본적인 해결법을 찾고.. 2021. 4. 22. [Nginx] React 프로젝트 배포하는 방법 리눅스 Ubuntu 환경Nginx 웹서버에 React 프로젝트를 배포해보는 방법에 대해서 알아봅니다. React Project Build 첫번째로 리액트 프로젝트 빌드 파일들이 준비되어야 겠죠 CRA(Create React App) 혹은 Webpack을 통해 번들링 및 빌드 된 파일들을 준비해주시면 됩니다. Nginx Setting 저는 AWS EC2 인스턴스에 리눅스 Ubuntu 18.04 환경을 사용하고 있습니다. 1. Nginx Install sudo apt install nginx 2. Nginx Config sudo vi /etc/nginx/sites-enabled/default 위 명령어로 Nginx 설정파일에 접근합니다. server { listen 3000; location / { root.. 2021. 4. 15. [CSS] Pre-Processor (Sass) 에 대한 이해 CSS Pre-Processor (전 처리기) CSS가 동작하기 전, 사용하는 기능으로 우리가 알고있는 CSS의 한계를 보완하기 위해 확장된 확장팩이라고 이해할 수 있다. 이제 Sass(Syntactically Awesome Style Sheets)에 대해 알아보자 어떤 기능들이 추가되었을까? 변수 사용 조건문 / 반복문 Import / Nesting(중첩) / Mixin / Extend, Inheritance 기존 CSS와 비교해 보면, 깔끔하고 간결한 표기법 협업시 발생할 수 있는 다른 팀원들과의 구문 평준화 CSS 유지보수의 편의성 향상 Sass와 SCSS의 차이점 SCSS는 CSS 구문과의 호환성 및 Sass의 모든 기능을 지원하는 CSS의 상위문법 (= SCSS는 CSS와 거의 같은 문법을 통해.. 2020. 8. 4. 이전 1 다음
