0. 사건의 발단 평화로운 어느날... 내가 만든 프로젝트를 Github에 배포를 해서 테스트를 진행했는데, 지난번 경로를 인식 못하는 문제 외 페이지에서 새로고침 시 404 에러가 나왔다.... 1. 문제 이유 github pages는 SPA를 지원하지 않기 때문에, URL이 https://도메인 으로 지정되어있다. 그래서 https://도메인/프로젝트명/라우터명 에서 새로고침을 할 경우 Github는 /프로젝트명/라우터명을 모르기 때문에 404 에러와 함께 404.html 페이지를 리턴한다. 2. 해결 방법 편법이지만, 404.html을 사용한다. 빌드를 하고 결과물의 index.html 파일을 404.html 파일로 복사해서 같이 빌드해주면 된다. "scripts": { ... "deploy": "..

0. 사건의 발단 평화로운 어느 날... 나는 내가 만든 프로젝트를 Github에 배포하기 위해서 작업을 진행했다. 분명 로컬에서는 문제없던 프로젝트인데 배포분에서는 원하던 페이지가 나오는 것이 아닌 메인 페이지가 나왔다... 1. 문제 이유 Github는 도메인/페이지 방식이 아닌 도메인/프로젝트명/페이지 방식이어서 라우터를 이동했을 경우 도메인/페이지로 이동되어서 이상한 페이지로 이동된 것이다. ex) https://seojaewan.github.io/react-sns-login/ React Project! seojaewan.github.io = 구글 페이지 이동 => https://seojaewan.github.io/Google?type=Setting/ seojaewan.github.io 뒤에 있던..

1. Polyfill? 자바스크립트의 최신 기능을 모두 사용하면서 오래된 브라우저를 지원하려면 Babel로 코드 문법을 변환함과 동시에 Polyfill도 사용해야 한다. Polyfill은 런타임에 기능을 주입하는 것을 말한다. 런타임에 기능이 존재하는지 검사해서 기능이 없는 경우 주입한다. Babel을 사용하면 최신 자바스크립트 표준에 추가된 모든 기능을 사용할 수 있다고 생각하겠지만 Polyfill에 대한 설정은 별도로 해야 한다. 예를 들어 ES8에 추가된 String.padStart 메서드는 폴리필을 통해서 추가할 수 있다. if (!String.prototype.padStart) { String.prototype.padStart = func; } func는 padStart 폴리필 함수이다. 2. ..

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..

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이다. 여러 개의 번들 파일로 나누어서 실제 로드가 될 화면에 필요한 번들 파일만 불러오고 나머지 번들 파일은 호출하지 않고 필요할 때 호출하면서 더 빠른 속도로 화면에 보이..