JavaScript/React11 [React] 리액트 라우터(react-router-dom) 중첩 라우팅으로 하위페이지 연결하기 - nested routing, outlet 협업 프로젝트를 진행하면서 다른 개발자 분이 새로운 환경으로 마이그레이션 해주시면서, 리팩토링을 도와주셨다. 그 중 페이지 설계의 중요한 부분인 중첩 라우팅과 관련하여 포스팅 해보려고 한다. 중첩 라우팅이 필요했던 페이지는 LoginPage와 SignupPage였다. 둘 다 비슷한 디자인 content-box 안에서 form 부분만 변경 되고, 각각 로그인 또는 회원가입을 클릭했을 시 해당 Link로 이동하는데, 이 비슷한 content-box를 컴포넌트화 하여 재사용하고 싶었고 이 컴포넌트 안에서 Login, SIgnup의 form 부분만 변경하고 싶었으나 컴포넌트 내에서 이 두 페이지를 연결하는 방법을 몰랐다. 처음에는 중첩 라우팅에 대해서 몰랐기 때문에 같은 디자인까지 포함하여 일일히 LoginPa.. 2022. 11. 24. [React] 웹팩(Webpack)에 대한 이해 ✨웹팩(Webpack)이란 무엇인가? 웹팩(Webpack)이란 "JavaScript를 위한 정적 모듈 번들러" 이다. 그렇다면 모듈은 무엇이고, 번들러는 또 무엇일까? 이 둘의 개념부터 알아보자. 모듈(module)이란 ? 자바스크립트에서 모듈은, 어떤 특정 기능과 관련된 JavaScript 코드들(함수)로 이루어진 있는 하나의 파일을 말한다. 자바스크립트의 크기가 점차 커지고 기능도 복잡해지자 자바스크립트 커뮤니티는 특별한 라이브러리를 만들어 필요한 모듈을 언제든지 불러올 수 있게 해준다거나 코드를 모듈 단위로 구성해 주는 방법을 만드는 등 파일을 여러개로 분리하여 모듈화 하는 등의 다양한 시도를 하게 되었고, 대표적으로 AMD, CommonJs(Node.js에서 사용 - requre(), module.. 2022. 11. 18. [React] Create-React-App없이 React 개발 환경 셋팅하기 Create-React-App React를 처음 배우면서, 항상 CRA(Create-React-App)를 사용하여 리액트 앱을 생성하였다. React로 개발을 시작하기 위해서는 웹팩(Webpack), 바벨(Babel), 번들러(Bundler), 로더(Loader), 플러그인(Plugin), 린트(Eslint), dependencies와 devDependencies 등등 하나하나 배우고 설정해야 할 기술들이 굉장히 많은데 리액트 초심자로서 이것들을 일일히 다 숙지하고 프로젝트를 시작하기에는 실질적으로 힘들기 때문이었다. Create-React-App의 장점은 CRA로 앱을 생성하면 보편적으로 개발자들이 많이 사용하는 라이브러리 등이 대부분 셋팅 되어있기 때문에, 이후 추가적으로 필요한 라이브러리 등만 설치.. 2022. 11. 17. [React] UUID - Date.now(), random()없이 고유한 key값 생성하기 리액트 컴포넌트 내에서 배열을 맵핑하여 리스트를 생성하던 도중 Key값과 관련하여 문제상황에 직면하였다. {filters.map((filter) => ( ))} 고유의 key값들을 부여하기 위해 Date.now()함수를 사용했지만, 동시다발적으로 여러개의 컴포넌트를 한번에 return하다보니 key값이 중복되는 상황이 발생한 것. 이를 해결하기 위해 Date.now()나 random()함수를 사용하지 않고 고유한 Key값을 가져올 수 있는 방법을 찾아보았다. UUID 라이브러리 설치 UUID : Universal Unique Identifier(범용 단일 식별자) 이다. uuid함수를 호출하면 랜덤으로 생성된 문자열을 만들어 준다. 이것을 이용하여 고유의 key값을 생성한다. npm install uui.. 2022. 11. 6. [React]리액트(React)에서 벡터이미지(SVG)사용하는 방법 벡터 이미지(SVG) 장점 - SVG : XML(기계 및 사람 모두 해독할 수 있고 인터넷 전반에 널리 사용되는 마크업 언어)을 기반으로 하는 ‘확장 가능한 벡터 그래픽’ 포맷이다. 인덱싱, 검색 및 스크립팅이 가능한 웹에서 유용하다. 간단하게 코드로 이루어진 이미지다. - 그밖에 벡터 파일 : ai, pdf, eps 등 - 파일 용량이 작다. - 벡터 형식으로 무한한 확장이 가능하다(고화질, 크기와 해상도에서 자유롭다) - CSS를 통해 스타일링 등 변경 조작 등이 가능하다. 벡터 이미지(SVG) 단점 - 디테일한 사진 작업에는 부적합 하다. 픽셀 수가 적기 때문에 비교적 간단한 디자인의 로고나 아이콘, 일러스트 등에 적합하다. (사진보다는 그래픽, 사진일 경우 JPEG 등이 더 적합) - 호환성 문제.. 2022. 10. 30. 이전 1 2 다음
