vh란 viewport height로 브라우저의 높이에 따라 상대적으로 적용되는 단위이다. 예를들어서 화면의 높이가 100px이라면 1vh는 1px이다. 하지만 사파리에서는 상단의 url바와 하단에 있는 네비게이션바로 인해서 100vh를 설정해도 화면이 잘려버리는 문제, 혹은 스크롤리 생겨버리는 문제가 발생한다. 해결 방법 -webkit-fill-available 프로퍼티로 해결할 수 있다. body { min-height: 100vh; } /* iOS only */ @supports (-webkit-touch-callout: none) { height: -webkit-fill-available; }

Webpack을 사용할 때 css-loader를 적용해서 css 파일을 처리하는게 일반적이다. 그런데, css의 url 을 사용했을 때 해당 파일이 file-loader를 타는 것이 아닌 css-loader 내에서 처리되는 문제가 발생했다. background-image: url("./assets/images/hero-img.png"); 이런 경우 당황하지 말고 css-loader의 url 옵션을 false로 변경해주면 된다. const path = require("path"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = { mode: process.env.NODE_ENV, devtool: "sourc..

코드 스플리팅? Webpack과 같은 모듈 번들러에서 사용되는 중요한 기능이다. 하나의 큰 번들을 여러개의 작은 번들들로 쪼개주는 기능을 한다. 필요할때 필요한 번들만 로드 함으로써 초기 로딩시간을 줄여주고, 현재 페이지에서 필요없는 코드는 로드하지 않기 때문에 앱의 성능도 향상시킬 수 있다. 하는 방법 @babel/plugin-syntax-dynamic-import 사용하는 방식으로 적용할 계획이다. npm i --save-dev @babel/plugin-syntax-dynamic-import 당연히 먼저 할일을 필요한 패키지를 다운받는 일이다. { "presets": [ // ... ], "plugins": ["@babel/plugin-syntax-dynamic-import"] } 바벨 설정 파일에 ..

웹페이지 개발을 하다보면 OAuth라는 이야기를 많이 들어볼 것이다. 본인은 OAuth라는 것은 단순하게 소셜 로그인이라고 생각하고 있는데, 이번 기회에 한번 알아보려고 한다. OAuth("Open Authorization")는 인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단으로서 사용되는, 접근 위임을 위한 개방형 표준이다. - 위키백과 위키백과의 말을 정리하면 흔히 우리가 아는 외부 소셜 계정을 기반으로 사용자에게 접근 권한을 부여하는데 사용되는 프로토콜이라고 생각하면 될 것 같다. 일반적으로 우리가 웹사이트에서 회원가입을 하려면 1. 회원가입 ( 아이디, 비밀번호 외 주소, 연락처 등 다양한 정보..

우리가 개발을 하면 빼먹을 수 없는 것이 있다. 그것은 바로 Console.log 지우기! 이게 또 은근 귀찮은 작업인데, 자동으로 지워주는 플러그인이 있어서 소개를 한다! 설치 npm install --save-dev babel-plugin-transform-remove-console 어썸한 패키지를 먼저 설치해준다. 적용하기 const babelArgv = require("yargs").argv; const isProd = babelArgv.env === "prod"; const config = { presets: [ [ "@babel/preset-env", { targets: "> 0.25%, not dead", useBuiltIns: "usage", corejs: 3, shippedProposal..

1. Webpack? 우선 웹팩이 무엇일까? 위 이미지에서 보이는 것처럼 여러가지 얽힌 복잡한 파일들을 간단하게 만들어주고 있다. 그래서 Webpack을 모듈 번들러라고 한다. 즉, 여러 개로 나뉘어진 파일들을 묶어서 하나의 파일로 만들어준다. 근데 이런 과정이 왜? 필요할까? 웹 페이지는 다양한 html, js, css, png, ... 등 파일로 구성되어 있다. 그말은 웹페이지가 구성되려면 많은 파일들을 요청해야 한다는 것이다. http/2 커넥션이라면 동시에 여러 파일을 요청할 수 있지만, 현재 많이 사용되고 있는 http/1.1에서는 한번의 요청에 하나의 파일만 받을 수 있다. 즉, 요청 해야하는 파일이 많아지면 그만큼 오래 기다려야해서 비효율적이다. 이러한 요청을 줄이기 위한 방법이 번들러이다...

0. 들어가며 Babel에 대해서 정리한 글이 이곳 저곳 나의 티스토리에 많이 있다. 하지만 모두 다른 블로그를 이곳 저곳 뒤지면서 정리한 내용이라 한눈에 이해가 되지 않는다. 이번 기회에 한번 다시 정리하고자 한다. 1. Babel? 입력과 출력이 모두 자바스크립트인 컴파일러이다. ES6 코드, 리액트의 JSX, 타입 스크립트와 같은 언어를 ES5 코드로 변환해준다. 즉, 최신 자바스크립트 코드를 지원하지 않는 explorer 같은 브라우저에서 최신 자바스크립트 코드를 구버전 자바스크립트 코드로 호환이 가능하게 변환해준다. 2. Babel의 구동 방법 구동에 있어 필수인 패키지는 @babel/core 이다. Babel을 사용하기 위해서 필수로 필요한 패키지이고 그 외에는 @babel/plugin-tra..

Git Flow? Git으로 개발할 때 표준과 같이 사용되는 방법론이다. Git Flow라는 기능이 있는 것이 아닌 서로 간의 약속인 방법론이라는 점이 핵심이다. Git-flow는 5가지의 브랜치를 사용해서 운영을 한다. 1. master : 기준이 되는 브랜치로 배포를 하는 브랜치이다. 2. develop : 개발 브랜치로 개발자들이 해당 브랜치를 기준으로 작업한 내용을 합친다. 3. feature : 단위 기능을 개발하는 브랜치로 개발 완료 후 develop으로 합쳐진다. 4. release : 배포를 위해 master 브랜치로 보내기 전 QA를 하기 위한 브랜치이다. 5. hotfix : master 브랜치로 배포했을 때 버그가 생겨 급하게 주정하는 브랜치이다. 각각의 부분을 좀 더 깊게 설명해보자..