IT_susu

Setup for the Tutorial 튜터리얼 설정 There are two ways to complete this tutorial: you can either write the code in your browser, or you can set up a local development environment on your computer. 이 튜토리얼을 완성하는 2가지 방법이 있다 : 브라우저에서 코드를 쓰는 방법과 너의 컴퓨터의 로컬 개발 환경에서 설정할 수 있다. Setup Option 1: Write Code in the Browser 설정 선택지 1: 브라우저에서 코드 작성 This is the quickest way to get started! First, open this Starter Co..

Prerequisites 전제조건 We’ll assume that you have some familiarity with HTML and JavaScript, but you should be able to follow along even if you’re coming from a different programming language. We’ll also assume that you’re familiar with programming concepts like functions, objects, arrays, and to a lesser extent, classes. 우리는 너가 html과 자바스크립트에 친숙하다고 가정하지만 너가 만약 다른 프로그래밍 언어기반이어도 따라올 수 있어야 한다. 또한 우리는 너..

What Are We Building? 무엇을 만들까? In this tutorial, we’ll show how to build an interactive tic-tac-toe game with React. 이 튜토리얼에서 우리는 리액트로 상호작용하는 tic-tac-toe 게임을 어떻게 만드는지 볼 것이다. You can see what we’ll be building here: Final Result. If the code doesn’t make sense to you, or if you are unfamiliar with the code’s syntax, don’t worry! The goal of this tutorial is to help you understand React and its sy..

Before We Start the Tutorial 튜토리얼을 시작하기 전에. We will build a small game during this tutorial. You might be tempted to skip it because you’re not building games — but give it a chance. The techniques you’ll learn in the tutorial are fundamental to building any React apps, and mastering it will give you a deep understanding of React. 우리는 이 튜토리얼을 진행하는 동안에 작은 게임을 만들거야. 너가 게임을 만들지 않았기 때문에 넘어가려고 할수도 있지..

path가 중복되는 부분이 생기면 중복되는 것이 전부 로딩되므로 우리가 원하는 모습이 아닙니다. 따라서 switch문을 사용합니다. 라우트들을 switch 컴포넌트에 감싸면 매칭되는 첫번째 라우트만 보여주고 나머지는 보여주지 않습니다.

블로그 이전 https://velog.io/@susu1991/%EC%9D%B4%EC%A0%84%EC%9E%90%EB%A3%8C%EB%B0%B1%EC%97%85-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4

1. {name} 준비중 2. {name} { isPrepare && 준비중 }

import React, { Component } from 'react';import logo from './logo.svg';import './App.css'; class App extends Component { render() { return ( Edit src/App.js and save to reload. Learn React ); }} export default App; 1) import 구문import는 es6에서 정의한 모듈을 불러오는 방법입니다.그러나 이는 node.js 환경에서 사용되는 것이지, 브라우저 환경에서는 이 기능이 지원되지 않으므로 번들링을 사용해야 합니다.번들링은 모듈을 하나의 파일로 합쳐서 html파일에 script로 넣어줍니다. 2) class App extends Co..

렌더링과 데이터의 변화에 있어 기존 개발방식과 리액트를 포함한 모던프론트엔드개발방식이 다릅니다.기존 방식은 데이터에 변화가 있으면 해당 DOM을 선택하고 데이터를 가공한 뒤, 해당 DOM에 데이터를 입혔습니다.이 과정에서 DOM을 쉽게 선택할 수 있는 jQuery가 편리한 사용성으로 많은 사랑을 받았죠. 그러나 데이터 교체가 잦거나 큰 프로젝트의 경우 해당 dom을 선택하는 규칙도 까다로워지고 dom도 데이터의 변환이 너무 자주 일어나므로 성능이 떨어졌습니다.Dom은 빠른 성능을 갖고 있지만 정적 UI에 최적화되어 있어 동적인 UI에는 취약합니다. 이에 리액트에서는 데이터 변화가 있을 때 기존 뷰를 날리고 새로 렌더링 하는 생각의 전환을 하게 되었습니다. 새로 렌더링을 한다는 것은 기존 Dom으로서는 무..

includes()텍스트가 포함되어있는지 여부를 불리언 값으로 반환. (es5)var word = "abcdefg";word.indexOf('bcd') > -1 (es6)let word = "abcdefg";word.includes('bcd') startsWith()어떤 문자열이 특정 문자로 시작하는지 확인하여 불리언 값으로 반환. (es5)var kings_4 = '청룡 백호 현무 주작'; // 1. kings_4의 글자는 '백호'로 시작하는가?kings_4.substr(0,2) === '백호'; function startsWith(word, find, start) {start = start || 0;return word.substr(start, find.length) === find;} startsW..