front-end/react23

• 

  [React] 컴포넌트 재사용성에 대한 고민(합성 컴포넌트) 1. 컴포넌트 재사용의 필요성 frontEnd 개발을 하다보면 특히 많이 쓰이는 컴포넌트 들이 존재한다. 버튼들, 인풋 들, carousel, card 등 ui란 너무 다양하면 사람의 눈에 오히려 피로감을 주고 정돈 되지 않은 느낌을 줄 수 있기에 많은 디자인 패턴에서 공통되는 디자인을 갖고 기능을 갖는 컴포넌트들을 정의한 후 재사용하는 것이 일반적이다. 나는 현재 서비스의 admin페이지를 제작 중이다. 이 페이지 들에는 많은 부분에 select 컴포넌트와 input컴포넌트 들이 존재하는 것을 확인했다. 위와 같은 컴포넌트들은 비단 저 한 페이지에서만 사용되는 것이 아니었다. 다양한 페이지에 모두 존재했다. 등등 저 많은 컴포넌트 들을 일일히 다 정의하는 것은 비효율적이라고 생각이 되었다. 2. 어떻게.. front-end/react 2022. 11. 22.

• 

  [React] React에서 컴포넌트 간 상태 교환 문제 탐구 및 해결 1. 상태 관리의 어려움 리액트는 기본적으로 컴포넌트를 분리한다. 컴포넌트를 분리하여 작성하면 그에 해당하는 로직을 쉽게 알아볼 수 있고 state변화에 따른 렌더링을 쉽게 다룰 수 있기 때문에 권장되는 방식이지만 여기에는 한 가지 문제가 생긴다. 바로 리액트에서는 state의 흐름이 단방향이라는 문제이다. 만약 컴포넌트를 다음과 같은 방식으로 분리해두었다면 자식 컴포넌트에서 부모 컴포넌트로 state를 전달하는 것은 불가능하다. 만약 다음과 같은 페이지를 만들 때 컴포넌트를 어떻게 분리할 것인가에 대한 고민이 있었다. 나는 위에 검색 창에 해당하는 부분과 밑의 테이블을 분리했는데 여기에는 문제가 있었다. 내가 구현한 컴포넌트는 다음과 같이 분리 되어 있었는데 userSearchForm의 검색 조건이 U.. front-end/react 2022. 11. 19.

• 

  [React]React에서 Chakra UI 편리하게 사용하기 1. 시작 chakra UI는 emotion.js기반의 ui 라이브러리이다. 많은 컴포넌트들이 있고 전역변수 및 기본 컴포넌트들을 커스텀해서 사용할 수 있는 기능 등 많은 기능을 제공한다. 자세한 내용은 chakra UI 공식 docs에서 확인할 수 있다. https://chakra-ui.com/docs/components Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React a Simple, Modular and Accessible UI Components for your React Applications. Built with St.. front-end/react 2022. 10. 21.

• 

  [React] 구글 폰트 리액트 프로젝트에 적용하기 1. 구글 폰트 사이트 접속 https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 구글 폰트를 접속한 후 마음에 드는 폰트를 찾는다. 2. 폰트를 다운로드 후 압축해제 원하는 폰트를 누른 후 들어가면 다운로드를 하는 버튼이 존재한다. 그 후 프로젝트 폴더에 원하는 위치에 압축을 해준다. 나의 경우 src폴더 안에 assets폴더를 만들고 그 안에 fonts 폴더를 만들어 그 안에 사용하는 폰트들을 모아주었다. 구글 폰트에서 다운 받은 폰트를 압축해제해 보면 다음과 같은 파일이 들어 있을 것이다. 이 중 폰트 파일은 ttf파일이다. ... front-end/react 2022. 6. 28.

• 

  [React] CRA + Typescript Proxy 구축 1. Proxy란? 프록시란 대리라는 의미로 네트워크 기술에서 대리 응답을 해주는 개념이다. 보안 상이 문제로 직접 통신을 주고 받을 수 업는 사이에서 프록시를 이용해서 중계를 해준다. 그렇다면 proxy는 왜 사용하는 것일까? 캐쉬를 이용해 더 빠른 통신을 가능하게 한다. 차단된 사이트를 IP우회하여 접속이 가능하게 한다. 보안 문제를 해결해준다. 개발을 하면서 발생하는 CORS(Cross-Origin Resource Sharing)문제를 해결할 수 있다. 2. CORS(Cross Origin Resource Sharing) 일반적으로 브라우저에서는 보안 문제로 인해 동일 출처 정책을 따른다. 두 URL의 프로토콜, 호스트, 포트가 모두 같아야 동일한 출처로 볼 수 있는데 이 경우에서는 express... front-end/react 2022. 6. 22.

• 

  [React] react-router실험 1. react-router-dom 리액트에서는 클라이언트 단에서 routing을 자유롭게 해주기 위해 react-router-dom이라는 라이브러리를 제공하는데 대부분의 리액트 웹사이트를 보게 되면 가장 위의 App.tsx 파일에서 라우팅을 세팅해주고 Link component를 통해 페이지 별 이동을 제어해준다. 기본적인 내용은 가장 최상위 app의 모든 라우팅을 담고 있는 App.tsx에서는 다음과 같이 설정이 되어 있어야한다는 것이다. 위를 확인해보면 BrowserRouter컴포넌트 안에 Routes컴포넌트들이 들어있고 Route컴포넌트 안에 주소와 해당 주소로 이동했을 때 불러올 element를 설정해준다. 이 element는 우리가 만든 page가 되겠다. 2. 실험 내용 나는 div태그 하나.. front-end/react 2022. 6. 22.

