머리가 나뻐서 삽질 SAP(Study And Programming)

09. php 와 작업 포스팅 작성중.... > parcel index.html 으로 번들링하면 ;;;;; 그러므로 번들링 이후에 dist 폴더에서 php 작업해야 하는데, 문제는 php 소스가dist에만 붙여서 작업할수 있는것도 아니고.. 결국엔 번들링 전의 php소스를dist>index.html 으로 가서 php 구문을 수동으로 옮겨 심어야 한다. 장점 : scss 를 css로 바로 사용가능 의문 : concat은 어차피 parcel 과 상관없이 파일을 하나로 합쳐줄꺼고.. scss 사용하려고 번들링 하는거 매우 번거로워 보인다.. 추가로, vuejs 까지 사용할때 번들링 된거 dist > index.html 에서 php 작업해야 하나?... --- 여기까지 테스트 완료

08. concat 으로 파일 합치기 - parcel의 build 명령어를 통해서 minify 는 지원하는데 - 파일을 하나로 합쳐주지는 않으므로 - concat 을 설치하여 사용해보자 01. 설치 npm install -g concat 02. index.html 파일에 concat 결과물로 연결해 놓기 - src 내용에 미리 './src/concat.js' 를 기입해놓고.. 03. 분할되어있는 js 파일들 src/concat_1.js src/concat_2.js src/concat_3.js 준비 - 아래와 같이 각각의 js파일을 만들어보자 src/concat_1.jsconsole.log('concat_1'); src/concat_2.jsconsole.log('concat_2'); src/concat_3..

07. scss 연동하기 - PostCSS 설치한다 : plugin 사용하여 css 변환 도구, autoprefixer, cssnext, CSS Modules 와 비슷- SCSS 설치한다 : preprocessor 로 LESS, SASS, Stylus 와 같은 컴파일 to CSS 중 SCSS 사용. 01. postcss, scss 설치 npm install postcss-modules --save-devnpm install -g node-sass 02. .postcssrc 파일 셋팅 - .postcssrc 파일 만들고 아래와 같이 입력{ "modules": true, } 03. styles.scss 파일 만들고 내용작성 - styles.scss - App.vue 04. 실행 05. 만약 vuejs 가 아..

06. vuejs 사용해보기 - 아래와 같이 파일 구성해서 vuejs 사용해보자- Git_parcel-vue/index.html- Git_parcel-vue/src\main.js- Git_parcel-vue/src\App.vue 01. index.html 02. APP.vue {{ msg }} export default { name: 'app', data () { return { msg: 'Welcome to Your Vue.js App!' } } } #app{ color: #56b983; } 03. main.js import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', render: h => h(App) }); 04. 만약 아래..

05. vue, babel 설치 .babelrc 셋팅 하고 출력하기 - Vue 사용을 위해서 의존성 설치 : vuejs 사용을 위해서 라이브러리 설치하고, package.json 에 이제 사용하겠다는 의미를 선언한다고 이해하면 된다. - Babel 사용을 위해서 플러그인과 프리셋 설치, .babelrc 셋팅 : babel은 javascript 트랜스파일러이다. 브라우저마다 JS코드를 실행하는 인터프리터 버전과 지원이 서로 다른데 이러한 것들 (ES2016 문법 등) 을 ES2015로 안전하게 바꾸어 줄 것이다. - .babelrc 파일은 babel의 구성파일이다. 사실 Babel 구성하는 방법에는 packge.json에 다음과 같이 플러그인 및 사전 설정을 할수는 있다. // package.json{ "..

04. npm init - 본격적으로 npm init 을 통해 package.json 만들어보자 01. 터미널에서 npm init npm init - 아래와 같은 화면이 뜰 것이다. - 쭉쭉 엔터로 넘어가고 - description 에서 Github 적었던 설명 입력 정도 해주고 - 완성되었으면 yes 를 타이핑해서 마무리 02. 완료 모습 03. scripts 에 run 명령어를 통해서 실행할 것 추가하기 "scripts":{ "start": "parcel index.html" } 이렇게 등록하고 나면 터미널에서 아래와 같이 사용한다. npm run start npm run start = parcel index.html 과 같다 [ 참고 링크 ] - parcel 설치~ React 연동하고 Typescr..

03. md 파일작성 - md 파일작성 부분은 패스해도 된다 - 마크다운이라고 부르며 - 아래 이미지와 같이 Github 등에서 간략하게 정보를 나타내기 위해 많이 사용한다. - HTML 태그와 같은 개념을 쉽고 빠르게 표현한다. 01. 파일 생성 - 새 파일 > README.md 파일 생성한다. 02. VSC 에서는 마크다운 문서를 실시간으로 볼 수 있다. - 보기 > 명령 팔레트 - Markdown: Open Preview 선택 03. 편집기 분할 - 왼쪽에는 RE..

02. VSC 터미널 Nodejs's npm 이용하여서 parcel 설치 - Visual Studio Code(이하 VSC) 에서 터미널 실행되기 때문에 작업하기가 편하다 터미널 종류는 Nodejs와 Window Power Shell 등 을 사용할 수 있다. - Node.js 설치는 필수이다. - 여기서는 Window Power Shell 사용한다. 01. 파일 > 폴더열기로 아까 생성한 Git_parcel-vue 폴더 지정해서 Open. 02. 터미널 실행 - 보기 > 통합 터미널 - 기본 터미널은 power shell 이므로 별다른 지정 필요없다. 03. npm 최신 버전으로 업데이트 - nodejs의 NPM 사용하여 패키지 관리 할 것이다. 제일먼저 npm 먼저 업데이트 하자 NPM 개념은 여기서 ..

01. 원격저장소 만들고 Clone 하기 - 원격에서 저장소를 만들고 Clone을 시작으로 Visual Studio Code 연동한다. 원격 저장소와 Clone 순서를 잘 모르겠으면 이 글을 참조 - Git, SourceTree 에 대한 경험이 처음이면 이 글을 순서대로 참조 01. Github에서 새로운 저장소 생성한다. - Add .gitignore 에 Node 추가한다 02. URL 입력하고 로컬에 폴더 만들어서 지정해준다. - 로컬 폴더 이름은 Git_parcel-vue 로 정하였다 [ 참고 링크 ] - parcel 설치~ React 연동하고 Typescript 강좌 : 작성 내용의 상당부분 이 강좌에서 도움받았다 강좌에서 React 로 가는걸 나는 Vuejs로 노선을 바꾸었을뿐https://ac..