React router 리액트 라우터 사용해보자

리액트는 single page application 이다. 하나의 url에서 다 처리된다. 어휘력 무엇... 그럼 페이지가 많을때는 어떻게 되는거지? react router를 쓰면 된단다. 좀 더 가다듬어 보자. spa는 하나의 url로 로딩이 되고 어떠한 이벤트가 발생 했을 때 새로운 페이지가 열리거나 전체적인 페이지가 리로드 되는 것이 아니라 부분적인 내용만 업데이트 되는 것이다. 이것의 문제는 뒤로가기, 앞으로가기나 즐겨찾기가 안된다는 것이다. 이를 보완한 것이 react-router라고 한다. $ npx create-react-app router-test react 프로젝트를 생성해주고 $ yarn add react-router-dom router를 추가해준다. react-router-dom은 웹..

• format_list_bulleted Programming/react
• · 2022. 3. 16.
• textsms

[인프런 리액트] visualStudio reactProject gitbub 연동하기

*이 글은 인프런 '오픈 소스 자바스크립트 React 프로그래밍 입문 Part.1'를 보고 학습한 내용을 기록한 글입니다. 하면 로그인 하라고 뜨고 Repository가 생성이 된다.

• format_list_bulleted Programming/react
• · 2022. 2. 2.
• textsms

[인프런 리액트] 비주얼 스투디오에서 프로젝트 만들기

*이 글은 인프런 '오픈 소스 자바스크립트 React 프로그래밍 입문 Part.1'를 보고 학습한 내용을 기록한 글입니다. 비주얼 스투디오를 이용해서 프로젝트를 만들고 실행해볼 수 있다. 1. 새 프로젝트를 만든다. ClientApp 폴더의 public src 구조는 create-react-app으로 만든 구조와 동일한 구조다. 즉 frontEnd는 여기에 들어있는걸로 보면되고 나머지는 backEnd로 보면 된다. 이렇게 만들면 visualStudio 또는 .net Core 로 시작을 하면 풀스택으로 시작할 수 있다. 백엔드를 .net Core가 아닌 다른 기반으로 시작해도 된다. 2. 노드 모듈 관련된 것 설치(npm install) 앞의 포스팅의 create-react-app으로 만든 것과는 다른 점..

• format_list_bulleted Programming/react
• · 2022. 1. 31.
• textsms

[인프런 리액트] 리액트 기초 작업환경 구축

*이 글은 인프런 '오픈 소스 자바스크립트 React 프로그래밍 입문 Part.1'를 보고 학습한 내용을 기록한 글입니다. 책으로 공부하다가 한계를 느꼈다... 못따라가겠는건 둘째치고 너무 재미읍써 역시 인강이 최고인가... 작업환경 구축부터 시작! 1. 다운받아준다. https://visualstudio.microsoft.com/ko/vs/ Visual Studio 2022 | 무료 다운로드 Visual Studio에서 코드 완성, 디버깅, 테스트, Git 관리, 클라우드 배포를 사용하여 코드를 작성합니다. 지금 무료로 커뮤니티를 다운로드하세요. visualstudio.microsoft.com https://nodejs.org/en/ Node.js Node.js® is a JavaScript runti..

• format_list_bulleted Programming/react
• · 2022. 1. 30.
• textsms

[리액트 교과서] Babel 설치

이 글은 리액트 교과서를 보며 공부한 내용을 기록한 글입니다. JSX로 작성한 코드는 실행을 시키려면 일반적인 자바스크립트 코드로 변환을 해야한다. 이 과정을 컴파일과 변환을 거친다는 의미에서 트랜스파일레이션이라고 한다. 이를 위해 사용할 수 있는 도구가 여러가지가 있다. - Babel 명령줄 인터페이스 오구 - Node.js 또는 브라우저 자바스크립트로 작성한 스크립트(API 방식) - 빌드 도구: Grunt, Gulp, Webpack 이 방법이 가장 인기가 좋고 앞으로 배워야 하는 방법이다. 여기서는 Babel을 사용한다. Babel의 주요 기능은 ES6 문법을 ES5로 자동으로 변환해주는 컴파일러지만 JSX를 자바스크립트로 변환하기도 한다. Babel CLI를 이용하여 Babel을 사용하고자 한다...

• format_list_bulleted Programming/react
• · 2022. 1. 29.
• textsms

[리액트 교과서] React, JSX

