본문 바로가기

Front-end85

5. webpack - vendor prefixer / auto-prefixer(Post CSS) 0. 개념 vendor prefixer 또는 공급업체 접두사라고 불린다. 개발을 하다보면 아직 웹 표준이 되지 않은 CSS3의 최신 또는 실험 기능을 사용하는 경우가 생긴다. 이때, 최신버전의 브라우저는 해당 기능을 소화할 수 있을 수도 있지만 구버전의 브라우저는 해당 기능을 소화하지 못하기 마련이다. 이러한 호환성 문제를 해결하기 위해 사용하는 것이 vendor prefixer 또는 auto-prefixer 라고 한다. 1. main.scss 파일 내용 수정 아래의 코드처럼 flex 요소를 추가해준다. $color--black: #000; $color--white: #fff; body { background-color: $color--black; h1 { color: $color--white; font.. 2021. 5. 6.
4. webpack - SCSS 적용하기 1. 확장자 변경 이전 포스팅에서 만들었던 CSS 폴더와 파일을 SCSS로 변경해준다. 파일의 경우 확장자만 변경해주면 된다. 기존의 main.js에 설정해놓은 CSS 파일의 경로도 수정해준다. 기존에 설정해놓은 webpack.config.js의 경로도 수정해준다. 2. scss 패키지 설치 자바스크립트(webpack.config.js)에서 CSS를 읽고 적용할 수 있도록 style-loader와 css-loader를 설치하였다. 이번에는 SCSS를 읽고 적용할 수 있도록, 필요한 패키지를 설치하고 적용해보자. 터미널 입력: npm i -D sass-loader sass 설치 후 webpack.config.js에 패키지 설정을 추가한다. 3. scss 작성하기 main.scss에 다음과 같은 코드를 작성.. 2021. 5. 6.
3. webpack - 모듈 설정(CSS 연결) 1. 모듈 사용 방법 - 아래의 작업을 진행하면, index.html에서 link태그를 이용해 설정해놓은 css 연결부분을 삭제해야한다. a) main.js 파일을 이용한 CSS 파일 연결 이전 포스팅에서 static 폴더에 생성하면 static부분의 경로를 생략하고 dist에서 읽어드릴 경로로 작성했다. 이번에는 static 폴더를 사용하지 않고 main.js 파일을 이용하여 파일을 연동하는 방법을 배울 것이다. 먼저, 루트 경로에 css 폴더를 만들고 그 안에 main.css라는 파일을 만들자. main.css 에는 body 태그의 배경색을 변경하는 내용을 적었다. 그리고 main.js 파일에서 main.css 파일을 import 해준다. - webpack.config.js 파일 안에서 entry 지.. 2021. 5. 5.
2. webpack - index.html 연결하기 1. 개발서버를 이용한 index.html 확인하기 a) 웹팩 플러그인 설치 터미널 입력: npm i -D html-webpack-plugin b) webpack.config.js 설정 webpack 플러그인 import 하기 output 부분에 플러그인 사용을 위한 구성요소(plugins, devServer) 추가하기 // import const path = require('path') // node 모듈을 import 해오는 기본방법 const HtmlPlugin = require('html-webpack-plugin') // webpack plugin 모듈 가져오기 // export module.exports = { // 파일을 읽어들이기 시작하는 진입점 설정 entry: './js/main.js'.. 2021. 5. 5.
1. webpack 시작하기 0. webpack 이란 무엇인가? webpack은 Bundler의 한 종류이다. 번들러를 왜 사용하는지 알아보자. 프론트 개발을 하다보면 리액트, 뷰, 앵귤러 등 다양한 프레임워크를 사용한다. 프레임워크에 따라 HTML, CSS, JS를 프레임워크만의 형식으로 작성하게 된다. 화면을 출력하기 위해서는 브라우저가 프레임워크 형식으로 작성된 파일을 컴파일해야 하는데, 이 과정이 오래 걸린다. 번들러는 브라우저가 빠르게 컴파일 할 수 있도록, 프레임워크 형식으로 작성된 파일을 HTML, CSS, JS 파일로 분리하는 역할이다. [ 참고자료 ] velog.io/@eastshine94/Bundler-왜-Bundler을-사용해야하는가 [Bundler] 왜 Bundler을 사용해야하는가? Bundler > 참고 자.. 2021. 5. 4.
JS 근본 공부 - async & await 1. async와 await란? - async와 await는 지난 포스팅에서 설명한 promise를 더욱 간결하고 동기적으로 실행되는 것처럼 보이게 만들어 주는 기능이다. - 지난 포스팅에서 then을 사용하여 promise chaining을 구현했는데, 직관적이고 사용하기 편하지만 코드 자체를 봤을 때에는 복잡해 보인다는 것이 단점이다. - 이러한 단점을 보완할 수 있도록, promise를 동기적으로 실행하는 것처럼 보이게 하는 역할이 async와 await다. - 프로그래밍 용어로, async와 await같은 기능들을 sytactic sugar라고 한다. *syntactic sugar - async와 await처럼, 기존에 존재하는 기능을 더욱 사용하기 편하도록 제공되는 API를 가리킨다. 2. as.. 2020. 11. 9.
JS 근본 공부 - Promise 1. Promise란 무엇인가? - Promise라는 단어의 뜻처럼, 코드가 동작하는 순서를 약속하는 약속의 객체라고 표현할 수 있다. - JavaScript에서 제공되는 Object(=객체) 중 하나로, 콜백을 사용하지 않고 비동기식 처리를 구현하는 방법이다. a) 어떻게 사용되는가? - 요즘은 맛집을 가보면 promise가 사용되는 것을 볼 수 있다. 대기손님이 많을 경우, 번호표를 나눠주는 것이 아니라 웨이팅 리스트에 자신의 정보를 등록하고 자리가 나면 시스템에 의해 자동으로 문자를 받는 것을 경험한 적이 있을 것이다. → 영업시간동안(정해진 시간동안) 자리가 비워지면 대기순서대로 알림이 가는 기능을 promise로 구현한 것이다. - 인터넷 강의에서도 promise가 사용되는 것을 볼 수 있다. .. 2020. 11. 6.
JS 근본 공부 - 콜백(Callback) - 콜백은 비동기 처리방식을 구현하기 위해 기본적으로 이해 해야하는 개념이다. - 콜백은 무엇인지, 비동기/동기처리는 무엇인지 알아보자. 1. Sync & Asnyc a) Sync(동기) - 기본적으로 JavaScript는 동기적(synchronous)으로 작동하는 언어이다. - 이는 코드를 읽을 때, 자바스크립트의 hoisting 과정 이후 코드가 작성된 순서대로 실행된다는 의미다. - 즉, 순서대로 작동한다는 것은 동기적으로 처리된다는 뜻이다. * hoisting: var 변수, function의 선언부가 몇번째 줄에 작성 되었는지와 상관없이 가장 먼저 읽혀 수행되는 것 b) Async(비동기) - 동기적 처리와 반대되는 개념으로, 코드의 작성 순서와 상관없이 개발자가 순서를 지정하여 동작하는 것을 .. 2020. 11. 5.
JS 근본 공부 - JSON 1. JSON이란 무엇일까? - JSON을 이해하기 위해 웹이 어떻게 서버에게 data를 요청하고 받는지, 그 구조에 대한 전반적인 이해가 필요하다. a) HTTP(Hypertext Transfer Protocol) HTTP란, client(웹사이트 또는 웹App)가 server와 통신하는 방법 또는 규칙, 규약을 정의한 것이다. Hypertext를 이용하여 client는 server에게 원하는 data를 request하고, 이 request를 기반으로 server가 client에게 response하는 방식으로 통신한다. HTTP를 이용하여 요청한 data를 server에게 받아오는 방법으로 AJAX가 있다. * Hypertext - 웹사이트에서 흔하게 볼 수 있는 하이퍼링크 뿐만 아니라 이미지, 문서 .. 2020. 11. 4.

티스토리툴바