React13

• 

  [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] React18 : Type{} is not assignable to type 'ReactNode' 해결 1. 문제 React-slick을 사용하다가 발견한 문제이다. React 17때만 해도 잘 돌아가던 코드가 18로 업그레이드 되자 타입 인식을 잘 하지 못하는 문제가 발생했다. 다음은 stack-overflow와 인터넷을 뒤지다가 찾은 해결책이다. 2. 해결책 이 문제는 npm을 사용하는지와 yarn 을 패키지 매니저로 사용하는 것에 따라 해결 방법이 다르다. 하지만 아주 조금 다르다. Yarn 사용시 package.json에 다음과 같은 내용을 추가해준다. "resolutions": { "@types/react": "^17.0.38" } Npm사용시 package.json에 다음과 같은 내용을 추가해준다. "overrides": { "@types/react": "^17.0.38" } 3. 그 다음은? .. 에러관련 2022. 6. 29.

• 

  [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 - 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.

• 

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

• 

  React + SWR SWR은 next.js를 개발한 vercel사 에서 제공하는 데이터 페칭 라이브러리다. 나는 msw를 통해 mocking data를 만들었고 이 mocking data를 useSWR훅으로 받아오는 작업을 하였다. msw handler에 적어둔 mocking data 배열의 형태로 받아왔다. 다음과 같이 map을 통해 SWRPerson[]을 돌면서 이름을 가져온다. 카테고리 없음 2022. 2. 15.

• 

  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.