'개발/React' 카테고리의 글 목록 (2 Page)

React Testing Library 사용하기 (from Scratch) - 1

2022.04.29· 개발/React

테스트코드는 왜 중요한가요? 테스트코드는 코드를 리팩토링 할 때, 혹은 리팩토링을 하지 않아도 중요한 존재입니다. 리팩토링을 할 때에는 테스트코드를 짜두고 리팩토링을 하면 하기 전과 후의 결과가 동일하다는 것을 보장할 수 있습니다. 외에도 새로운 기능이 추가되거나 기존 기능이 변경되었을 때 다른 기능들이 제대로 동작하지 않을 수도 있기 때문에 테스트코드를 만들어두면 유지보수할 때 예상치 못 한 에러들을 미리 방지할 수 가 있습니다. 다양한 개발서적에서도 이 중요성을 굉장히 강조하고 있습니다. React Testing Library는 세부적인 구현사항보다는 실제 사용자 경험과 유사한 방식의 테스트를 작성하기를 권고합니다. 예를 들어서 div 태그를 사용하는지 보다 div 테그의 메세지가 브라우저에 잘 노출..

[React] 다국어 처리하기 - i18n 사용하기

2022.04.02· 개발/React

◾ i18n 시작하기 웹사이트 혹은 어플리케이션에 다양한 언어를 적용하기 위해 사용하는 라이브러리다. 아래의 공식 웹 페이지를 보면 더 많은 이야기를 확인할 수 있다. 간단하게 어떻게 사용하는지만 정리해 볼 예정이다. 공식 웹페이지 👉 https://react.i18next.com/getting-started 설치하기 npm install react-i18next i18next --save ◾ 적용하기 보통 파일 하나에 다 적은 간단한 예제들이 많아서 조금 헤맸는데, 우선 대부분 프로젝트에 적용할 때 파일을 따로 빼서 분리해두기 때문에 나도 그렇게 했다. src 폴더 아래에 language 라는 폴더를 만들어서 i18n.js를 만들었다. 영어버젼하고 한국어 버젼만 있으면 되기때문에 번역 스크립트는 en...

[React] React-Query 란?

2022.03.28· 개발/React

React-Query React app에서 비동기 로직을 쉽게 다루게 해주는 data fetching 라이브러리입니다. "전역 상테"를 건드리지 않고도 React 및 React-Native 앱에서 서버의 값을 클라이언트에 가져오고 캐시하고 업데이트할 수 있습니다. 이것을 사용하면 서버 상태의 까다로운 문제와 장애물을 극복하고 앱 데이터가 사용자를 제어하기 시작하기 전에 앱 데이터를 제어할 수 있습니다. 사용하는 이유 서버로 부터 값을 가져오거나 업데이트를 하는 로직을 store 내부에 개발하는 경우가 많습니다. 그러다보면 store는 클라이언트 state를 유지해야하는데, 어느 순간부터 서버 데이터와 클라이언트 데이터가 공존하게 됩니다.(redux가 그러함..) 이런 부분을 분리해서 사용하기 위해서 씁니..

[React] React Custom Hooks

2022.03.23· 개발/React

* 면접에서 받았던 질문인데, 답은 고사하고 질문 자체를 이해 못 할 정도였으니, 알지 못했던 개념이였습니다. 😥 Custom Hooks 두 개의 자바스크립트 함수에서 같은 로직을 공유하고자 할 때는 또 다른 함수로 분리합니다. 컴포넌트와 Hook 또한 함수이기 때문에 같은 방법을 사용할 수 있습니다 - 이상 공식 자료에 나온 설명인데, 아직 이해하기에는 부족한 설명 같습니다. 반복되는 훅 활용 메소드들을 하나로 줄여줌으로써 더 간결하고 보기 좋은 코드를 만들 수 있는 것이 바로 custom hooks입니다 이름은 use로 시작하는 자바스크립트 함수입니다. custom hook은 다른 hook을 호출 할 수 있습니다 custom hook은 조건부 함수가 아니어야 합니다 역시 코드를 보면 이해하기 좋을 거..

[React] useEffect 와 useLayoutEffect 의 차이점

2022.03.22· 개발/React

useEffect render 렌더(render)가 화면에 그려지는(paint) 후 비동기적으로 실행 paint 된 후에 실행되기 때문에 내부에 DOM에 영향을 주는 코드가 있을 경우 사용자 입장에서는 화면의 깜빡임을 보게 된다 사용하는 경우 일부 상태를 즉시 발생할 필요가 없을 경우 페이지에 시각적으로 영향을 주지 않는 무언가를 동기화 할 경우 이벤트 핸들러를 설정하는 경우 모달상자가 나타나거나 사라질 때 일부 상태를 재설정하는 경우 useLayoutEffect render 렌더링 후 화면이 업데이트 되기 전에 동기적으로 실행 paint가 되기 전에 실행되기 때문에 DOM을 조작하는 코드가 존재하더라도 사용자는 깜빡임을 경험하지 않는다 사용하는 경우 상태가 업데이트 될 때 요소가 깜박이는 경우 DOM을..

React vs Vue.js 차이점

2022.03.02· 개발/React

