IT_susu

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으로서는 무..

웹서비스는 브라우저를 통해 유저에게 서비스를 제공합니다. 따라서 브라우저에 대한 이해가 필수적입니다. 브라우저가 어떤 방식으로 html, css, javascript를 해석하고 로드하는지 알아봅시다. 우선 브라우저의 기본 구조를 알아봅시다.1. 사용자 인터페이스 - 주소표시줄, 이전/다음버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분.2. 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어.3. 렌더링 엔진 - 요청한 콘텐츠를 화면에 표시.4. 통신 - http 요청과 같은 네트워크 호출에 사용. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에설 실행됨.5. UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그림, 플랫폼에서 명시하지 않은 일반적..

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..

GET : 읽기URL을 적고, params를 추가할 수도 있다.params는 ?key:value형태로 추가된다.인증이 필요한 것은 headers에 해당 key와 value를 추가해주면 된다.요청을 보내면 body탭에 응답결과가 보여진다. 형식을 선택해서 확인해본다. POST : 생성URL을 적고 body탭에 row데이터 json형식으로 작성후 sendheaders : Content-Type : application/json PUT : 수정URL을 적고, 해당 URL의 데이터를 body의 row데이터 json형식으로 변경 후 sendheaders : Content-Type : application/json DELETE : 삭제headers 필요없구, body값 필요없음

REST API) 애플리케이션 통신 오늘날 PC, 모바일기기 등등 다양한 기기간의 상호 운용성이 기본 기능으로 제공되어야 합니다. 따라서 각기 다른 애플리케이션 간에 통신이 필요합니다.즉, 모든 애플리케이션이 기본 운영체제 및 프로그래밍 언어에 의존하지 않고 다른 애플리케이션과 통신할 수 있어야 합니다. 웹서비스웹서비스는 애플리케이션과 시스템이 인터넷을 통해 데이터를 교환하는 데 사용하는 표준 및 프로토콜 모음입니다. 웹서비스는 모든 프로그래밍 언어로 작성될 수 있으며 운영체제에 독립적입니다. REST란?REpresentational State Transfer의 약자.2000년도 로이필딩이 박사학위 논문에서 최초 소개클라이언트와 서버의 동작을 제어하는 기본 특성 및 프로토콜을 제공하는 상태 비저장 소프트..

settings > github pages > source > 옵션 선택! 1) master branch master브랜치에 있는 모든 소스를 업로드 2) master branch / docs foldermaster브랜치 안에 docs 폴더 안에 있는 것만 업로드