이 글은 리액트 교과서를 보며 공부한 내용을 기록한 글입니다. 지루한 컴포넌트인지 엘리먼트인지... 빨리 뛰어넘어버리지 않으면 JSX도 못본 채 리액트를 버려버릴거같았다.. 전 단계로 리액트를 구성(?)한다고 했을때 특히나 가독성이 좋지않아 뭐가 뭔지 이해하기 힘들었다. 이런 문제를 JSX로 해결한다고 한다. JSX 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 자바스크립트의 확장이다. 특히 React.createElement() 호출을 반복해야 하는 불편을 해소한다. React 엘리먼트를 생성하면서 자바스크립트의 모든 기능을 쓸 수 있도록 도와준다. Great JS Resources JSX React.createElement( "div", null, React.createElement(Hello..

• format_list_bulleted Programming/react
• · 2022. 1. 28.
• textsms

[리액트 교과서] createElement(), component

이 글은 리액트 교과서를 보며 공부한 내용을 기록한 글입니다. JSX 없이 리액트 기초를 잡아보자! React의 엘리먼트나 컴포넌트 같은 기초 개념을 이해하는 것이 중요하다. 엘리먼트는 컴포넌트의 인스턴스이며, 컴포넌트 클래스라고도 한다. 엘리먼트를 어떻게, 왜 사용하는지 배워보자 var h1 = React.createElement('h1', null, 'Hello world!!!') ReactDOM.render( h1, document.getElementById('content') ) ReactDOM.render()에는 하나의 React 엘리먼트만 인자로 전달할 수 있다. 이는 동일 DOM 계층에 h1 요소 두 개를 렌더링해야 하는 경우에 문제가 발생한다. 계층적 복잡한 구조를 만드는 방법은 엘리먼트를..

• format_list_bulleted Programming/react
• · 2022. 1. 27.
• textsms

[리액트 교과서] JSX 없이 React를 해보자 "Hello World!"

이 글은 리액트 교과서를 보며 공부한 내용을 기록한 글입니다. JSX를 사용하지 않고 자바스크립트만 이용해서 작성해보는 코드! JSX가 뭔지도 잘 모르겠지만 일단 따라해본다. JSX 없이 React를 시작하는 이유 * 브라우저는 일반적인 자바스크립트만 실행할 수 있기때문에 자바스크립트로만 React 코드를 작성하는 방법을 안다면 유용할 것이다. 이 방식으로 시작하는 이유는 jsx는 필수사항이 아니고 React를 위한 표준은 자바스크립트라는 점을 확인하기 위함이다. -- Hello World 뷰를 위한 React 코드를 작성한다. React 엘리먼트를 직접 에 렌더링하지 않는 이유 -> 다른 라이브러리나 를 조작하는 브라우저 확장 프로그램과 충돌하는 것을 방지하기 위함 라이브러리를 HTML 파일에 추가하면..

• format_list_bulleted Programming/react
• · 2022. 1. 26.
• textsms

[리액트 교과서] SPA와 React

이 글은 리액트 교과서를 보며 공부한 내용을 기록한 글입니다. 단일 페이지 어플리케이션 single-page applications, SPA 입사 후 첫 프로젝트 파견 전에 본사에서 SPA 게시판을 만들어보라는 과제를 받았었다. 어찌저찌 만들긴 했는데 내가 만든건 진정한 SPA 형태가 아니니 나중에 다시 공부를 해보라는 피드백을 받았었다. 당시에도 SPA는 처음 들어보는 형태였던지라 무척 생소했었다. 그리하여 책의 흐름을 따라 정해보고자 한다. SPA 아키텍처는 서버보다는 클라이언트 즉, 브라우저 측에 로직이 더 많은 팻 클라이언트(fat client or thick client)다. SPA는 HTML 렌더링, 입력값 검증, UI 변경 등의 기능을 브라우저에서 해결한다. 1. 사용자가 새로운 페이지를 열..

• format_list_bulleted Programming/react
• · 2022. 1. 25.
• textsms

[리액트 교과서] react?

이 글은 리액트 교과서를 보며 공부한 내용을 기록한 글입니다. 첫번째 프로젝트에서 풀스택(?)으로 일을 하며 든 의문점이 있다. 각자의 업무가 주어진 페이지에서 큰 틀 안에 자잘자잘한 코드를 작성하다보니 A업무단에서 쓰여진 코드가 B업무단에서 필요할때 그 코드를 복사 - 붙여넣기를 하다보니 고쳐야하는 부분이 생기면 어느 한군데에서 고치고 그걸 다시 복사 - 붙여넣기를 하는 너무나도 쓸데없는 짓을 반복하는 것이다. 시간에 쫒겨 마구잡이로 일을 할 때는 그냥 지나쳤는데 끝나고 나니 현타가 몰려왔다. 이게 진정한 프로그래밍이 맞나? 생각하던 차에 다른 언어를 배우며 공부를 해봐야겠다 싶었다. 리액트는 효율적인 프론트엔드 개발을 위한 새로운 방법을 제시했다. 리액트는 강력한 UI 라이브러리다. 모든 기능은 물론..

• format_list_bulleted Programming/react
• · 2022. 1. 24.
• textsms