오픈소스/노드 썸네일형 리스트형 [Node] React 정리(7) - SetState와 jQuery 사용하여 렌더링 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 컴포넌트에서 동적인 메소드인 setState를 이용하여 숫자가 변경되는 예제 및 버튼을 눌렀을 때 초기화 하는 예제를 담았습니다. 진부한 예제이지만 setState의 기초와 사용법에 대해 아는 것이 아주 중요한 만큼 바로 시작해보도록 하겠습니다. # Contents 의존 라이브러리 설치 코드 작성 및 테스트 # 의존 라이브러리 설치 먼저 의존하는 라이브러리를 설치하는 것이 당연지사입니다. 현재 문서부터 JSX 문법을 이용하여 리액트를 시작할 것.. 더보기 [Node] React에서 jQuery 사용 방법 Javscript에서는 실제로 jquery가 너무 많이 필요하지 않으며 React에서 많이 지원하기 때문에 자주 사용하진 않습니다. 그러나 여전히 이 거대한 jQuery 플러그인 지원 때문에 jQuery를 완전히 피할 수는 없습니다. 이 때문에 jquery를 거의 느끼지 못할 수도 있습니다. jQuery를 리액트 프로젝트에 적용시키는 방법을 알아보도록 하겠습니다. # Contents react에서 jQuery 적용 # react에서 jQuery 적용 먼저 jQuery 라이브러리 혹은 패키지를 설치하도록 하겠습니다. 리액트를 편하게 사용하기 위해서는 라이브러리 CDN 설치보다는 npm 설치를 권합니다. npm install --save jquery 그런 다음 jquery 패키지의 $ 로 jquery를 가져.. 더보기 [Node] Node Express, React 프록시 연동 Express 서버와 React 클라이언트의 개발을 통해 서로를 연결하려고 합니다. 각각의 특징들과 장점들을 대부분 배우셨을거라고 생각합니다. 서버와 클라이언트가 분리됨으로써 협업을 하기 좋은 구성이 되고 맡은 바 임무에 최고의 효율을 낼 수 있는 프로젝트라고 생각합니다. 리액트는 더불어 리액트 네이티브라는 것이 존재하기 때문에 리액트의 문법을 알게 되면 iOS와 안드로이드 개발에서 도움이 많이 됩니다. 따라서 본 프로젝트를 통해 리액트를 좀 더 알아보고, 서버와 클라이언트를 분리함으로써 유지보수가 쉬운 프로젝트를 만들고자 하는 것이 목표입니다. 먼저 처음 프로젝트를 생성하는 것을 시작으로 하겠습니다. # Contents Express 생성 리액트 생성 연결 # Express 생성 우선 프로젝트의 의존성.. 더보기 [Node] React 정리(6) - 서버사이드 렌더링 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 이 문서는 어떠한 리액트의 이론을 다루는 것이 아닙니다. 또한 현재 정리하려는 것은 여러분이 필요한 JSX 부분이 아닐 수 있음을 알려드립니다. 본 과정에서는 차례대로 난이도가 증가하는 정리를 하지 않았습니다. 필요한 부분만을 사용하거나 훑어보는 용도로 사용하시기 바랍니다. 리액트로 만든 애플리케이션을 서버 사이드 랜더링하는 방법을 소개하고자 합니다. 먼저 적용할 코드는 아래와 같습니다. GitHub - PacktPublishing/Node.j.. 더보기 [Node] React 정리(5) - react-router-dom 에서 존재하지 않는 페이지 커스터마이징 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 이 문서는 어떠한 리액트의 이론을 다루는 것이 아닙니다. 또한 현재 정리하려는 것은 여러분이 필요한 JSX 부분이 아닐 수 있음을 알려드립니다. 본 과정에서는 차례대로 난이도가 증가하는 정리를 하지 않았습니다. 필요한 부분만을 사용하거나 훑어보는 용도로 사용하시기 바랍니다. 리액트로 존재 하지 않는 페이징 처리를 위한 준비는 아래와 같습니다. 먼저 라우터가 설정되어 있어야 합니다. 기본적인 라우터는 react-router-dom을 이용하여 Sw.. 더보기 [Node] React 정리(4) - SPA react-router-dom 를 사용하여 라우터 만들기 - BrowserRouter, Switch, Route, Link 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 이 문서는 어떠한 리액트의 이론을 다루는 것이 아닙니다. 또한 현재 정리하려는 것은 여러분이 필요한 JSX 부분이 아닐 수 있음을 알려드립니다. 본 과정에서는 차례대로 난이도가 증가하는 정리를 하지 않았습니다. 필요한 부분만을 사용하거나 훑어보는 용도로 사용하시기 바랍니다. 먼저 SPA란 무엇인가에 대해 알아보도록 합시다. SPA는 Single Page Application(싱글 페이지 애플리케이션)의 약어입니다. 말 그대로 한 개의 페이지로 .. 더보기 [Node] React 정리(3) - 생명주기와 상태 저장을 통한 화면 렌더링 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 이 문서는 어떠한 리액트의 이론을 다루는 것이 아닙니다. 또한 현재 정리하려는 것은 여러분이 필요한 JSX 부분이 아닐 수 있음을 알려드립니다. 본 과정에서는 차례대로 난이도가 증가하는 정리를 하지 않았습니다. 필요한 부분만을 사용하거나 훑어보는 용도로 사용하시기 바랍니다. # Contents 생명 주기 예제 코드 # 생명 주기 리액트를 사용할 때에는 생명주기를 알아야 하는 게 필수이긴 합니다만.. 지원하는 함수도 많고 사이클도 많아서 실무에서.. 더보기 [Node] React 정리(2) - HTM 사용하여 render 하기 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 이 문서는 어떠한 리액트의 이론을 다루는 것이 아닙니다. 또한 현재 정리하려는 것은 여러분이 필요한 JSX 부분이 아닐 수 있음을 알려드립니다. 본 과정에서는 차례대로 난이도가 증가하는 정리를 하지 않았습니다. 필요한 부분만을 사용하거나 훑어보는 용도로 사용하시기 바랍니다. # Contents HTM 라이브러리를 사용 리액트 돔에 렌더 방법 # HTM 라이브러리 사용 표준 JavaScript 태그 템플릿 리터럴을 사용하는 것은 읽고 쓰기가 매우.. 더보기 이전 1 2 3 4 5 6 7 다음
