front-end/react23

• 

  리액트 + 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+Redux(2) 1. Store의 값 가져오기 react는 redux의 store에서 관리되고 있는 state 값을 가져오는 hook을 제공한다. 이는 useSelector()라는 hook이다. 2. useSelector()의 사용법 store의 상태를 반환하려면 redux에서 제공하는 store안에 들어있는 (configureStore함수로 정의되어 있는 store 객체 안에 들어있는) getState함수가 필요하다. 또한 우리는 typescript환경에서 getState를 사용할 것이므로 store.getState()함수로 반환되는 type을 지정해주어야한다. 따라서 RootState를 다음과 같이 store.getState()함수의 ReturnType으로 지정한다. 그 후 useSelector()hook에서 사용할.. front-end/react 2022. 2. 10.

• 

  CRA + typescript 절대 경로 셋팅 1. CRA와 타입스크립트로 프로젝트를 셋팅 npx create-react-app my-app --template typescript 다음과 같은 명령어로 만들 수 있다. 만일 이미 만들어 둔 프로젝트에 타입스크립트를 추가하는 것이라면 npm install --save typescript @types/node @types/react @types/react-dom @types/jest 다음과 같은 명령어를 입력해주면 된다. 그 후 절대 경로를 설정해주기 위해서는 세 가지 과정이 필요하다. 1. craco 설정 2. root 경로에 tsconfig.json파일 생성 및 설정 3. root 경로에 tsconfig.paths.json 파일 생성 및 설정 craco란 CRA로 만들어진 프로젝트를 쉽게 설정하기 위.. front-end/react 2022. 2. 10.

• 

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

• 

  리액트 프로젝트에 타입스크립트 추가 처음부터 typescript를 사용하려면 create-react-app에서 npx create-react-app my-app --template typescript # yarn create react-app my-app --template typescript 이미 만들어 놓은 React 프로젝트에 typescript를 추가하고 싶다면 npm의 경우 npm install --save typescript @types/node @types/react @types/react-dom @types/jest # yarn의 경우 or yarn add typescript @types/node @types/react @types/react-dom @types/jest 그 후 tsc --init 명령어를 통해 typescr.. front-end/react 2022. 1. 28.

• 

  리액트 axios 라이브러리 사용하기 리액트에서 promise를 기다릴 때 fetch api를 사용하면 두가지 문제점이 생긴다. 하나는 호환성이 낮은 explorer와 같은 브라우저를 사용할 때 호환이 안되는 문제이고 fetch api를 사용할 경우 key를 url주소로 받아와야하기 때문에 가독성이 떨어진다는 단점이 존재한다. 따라서 위의 두 문제를 해결하기 위해 axios라는 라이브러리를 사용하는데 리액트로 개발을 하는 경우 yarn을 통해 패키지 관리를 하고 있다면 yarn add axios 라는 명령어 하나로 쉽게 설치가 가능하다. axios가 설치되면 fetch를 사용하는 곳에서 변경이 가능한데 promise를 생성하는 객체의 생성자에서 axios.create명령어를 이용해서 axios를 만들어주면 된다. 이 때 axios를 만들 때.. front-end/react 2021. 8. 12.

• 

  리액트(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.