Javascript10 [ReactJS] react-router 활용하여 게시글 상세 페이지 구성 및 마무리 (React로 아주 간단한 게시판 만들기 - 4) React는 SPA(Single Page Application) 시스템 구성에 최적화 된 Framework로서 페이지를 이동할 때 일반적인 웹 페이지의 페이지 전환과는 조금 다른 방식으로 구성을 해야됩니다. 혹은 React의 가상 DOM이 최종 Mounting 되는 HTML 페이지를 여러개 만들어 특정 URL을 특정 HTML에 매핑해주고 각 HTML 페이지마다 index Componnet를 구성하는 방법도 있겠으나 간단하게 react-router를 사용하여 URL에 따라 컴포넌트를 각 URL에 해당되는 페이지로 사용될 수 있도록 할 수 있습니다. 이전글 2020/10/29 - [ReactJS] - [ReactJS] useState(), useEffect() 사용하여 데이터 요청 및 관리 (ReactJS로.. 2020. 10. 29. [ReactJS] React Hook useState(), useEffect() 사용하여 데이터 요청 및 관리 (React로 아주 간단한 게시판 만들기 - 3) 이번장에서는 React의 핵심 기능이라고 할 수 있는 컴포넌트에서 사용되는 useState()와 useEffect()를 활용하여 이전에 게시글 목록 구성에 사용되었던 mock 데이터 구조를 변경하도록 하겠습니다. 우선 해당 포스팅은 React에만 초점이 맞춰져 있기 때문에 별도의 API는 구성하지 않을겁니다. 따라서 통상적으로 이루어지는 useEffect 과정에서의 ajax 요청 대신에 소스상에 게시글 목록 데이터를 가지고 있는 전역변수를 두고 해당 값을 사용하는 방향으로 작성됩니다. 이전글 2020/10/29 - [ReactJS] - [ReactJS] 핵심 Component 만들기 및 게시글 목록 페이지 구성 (ReactJS로 아주 간단한 게시판 만들기 - 2) [ReactJS] 핵심 Component.. 2020. 10. 29. [ReactJS] 핵심 Component 만들기 및 게시글 목록 페이지 구성 (React로 아주 간단한 게시판 만들기 - 2) 구조화된 React Component 생성 및 게시글 목록 페이지 구성하기 이전글 2020/10/29 - [ReactJS] - [ReactJS] React 프로젝트 생성 및 실행 (ReactJS로 아주 간단한 게시판 만들기 - 1) [ReactJS] React 프로젝트 생성 및 실행 (ReactJS로 아주 간단한 게시판 만들기 - 1) ReactJS로 게시판 만들기입니다. (극도로 단순한 구성 주의) NPM (Node Package Manager) 설치 확인 npm -v 6.14.8 create-react-app 모듈 설치 sudo npm install -g create-react-app create-react-app 을 활용한.. antdev.tistory.com 먼저 사용할 컴포넌트 목록입니다. Po.. 2020. 10. 29. [ReactJS] React 프로젝트 생성 및 실행 (React로 아주 간단한 게시판 만들기 - 1) ReactJS로 게시판 만들기입니다. (극도로 단순한 구성 주의) NPM (Node Package Manager) 설치 확인 npm -v 6.14.8 create-react-app 모듈 설치 sudo npm install -g create-react-app create-react-app 을 활용한 프로젝트 생성 프로젝트 (디렉토리 명) - react-simple-blog create-react-app react-simple-blog Creating a new React app in /Users/imchaehun/workspace/react/react-simple-blog. Installing packages. This might take a couple of minutes. Installing react.. 2020. 10. 29. [ReactJS] React JSX (React 기본 -3장) 1. JSX란? JSX는 React의 문법으로 HTML문법을 잘 알고있다면 자바스크립트 코드내에서 HTML코드를 손쉽게 작성할 수 있도록 지원하는 문법입니다. 2. JSX의 적용 - JSX 적용 전 1 2 3 4 5 6 7 8 9 import React, { Component } from 'react'; class App extends Component { render() { return React.createElement('div', null, React.createElement('h1', null, 'Hello React')); } } export default App; Colored by Color Scripter cs - JSX 적용 후 1 2 3 4 5 6 7 8 9 10 11 12 13 imp.. 2019. 4. 1. [ReactJS] Visual Studio Code + create-react-app으로 프로젝트 환경 구성 (React 기본 -2장) 2019/03/26 - [ReactJS] - [ReactJS] ReactJS 시작하기 (React 기본 -1장) 1. create-react-app이란? React를 활용해 개발을 하기위해선 기본적으로 자바스크립트 외부 모듈인 react, react-dom, react-scripts 이 세가지의 모듈이 필수로 존재해야됩니다., 또한 webpack, babel과 같은 외부 모듈을 이용해 ECMAScript 기준으로 비교적 상위 버전의 문법을 지원하지 않는 브라우저를 위해 상위 버전의 문법으로 작성된 자바스크립트 소스파일을 보다 낮은 버전의 문법으로의 변환 또는 트랜스파일링(Transfiling)을 가능하게하는 로직들도 직접 구성해야됩니다. 그러나 create-react-app이란 모듈은 앞서 언급한 과정들.. 2019. 3. 30. [ReactJS] ReactJS 시작하기 (React 기본 -1장) ReactJS 공식문서 참고 사이트 https://reactjs.org/ 1. ReactJS란? React는 Facebook에서 개발한 Javascript Framework입니다. 자세히는 일반적인 웹 어플리케이션 설계 구조인 MVC모델에서 V (View)를 담당하는 Javascript UI Framework (프론트엔드 프레임워크) 입니다. 2. React의 주요 특징 1. 컴포넌트 (Component) 페이지에 보여줄 내용들을 컴포넌트화 하여 효율적인 소스코드 관리로 인한 유지보수 용이합니다. 2. 효율적인 컴포넌트 갱신 어떤 특정한 데이터가 변하는 컴포넌트가 존재한다면 그 해당 컴포넌트만 재갱신함으로써 효율적인 컴포넌크 갱신 및 렌더링을 합니다. 3. 가상 DOM (Virtual DOM) 사용 가상.. 2019. 3. 26. [NodeJS] 채팅방UI 구성, 소켓 연결을 통한 채팅기능 완성하기 [express와 socket.io을 이용한 채팅기능 구현하기 - 2장] 2019/02/27 - [NodeJS/NodeJS로 간단한 채팅기능 만들기] - [NodeJS] npm으로 express, socket.io 모듈 설치 및 웹 서버 구축, 소켓 연결하기 [express와 socket.io을 이용한 채팅기능 구현하기 - 1장] 이전 장에 이어 클라이언트가 이용할 채팅방의 UI를 그럴듯하게 구성하고 서버와 소켓간에 데이터를 주고받고 유저들끼리 채팅을 주고받을수 있도록 구현해보도록 하겠습니다. 1. chat.html파일에서 CSS스타일 작성 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 4.. 2019. 2. 27. [NodeJS] npm으로 express, socket.io 모듈 설치 및 웹 서버 구축, 소켓 연결하기 [express와 socket.io을 이용한 채팅기능 구현하기 - 1장] 2019/02/27 - [NodeJS/NodeJS로 간단한 채팅기능 만들기] - [NodeJS] 채팅방UI 구성, 소켓 연결을 통한 채팅기능 완성하기 [express와 socket.io을 이용한 채팅기능 구현하기 - 2장] 2019/02/22 - [NodeJS] - [NodeJS] 노드JS(Node JS) 개발환경 구축하기 NodeJS가 처음이신분들은 위에 개발환경 구축하기 링크를 통해 참고하시면 됩니다. 자바스크립트를 비롯한 프론트엔드 개발에 가장 효과적인 Text Editor이자 통합 개발 환경인 Visual Studio Code를 사용해서 Node.Js로 간단한 채팅 기능을 아래의 캡처화면과 동일하게 구현해보도록 하겠습니다. 1. 임의로 작업폴더 하나 생성 저는 폴더이름을 chat으로 하나 만들겠습.. 2019. 2. 27. [NodeJS] 노드JS(Node JS) 개발환경 구축하기 1. NodeJS 홈페이지 접속 https://nodejs.org/en/ 홈페이지에 접속을 하면 짝수 버전인 LTS 버전과 홀수 버전인 Stable 버전이 있습니다. LTS버전은 안정성과 보안성에 초점을 두고 릴리즈하는 버전임으로 서버 운영에 주로 사용하는 버전이고 Stable버전은 업데이트를 자주하며 기능 개발과 개선을 우선으로 하기에 개발에 주로 사용하는 버전입니다. 2. Stable버전으로 설치 진행 설치 과정에 별다른 항목설정없이 다음버튼만 갈기면 무사히 설치가 완료됩니다. 3. 설치 완료 후 설치 여부 확인 설치가 완료되면 window의 명령 프롬프트(cmd)에서 node --version 명령어 또는 node -v 명령어로 설치된 NodeJS버전을 알려줍니다. 또한 아래의 해당 NodeJS프로.. 2019. 2. 22. 이전 1 다음
