Front-End(Web)/React - 프레임워크(React, Next)
-
[React] Portal (포탈), Modal 구현하기Front-End(Web)/React - 프레임워크(React, Next) 2022. 2. 6. 16:08
회사에서 선배와 React로 모달 구현에 대해 고민하다가 알게된 내용이었다. 우리 회사 프로젝트는 Vue를 사용하기 때문에, 플러그인(this.$modal) 메서드를 통해 루트에 모달 컴포넌트를 주입, 삭제해서 표현한다. 하지만 React의 경우엔 어떻게 구현되는지 몰랐으며, 전역모달이 구현되는 영역에 Context API를 적용하면 되나 이 영역들이 리렌더링된다는 단점이 있었다. 그렇기에 전역상태를 통해 모달을 on/off 하는 방법을 찾아봤으며, 이 때 React의 Portal 기능을 통해 좀 더 효율적인 구현이 가능했다. 💙 Portal 이란? React 공식문서에 따르면, Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법이라고 소개하고 있다...
-
[Craco] Craco로 설정하기 (절대경로, Less)Front-End(Web)/React - 프레임워크(React, Next) 2022. 1. 23. 18:45
이전 포스팅에선 Craco가 무엇인지, 그리고 기본적으로 설치하는 방법에 대해 알아보았다. 이번 포스팅은, Craco 익스텐션을 통해 내가 보일러 플레이트에 적용했던 설정들을 기록하는 시간을 갖도록 하겠다. 💙 Craco-alias : 절대경로 설정하기 절대경로는, 모듈들을 참조(import)할 때 경로를 루트(root) 혹은 src로부터 작성하기 위해 설정하곤 한다. 상대경로로 작성된 경로는, 아무래도 가독성도 떨어질뿐더러 파일이 추가되거나 수정될 때 경로추적이 매우 번거롭다는 단점이 있다. tsconfig.json으로 설정하면 경로추적은 가능하나, 컴파일 시 해당경로의 모듈을 찾지 못한다는 에러가 발생한다. 그렇기에, Webpack을 eject해서 경로에 대한 정보를 추가해주어야 하며, 이 번거로움을..
-
[Craco] Craco 란?Front-End(Web)/React - 프레임워크(React, Next) 2022. 1. 18. 03:21
이전에 CRA(Create-React-App)로 React 프로젝트를 생성할 땐 Webpack의 커스텀 필요성을 잘 느끼지 못했다. 하지만, 이번에 Boiler Plate를 제작하면서 추가적으로 설정할 부분들이 생겼다. (절대경로 alias 컴파일, Less Loader) CRA에서는 설정파일이 숨겨져 있고, 이를 추출해서 각 config, babel 등 설정을 적용해야 하는 번거로움이 있기 때문이다. 그렇기에, React에서는 이러한 번거로움과 위험성을 없앨 수 있는 다양한 커스터마이징 패키지들이 존재한다. 오늘은 그 중 하나인 Craco(Create-React-App Configuration Override)에 대해 알아보고, 이후 포스팅에선 실제 적용사례로 이어가겠다. 💙 CRA Webpack 설정..
-
[React Router/lib.] React Router v6Front-End(Web)/React - 프레임워크(React, Next) 2021. 12. 14. 22:55
오랜만에 React 학습을 진행하는데, React Router가 6버전이 출시되었다고 한다. 기존에 사용하던 문법들이 일부 수정된 것을 감안하여, 이를 한번 훑고자 짧게나마 포스팅을 적는다. 💙 개요 React Router 6버전은, 기존의 5버전에 비해 React 최신문법에 걸맞도록 업데이트 되었다고 공식문서는 소개한다. 특히, React Hooks가 적용되었기에, 이를 사용하려면 React v16.8 이상을 우선 설치해야하며, 5 -> 6버전으로 마이그레이션을 진행하면 된다. React Router 6버전은 번들 사이즈가 5버전에 비해 약 70%가 감소하였으며, 이는 App 빌드시 큰 이점이 될 것이다. 💙 주요 변경사항 1. ➡️ 로 변경 요소들을 포함하는 로 Wrapper 명칭변경 는 compon..
-
[Next.js + TS] 초기세팅 - (4) Babel 설정Front-End(Web)/React - 프레임워크(React, Next) 2021. 11. 2. 02:39
Next.js + TS 초기세팅에 대한 글을 쓰면서, 마지막으로 Babel 세팅에 대한 내용을 정리하려고 하였으나 이전에 개념만으로도 글이 길어졌다. * [Next.js + TS] 초기세팅 - (3) Babel 개념 : https://abangpa1ace.tistory.com/196 이번 포스팅에서는, Babel을 실제로 세팅하는 방법, 그리고 Next.js 및 TS환경을 좀 더 낫게 사용하기 위해 내가 적용했던 몇 가지 항목들을 설명해보고자 한다. 💛 Babel 과 Typescript 바벨을 설정하기 이전에, Typescript 환경에서 바벨을 쓰는 것의 목적? 의의? 를 이해하기 위한 선행학습이 필요했다. 사실, Typescript tsc(tsconfig.json) 역시 TS를 JS로 컴파일하는데 관..
-
[Next.js + TS] 초기세팅 - (3) Babel 개념Front-End(Web)/React - 프레임워크(React, Next) 2021. 10. 22. 00:33
이번엔 초기세팅 마지막 시리즈가 될 것 같다! 주제는 Babel 이다. 이전, Babel과 Webpack 에 대해 간단히 공부하면서, Babel은 단순히 트랜스파일러의 역할 정도로 알고 있었떤 툴이다. 하지만, 프로젝트에서 절대경로나, SSR 등을 위해서까지 사용해보면서 Babel의 다양한 기능을 정리해보고자 했다! 💛 Babel 이란? 바벨(Babel)은 최신버전(ECMAScript 2015+) 의 JS코드를 상대적으로 구식 브라우저(IE 등) 환경에서 호환되도록 버전을 변환하는데 주로 사용되는 자바스크립트 컴파일러(트랜스파일러)이다. (그렇기에, 입력과 출력 모두 JS) 위가 바벨의 주된 기능이며, 현재는 JSX문법(React), TS같은 정적 타입언어, 코드압축, 제안단계(정식문법X) 문법 등을 사..
-
[Next.js + TS] 초기세팅 - (2) ESLint, PrettierFront-End(Web)/React - 프레임워크(React, Next) 2021. 10. 14. 05:15
지난, CRA 초기세팅 및 Typescript 세팅에 이은 2번째 글이다. 주제는 ESLint, Prettier! 뒤에서도 설명하겠지만, 이 툴들은 기능적인 부분보다는 동기들과의 프로젝트 협업을 위한 세팅에 사용되었다. 이들의 역할을 알아보고, 나도 단순히 적용만 하고 지나쳤던 설정들에 대해 자세히 알아보았다. 📓 ESLint - 개요 ESLint는 Javascript, Typescript 의 코딩 스타일 도구이다. JS코드가 ECMAScript Specification에 부합하는지 검사하는 툴이다. 코딩 스타일 가이드라인을 지정하여, 패턴을 준수하지 않을 경우 사후에 발생할 수 있는 잠재적 문제점을 사전에 방지하기 위해 사용되는 것이다. * 본래, TS는 TSLint 라는 코딩 스타일 도구가 있었으나,..
-
[Next.js + TS] 초기세팅 - (1) CRA, tsconfig.jsonFront-End(Web)/React - 프레임워크(React, Next) 2021. 10. 11. 03:49
😃 서론 지난달 초, Typescript 공부를 위해 OP.GG 사이트 클로닝 프로젝트를 간단하게 진행하였다. (리뉴얼 작업으로 최근까지 holding...) 오랜만에 React, Styled-Components를 쓸 뿐만 아니라, Typescript와 Next.js는 실전에 처음 사용하는 프로젝트였다. 이를 위해, eslint/prettier 부터 위 툴들을 사용하기 위한 프로젝트 초기세팅을 정리해두고, 이를 좀 더 쉽게 구성하고 사용하기 위해 고민했던 다양한 방법들을 포스팅을 통해 남겨보고자 한다! 📘 CRA (Create-React-App) React 프로젝트 초기세팅을 하는 가장 간편한 방법을 CRA(Create-React-App) 이라고 한다. 프로젝트에 필요한 기본적인 모듈들, 그리고 Babe..