React.js
3개의 글
3개의 글
Next.js는 기본적으로 이미지 파일을 import 하게되면 리소스 URL 방식으로 가져오게 됩니다. 따라서 다음과 같은 import 구문은 string으로 작동하게되죠. SVG 파일 import 예제 그런데 CRA나 다른 프레임워크를 사용하셨다면 이는 굉장히 불편하게 느껴질겁니다. 왜냐하면 다른 프레임워크는 SVG 파일에 대해서는 URL이 아닌 React 컴포넌트로 변환해 불러오게 됩니다. 이를 이용해 CSS의 fill 속성을 이용해 아이콘의 색상을 변경하는 방식을 사용하는 사람이 존재할 겁니다. (제가 그렇거든요..) 이를 해결하기 위해 next.config.js 를 어떻게 수정하고, 또 기존 URL 방식을 유지하면서 사용할 수 있도록 하는지 방법을 알아보도록 하겠습니다. 패키지 설치 Next.js에서는 기본적으로 웹팩 플러그인을 지원합니다. 그리고 SVG파일을 React 컴포넌트로 변환하는 유명한 플러그인 패키지는 @svgr/webpack 입니다. 이 플러그인을 사용해야지만 저희가 원하는게 가능하기 때문에 설치를 진행해봅시다. @svgr/webpack 패키지 설치 웹팩 설정 추가하기 Next.js에는 각종 설정을 관리하기 위한 파일인 next.config.js 파일이 존재합니다. 해당 파일의 webpack을 사용해 기존 Next.js에서 사용하는 웹팩 설정을 수정할 수 있습니다. 이를 이용해 svg 파일 불러오는 규칙을 수정할 예정입니다. 아래 내용을 확인하시고 적용하시면 됩니다. next.config.js에서 웹팩 설정
2023-05-03#개발#React.js#Next.js
저는 프론트엔드를 개발할때 CSS규칙이 좀 특이합니다. 일반적으로 CSS를 작성하신다면 \*를 이용하거나 각 태그들을 모두 같은 스타일로 초기화하고 사용하는실겁니다. 그러나 저는 각 태그별로 사용하는 CSS만 초기화하는 방식으로 사용합니다. 그러면서 한가지 습관이 들여진게 있는데 바로, 클래스이름을 해당 태그의 이름을 넣고 시작하는겁니다. 예를들면 리액트 컴포넌트로 생각을 한다면, Button이라는 \<button class="button">\</button>을 렌더링하는 컴포넌트를 만들고 시작합니다. 사용을한다면, \<Button onClick={...}>확인\</Button>으로 이름이 카멜케이스인 컴포넌트를 사용하게 되는것이죠. 이 방식에는 장점이 있습니다. 스타일을 적용한 컴포넌트와 스타일이 없는 순수 태그를 모두 사용이 가능하다는 점이있고, 외부 CSS보다 충돌이 많이 적은 편이라는것이죠. 외부 라이브러리에 대해 좀 얘기하면, 아마 많은 분들이 Bootstrap이나 기타 다른 CSS 스타일 라이브러리를 사용해보신다면 겪어보셨을 겁니다. 버튼 스타일 하나 바꿀려고 그 라이브러리의 내부를 뜯어보거나 브라우저 개발자 도구를 열어서 하나 하나 확인한적 있으실겁니다. 그 라이브러리가 어떤 스타일을 적용해놨는지도 모르니 말이죠. 저는 두가지 장점 때문에 직접 스타일을 하나 하나 짜가는 습관을 들여놨습니다. 아직 협업에선 초짜인지라 그런상황이 된다면 이게 득이될지 실에될지에 대해서는 차차 확인해 나가면서 제 습관을 고쳐야할 수도 있다는 점이있지만요. 쨌든, 이런방식의 습관을 쫌더 쉽게사용하려고 Classed라는 리액트에서 사용할 컴포넌트를 만들어주는 함수를 만들었습니다. 오늘은 이것을 소개할 겁니다. 알아야할것들 React컴포넌트인 만큼 React를 아셔야합니다. Jsx의 구조까진 아니더라도, React의 createElement와 forwardRef함수를 아신다면 아주 편해질겁니다. 그리고 저는 최신버전의 React를 사용하다보니 함수형 컴포넌트를 주로 사용하고, Hooks를 같이 사용합니다.
2019-12-02#개발#React.js
이번엔 create-react-app의 eject 기능을 사용하지 않고, eslint 설정을 바꾸는 방법을 알려드리겠습니다. create-react-app 이란? create-react-app은 리액트 프로젝트를 처음 시작할때 사용하는 npm 패키지 입니다. 이를 통해 react-scripts라는 패키지 기반의 프로젝트 환경을 구축할 수 있도록 도와줍니다. 또한, 리액트 공식문서에서도 이를 사용하도록 되어있기 때문에 대부분의 리액트 시작하기 관련 글을 읽으시면 이를 이용해 시작하는 것을 볼수있습니다. 이 방식으로 프로젝트를 왜 많이 사용하냐면, 리액트 프로젝트에서 webpack, eslint 등 빌드 도구들에 이 빌드 도구들의 플러그인까지 설정할건 아주 아주 많습니다. 이를 한방에 해결해주는게 react-scripts 입니다. 그러면서 저희는 오직 리액트 앱 소스코드만 관리하면되는 장점이 있습니다. 2023년 기준으로 리액트 공식문서는 https\://react.dev 로 옮겨갔으며, 프로젝트 시작을 CRA가 아닌 Next.js, Remix 등으로 시작하도록 바뀌었습니다. 문제 모든 빌드 도구와 플러그인을 관리해주었지만 그 설정을 바꾸는 방법은 어렵거나 알려지지도, 존재하지도 않습니다. 그저 이 react-scripts를 떼어내는 npm run eject라는 커맨드로 모든 빌드 도구들을 프로젝트 코드에 직접 설치해주는 방식을 사용한 방법이 많이 알려져있죠. 이 eject는 모든 툴들을 프로젝트 소스에 병합하는 형태라 한번 사용하게되면 되돌릴 수 없고, 또한 모든 툴들을 직접 관리해줘야 하죠. 예를들어 webpack의 버전을 업그레이드 하고싶다면 react-scripts를 업데이트하면 끝이지만, eject를 하게되면 webpack과 함께 같이 사용하는 플러그인들까지도 함께 맞는 버전으로 업그레이드 해줘야합니다. 해결방법 react-scripts에서는 환경변수를 통한 일부 기능을 활성화 할 수 있습니다. 환경변수 중 EXTEND\_ESLINT 가 존재하고, 이를 활성화 하면 .eslintrc.json 을 통한 설정 정보 확장이 가능합니다. 이를 해주기 위해 저희는 react-scripts에서 기본으로 제공하는 dotenv를 이용해 환경변수를 추가할 예정입니다. 프로젝트 소스 코드 최상단에 .env라는 파일을 만들고 다음과같이 작성합니다.
2019-11-07#개발#React.js