Frontend 60

Netlify 배포 (+babel-loader, webpack mode 에러 등)

이전에 html, css만으로 배포했을때와는 설정이 조금 다르다. https://www.netlify.com/ Netlify: Develop & deploy the best web experiences in record time A powerful serverless platform with an intuitive git-based workflow. Automated deployments, shareable previews, and much more. Get started for free! www.netlify.com github 연동 후 프로젝트를 불러와서 설정에서 다음과 같이 세팅.. build command -> npm run build publish directory -> dist/ 강의와 버전이..

bundler 2.bundler

이번 강의 github -> https://github.com/choi-solyi/webpack-template-basic npm init -y npm i -D webpack webpack-cli webpack-dev-server@next //package.json 에 다음 추가 "scripts": { "dev": "webpack-dev-server --mode development", "build": "webpack --mode production" }, parcel과는 다르게 webpack.config.js 파일 생성 후 구성 설정을 추가해줘야한다. @html 경로 추가 npm i -D html-webpack-plugin @static img 추가 npm i -D copy-webpack-plugin ..

bundler 1. parcel

이번강의 github -> https://github.com/choi-solyi/parcel-template-basic 번들러는 대표적으로 parcel과 webpack 이 있다. parcel : 단순한 자동 번들링. 소,중형 규모에 적합 webpack : 매우 꼼꼼한 구성. 중,대형 규모에 적합 프로젝트 생성 후 npm init -y @이미지 정적으로 관리하기 npm i -D parcel-bundler npm i -D parcel-plugin-static-files-copy // package.json 에 다음 추가 "staticFiles":{ "staticPath": "static" } @autoprefixer : 브라우저리스트 옵션은 현재 npm프로젝트에서 지원할 브라우저의 범위를 명시하는 용도. 그..

js 기초 (데이터타입, 연산자, 조건문, 반복문, 변수 유효범위, 형변환)

import getType from './getType' import rd from './getRandom' //실행문 console.log("heloworld!") console.log(123) console.log(typeof "heloworld!") console.log(typeof 123) console.log(true) console.log(typeof null) console.log(typeof undefined) console.log(typeof {}) console.log(typeof []) // function getType(data){ // return Object.prototype.toString.call(data).slice(8, -1); // } console.log("-getTy..

Node.js npm 버전관리 / gitignore

유의적 버전 - SemVer 버전 -> 12.14.1 // 메이저.마이너.패치 메이저 버전이 바뀌면 이전버전과 호환이 되지 않음. 마이너 버전은 기존버전과 호환이 되지만 새로운 기능이 추가된 버전 패치버전은 버그, 오타 등이 수정된 버전 맨앞 ^ 캐럿기호가 붙어있으면 메이저버전 중에서 가장 최신 버전으로 업데이트를 허용한다는 의미 npm info lodash // lodash 의 정보 확인에서 버전 확인 가능 npm install lodash@4.17.20 //하위버전으로 변경 npm update lodash npm 프로젝트의 버전관리 버전관리를 할 필요가 없는 파일들 node_modules는 따로 관리하지 않아도 package.json 에서 가지고 있기 때문에 깃에 올리지 않아도된다. node_modu..

Node.js 설치 및 실행 방법

Nodejs.org 에서 설치해준다. 가능하면 짝수버전 = 현재14 cmd nvm --version //버전확인 nvm ls //list의 약어 nvm install 12.14.1 //다운로드 nvm use 12.14.1 //버전변경 nvm uninstall 12.21.0 //삭제 nvm --help //설명 Node Package Manager == NPM npm init -y //package.json 파일이 생성됨 npm install parcel-bundler -D //parcel-bundler 라는 모듈 다운로드 폴더와 파일이 생성됨 npm install lodash // -D를 붙인것은 Dev디펜던시를 의미 = 개발용 의존성 패키지 -> 추후 웹브라우저에서 사용할 땐 필요 없음 // 안붙인것은..

VSCode git 최초 설정 및 명령어

최초설정 git config --global core.autocrlf true //windows git config --global user.name 'choi-solyi' git config --global user.email 'choi-solyi@naver.com' git config --global --list //등록된 내용 확인 git 생성 및 커밋 / 푸시 git init // 현재 프로젝트에서 변경사항을 추적 (버전관리) git status //아무것도 안뜸 git add . // 마침표 = 모든 파일 git status git commit -m 'Start project' //프로젝트 생성 (메세지m과 함께 버전을 생성) 파일추가 후 git add . // 다시 모든 내용 추적하도록 명령 ..

VSCode 단축키 및 확장 플러그인

플러그인 --Beautify 설치 --Auto Rename Tag // 에서 하나를 변경하면 자동으로 매칭되는 태그명 변경됨 --live server --Material Icon Theme : 파일 아이콘 설정 --bracket Pair Colorizer : 괄호 색 지정 (가독성) --Path intellisense : 경로 작업시 자동으로 경로를 잡아준다. --Auto Rename Tag : 쌍으로 된 태그 자동으로 수정 --eslint : 코드 규칙 --prettier : 코드 예쁘게 --auto import : import 자동으로 안될 때 추가 eslint 설정 추가후 settings.json "editor.tabSize": 2 , "emmet.variables": { "lang": "ko" }..

[유튜브] 한시간만에 끝내는 Vue.js 입문

배운것 vue 설치 (nodejs 설치 필수) - npm install -g @vue/cli 폴더 생성 방법 - vue create test ('test'라는 프로젝트 생성) bootstrap vue 설치 방법 data를 {{ }} 로 표시하는 방법 watch 의 기능 method (function) create, mount, update, destroy 타이밍 App.vue / main.js / router.js / Header.vue / Home.vue / About.vue 각 무슨 기능을 하는지 잘 모르겠음 데이터 바인딩 {{ }} 이벤트 @click @change 다중데이터 v-for 조건에 따라 보여주기 v-if : 렌더링 X v-show : 렌더링O 보여주진않음. Welcome to home~..

Frontend/vue 2021.10.13

[error] VSCode : 이 시스템에서 스크립트를 실행할 수 없으므로

VSCode 터미널에서 vue 설치 (vue -g install vue/cli) 후 테스트 폴더를 작성하려고 했는데 에러가 발생 vue create test //테스트 폴더 생성 명령어 console 내용 : vue : 이 시스템에서 스크립트를 실행할 수 없으므로 ~~ vue.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Exe cution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오. PowerShell 을 관리자 모드로 실행 get-help Set-ExecutionPolisy > [Y](조금 시간이 걸린다) Set-ExecutionPolicy RemoteSigned > [Y]

Frontend/vue 2021.10.13