React는 라이브러리이고 Vue는 프레임워크입니다. 라이브러리는 사용자가 필요할 때마다 가져다 썼다가 뺐다가 할 수 있고 부분적으로 사용이 가능합니다 프레임워크는 부분적인 사용이 불가능하고 프레임 워크의 안으로 들어가서 프레임 워크가 지원해주는 문법에 따라서 작성해줘야 제대로 동작합니다. 그래서 React는 개발자가 자유롭게 개발할 수 있는 환경이고, Vue는 vue에서 지정해준 문법 방식으로만 개발 할 수 있습니다. 리액트가 자유도가 더 높다고 하는 부분이 이런 태생적인 부분에서 온다고 생각합니다. 둘 다 Virtual Dom(가상돔)을 활용합니다. 반응적이고 조합 가능한 컴포넌트를 제공합니다. 코어 라이브러리에만 집중하고 있고 라우팅 및 전역 상태를 관리하는 컴패니언 라이브러리가 있습니다. 각각의 ..

[React] 리액트 프로젝트 Netlify로 배포하기

2022.02.21· 개발/React

알고보면 넘나 유용한 사이트인 Netlify! 주로 호스팅을 하기 위해서 썼는데, netlify dev 라는 기능도 있어서 백엔드부분까지 살짝 도와줄 수 있는 기능도 가지고 있다. dev 기능을 알게 된지 얼마 안 되서 깊이 공부를 아직 못 했지만 유용하다고 생각했음 ㅎ 오늘은 react netlify 배포에 대해서 알아보자! Netlify ( https://app.netlify.com/ ) 1. 계정을 생성합니다 이메일로도 계정을 만들 수 있지만 git과 연동할 수 있답니다. git 계정이 있다면 손쉽게 계정을 만드실 수 있어요 2. 상단 메뉴의 [Sites] 나 [new site from git] 을 클릭합니다. netlify로 배포하는게 무료라는 이점도 있지만, git에 올라가 있는 프로젝트를 바로..

[React.Js] UseState 사용 / 간단한 리스트 만들고 지우기

2022.02.18· 개발/React

React.js를 쓸 때 정말 많이 쓰는 hook 중에 하나인 useState 기본 중의 기본입니다. 일단 hook이란 무엇이냐?! Hook은 특별한 함수입니다. 예를 들어 useState는 state를 함수 컴포넌트 안에서 사용할 수 있게 해줍니다. 다른 Hook들은 나중에 살펴봅시다! 함수 컴포넌트를 사용하던 중 state를 추가하고 싶을 때 클래스 컴포넌트로 바꾸곤 했을 겁니다. 하지만 이제 함수 컴포넌트 안에서 Hook을 이용하여 state를 사용할 수 있습니다. 사용 방법은 아주 간단하답니다. 아주 간단한 리스트를 만들면서 사용 방법을 알아보겠습니다 Birthday Reminder 라는 컨셉의 리스트를 한 번 만들어보겠습니다. 5명 가량의 사람 프로필이 필요해서 레드벨벳 멤버들 프로필 사진을 긁..

[React.Js] 리액트 AXIOS 사용하기 / API 데이터 Fetch하기

2022.02.18· 개발/React

자바스크립트에서 API를 연동하기 위해서는 보통 fetch API 를 사용한다. 리액트도 자바스크립트 라이브러리 중 하나이기때문에 fetch를 사용해서 API 데이터를 비동기 통신을 할 수 있다. 하지만 많은 사람들이 리액트를 쓸 땐 Axios를 더 많이 사용하는 것 같다. API데이터를 받아오기 위해서 axios를 써보자! #Axios 다운받기 1️⃣ cmd 혹은 코드에디터 터미널을 이요해서 axios를 다운받습니다 npm i axios 설치가 잘 되었는지 확인하고 싶다면 Package.json 을 클릭해보시면 확인하실 수 있어요. 안에 axios가 있다면 설치완료! 2️⃣코드를 쓰고 있는 파일에 import 해주기 axios를 쓸 곳에 꼭 import를 해줘야 쓸 수 있답니다 3️⃣axios를 쓰는데..

[React.Js] 리액트 Router 사용하기

2022.02.18· 개발/React

리액트로 간단한 게시판을 만들어보기로 했다. 이 게시판에 들어가는 기능 중에 하나가 정보를 추가하는 것이다. 추가하기 위해서 등록페이지를 따로 만들고 메인 페이지를 따로 만들어야해서 router을 써야했다. React Router 리액트는 SPA (Single Page Application) 방식으로써, 여러 개의 페이지를 사용하며, 새로운 페이지를 로드하는 기존의 MPA 방식과 달리 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가집니다. 그림처럼 하나의 html 파일에서 회원추가 페이지로 넘어가기 위해서 클릭시 html이 바뀌는게 아니라 회원추가.js로 데이터가 렌더링해오는 방식이 SPA입니다. 그리고 이걸 하기 위해서 react-router가 필요합니다.

[React.Js] 리액트 시작하기, Create-React-App

2022.02.17· 개발/React

JavaScript를 공부하면서 어느 정도 이해하기 시작했다는 생각이 들자 이것저것 프로젝트를 더 만들어보고, 더 쉽게 만들어보고 싶다는 생각이 들었다. 그렇게 리액트에도 손을 댔다. React(리액트)는 자바스크립트 라이브러리 중 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 페이스북 개발자들이 만든건데, 작년까지만 해도 굉장히 핫했는데, 요세는 또 다른게 핫하더라. 하지만 어쩔 수 없다 일단. 나는 리액트 배를 탔다. 사실 그냥 웹페이지는 HTML, CSS 만으로도 충분히 만들 수 있다. 하지만 페이지가 점점 늘어나고, 동적인 인터랙티브한 웹을 만들기 위해서는 자바스크립트가 필요하다. 게다가 요즘은 단순한 웹이 아니라, 모바일에서도 쓸 수 있는 유동적인 걸 좋아하다보니 이럴 때, 리액트가 정말 ..

티스토리툴바