• 

  [React] 파일 업로드 기능 구현 React를 통해 파일 업로드 기능을 구현하기 위해 우리는 미리 알아야할 지식이 있다. 첫 번째는 이미지와 비디오, 오디오 파일과 같은 파일이 어떻게 이루어져 있는 지를 알아야한다. 두 번째는 input태그의 type이 file일 때 미리보기 기능의 경우 올린 파일의 URL객체의 createObjectURL메소드를 이용하는 것이다. 세 번째는 React의 useRef훅을 사용해 직접적으로 HTML요소의 레퍼런스 값에 접근하는 법이다. 1. BLOB이란? 우리가 웹에서 객체를 다룰 때 흔히 json이라는 형식의 key, value쌍으로 이루어진 형식으로 다루게 된다. 하지만 파일이나 영상 이미지와 같이 용량이 큰 파일은 어떻게 다룰 것인가? 우리는 웹에서 이렇게 멀티미디어 데이터를 다룰 때 Blob이라는 .. front-end/react 2022. 4. 5.

• 

  React - Memoization 1. 리액트에서의 Memoization memoization이란 반복되는 연산이 많은 경우 이미 한 번 계산된 결과를 저장해두고 같은 component를 렌더링할 경우 저장해둔 값을 사용하는 방식이다. 프론트엔드는 화면에 많은 정보를 서버로부터 받아온 후 띄워야하는 과정이 있고 Dom Tree에 일부 컴포넌트가 추가되거나 삭제될 때마다 모든 Dom Tree의 값을 리렌더링해야한다는 점은 굉장히 비효율적이고 이 문제를 해결하기 위해 많은 고민을 해왔다. 그 중 React에서 렌더링 시간을 조금이라도 줄일 수 있는 방법을 제공하는 것이 오늘 소개할 React.memo, useMemo, useCallback과 같은 훅이다. 2. React.memo 우리는 흔히 화면에서 같은 디자인의 컴포넌트지만 안의 내용만 .. front-end/react 2022. 3. 26.

• 

  React - React Slick 1. React Slick 소개 쇼핑몰 사이트나 OTT 서비스 사이트 같은 곳을 방문하면 영화들이 slider 형태로 돌아가는 것을 확인할 수 있다. 넷플릭스같은 사이트만 봐도 여러가지 콘텐츠를 다음과 같이 한 화면에서 오른쪽 버튼을 누르면 돌아가는 형태의 slider 형태로 콘텐츠를 제공하고 있다. 이러한 컴포넌트를 우리는 carousel이라고 한다. 한글로는 회전목마라는 뜻이다. 이 Slider형태의 컨테이너는 CSS로 구성해도 되지만 React에서는 이 Slider형 컴포넌트에 대한 라이브러리를 제공하고 있다. 바로 React Slick 이다. 2. 구현 방법 1. npm을 사용할 경우 npm install react-slick 2. yarn을 사용할 경우 yarn add react-slick 먼저.. front-end/react 2022. 3. 24.

• 

  useParams를 통한 라우팅 react-router-dom에서는 useParams라는 훅을 기본적으로 제공한다. useParams는 기본적으로 query string의 매개변수를 값으로 받아오는 훅이다. 쉽게 말하면 https://api.themoviedb.org/3/movie/12321?api_key=&language=en-US 이러한 api키가 있다고 가정했을 때 movie뒤에 위치한 12321을 값으로 사용할 수 있게 만들어주는 훅이다. 실사용에서는 어떻게 사용되는 지 살펴보면 우리는 페이지를 만들고 라우팅 할 때 예를 들어 쇼핑몰사이트나 ott사이트에서 각 상품이나 각 영화에 관한 상세페이지를 만들고 싶다고 하자 그럴 때 각 상세페이지를 상품마다, 혹은 영화마다 다 만든다면 프론트 개발자들은 다 죽어나갈 것이다. 이러한 문제.. front-end/react 2022. 3. 3.

• 

  리액트 로그인 패턴 (with Redux, Axios) 리액트로 로그인 기능을 구현하는 패턴을 알아보겠다. 1. 우선 로그인 기능을 구현하는 feature폴더의 login.tsx 2. feature안에서 실질적으로 값들을 입력받아 async함수로 api를 호출한 값을 토대로 데이터를 가공하는 useLoginForm 커스텀 훅 3. 유저에 관한 서비스이므로 AuthService 클래스에 존재하는 login 함수 = 실제로 axios를 통해 api를 호출하는 함수 4. Redux를 이용한 상태관리를 할 것이므로 api로 받아온 데이터의 값에 따라 상태를 변경해 줄 리듀서와 acion들 5. Redux-saga를 이용한 middleware 1. feature 폴더의 login.tsx에는 로그인에 관련된 기능을 적어준다. 클라이언트가 직접 form에 id와 pass.. front-end/react 2022. 2. 18.

• 

  React에서 이미지 모듈로 내보내기 이미지를 React에서 사용할 때 import 하는 과정에서 어떻게 해오는 지 애매한 경우가 많다. 이러한 경우에 전역에서 이미지의 파일 형식을 모듈로 내보내는 선언을 해주면 이미지를 import해올 때 간편하게 할 수 있다. 우선 src폴더 안에 types.d.ts파일을 만들어준다. 그 후 이 파일안에 모듈로써 내보내고 싶은 확장자를 정의해주면 된다. 다음과 같이 모듈로써 내보내고 싶은 확장자들을 정의해주면 import를 해올 때 더욱 간편하게 해올 수 있다. 따로 이미지에서 export를 하지 않아도 import해올 때 자동적으로 이미지를 설정한 이름으로 정의한 후 import해온다. front-end/react 2022. 2. 16.