0. 들어가면서 https://bum-developer.tistory.com/entry/React-Babel [React] Babel 0. Babel? Babel은 입력과 출력이 모두 자바스크립트 코드인 컴파일러이다. 일반적인 컴파일러는 고수준의 언어를 저수준의 언어로 변환하는 것과 다른 점이 있다. 초기엔 ES6 코드만 ES5 코드로 변환 bum-developer.tistory.com 정리 이후 내용을 다루고 있다. 해당 내용의 이해가 어려운 경우 먼저 읽기를 추천한다. 1. 확장성과 유연성을 고려한 Babel 설정 방법 Babel 설정에 사용할 수 있는 다양한 속성 중에 extends, env, overrides 속성을 알아보자 extends 속성을 이용하면 다른 설정 파일을 가져와 확장할 수 있고,..

0. Babel? Babel은 입력과 출력이 모두 자바스크립트 코드인 컴파일러이다. 일반적인 컴파일러는 고수준의 언어를 저수준의 언어로 변환하는 것과 다른 점이 있다. 초기엔 ES6 코드만 ES5 코드로 변환해주지만, 현재는 리액트의 JSX, 타입 스크립트와 같은 정적 타입 언어, 코드 압축 등의 단계에 있는 문법도 변환해준다. Babel을 실행하는 방법은 4가지가 있다. @babel/cli로 실행하기 웹팩에서 babel-loader로 실행하기 @babel/core를 직접 실행하기 @babel/register로 실행하기 이번엔 @babel/register를 제외하고 적용하는 방법을 알아본다. 1. 준비단계 패키지 설치 npm install @babel/core @babel/cli @babel/plugin..

1. 디자인 패턴? 프로그램이나 특정한 것을 개발하는 중에 발생했던 문제점들을 정리해서 상황에 따라 사용할 수 있게 정리하여 특정한 " 규약 " 을 통해 쓸 수 있는 형태로 만든 것을 말한다. 웹사이트나 어플리케이션을 만든다면 유지보수를 하고, 다른 이들과 협업할때 좀 더 쉽고 깔끔하게 만들 수 있는 방법을 고안해야한다. Data를 만들고 가공하고, 또 보여주는 로직이 분리되어 있지 않고 한번에 정의되어 있다면 추후에 유지보수하기가 힘들 것이다. 이것을 돕기 위해서 디자인 패턴이 나왔다. 즉, "효율적인 코드를 만들기 위한 방법론" 이라고 생각하면 된다. 2. MVC 패턴? MVC는 Model, View, Controller 의 약자이다. 하나의 프로젝트를 구성할 때 구성 요소를 세가지 역할로 구분한 패..

0. 들어가면서 웹사이트 개발을 하다가 한 번쯤은 만나게 되는 기능이 SNS 로그인이 아닐까 생각한다. SNS 로그인이 참 직접 만들기엔 귀찮고, npm에서 받아서 쓰자니 하나씩은 패키지가 있지만 여러 가지 SNS 로그인이 가능한 패키지는 내가 찾기엔 없었다... (키워드를 몰라서 그럴수도? ) 그래서 내가 한번 만들어보려고 한다! 1. 이름 정하기 내가 SNS 로그인 모음 패키지를 찾기 위해서 몇 가지 키워드로 검색을 했는데, 그중 react-sns-login 이라는 패키지가 있을 법한데 없었다. 그래서 내가 겟또 했다. 패키 지명 : react-sns-login 2. 만들 SNS 로그인 종류 정하기 SNS 종류는 정말 많다. 카카오, 네이버, 구글.... 등 기본적으로 카카오, 네이버, 구글은 우리나..

1. dotenv?React에서 .env 에서 설정한 변수를 사용하려고 하는데 알 될 경우 일반적으로 검색했을 때 dotenv를 사용해서설치해서 해결하는 글이 많다.  dotenv를 설치하고 App.js(혹은 다른 프로젝트 어딘가)에서 dotenv.config()를 호출하면 많은 오류가 나온다. 완전 동일하게 나올 수 있고 아닐 수 있지만, 일반적으로 fs, os, path쪽 오류가 나오게 된다.  dotenv는 무의존성 모듈로 Node.js에서 기본적으로 사용할 수 있게 만들어진 패키지이다. Node.js에서는 os, fs, path가 모두 제공되기 때문에 os와 path를 통해 파일을 찾아 fs를 사용해 읽어들인다. 하지만 React에서는 os, fs, path를 기본적으로 제공하지 않기 때문에 프로..

0. 들어가면서 webpack과 babel을 통해서 만든 프로젝트에 Code Splitting을 공부하기 위해서 추가로 작업한 것이다. 1. Code Splitting? 우리가 일반적으로 yarn build을 사용하면 하나의 번들 파일이 만들어진다. 프로젝트의 규모가 커지면서 번들 파일도 같이 점점 커지게 된다. 크기가 커진 번들 파일을 화면에 로드하는 경우 시간이 걸어지는 결과가 발생한다. 즉, 사용자가 느끼는 서비스의 만족도가 낮아지게 된다. 이때, 하나의 번들 파일을 여러 개의 번들 파일로 나누는 것이 Code Splitting이다. 여러 개의 번들 파일로 나누어서 실제 로드가 될 화면에 필요한 번들 파일만 불러오고 나머지 번들 파일은 호출하지 않고 필요할 때 호출하면서 더 빠른 속도로 화면에 보이..

0. 들어가면서 Webpack과 Babel을 사용한 프로젝트에서 html-webpack-plugin은 webpack이 html 파일을 읽어서 로드할 수 있도록 도와준다고 했다. 근데 이게 무슨 말일까? 여기서부터 시작된 의문이 ' 과연 이게 진짜 해당 기능을 하는 걸까? ', ' 사실 더 어썸 한 기능이 있는 것은 아닐까? ', ' 아에 다른 기능인가? ', ' 쓸모없는 기능일까? ' 등 별에 별 의문이 생겨서 한번 알아보게 되었다. 1. html-webpack-plugin ? Custom Html html-webpack-plugin은 webpack 번들을 제공하는 HTML 파일 생성을 단순화시켜준다. const path = require("path"); const HtmlWebpackPlugin = r..

0. 들어가며 해당 프로젝트는 webpack과 babel을 사용해서 만든 프로젝트에 그동안 React 프로젝트를 할 때마다 헷갈리던 폰트 파일을 적용하는 방법을 작성하였다. 1. 준비물 특별하게 사용한 것은 React 프로젝트, 구글에서 가져온 Font 파일(ttf), styled-components 패키지가 있다. 2. 시작 public 폴더 이용하기 먼저 구글에서 가져온 폰트를 public 폴더에 넣어주었다. import React from "react"; import styled from "styled-components"; const CustomDiv = styled.div` @font-face { font-family: "BlackHanSans"; src: url("./assets/fonts/B..