전체 글125 CRA 없이 리액트 세팅하기 레벨 3 프로젝트에서는 CRA 없이 react를 세팅해야 했다. 우테코 시작 전에는 react를 설치할 땐 무조건 CRA 방법밖에 없는 줄 알았던 나... 이번을 기회로 CRA 없이 리액트를 세팅해 보기로 했다. 잠깐! CRA는 무엇이며, 장단점은 무엇일까? CRA는 'Create React App'의 준말로 React 기반의 프론트엔드 웹 애플리케이션을 빠르게 구축하는데 도움을 주는 툴이다. CRA를 사용하면 React 개발 환경을 쉽게 설정하고 복잡한 설정이나 빌드 작업을 없이 시작할 수 있다. 다만, 사용하지 않는 라이브러리가 같이 설치되고, 초기 번들 크기가 크다. 또, 자기 입맛대로 커스터마이징 하기에 제한이 있다. 어떤 걸 개발 의존성으로 설치해야 할까부터 평소에 무슨 의미인지 몰랐던 설정까지.. 2023. 7. 4. styled components styled components란? styled components란 JavaScript와 CSS의 능력을 결합한 CSS in JS 라이브러리이다. styled components는 CSS를 JavaScript를 통해 집어넣어 유동적인 스타일링을 할 수 있다. 기존의 CSS 방식은 파일을 별도로 분리하고, id나 class 이름을 통해 가져와 사용했지만 styled components의 경우 한 파일 내에서 컴포넌트 이름을 사용하듯 스타일링을 진행한다. CSS in JS CSS in JS는 CSS를 JavaScript 코드 내에 포함하는 방식이다. CSS in JS 방식으로 작성된 스타일링 코드에는 컴포넌트마다 고유한 class name이 적용된다. 이 class name은 브라우저 런타임에서 각 컴포넌.. 2023. 7. 2. webpack의 babel-loader와 ts-loader webpack으로 TypeSciprt를 다룰 때 2가지 방법이 있다. 바로 babel-loader + @babel/preset-typescript와 ts-loader를 사용하는 것이다. 우리는 두 가지 방법을 모두 사용할 수 있다. 하지만 두 방식의 차이점을 이해하고 상황에 맞는 선택을 해보자. 1. babel-loader + @babel/preset-typescript 세팅 먼저, 필요한 패키지를 설치한다. npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-typescript babel.config.json 파일을 루트 디렉터리에 만든 후 @babel/preset-env와 @babel/preset-typescr.. 2023. 7. 1. TypeError: Cannot destructure property ‘accessToken’ of ‘undefined’ as it is undefined. 프롤로그 근로 이번 미션은 fetch를 axios로 변환하는 것이었다. 그 과정에서 axios에 header가 반복되는 것이 보였고, 이를 util로 분리하기로 했다. axios.create를 통해 headers를 정의하고, accessToken이 있냐 없느냐에 따라 'Authorization'을 추가해 주었다. import axios from 'axios'; import { BASE_URL } from '../configs/environment'; interface AxiosInstanceProps { accessToken?: string; } export const createAxiosInstance = ({ accessToken }: AxiosInstanceProps) => { const heade.. 2023. 7. 1. Babel 바벨이란? Babel은 주로 JavaScript 코드를 변환(transpile)하는 도구이다. Babel의 주요 기능은 최신 ECMAScript(ES6 이상) 표준을 사용해 작성된 JavaScript 코드를 이전 브라우저 버전과 호환되는 ECMAScript(ES5) 코드로 변환하는 것이다. 이를 통해 개발자들이 최신 JavaScript 기능을 사용하여 개발한 코드를 이전 브라우저에서도 문제없이 실행할 수 있다. Compiler? Transpiler babel의 공식 홈페이지를 보면 babel을 컴파일러(Compiler)라고 소개한다. 엄밀히 말하면 컴파일러가 아니다. 컴파일러는 사람이 작성한 코드를 컴퓨터가 이해할 수 있도록 머신 코드로 바꿔주는 것을 말한다. babel은 같은 언어를 다른 실행 환경에서.. 2023. 6. 29. 웹팩(Webpack) 웹팩이란? webpack은 JavaScript, CSS, Image 등의 웹 자원들을 묶어주는 모듈 번들러(Module Bundler)이다. webpack은 여러 개의 파일과 모듈을 하나 또는 여러 개의 최적화된 파일로 번들링 해주는 역할을 한다. 모듈 번들링이란? 모듈 번들링은 웹 애플리케이션을 구성하는 여러 개의 파일과 모듈을 하나 또는 여러 개의 최종 파일로 결합하는 과정을 말한다. 웹팩의 등장 이유 1. 모듈화의 필요성 규모가 크고 복잡한 웹 애플리케이션에서는 코드 구조와 가독성을 개선하기 위해 작은 모듈로 분리가 필요하다. 이를 통해 모듈 간의 의존성이 명확해지고 개발 및 유지 보수가 용이해진다. 2. 개발 생산성 향상 webpack의 기능은 개발자들이 페이지를 새로고침하지 않아도 변경 사항을 .. 2023. 6. 28. 이전 1 2 3 4 5 6 7 8 ··· 21 다음
