react 검색 결과
11 개의 검색 결과가 있습니다.
React.js

리액트 모달창 만들기 2가지 방법

방법 1. 직접 모달창 컴포넌트 만들기 먼저 모달창으로 사용할 UI 컴포넌트를 만들기 위해 Modal.jsx 파일을 생성합니다. * Modal.jsx function Modal() { return ( Modal ); } 이 모달 컴포넌트를 렌더링할 부모 컴포넌트에서는 모달이 열려있는지, 닫혀있는지에 대한 상태를 관리하고 그 상태 값을 모달 컴포넌트에 전달해야 합니다. 모달 컴포넌트에 부모로부터 받을 수 있는 props 코드를 추가하겠습니다. * Modal.jsx function Modal({ isOpen }) { return ( Modal ); } CSS의 display 속성을 이용하였습니다. 결과적으로 isOpen이 true이면 display의 값은 "block"이 되어 사용자의 화면에 모달창이 나타나..

2023. 2. 13. 08:00
React.js

Jest + react testing library로 react 테스트 코드 작성하기

무엇을 테스트할까? React 컴포넌트의 인터페이스와 렌더링, 유저와의 상호작용 이후에 변화하는 데이터(상태) 그리고 네비게이팅과 라우터 경로에 따른 렌더링 테스트를 할 것입니다. UI 컴포넌트 테스트는 매우 상당히 복잡합니다. 우선, 조건에 따른 렌더링을 테스트합니다. props와 state가 조건으로 주어지며, 더 넓게 보면 브라우저의 종류와 viewport의 크기도 조건으로 고려합니다. 그리고, 유저에게 인터페이스를 제공하기 때문에 유저가 UI에 할 수 있는 모든 행동 시나리오를 테스트합니다. 이 경우 네이밍이나 단언 컨벤션은 TDD가 아닌 BDD를 따르는 것이 좋습니다. 보편 언어(Ubiquitous Language)를 사용하여 비개발자도 읽을 수 있도록 유저 입장에서 시나리오를 작성하는 것입니다..

2022. 7. 4. 08:00
React.js

Jest + React testing library vs Cypress 컴포넌트 테스트 비교

리액트 컴포넌트 테스트를 위한 jest와 cypress의 사용 경험 비교 리액트 컴포넌트 테스트를 위해 jest + react testing library와 cypress를 각각 써본 후 느낀 점들이 있습니다. 이번 포스팅에서는 이 둘을 개발 경험, 코드, 테스트 유효성 관점에서 어떤 차이가 있는지 비교해보려고 합니다. 개발 경험 비교 1. 환경설정 jest는 워낙 올인원 프레임워크라 preconfiguration 코드가 필요 없고, dependencies를 추가 설치할 필요가 없습니다. 그리고 만약 CRA (Create React App)로 프로젝트를 시작하면 jest와 react testing library가 기본적으로 설치가 되어있기 때문에 CRA로 init을 하자마자 바로 테스트 코드를 작성할 수..

2022. 2. 28. 08:00
React.js

[채팅 웹사이트 구현 - 3장] React로 채팅 웹 만들기

이전 장. [채팅 웹사이트 구현 - 2장] Node.js에서 Socket.io를 이용하여 소켓 서버 만들기 채팅 웹사이트 프론트엔드 구현 들어가기 이전 장에서 소켓 서버를 만들어 채팅 웹사이트에서 필요한 소켓 이벤트들을 정의하고 그 기능들을 구현했습니다. 이제 클라이언트 쪽도 개발하여 하나의 완전품으로서 동작할 수 있는 채팅 웹을 만들 것입니다. 프론트엔드는 React기술로 구현을 해볼 것입니다. 먼저 프로젝트 세팅은 간단하게 create-react-app으로 진행합니다. npx create-react-app chat-app 기술 스택 정리 Socket.io로 서버를 구현했기 때문에 클라이언트는 socket.io-client 라이브러리를 사용해야합니다. 양방향 통신이기 때문에 클라이언트에서 소켓 이벤트 ..

2022. 1. 10. 08:02
Node.js

[채팅 웹사이트 구현 - 1장] WebSocket과 Socket.io에 대해 알고 시작해볼까?

Socket.io로 채팅 웹사이트 구현 들어가기 Socket.io를 이용해 실시간 통신이 가능한 소켓 서버와 이것과 연결된 클라이언트를 개발하여 채팅 웹사이트를 만드는 프로젝트를 여러 편의 포스팅에 걸쳐서 진행하려고 합니다. 먼저 Node.js에서 동작하는 소켓 서버를 만들 것이고, 그다음에는 React.js를 이용해 클라이언트를 만들 것입니다. 이 둘은 서로 실시간 통신이 가능할 것이고, 결과적으로 그럴싸한 그렇지만 정말 간단한 채팅 웹사이트가 탄생할 것입니다. WebSocket과 Socket.io의 차이점 WebSocket은 양방향 메시지 송수신을 가능하게 만들기 위해 나온 HTML5 표준 기술입니다. 표준 기술이기 때문에 추가적인 라이브러리 설치 없이 사용할 수 있으나, 오래된 버전의 웹 브라우저는..

