본문 바로가기
반응형

취미 공부/Daily53

2024. 05. 31 (금) 5주차 - Daily Coding - Day05 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에.. 2024. 5. 31.
2024. 05. 30 (목) 5주차 - Daily Coding - Day04 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 /* 올바른 예 .. 2024. 5. 30.
2024. 05. 29 (수) 5주차 - Daily Coding - Day03 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.. 2024. 5. 29.
2024. 05. 28 (화) 5주차 - Daily Coding - Day02 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.. 2024. 5. 28.
반응형

티스토리툴바