React

어플리케이션과 같은 형식으로 만듦url: 자원의 주소, routing 기법이 필요view-model binding: view는 model에 의해서 변경이 일어남view <-> model 의존성을 줄이기 위해 observer 패턴 등을 사용할 수 있다. 사용자가

자바스크립트 form 태그의 데이터 전송을 막는 방법에는 아래와 같이 onsubmit 이벤트를 활용하는 것이 있다. onsubmit 이벤트는 input 태그의 데이터를 서버에 전송하기 전 동작을 지정하며, return false; 를 함으로써 이벤트 처리를 종료하고 a

리액트에서 SPA 형식으로 페이지를 이동하기 위해 react router를 사용할 수 있다. 유저가 특정 액션을 취하면 페이지를 이동시킬 수 있고, 이 때 원하는 화면을 렌더링 할 수 있다. 오류 없이 동작한다면 기존 화면에서 새로운 화면으로 즉각 변환되는 것이다.간단

개인 프로젝트를 하던 중 그래프로 데이터를 표시하고 싶었던 적이 있다. 캔버스와 데이터를 이용해서 직접 라인 그래프 등을 그릴 수도 있지만, 라이브러리를 이용해서 조금 더 깔끔하고 간편하게 그래프를 그리고 싶어 찾아본 결과 chart.js를 사용하면 해결할 수 있을

React를 연동한 프로젝트를 진행하며 서비스를 배포하기로 결정하여 어떻게 배포할 지 고민하였다. 간편하게 배포만 하는 것이 목표였기 때문에 처음에는 Github Pages를 이용하여 배포했다. 그런데 React 프로젝트 내에서 사용하는 공공데이터포털의 Open API

React에서 상태란 컴포넌트에서 관리되는 동적인 정보(데이터)이다. 상태에 따라 View가 렌더링되며, 상태가 변경되면 해당 컴포넌트의 View도 재렌더링되어 바뀌게 된다.React 에서의 데이터 흐름은 단방향이기 때문에, 컴포넌트가 관리하는 데이터를 부모 컴포넌트에

React의 함수형 컴포넌트를 이용해 개발하다 보면 useEffect와 useLayoutEffect를 마주치는 일이 많다. 이 두 가지 Hooks를 잘 알지 못하고 코드를 실행시킬 경우 큰 차이점을 느끼기 어려울 수 있다. 그러나 위 두 Hooks는 분명히 다르며, 적

리액트를 개발하다보니 프로젝트 특성 상 수 많은 input 태그를 렌더링해야하는 경우가 많다. 서버에서 get 해온 데이터를 렌더링하고, 유저가 input 데이터를 수정한 후 수정 버튼을 누르면 해당 데이터들을 한 데 모아 서버에 put 요청을 보내는 작업이 많았다.R