본문 바로가기
반응형

전체 글147

css 성능 향상 브라우저 렌더링은 뷰포트가 변경되거나 자바스크립트에서 노드를 만지는 일이 있거나 HTML내에서 스타일을 변경하거나 할 때 반복적으로 동작한다. 이러한 순간마다 화면을 새로 화면을 그리고( reflow, repaint), 이 행동이 반복적으로 사용되게 되면 성능을 저하시킨다. 그렇기 때문에 렌더링은 최적화 시키는 방법을 알아두는 것이 중요하다. [Reflow (layout)] 레이아웃 단계는 렌더트리를 생성하면서 계산된 노드와 스타일을 기기의 뷰포트에 맞게 어떻게 위치 시켜 보일지를 결정하는 단계이다. 상대적인 측정값도 모두 절대적인 픽셀로 변환이 된다. 리플로우는 레이아웃 요소들의 수치를 계산해서 새로운 위치에 나타나게 하는 동작이 일어날 때마다 반복해서 실행되게 된다. 또한 DOM 하위, 상위에 있는 .. 2024. 3. 5.
Property 'done' does not exist on type 'object' .ts 타입 정의 하기 function completeTodo(index:number, todo:{ id: number, title: string, done: boolean, }): void { todo.done = true; todoItems.splice(index, 1, todo); } 타입 정의 let todoItems: { id: number, title: string, done: boolean }[]; function completeTodo(index:number, todo:{ id: number, title: string, done: boolean, }): void { todo.done = true; todoItems.splice(index, 1, todo); } 중복되는 코드를 줄이고 타입을 하나로.. 2023. 12. 24.
01_변수와 타입 컴퓨터 메모리 (RAM)은 수많은 번지들로 구성된 데이터 저장 공간이다. 프로그램은 데이터를 메모리에 저장하고 읽는 작업을 빈번히 수행한다. 변수는 하나의 값을 저장할 수 있는 메모리 번지에 붙여진 이름을 의미한다. 변수에 값이 처음 저장될 때 메모리 번지를 참고한다. 초기값을 주지 않으면 메모리 번지를 참조할 수 없다. 자바의 변수는 다양한 타입의 값을 저장할 수 없다. 정수형 변수에는 정수값만, 실수형 변수에는 실수값 타입에 맞는 값만 저장할 수 있다. [변수를 생성하는 방법] 선언을 통해 변수를 생성하는데, 변수 선언은 어떤 타입과 어떤 데이터를 저장할 것인지 그리고 변수 이름은 무엇인지 결정한다. 변수를 통해 이름은 가급적이면 값을 표현할 수 있는 이름을 카멜케이스 스타일을 적용해 생성한다. 또한.. 2023. 12. 24.
[vue2] css position > transition 사용하기 카테고리 더 보기가 접혀있을 때는 최소 아이템 4개를 보여주고, 더보기를 눌렀을 때 있는 아이템 갯수만큼 4개씩 배치된 리스트가 출력되는 형식의 모습이다. 데이터가 없는 상태라고 가정했을 때 하드코딩으로 리스트를 데이터에 넣어서 구현을 해봤다. setExpand() { this.expandStatus = !this.expandStatus const refHeight = this.$refs.prdtList.clientHeight + 24 if (!this.expandStatus) { this.foldStyle.top = '106px' } else { this.foldStyle.top = `${refHeight}px` } }, clientHeight로 리스트의 높이값과 + 기본적으로 열려있는 값을 refHe.. 2023. 12. 19.
728x90
반응형

티스토리툴바