전체 글

21강 컴포넌트컴포넌트 나누기  (리팩토리)- 리액트는 관심사를 분리해서 담아야함.- 하나의 컴포넌트가 하나의 관심사만 담는 거을 지향 컴포넌트 합성- 컴포넌트의 개수를 늘리는 것이 아닌 컴포넌트 합성을 사용하여 재사용성을 높인다- 컴포넌트에서 props를 선언해주지 않아도 기본적으로 children은 자동 생성이 가능하다 ex) ToastMessage.js / ToastButton.js 생성해서 분리하고 Toast.js에 연결 22강 모듈 시스템 Import 안의 세부 로직1. Toast(내가 만든 js파일) 라는 변수를 선언=> 변수명은 다른 값으로 얼마든지 가능.2. /components/Toast.js에서 default export 를 찾음3. 2에서 찾은 default export를 Toast에..

19강 CSS 파일은 일반적으로 JS 파일과 같은 위치에 저장한다.App.jsfunction App() { return ( }App.css.App { text-align: center;}   BEM(Block Element Modify) 네이밍 규칙CSS 클래스 명에 대한 네이밍 컨벤션1. 소문자 숫자만 조합2. 조합은 하이픈(-)으로 연결하여 작명3. 네이밍 조합은 형태 > 의미 > 순서 상태를 기본 순서로 사용한다 참고자료https://en.bem.info/methodology/css/ CSS / Methodology / BEMCSSen.bem.info /* 잘못된 예 /.redBox{ color: red;}cancel_btn_off01.gif.msgbox-off-toggle /* 올바른 예 ..

16강자바스크립트 함수의 특징1. 자바스크립트는 함수를 일급 시민(fisrt class citizen)으로 다룸2. 이 말은 곧, 함수를 단순한 값으로 본다는 뜻3. 함수는 객체(Object) 타입 중 하나 일급합수(first class function)// 함수 표현식, 화살표 함수const addFunction = (a, b) => a + b;const counter = { value: 10, // 오브젝트 메서드에 함수 표현식 increment: function() { this.value++ }}// 함수를 값처럼 전달button.addEventListener('click', () => console.log('click')); 고차 함수 (higher order f..

14강- 비구조화(Destructuring) 할당- 스프레드 (...) 연산자  이터러블- 배열- 문자열- Map- Set 이터러블이 아님- 일반 객체(Object) 15강- 객체 리터럴- 옵셔널 체이닝- Map- Set 객체 리터럴- ES 6 버전에서 객체를 표현하는 방식에 변화- 변수명과 객체 프로퍼티 같은 경우 중복 표현 생략- 객체 메서드 함수표현식 function 키워드 생략- 오브젝트 프로퍼티 명 안에 연산 가능 // Object Literal// 1. const ObjectName = { a: 1, b: 'bb'};const outsideObject = { ObjectName: ObjectName};console.log(outsideObject.ObjectName);//{ a..

12강- this- call, apply, bind this- 모든 실행 컨텍스트에 만들어지는 특별한 변수- this 는 static 하지 않다. 함수가 호출될 때만 값이 할당 this메서드메서드를 호출하는 오브젝트간단한 함수 호출chrome :  undefined(*strict mode 기준)node.js : global object화살표 함수둘러싸고 있는 함수 (어휘적 this)이벤트 리스터핸들러가 붙어있는 DOM 이벤트  함수 호출 방식에 의해 결정되는 thishttps://poiemaweb.com/js-this this | PoiemaWeb자바스크립트의 this keyword는 Java와 같은 익숙한 언어의 개념과 달라 개발자에게 혼란을 준다. Java에서의 this는 인스턴스 자신(self)을 ..