걸프리액트설치 2

[Gulp] 걸프를 활용하여 프론트엔드 개발 환경 조성하기 #2 (feat. 리액트)

05Test file 생성 - src 폴더 하위에 폴더 구성을 지난번에 잘 마치셨죠~? 이번엔, 그 하위에 실제로 사용할 파일을 생성할 차례입니다. 니꼬쌤의 안내에 따라 위와 같이 만들었습니다. 파일에 대한 상세 설명은 아래를 참고해주세요! 그러나, 절대적인 것은 아니니, 다르게 바꾸셔도 괜찮습니다. 1. src\ index.pug //서버에 뜰 프레임 페이지이며 build 후 html 파일됩니다. 2. img\ 이미지 파일 3. js\ main.js , util.js 4. partials\ footer.pug // 모듈화 시킨 footer pug 파일. 5. scss\ _reset.scss, _variables.scss, style.scss // 기본 reset css, 반복적으로 사용되는 variab..

DEV/WEB 2021.04.18

[Gulp] 걸프를 활용하여 프론트엔드 개발 환경 조성하기 #1

안녕하세요. 레미입니다🤸‍🤸 이번엔 걸프를 활용한 개발 환경 조성 방법 시리즈를 올리려고합니다. 노마드 코더의 강의를 정리한 내용이에요. Info Gulp ? Node.js와 npm 기반의 태스크 러너이며, 소형화, 연결(concatenation), 캐시 버스팅(cache busting), 유닛 테스트, 린팅, 최적화 등 웹 개발에 수반되는 시간 소모적이고 반복되는 태스크들을 자동화하기 위해 사용된다. 프론트 작업을 몇가지만 꼽아보자면, 1. 브라우저 별 css prefixer 붙이기 2. sass 컴파일링 3. 이미지 압축 4. js 트랜스파일링(es6 to es5) 5. css, js 압축(경량화) 6. 웹서버 띄우기 7. 유닛 테스트 등등이 있습니다. 걸프를 사용한다면 위 작업들을 자동화 시켜 한번..

DEV/WEB 2021.03.30