201223_TIL
오늘의 썸네일 TMI : 🎶🎸저는 '비긴어게인'의 애청자랍니다. '외국의 아름다운 풍경'과 '버스킹의 생동감'
알고있던 노래는 색다르게 들리고, 모르던 노래는 새롭게 알게 해주는 매력!
최애곡 3개를 뽑자면 로이킴의 'Gravity'♪, 태연의 'When we were young'♬ 자우림+로이킴의'Fix You'♬
김필의 'Delicate'♪ 하림 'Have I Told You Lately'♪ 그리고 '길'♩ 🎸 🎶
🎄오늘 한 일
✔️알고리즘 Coplit 19~20
: 알고리즘 20번 문제 20_compressString 문제 정말 어려웠다..
30분 넘게 계속 삽질했지만 그래도 끝까지 reference를 보지 않고 풀어낸 것에 만족했다.
나는 어려운 문제를 접근할 때 큰 방향을 생각해난 다음 빠르게 사례들로 검증해가면서 풀곤 하는데,
페어중에 재호님께서 순서도를 그려서 이 문제에 접근하는 것을 보고 놀랐다.
확실히 순서도를 먼저 그려놓으면, 논리적인 흐름을 파악하기가 쉬워지고, 그것에 따라 차근차근 코드로
만들어주기만 하면 되었다.
값진 삽질시간이었지만, 조금 더 효율적인 시간사용과 논리적 접근을 위해서 앞으로 적극적으로 순서도를
활용한 접근방법을 사용해보아야겠다
✔️ 기본적인 DOM의 이해와 조작방법
: DOM이란 무엇인지, 또 DOM의 CRUD를 위해서는 어떤 method들을 사용할 수 있는지 들에 대해 배우고
실습을 해보았다.
이전에 프로젝트에서 sheet2site라는 구글시트를 채워 넣으면 자동으로 웹사이트를 만들어주는 서비스를 이용한
적이 있었다. 그 때 세부적인 내용을 바꾸기 위해서 DOM에 대해서 알아보고 마구잡이로 사용했던 기억이 났다.
이번 기회에 이론적으로 더 깊이 다지고 갈 수 있어서, 앞으로 twittler 구현에 있어서 빨리 해보고 싶다는 마음이
들었다 : ) : )
🎄기억할 것
✔️DOM 의 CRUD
- CREATE - document.createElement ( 'tag' );
- READ - document.querySelector( 'tag'/ '#id' /' .class ') , document.querySelectorAll( 'tag'/ '#id' /' .class ')
- UPDATE - Node.textContent = 'value ', Node.id.add( 'id' ) , Node.classList.add( 'classname') ,
Node.setAttribute(' id ', ' id value' )- DELETE - Node.remove( ), Node.removeChild( ),
innerHTML="", Node.textContent=""- APPEND - document.ParentNode.appendChild( )
✔️ document.createDocumentFragment()
: 작은 document 객체를 만드는 것이다.
보통 변경 시에 활성화된 기존 문서에 영향을 주지 않고, 한 번에 여러노드를 APPEND 해줄 수 있어
리플로우와 렌더링 성능을 높여준다. const fragment = new DocumentFragment( ) 로도 생성가능
✔️append와 prepend의 차이점
: append는 ParentNode.append( ) 로 사용하고, 마지막 자식 뒤에 해당 객체를 삽입한다.
요소를 추가할 수도 있고, 문자를 추가할 수도 있다.
prepend는 ParentNode.prepend( ) 로 사용하고, ParentNode의 가장 처음 자식노드 앞에 Node를 삽입한다.
✔️append와 appendChild 차이점
:1) append는 반환하는 값이 없다. but appendChild는 추가한 Node객체를 반환한다.
2) append는 DOMString 객체 추가가능, appendChild는 오직 하나의 노드만을 추가할 수 있다.
✔️textContent와 innerHTML 의 차이점
: textContent는 해당노드와 자식노드의 텍스트 컨텐츠를 표현한다.
but innerHTML은 해당 element가 가지고 있는 모든 HTML을 반환한다.
innerHTML은 XSS공격에 취약하기 때문에 보안의 위험이 있어 사용이 지양된다.
'나는 왜 이 길에 서있나
이게 정말 나의 길인가
이길의 끝에서 내 꿈은 이뤄질까'
아직은 두렵고 생각이 많지만 뚜벅뚜벅 걸어간ㄷㅏ.