Clone Coding/Instagram
-
[Instagram] Header(2) - Font Awesome Icons 적용Clone Coding/Instagram 2021. 7. 19. 21:47
Font Awesome 적용 Package 설치 @뒤에 fontawesome이 아닌 fortawesome 주의 npm install @fortawesome/fontawesome-svg-core @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons Icons Module 파일 생성 사용할 icon을 개별로 export iconName은 Fontawesome Icons에 표시되는 명칭 solid(fas)는 해당 Icon의 화면일 경우에 표시. 해당 화면이 아닌 Icon은 regular(far) Icon 표시 // js/modules/icons.js import { library, icon } from '@fortawesome/fontaw..
-
[Instagram] Header(1) - 공통 Layout 및 ImportClone Coding/Instagram 2021. 7. 17. 23:32
Logo 이미지 webpack 5 이전에는 파일을 출력하기 위해 file-loader 설치 필요 webpack 5 부터 내장된 Asset Modules를 사용 Asset Module은 loader를 추가로 구성하지 않아도 Asset파일(폰트, 아이콘 등)을 사용할 수 있도록 해주는 모듈 loader를 대체하기 위해서 Asset Module에 4개의 새로운 모듈 유형 추가 asset/resource: 별도의 파일을 내보내고 URL 추출. 이전에는 file-loader를 사용하여 처리 asset/inline: Asset의 data URI를 내보낸다. 이전에는 url-loader를 사용하여 처리 asset/source: Asset의 소스 코드를 내보낸다. 이전에는 raw-loader를 사용하여 처리 asset..
-
[Instagram] 프로젝트 설정(5) - favicon 적용Clone Coding/Instagram 2021. 7. 12. 21:52
[ favicon ] 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘 - favicon 아이콘 변환 https://icoconvert.com/ - 프로젝트에 favicon 적용 변환한 favicon.ico 파일 프로젝트에 추가 webpack.config.js plugin 속성에 favicon 설정 // webpack.config.js const path = require('path'); const HtmlPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/js/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'index...
-
[Instagram] 프로젝트 설정(4) - Bootstrap 적용 + reset.cssClone Coding/Instagram 2021. 7. 11. 01:38
[ Bootstrap ] 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크 하나의 CSS로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 동작 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와준다. - Bootstrap 적용하는 이유. Why ? 디자이너 없이 웹사이트 개발 가능 다양한 인터페이스 제공 반응형 웹 제공 - 프로젝트에 Bootstrap 적용 Bootstrap 설치 npm i bootstrap Bootstrap Import & Customize Bootstrap에 정의되어 있는 변수의 값을 재정의하여 사용할 수 있다. Bootstrap scss Import 하여 Bootstrap Components 등을 사용한다. // Defaul..
-
[Instagram] 프로젝트 설정(3) - Babel 적용Clone Coding/Instagram 2021. 7. 11. 01:03
[ Babel ] JavaScript Transcompiler - Babel 적용하는 이유. Why ? ES6+ 코드를 이전 버전의 JavaScript로 변환하여 ES6+ 코드를 지원하지 않는 구 브라우저에서도 동작할 수 있도록 하기 위함 - 프로젝트에 Babel 적용 Babel 설치 npm i -D @babel/core @babel/preset-env babel-loader webpack.config.js 파일에 babel-loader 추가 // webpack.config.js const path = require('path'); const HtmlPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/js/index.js',..
-
[Instagram] 프로젝트 설정(2) - Webpack 적용Clone Coding/Instagram 2021. 7. 10. 23:00
[ Webpack ] 모던 JavaScript 어플리케이션을 위한 정적 모듈 번들러 JavaScript 모듈을 컴파일할 때 사용 Webpack이 어플리케이션을 처리할 때, 내부적으로는 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성하는 디펜던시 그래프를 만든다. ※ 디펜던시 그래프(Dependency Graph) 하나의 파일이 다른 파일에 의존할 때 마다 webpack은 이것을 의존성으로 취급한다.이를 통해 webpack은 이미지 또는 웹 폰트와 같은 비 코드 자산을 가져와 어플리케이션에 대한 종속성으로 제공할 수 있다. webpack은 어플리케이션을 처리할 때 커맨드 라인 또는 설정 파일에 정의된 모듈 목록에서 시작한다.엔트리 포인트에서 시작하여 webpack은 어플리케이션에서 필요한 ..
-
[Instagram] 프로젝트 설정(1) - Airbnb-base ESLint, Prettier 적용Clone Coding/Instagram 2021. 7. 10. 01:35
[ ESLint ] ESLint = ES + Lint JavaScript 코드에서 발견된 문제 패턴을 식별하기 위한 정적 코드 분석 도구 - ESLint 적용하는 이유. Why ? JavaScript를 문법적으로 엄격하게 관리 ESLint는 사용자가 직접 규칙을 정할 수 있어 문법 에러 확인 및 코딩 스타일을 통일할 수 있음 협업할 때 동일한 코딩 스타일을 적용하므로써 생산성을 높일 수 있음 - Airbnb-base ESLint 적용 vanilla js로 프로젝트를 진행하기 때문에 Airbnb-base ESLint 적용 설치해야 할 package 확인 npm info "eslint-config-airbnb-base@latest" peerDependencies package 설치 npx install-pe..