공부/TIL-D (65) 썸네일형 리스트형 0620 @Input @Output todos 복기 keyup.enter($evnet) = 이벤트 객체 전송 keyup.enter(input) #input 템플릿참조변수 addtodo(e) {e.value} = undefined {e.target.value} 해줘야함 this.todos.map(todo => todo.id) todo를 받아서, 순회를 하면서 , todo.id 프로퍼티만 담은 '배열'을 만들겠다 max:가변인자함수 (내부에서 아규먼트들을 본다) Math.max.apply(null, this.todos.map(todo => todo.id)) apply는 apply앞에 있는 '함수를 호출한다' (1번일), 2번째 인수로 전달한 함수를 , apply앞에 있는 함수의 this에 argument를 전달한다 (2번일) this.todo.. 프레임워크 라이브러리 차이 저는 angular 프레임워크와 react 라이브러리를 학습하였습니다. 프레임워크와 라이브러리 차이에 대한 질문에, 프레임워크는 잘 준비된 틀과 같습니다. 보통 붕어빵 틀과 같은 비유를 드는데, 밀가루의 양, 반죽상태에 따라 달라지지만 틀을 통해 나온 붕어빵들은 대개 비슷한 모양의 결과물이 나옵니다. 이는 장점이자 단점이기도 합니다 잘 준비되어있으므로 생산성이 증가되며 다른 고민할 필요 없이 프레임워크에 대한 사용법을 이해하면 됩니다. angular의 경우 라우팅을 한다던가, 상태관리를 할 때에 있어 다른 라이브러리 필요 없이 프레임워크 내에 기능이 존재합니다. 반면 라이브러리는 요리로 비유하자면 조미료처럼 활용가능한 도구에 불과합니다. react의 경우 라이브러리 이기때문에 react-router라던가.. float , float 부작용 해제하는 방법 css에서 float란 '뜨다'라는 단어를 뜻하며, 사용 용도는 이미지를 어떻게 띄어서 텍스트와 함께 배치할 것인지 정하는 속성입니다. inherit: 부모 요소에서 상속 left: 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름. right: 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐. none 이 아니라면 display 속성은 무시된다. none - 요소를 부유시키지 않음 left와 right를 통해 부유속성을 지정시 display는 무시됩니다. (none은 제외) 또한 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라집니다. 참고자료) h.. DOCTYPE의 변화 이 질문을 왜 했을까요? 저는 HTML 코드의 최상단에 존재하는 DOCTYPE을 보고 그냥 지나쳤냐, 아니면 왜 사용하냐 생각을 해보았다던가, 기술 스택에 HTML5를 작성하면서 HTML4와의 차이를 이해하고 있느냐로 판단하고 있습니다. 프런트엔드 작업은 크게 HTML로 뼈대를 구성하고 CSS로 디자인을 꾸미고 JAVASCRIPT로 동작을 붙이는 과정이라고 할 수 있습니다. 그중 HTML의 뼈대를 만드는 과정에서, 먼저 등장하는 코드는 HTML, HEAD, BODY 태그가 아닌 DOCTYPE입니다. 가장 먼저 나왔다는 말은 어찌 보면 가장 중요하다는 말로도 해석될 수 있는데 DOCTYPE의 역할은 무엇일까요? 위 코드는 vscode의 에밋 단축 명령어!를 사용하면 나오는 코드입니다. html 태그 내에 .. style '컴포넌트' 단위로 독립된 스코프 스타일 정보를 갖는다 style 프로퍼티 []에 직접 정의, style프로퍼티에 외부 css파일 경로 정의 뷰 캡슐화 encapsulation 프로퍼티에 ViewEncapulation 옵션 지정 angular 자식에게 접 accessing Child 자식에게 접근? 템플릿 참조 변수를 사용하지 않고 직접자식에게 접근하기 위한 데코레이터 @ViewChild @ViewChildren @ContnetChild @ContentChildren @ViewChild -> '컴포넌트 템플릿'에 배치된 자식 @ViewChildren -> 조건에 부합되는 여러개 요소 @ContentChild @ContentChildren 부모 컴포넌트가 자신 템플릿의 일부를 자식 컴포넌트의 콘텐츠로 전달 하는 기능? interaction interaction 컴포넌트의 계층적 트리구조 @input 데코레이터 form요소 부모컴포넌트, 상태변경시 자식과 공유할 필요 프로퍼티 바인딩을 통해 자식컴포넌트에게 상태 정보 전달 자식컴포넌트는 , 상태정보를 input 데코레이터를 통해 컴포넌트 프로퍼티에 바인딩 input 데코레이터 바로 뒤의 프로퍼티명과 부모 컴포넌트에서 실행한 프로퍼티 바인딩 프로퍼티명은 반드시 일치하여야 한다 -> 자식에서 다르게 사용하고 싶으면 프로퍼티명 인자 전달후 사용하고자 하는 프로퍼티명 선언 @Input('user')myPorpName @Input('')쓰고싶은것 : 자식 컴포넌트에서 부모 컴포넌트로 상태 전달 @Output 데코레이터, EventEmitter @Output() remove = new EventEmit.. 이전 1 2 3 4 5 ··· 9 다음
