728x90 반응형 front-end38 React에서 이미지 모듈로 내보내기 이미지를 React에서 사용할 때 import 하는 과정에서 어떻게 해오는 지 애매한 경우가 많다. 이러한 경우에 전역에서 이미지의 파일 형식을 모듈로 내보내는 선언을 해주면 이미지를 import해올 때 간편하게 할 수 있다. 우선 src폴더 안에 types.d.ts파일을 만들어준다. 그 후 이 파일안에 모듈로써 내보내고 싶은 확장자를 정의해주면 된다. 다음과 같이 모듈로써 내보내고 싶은 확장자들을 정의해주면 import를 해올 때 더욱 간편하게 해올 수 있다. 따로 이미지에서 export를 하지 않아도 import해올 때 자동적으로 이미지를 설정한 이름으로 정의한 후 import해온다. front-end/react 2022. 2. 16. 리액트 + 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. 정규표현식(REGEX) 정규표현식이란? 정규표현식이란 특정한 규칙을 가진 문자열을 표현해내는 방식을 의미한다. 위와 같이 설명하면 어려울 수 있지만 우리가 흔히 이메일 주소나 url 주소와 같은 형식을 보면 일정한 형식을 가지고 문자열을 배치하지 않는가 그와 같은 형식을 검색하거나 받아들일 수 있는 표현식을 말한다. 우리가 흔히 웹이나 앱서비스를 개발할 때 회원가입과 같은 기능에서 어떠한 형식을 통해 비밀번호나 아이디를 만들라고 하지 않는가 그 때 많이 쓰는 표현식이다. 아래는 유튜브 주소를 검색하거나 받아들일 수 있는 식이다. /(?:https?:\/\/)?(?:www\.)?(?:(?:youtu\.?be\/?)(?:\.com\/)?(?:watch\?v\=)?(?:embed)?)([a-zA-Z0-9]{11})/ 유튜브 주소는 .. front-end/JavaScript, TypeScript 2021. 8. 11. 타입스크립트로 stack 구현하기 { //Linked list 기반 stack interface stack{ readonly size : number; push(value : string) : void; pop() : string; } type node = { nextNode? : node; prevNode? : node; str : string; } class Stack implements stack { private Head? : node; private Tail? : node; private size1 : number = 0; // getter와 이름이 겹치면 안됨 get size() { return this.size1; } push(str : string) { const temp : node = {str}; if(this.size.. front-end/JavaScript, TypeScript 2021. 7. 28. React 개념(1) 리액트에서 ui들을 구성하는 방법에는 크게 두 가지 방법이 존재한다. 하나는 클래스형, 나머지 하나는 함수형이다. 이 때 클래스형에는 component와 성능향상을 위해 PureComponent가 존재하고 함수형에는 function과 성능 향상을 위해 memo와 reacthook이 존재한다. *클래스 컴포넌트 component 클래스를 상속받아 만든 클래스에서는 render()함수가 무조건 구현이 되어야한다. 클래스를 구성하는 데 있어서 안에 쓰이는 멤버 변수나 parameter들은 this.prop(or)state.멤버 변수 형태로 쓰여져야한다. 클래스의 특성상, 한 번 생성이 되면 클래스 내부의 함수를 아무리 많이 호출해도 멤버 변수를 직접 수정하지 않는 한 그 값이 계속 유지가 된다. 따라서 ren.. front-end/react 2021. 7. 2. 이전 1 2 3 4 다음 728x90 반응형