리액트10

• 

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

• 

  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.

• 

  리액트 + MSW 리액트에서 개발을 할 때 실제 백엔드 개발자가 없다면 api를 호출하고 받아오는 과정을 테스트하기가 어렵다. 또한 여러 open api 들은 자신이 개발하고자 하는 데이터 구조가 아닐 가능성이 크다. 따라서 우리는 msw mocking service worker 라이브러리를 이용해서 mock data들을 만들고 서비스에서의 요청을 msw가 가로채서 실제 서버와 통신하는 것처럼 진행해 볼 것이다. 우선 msw를 이용하려면 package를 설치해 주어야한다. yarn이나 npm을 통해 설치할 수 있고 msw는 실제 서비스에서는 이용하지 않고 dev환경에서만 이용하므로 옵션을 준다. $ npm install msw --save-dev 2# or 3$ yarn add msw --dev 위의 명령을 통해 패키지를.. front-end/react 2022. 2. 15.

• 

  리액트 프로젝트 폴더 구조 react를 사용하여 front-end 작업을 할 때 수 많은 파일들과 기능 또 component를 관리하는 것은 정말 복잡한 일이다. 코드의 유지 및 보수 또는 refactoring을 할 때 어느 폴더에 내가 수정하고자 하는 기능이 있는 지를 찾는 것 또한 어려운 일이다. 그래서 폴더 구조를 미리 정해두고 숙지하는 것은 코드의 유지 및 refactoring에 큰 도움이 되는데 보편적으로 다음과 같은 구조를 많이 사용한다. 여기서는 tsconfig.json이나 .gitignore와 같이 전역으로 설정하는 파일은 배제한 채 component들을 이루는 src폴더와 public폴더의 구조에 대해 살펴보겠다. 이것은 현재 진행하고 있는 프로젝트의 src내부의 폴더 구조이다. 살펴보면 src폴더 안에는 apis.. front-end/react 2022. 2. 10.

• 

  리액트(html 요소에 직접 접근) (Ref) CreateRef vs UseRef 리액트에서는 레퍼런스를 사용하기 위한 두 가지 방법이 존재하는데 바로 내장함수 CreateRef() 와 UseRef()이다. 리액트에서 Component를 만드는 방법에는 두 가지가 있는데 바로 class를 사용하는 것과 functional하게 만드는 방법이다. 원래 function 기반 component는 state를 가지는 것이 불가능했고 단지 부모로부터 props속성 값을 받아와서 보여주는 역할을 수행하는 간단한 component였으나 ReactHook이라는 개념이 도입된 후 부터 함수 내에서도 Use로 시작하는 함수들을 통해 class기반 component와 마찬가지로 state를 다룰 수 있는 기능들을 쓸 수 있게 되었고 이번 포스팅에서는 UseRef()함수를.. front-end/react 2021. 8. 12.

• 

  리액트(call-back함수 전달 과정) 리액트에서의 call-back함수는 prop으로 전달이 가능하다. 다음은 youtube-clone 코드에서의 일부이다. 다음은 함수형으로 작성한 (react hook)을 이용한 app에서의 전달 과정이다. 현재 상속 구조는 app -> Video_list -> Video_item순이고 prop을 전달하는 과정 또한 다음 순서와 같다. 목표는 콜백함수가 어떻게 전달이 되는 지를 아는 것이기 때문에 console.log함수를 이용해 log기록을 확인해보면서 진행하였다. 만약 call-back 함수 onVideoClicktolist가 호출되면 app.jsx에 존재하는 selectVideo함수가 호출된다. Video_list.jsx 파일의 Video_list component 정의 부분은 다음과 같이 decon.. front-end/react 2021. 8. 11.

• 

  React 개념(1) 리액트에서 ui들을 구성하는 방법에는 크게 두 가지 방법이 존재한다. 하나는 클래스형, 나머지 하나는 함수형이다. 이 때 클래스형에는 component와 성능향상을 위해 PureComponent가 존재하고 함수형에는 function과 성능 향상을 위해 memo와 reacthook이 존재한다. *클래스 컴포넌트 component 클래스를 상속받아 만든 클래스에서는 render()함수가 무조건 구현이 되어야한다. 클래스를 구성하는 데 있어서 안에 쓰이는 멤버 변수나 parameter들은 this.prop(or)state.멤버 변수 형태로 쓰여져야한다. 클래스의 특성상, 한 번 생성이 되면 클래스 내부의 함수를 아무리 많이 호출해도 멤버 변수를 직접 수정하지 않는 한 그 값이 계속 유지가 된다. 따라서 ren.. front-end/react 2021. 7. 2.

• 

  리액트 개념 1. 리액트 뼈대 처음 리액트 프로젝트를 생성하게 되면 여러가지 파일들이 생기게 되는데 나는 프로젝트를 생성하고 화면을 구성하는데 있어 필수적인 파일들만 얘기해보겠다. 처음 프로젝트를 생성하게 되면 아래 사진에 나와 있는 파일들 보다 훨씬 더 많은 파일들이 생성되는데 그것은 나중에 웹앱을 배포하거나 ServiceWorker와 같은 파일들이기 때문에 삭제하고 아래 파일들을 설명해보겠다. 우선 app.jsx파일은 c++에서 main함수와 같은 역할을 한다. 나머지는 다 페이지를 구성하는 source code일 뿐 실제로 화면에 표기되어지는 파일은 app.jsx파일이다. (처음에는 js파일로 만들어지나 여러 디자이너들과의 협업을 위해 react에서는 js코드이나 좀 더 css와 html에 가깝게 보이는 jsx.. front-end/react 2021. 6. 18.

• 

  리액트란 1. 리액트란? React는 현재 현업에서 인기 있는 웹/앱(RN)의 View를 개발할 수 있도록 하는 라이브러리이다. 보통 우리가 생각하는 어플리케이션(웹, 앱 혹은 데스크톱용 소프트웨어)을 만들기 위해서는 사용자가 조작하기 위한 UI(User-Interface), UI를 컨트롤 하기 위한 로직, 데이터를 처리하는 비즈니스 로직 등 3가지 부분으로 개발이 필요하다. ​ ​ 이 중 리액트는 사용자에게 보여지는 ui를 각각의 컴포넌트를 중심으로 구성하게 된다. 우리가 화면에서 흔히 보는 버튼 하나 배너 하나를 각각의 컴포넌트 클래스로 정의해두고 재사용이 가능하게 해 더 쉽고 간편하게 클라이언트가 보는 화면을 구성할 수 있다. ​ 2. 리액트 프로젝트를 위한 환경설정 리액트 프로젝트는 몇 가지의 환경이 갖추.. front-end/react 2021. 6. 18.