Template Literals Template Literals란? ES6에서 새로 도입된 문자열 표기법 백틱(backtick) ` 을 사용 ┗ 백틱은 키보드에서 숫자 1 왼쪽, tab키 위에 위치했음 / ' (작은 따옴표)와 헷갈리지 말것! 여러 줄에 걸쳐 문자열 작성 가능 └ 줄바꿈을 그대로 표현할 수 있음 특수 기호 $를 사용해서 변수 또는 식 포함 가능 기존 사용 방법 let a = 10; console.log("a의 값은 " + a + "입니다"); └ 위와 같이 + 를 이용해서 문자열을 이어 붙여 사용 Template Literals 사용 방법 let a = 10; console.log(`a의 값은 ${a}입니다); └ 위와 같이 백틱( ` )을 사용하여 기존 사용 방법과 다르게 +를 이용하지..

Git Git이란 ? 무료, 공개 소프트웨어 컴퓨터 파일의 변경사항을 추적하고 여러 명의 사용자들 간에 해당 파일들의 작업을 조율하기 위한 분산 버전 관리 시스템 소스 코드 관리에 주로 사용됨 어떤 집합의 파일의 변경사항을 지속적으로 추적하기 위해 사용될 수 있음 현재 가장 널리 쓰이는 분산형 버전 컨트롤 프로그램 중 하나 여러 곳의 원격 저장소를 등록하여 사용 가능 Git에서 일어나는 일, 주로 사용하는 용도 똑같은 환경에서 시작(환경 설정) └ 서버개발자 중 한명이 환경을 구성함 모두 같은 환경에서 개발하여 불필요한 시간을 없애고 서로 주고 받는 와중에 일어나는 충돌을 최소화함 Git의 장점 소스코드를 주고 받을 필요 없이, 같은 파일을 여러 명이 동시에 작업하는 병렬 개발이 가능 브랜치를 통해 개발..

Import Import의 뜻은 ? → Import의 사전적 의미 : ① 수입하다 ② (다른 프로그램에서 데이터를) 불러오다 React에서의 import 사용 방법 형태 의미 import 이름 from "위치" default 있이 export 해 줬을 때 사용 import { 이름 } from "위치" default 없이 export 해 줬을 때 사용 import * from "위치" 위치에 있는 모든 것을 갖고 올 때 사용 import * as 이름 from "위치" as 문법을 통해 이름을 임의로 설정할 수 있음 import { default as 이름 } from "위치" as 문법을 통해 이름을 임의로 설정할 수 있음 Export Export의 뜻은 ? → Export의 사전적 의미 : ① 수출(..

JSX JSX는 JavaScript에 XML을 추가한 확장 문법이다. 리액트로 프로젝트를 개발할 때 사용됨 -> 공식적인 자바스크립트 문법이 아님 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리함 JSX 문법 규칙 ① 반드시 부모 요소 하나가 감싸는 형태 └ 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 함 ⑴ 부모 요소 하나로 감싸줘야하는 이유가 무엇일까요? → Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문. ⑵ 무조건 요소를 사용하여 감싸야 할까요? → 그렇지 않다. Fragment라는 기능을 사용할 수도 있음. Fragment는 혹은 의 형태로 표현할 수 ..

이런 에러문구가 발생한다면 를 로 묶어주어야 합니다. 또한 의 매개변수 이름또한 component → element로 변경이 되었습니다. # 해결 방법 (2022. 01. 16 기준) 1. 아래와 같이 최신버전에 맞게 작성한다. 2. 이전 버전을 설치해서 사용한다. React Router | Overview Declarative routing for React apps at any scale reactrouter.com

커링 반환값이 함수인 디자인 패턴을 말함 중복된 코드를 반복적으로 입력하지 않고 원하는 기능을 조합하여 언제든지 사용할 수 있음 커링을 사용하는 이유 : 함수의 재활용 때문 함수의 재활용 예시 : function multiply(a, b) { return a * b; } function mulitplyTwice(a) { return multiply(a, 2); } // ⓐ function multiplyX(x) { return function(a) { return multiply(a, x); } } // ⓑ const multiplyX = x => a => multiply(a, x); // ⓒ​ └ ⓐ : multiply() 함수를 재활용하여 a에 2를 곱한 값을 반환함 └ ⓑ : 인자 x를 받아 이름 ..