2022. 1. 10. 08:00
React.js

Redux Toolkit + axios로 리덕스에서 비동기 통신 사용하기

들어가기 전에 이 포스팅 작성 시점 기준 패키지 버전 @reduxjs/toolkit v1.6.2, react-redux v7.2.6, axios v0.24.0입니다. Redux Toolkit에 대해서 이 포스팅은 보기 전에 Redux Toolkit 기본 사용법에 대해 다룬 이전 포스팅을 보고 오시면 좋습니다. axios에 대해서 axios는 ajax를 쉬운 코드로 사용할 수 있도록 편의성을 제공해주는 라이브러리입니다. axios는 axios() 함수를 호출하는 것으로 ajax request를 보낼 수 있으며 리턴 값이 promise이기 때문에 then, catch, finally와 같은 메소드로 프로미스 체이닝을 통해 response 후속 조치를 할 수 있습니다. * axios 프로미스 객체 사용법 ax..

2021. 12. 27. 08:00
React.js

Redux Toolkit으로 리덕스 쉽게 사용하기

지적되어온 Redux의 문제점들 리덕스(Redux)는 리액트(React)의 상태 관리 라이브러리 중 대표로서 굳게 자리매김하고 있었지만, 그동안 리덕스가 사용하기 너무 복잡하고 배우기 어렵다는 의견이 많았습니다. 실제로 리액트에 입문하는 사람들이 리액트를 배우다가 가장 좌절을 겪는 구간이 리덕스를 배울 때이기도 합니다. 리덕스가 높은 러닝 커브와 복잡성을 가지는 원인들을 리덕스 측에서 문서로 공식적으로 발표한 것이 있습니다. 1. store configuration 복잡성 우선, 리덕스는 스토어(store)를 설정하는 게 너무 복잡하다는 것입니다. 리덕스는 앱 전체에 단 하나의 스토어를 가지며 이 스토어는 리액트 앱에서 사용할 상태(state)들을 저장하고 관리합니다. 따라서 스토어는 상태 값들을 사용하..

2021. 12. 20. 08:00
Node.js

webpack-dev-server로 프론트엔드 개발 서버 띄우기

선행 지식인 webpack에 대해서는 이전 포스팅을 참조하면 좋을 것 같습니다. webpack-dev-server란? webpack-dev-server는 매 코드 변경마다 빌드된 결과물을 확인할 수 있는 개발용 서버를 제공해줍니다. 실제 빌드는 시간이 오래 걸리기 때문에 webpack-dev-server는 실제 번들링 된 결과물을 파일로 생성하지 않고 메모리에 올려놓은 채 보여줍니다. 그래서 빠른 속도로 즉시 변경된 코드를 개발 서버에 반영하여 보여줄 수 있습니다. webpack-dev-server 실습하기 webpack-dev-server 실습은 이전 포스팅에서 했던 실습을 이어서 진행합니다. 따라서 이전 실습을 다 마친 상태의 프로젝트 폴더를 준비해주세요. 그러면 이어서 webpack-dev-serv..

2021. 12. 13. 08:00
React.js

리액트 렌더링 최적화하는 8가지 방법과 고찰

서론 이 글은 함수형 컴포넌트, 클래스형 컴포넌트 상관없이 공통적으로 적용되는 렌더링 최적화 이야기와 hooks를 사용하는 함수형 컴포넌트에서 구체적으로 어떤 기능들을 사용해 렌더링 최적화를 사용할 수 있는지를 작성해봤습니다. 클래스형 컴포넌트에서의 구체적인 기능들은 다루지 않습니다. 예제가 많습니다. github에서 전체 코드를 볼 수 있습니다. https://github.com/cocoder16/react-rendering-optimization cocoder16/react-rendering-optimization Contribute to cocoder16/react-rendering-optimization development by creating an account on GitHub. github..

2021. 6. 14. 08:00
React.js

react-router 사용하여 react로 Single Page Application 만들기

SPA (Single Page Application)과 react-router react-router는 SPA와 밀접한 관련이 있습니다. 왜냐하면 react-router를 이용한 페이지의 이동은 서버에 대한 요청이 없이도 페이지와 url을 옮길 수 있기 때문입니다. SPA는 일단 한번 필요한 스크립트를 다운로드하면 다음에 링크 이동을 했을 때 새로 보여줘야 할 내용을 이미 가지고 있기 때문에 굳이 서버에 재요청을 할 필요가 없습니다. (요청할 필요가 있다면 ajax를 이용합니다.) 즉, react-router를 이용해 구현한 모든 링크 이동은 결국 하나의 페이지 내에서 이루어지는 것이고 이것은 SPA(Single Page Application)을 구현하는 핵심적인 기능이 되는 것입니다. SPA가 아닌 경..

2020. 10. 28. 08:00