xtring.dev

Table of Contents 바벨(Babel)? 바벨을 사용하는 이유 바벨 직접 사용하기 babel-ployfill 마무리 Front-end 개발자라면 꼭 보았을 Babel 관련 설정 파일들이 있으실거에요. 이번 아티클에서는 Babel이 무엇이고 왜 사용되며 어떻게 사용하는지 알아보겠습니다. 바벨(Babel)? Babel(이하 바벨)의 주 역할은 ES6+ 버전 이상의 JavaScript, JSX, TypeScript 코드를 하위 버전의 JavaScript 문법으로 변환시켜주는 역할을 합니다. 이를 통해서 다른 플랫폼 브라우저에서도 원활한 동작을 할 수 있도록 하는 것이죠. Babel은 공식 페이지에서 '컴파일러(Compiler)다!'라고 하지만 실제로는 언어를 해석하는 것이 아닌 사전 변화해주는 것과..

npm install 시 reify~로 프리징이 걸리는 문제 때문에 찾아봤는데 아래 아티클을 통해 해결했습니다😁 (1) node LTS 버전 재설치 후 다시 (2) npm install하면 해결됩니다! 📗 Ref. [해결] npm install 할 때 reify~로 프리징 걸리는 현상 npm i를 실행했을 때 어느정도 진행되다가 reify:~에서 프리징이 걸린다. velog.io ⛓ Link Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org

Next.js에는 몇가지 강력한 특징이 있습니다.(아래) 이번 아티클에서는 SSG와 SSR에 대한 내용을 설명드리겠습니다🤓 Next.js의 Pages Next.js에서 page는 pages 디렉터리의 .js, .jsx, .ts, .tsx 파일로부터 export된 React Component입니다. 각 페이지는 그들의 파일 이름을 기반으로 route됩니다. 예를 들어, 만약 pages/about.js 파일을 생성한다면 /page로 쉽게 접근가능합니다. function About() { return About; } export default About; 이렇게 About은 하나의 페이지로서 사용됩니다. Pre-rendering; 사전 렌더링 기본적으로, Next.js는 모든 페이지를 pre-rendering..

Next.js 공식문서 파헤치기(1) - Next.js 시작하기 이번에 맡게된 프로젝트를 진행하며 React를 사용하여 SEO와 SSR을 고려해야하는 상황이 생겼습니다. 흔히 사용하는 CRA를 통해 SPA 형태로 개발하더라도 추가적인 기능이나 설정을 통해 고려사항을 충족할 수도 있었지만 기술 도입 리서치를 통해 Next.js 사용하는 것이 옳다고 판단되어 스터디하게 되었습니다. 확실히 SPA에서 부족했거나 더 개선된 사항들이 많이 보이더군요. 저는 단순히 해석하고 글을 덧붙이는 작업이지만 시리즈로 아티클을 작성하여 함께 공부한다는 느낌으로 공유하고 싶습니다😎 이 아티클은 Next.js Tutorial 문서를 기반으로 해석되어 작성되었습니다. 오역이 있을 수 있으며 제가 해석하며 가미한 내용이 포함될 수 ..

Ref. 📗 Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Documentation for the Tailwind CSS framework. tailwindcss.com 최근 React 와 함께 사용하는 스타일 라이브러리/프레임워크가 정말 다양해졌습니다. 대표적으로 styled-components, emotion, Tailwind css 등이 있는데 오늘은 Tailwind 에 대해서 알아보려고 합니다! 먼저, Tailwind 의 장점은 tailwind 홈페이지에서 볼 수 있듯이 Rapidly build modern websites without ever leaving your HTML. "HTML을 떠나지 않고도 ..

Styled Components 1. 스타일? Styled Components를 왜 배우는가! SASS 코드를 설치 없이 사용하고 CSS 파일 없이 CSS 코드를 짜고 게다가 이 코드를 React Native 앱으로 공유할수 있습니다. 가장 큰 장점은 기존의 className을 사용하지 않는 것과 컴포넌트에 스타일을 적용하여 스타일 코드를 몰아 넣을 수 있으며 공통 코드를 줄이고 React의 컴포넌트 형태로 사용할 수 있다는 점입니다! 2. 셋업 npx create-react-app 을 통해 환경을 설치합니다. 그리고 /src 디렉토리에 App.js와 index.js을 제외한 모든 파일을 제거합니다. 가장 먼저 버튼을 만드는데 hover, active state, 배경색을 바꿔보겠습니다.(js와 css를..

웹 개발자라면 크롬 개발자 콘솔을 많이 사용합니다. 누가 알려주지 않으면 몰랐을 기능을 소개합니다! * 그렇게~~~ 중요하진 않지만 알고 있으면 꿀팁인 기능들입니다! 스크린샷 크롬에서도 페이지에 대한 스크린샷을 할 수 있습니다. '그냥 시스템 스크린샷을 사용하면되는가?'라는 의문을 가질 수 있지만 크롬에서 제공하는 스크린샷은 웹 사이트의 전체를 캡쳐하거나 선택한 요소에 대해서만 스크린샷을 사용하는 것이 가능합니다! 또한 매우 고화질의 이미지를 얻을 수 있습니다. 먼저, 개발자 도구(F12)를 열어줍니다. 우측 상단의 더보기 아이콘을 클릭하면 Run command 항목을 찾을 수 있습니다. 단축키로는 간단하게 Mac 기준 command + shift + P를 사용하면 됩니다. 그럼 크롬 개발자 도구가 가지..

요즘은 큰 문제가 없다면 React 프로젝트를 CRA 진행하곤 합니다. eject를 하게 되면 해당 프로젝트에 숨겨져 있는 모든 설정을 밖으로 추출할 수 있으며 이를 통해서 webpack과 babel의 자유로운 세팅이 가능합니다. 🍭 제 경우 외부 모듈을 추가하는데 있어 eject이 필수였기 때문에 사용하게 되었습니다. 사용방법 사용방법은 간단합니다. $ npm run eject 명령어 실행 후 ? Are you sure you want to eject? This action is permanent.(y/N) 라는 물음이 나오면 y를 누르고 Enter를 쳐줍니다. 만약, eject 실행 전 git을 통해 변경사항을 저장하지 않으면 This git repository has untracked files o..