개발/Front-end2024. 11. 15. 21:17SCSS

1. font-awesome - https://cdnjs.com/libraries/font-awesome font-awesome - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developersThe iconic SVG, font, and CSS toolkit - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered..

Webpack Loader
개발/Front-end2024. 11. 15. 00:04Webpack Loader

1. SCSS Loader - 이전글(webpack)에서는 예쁜 코드를 짜고 그걸 구린 코드로 변환해봤음 - 그 구린 코드는 브라우저에서 잘 작동할 거임 - 이 상태로 webpack을 실행시키면 에러가 발생   - 이 파일로 뭘할지 모르겠다는 뜻 - 당연하게도 scss를 위한 rules를 만들어야 함 - loader는 객체를 사용할 수도 있지만, 여러 loader들을 가져와서 한가지의 변형으로 만들 수도 있음   - 첫번째로는 이상하게 생긴 scss를 가져다가 일반적인 css로 바꾸는 것(sass-loader)   - 두번째로는 폰트같은걸 불러올 때 css에 유용한 것(css-loader)   - 세번째로는 바뀐 css를 우리 웹사이트로 불러오는 것(style-loader) - 이제 API 링크는 걸지 ..

개발/Front-end2024. 11. 14. 22:32Webpack

1. Webpack - 우리는 babeljs를 사용하여 백엔드에서 자바스크립트를 최신 코드로 사용하고 있고 최신 코드를 컴파일하고 있음 - 나중에 Sassy CSS도 사용할 건데 이 파일 또한 그대로 둔다면 브라우저는 이해하지 못함   - .scss를 .css로 바꿔줄 필요가 있다는 것 - 프론트엔드에서 자바스크립트 코드를 작성하면 모든 브라우저에서 인식 가능한 자바스크립트로 바꿔주는 무언가가 필요함 - https://webpack.kr/ webpack웹팩은 모듈 번들러입니다. 주요 목적은 브라우저에서 사용할 수 있도록 JavaScript 파일을 번들로 묶는 것이지만, 리소스나 애셋을 변환하고 번들링 또는 패키징할 수도 있습니다.webpack.kr npm i webpack webpack-cli -D - ..

image