패스트캠퍼스 (31) 썸네일형 리스트형 패스트캠퍼스 챌린지 최종 후기 안녕하세요. 9월 6일부터 10월 5일까지 진행된 작심 30일 자기계발 챌린지에 참여한 외노자 카키입니다. 저에게 이런 날도 오다니... 작심 3일만 해오던 제가 30일을 다 채운 게 아직도 의아하네요. 사실 저는 이번 이벤트 시즌에 유입된 건 아니고, 2018년과 2019년 1월에 두 패키지를 수강 '신청'한 이력이 있는 기존 패캠 수강생입니다. 과거 그 당시에는 강의 신청만 하고 끝 마무리는 흐지부지했죠. 음... 완강하지 못했단 소리입니다. (참고로 애초에 시작도 못한 강의도 있답니다 헤헷) 왜 제 자신이 30일 동안 꾸준히 공부한 게 의아하다고 했는지 이해가 가시겠지요? 그런 제가 뭔가 하나 해보겠다고 지난 8월에 또 강의 하나를 수강하게 되었습니다. 강의 이름은, 한 번에 끝내는 프론트엔드 개발.. Vue 템플릿 문법 [패스트캠퍼스 챌린지 30일차] 보간법 Interpolation 문자열 콧수염 기법을 사용한 문자열 보간법 : 이중 중괄호 구문 {{콧수염}} 메시지: {{ msg }} 콧수염 부분은 실제 데이터로 대체돼서 화면에 출력됨 그리고 그 해당하는 데이터가 변경될 때 화면도 같이 갱신됨 : 반응성 v-once 디렉티브를 사용했을 땐 일회성 : 데이터를 변경해도 화면이 갱신되지 않음 결코 안 변할 거임: {{ msg }} 원시 HTML 콧수염은 뷰js 데이터를 HTML이 아닌 일반 텍스트로 해석해서 화면에 출력함 만약 실제 HTML 구조로 출력하고 싶으면, v-html 디렉티브를 사용해야 함 이중 중괄호 사용: {{ rawHtml}} v-html 디렉티브 사용: 예시. 콧수염에 html 구조 넣었을 때 실제 브라우저에 출력된 건 빨간 색의 He.. Vue 인스턴스와 라이프사이클 [패스트캠퍼스 챌린지 29일차] 인스턴스와 라이프사이클 어플리케이션 인스턴스 생성하기 어플리케이션 & 컴포넌트 인스턴스 | Vue.js 어플리케이션 인스턴스 생성 모든 Vue 어플리케이션은 createApp 함수를 사용하여 새로운 어플리케이션 인스턴스를 생성하여 시작한다 const app = Vue.createApp({ /* options */ }) 인스턴스가 생성되면, mount 메소드에 컨테이너를 전달하여 mount 할 수 있음. 예를들어, 에 Vue 어플리케이션을 마운트 시키고 싶다면, #app을 전달해야함 아래는 예전에 썼던 방법 Vue.createApp({ /*option*/ }).mount('#app') 메소드 체이닝 사용 가능 어플리케이션 인스턴스에 의해 노출된 대부분의 메소드들은 동일한 인스턴스를 반환하여 .. Vue 선언적 렌더링과 입력 핸들링, 조건문과 반복문 [패스트캠퍼스 챌린지 28일차] 선언적 렌더링과 입력 핸들링 단일 파일 컴포넌트 SFC (Single File Component) Vue라는 확장자로 만들어져 있는 하나의 파일을 '단일의 파일로 만들어져있는 컴포넌트'라는 개념으로 부름 템플릿, 스크립트, 스타일 이 세 태그로 구성해줄 수 있음 템플릿: html(Vue 문법) 스크립트:자바스크립트(Vue 문법) 스타일:CSS(SCSS은 설정 살짝 추가해줘야 함) : 두번째 예시 {{ count }} 여기서 중요한 건 데이터를 갱신하면 그것이 연결된 브라우저의 화면도 같이 갱신된다는 것임 → 반응성 Reactivity 데이터를 갱신하면 화면도 바뀐다! —참고— //메소드. 콜론 기호랑 펑션 키워드 생략 가능 export default { data: function () {}.. Vue eslint 등 [패스트캠퍼스 챌린지 27일차] file-loader 이용, 이미지 가져오기 src 안에 assets 폴더 생성하고 그 안에 logo.png 파일 넣음 패키지 설치 npm i -D file-loader webpack.config.json 세팅 module rules에 { test: /\.(png|jpe?g|gif|webp)$/, use: 'file-loader' } module.exports에 경로별칭(Alias) 추가 속성에는 특수한 기호를 사용할 수 없으니 문자데이터로 만들어서 속성의 키값으로 사용 '~' : 틸드 경로 별칭 : 말 그대로 경로를 별칭으로 만들어서 사용하겠다는 거임 원래 특정 이미지를 찾을 때 ./나 ../ 상대 경로 많이 이용했잖아. 그런데 경로별칭을 사용하게 되면, 해당하는 경로 별칭.. Vue 시작하기 [패스트캠퍼스 챌린지 26일차] Vue.js 뷰 시작하기 개요 모던 웹 프론트엔드 개발의 꽃 framework들 : Vue React Svelte Angular 이중에 하나는 알아야 함 그중 특히 뷰가 사용 난이도도 낮고 성숙도도 높은 편이라 입문자에게 권장 현실적으로는 React 잡이 더 많음 뷰 공식 사이트 Vue.js 3버전 뷰는 공식문서가 잘 정리되어 있으니 참고 Vue.js CDN, Codepen 설치 방법 설치방법 | Vue.js 각 버전에 대한 자세한 정보는 릴리즈 정보를 참고 CDN 스크립트 태그로 연결 간단하게 문법 확인이나 연습 프로젝트 할 거라면 CDN, 더 풍성하게 사용하려면 npm으로 설치 추천 CDN 복사하고, codepen html에 붙여넣기 해서 간단하게 쓸 수도 있음 아니면 스크립트 태그 안에 주소만 복사.. webpack 나머지 패키지 설치 [패스트캠퍼스 챌린지 25일차] SCSS, Autoprefixer(PostCSS), babel 패키지 설치하고 웹팩 세팅 방법 SCSS 연습하면서 css로 작성했던 거 다 scss로 바꿔주기 루트 경로의 폴더와 그 안에 파일, main.js import 경로 webpack.config.js modules에 매칭 코드(정규표현식으로 작성한 거) → 근데 css를 찾아야 할 수도 있으니 s 뒤에 ? 물음표 해주기 일케 하면 css랑 scss 둘 다 찾아 낼 거다. /\.s?css$/ (해석) s라는 단어가 있을 수도 있고 없을 수도 있고 패키지 설치 npm i -D sass-loader sass 두 개의 패키지가 하는 역할 sass-loader를 통해서 웹팩에서 해당하는 scss파일을 읽어낼 건데, 읽을 때 그 문법을 실제로 해석해 줄 s.. webpack plugin, 정적파일 연결, module[패스트캠퍼스 챌린지 24일차] plugins html 파일을 삽입해서 개발 서버를 오픈해보자 npm i -D html-webpack-plugin → 설치 후 webpack.config.js로 이동해서 require 작성 const HtmlPlugin = require('html-webpack-plugin') 해석) 'node_modules에서 html-webpack-plugin을 가져와서 HtmlPlugin에 할당하겠다' 그리고가져온 저 녀석을 어디에서 실행할 것인지 구성 옵션으로 명시해줘야함 → 내보내기(module.exports) 안에 plugins 배열 데이터 작성 new 태그 붙여서 생성자함수처럼 실행해주기 → plugins: [new HtmlPlugin()] 일케 하면 어떤 결과가 반환되겠지? 그.. 바벨, webpack[패스트캠퍼스 챌린지 23일차] Babel 바벨? ECMAScript2015(ES6)+ 코드를 이전 자바스크립트 엔진에서 실행할 수 있는 이전 버전과 호환되는 JS버전으로 변환하는 데 주로 사용되는 무료 오픈 소스 JS 트랜스 컴파일러 바벨 설치하는 방법 npm i -D @babel/core @babel/preset-env 두 개의 패키지 설치 루트 경로에 .babelrc.js 파일 생성 내부에 Node.js의 내보내기 작성 mudule.exports = { presets: ['babel/preset-env'] } : 앞으로 작성하는 모든 JS는 바벨을 통해 ES5의 문법으로 변경되어 브라우저에서 동작 package.json에 옵션 추가 "browserlist" : [ ">1%", "last 2 versions" ] 어디.. Bundler [패스트캠퍼스 챌린지 22일차] 번들러 왜 필요한가? 순수하게 HTML, CSS, JS로 개발하는 건 비효율적임 자주 사용되는 번들러 parcel bundler 구성 없는 단순한 자동 번들링 소/중형 프로젝트에 적합 webpack 꼼꼼한 구성 (너무 디테일한 옵션) 중/대형 프로젝트에 적합 프로젝트 생성 parcel bundler npm init -y -> package.json 파일 생성됨 -> package.json 안에 내용 추가 "script" : { "dev" : "parcel index.html", "build": "parcel build index.html" }, npm i -D parcel-bundler -> 개발 의존성 파슬 번들러 설치 -> node_modules랑 package-lock.json 생성됨 구글에서 re.. 이전 1 2 3 4 다음
