기록하는 개발자

컴포넌트의 개념 기존 웹 구동 방식 정보(Model), 화면(View), 구동(Controller)코드를 분리한 MVC 방식으로 관리되었다. 장점 - 코드를 효율적으로 관리할 수 있다. 단점 - MVC 간 의존성이 높아 재활용이 어렵다(독립성이 떨어져 하나만 수정이 어려움). → 웹사이트 화면의 각 요소가 비슷하고 반복적으로 사용하는 경우가 많은 것에 착안하여 컴포넌트가 탄생한다. react의 웹 구동 방식 MVC의 View를 독립적으로 구성하여 재사용이 용이하다(기존 컴포넌트를 사용해 새로운 컴포넌트를 만들 수 있다). ※컴포넌트의 이름컴포넌트의 이름의 첫 번째는 반드시 대문자로 이루어져야한다. 이는 기존 HTML 마크업과 구분하기 위해서 이다. 기존 HTML 마크업 : , 컴포넌트 : , 컴포넌트의 ..

JSX : JavaScriptXML 자바스크립트에 XML을 추가한 확장형 문법 XML 또한 HTML의 표현법을 확장한 문법이기 때문에 HTML을 다룰 줄 안다면 JSX도 쉽게 체득할 수 있다. 대신 JSX는 HTML이 아니라 마크업 규칙을 따르기 때문에 아래와 같은 차이점이 발생한다. //HTML //JSX - JSX 에서는 element의 시작표시 의 짝이 맞지 않으면 react 엔진이 jsx를 분석할 때 오류가 발생한다. 1. index.js 파일은 npm run start 혹은 yarn start를 통해 리액트 서버를 구동했을 때 가장 먼저 실행되는 파일이다. 2. index.js는 'root'라는 id를 가진 element에 App component를 출력한다. (root라는 id를 가진 elem..

foreach for이 for(int i =0; i{ const [key, value] = str.split('='); result[key]=value; // result = { 'vanilla' : '10' } }); return result; } // result = { //'vanilla' : '10', //'mango' : '15' }, //'matcha' : '20' } // }; map foreach는 let을 이용해 result를 선언하였다. 불변 변수인 const 를 사용하려면 map을 이용할 수 있다. map() 은 각 배열 요소를 정의된 함수를 통해 새배열을 반환한다. 예시를 통해 살펴보자. function parser(qs){ const queryStr = qs.substr(1); /..

객체확장표현 JS문법에서 사용되는 key-value 데이터 형식의 객체를 확장하여 표현할 수 있다. // const a = 0; const b = 0; let number = { a, b }; // let favoriteString = 'favorite'; let myColors = { ['my'+favoriteString] : 'ivory', }; // let count = { add(x,y) {console.log(x+y);}, mul(x,y) {console.log(x*y);}, }; 1 - 객체의 변수를 선언 할 때 key 값을 생략하면 자동으로 키의 이름으로 키값을 지정해준다. ex) number = { a : a, b : b } 2 - 객체 생성 시 블록 내에 대괄호 [] 를 사용하여 계산된 ..

화살표 함수는 표현식을 사용하는 함수로 '=>'를 이용하여 함수를 선언한다. 화살표 기둥 '='를 사용하기 때문에 'fat arrow function' 이라고도 부른다. 기존 자바스크립트 function function mul(a, b){ return a*b; } var mul = function(a,b){ return a*b; }; ES6의 화살표 함수 사용 방법 // const mul = (a,b) => { return a*b; } // const mul = (a,b) => a*b; // cosnt addMul = (a,b) => ({add : a+b, multiply : a*b}); 1 - 앞선 코드의 기존 함수 표현식을 화살표 함수로 변경한 것이다. 2 - 함수의 본문 내용이 비어있고 return..

기존 JS 문법에서는 var 키워드를 사용했으나 ES6에서는 값을 수정할 수 있는 가변변수 let 키워드와 값을 수정할 수 없는 불변 변수 const 키워드를 사용한다. 가변 변수 가변 변수는 let 키워드로 선언한다. let으로 선언한 변수는 우리가 편하게 변수를 사용하 듯 읽거나 수정할 수 있다. 불변 변수 불변 변수는 const 키워드로 선언한다. const로 선언한 변수는 Java의 전역 변수처럼 읽기만 가능하고, const로 선언한 변수에 값을 다시 할당하면 오류가 발생한다. 그러나 불변 변수 const 는 값을 다시 할당할 수 없는 것이지 값을 변경할 수는 있다. 이게 무슨 말인가? 아래 코드 예시를 통해 배열이나 객체를 불변 변수로 선언한 후 JS 내장함수를 이용하여 값을 변경한 모습을 확인..

1. 템플릿 문자열 기존 자바스크립트 문자열 사용 방법 // var string1 = "감자"; var string2 = "고구마"; var winterSnack = string1 + ' ' + string2; // var dessert = { cake : '얼그레이', price : '6000원'}; var totalPrice = '디저트' + dessert.name '의 가격은' + dessert.price + '입니다.'; // var multiLine = '문자열1\n문자열2'; // var value1 = 10; var value2 = 5; var boolValue = false; var operator1 = '곱셈값은 ' + (value1*value2) + '입니다'; var operator2..

Prettier 란? 프로젝트의 코드 입력 스타일을 동일하게 유지시켜주는 플러그인으로 현업에서 자주 사용된다. 튜토리얼 1. react의 extension(왼쪽 nav bar 맨 아래)에서 Prettier를 검색한다. 2. Prettier - Code formatter를 선택하고 Install을 눌러 플러그인을 설치한다. 3. 설치 후 위 화면과 같이 Reload Required 버튼을 눌러 VSCode를 재실행한다. 4. 재실행 후 프로젝트 폴더에 Prettier 설정 파일을 생성하여(파일 이름에 반드시 온점 '.'을 포함) 아래와 같이 입력한다. prettier를 자동으로 적용되도록 만들어보자 Preference-Settings 로 들어가 setting의 검색창에 'formatOnSave'를 검색하면..