Today's Dev Notes(2019-01-06)

안녕하세요, Brad입니다. 오늘 공부한 내용 정리해볼게요.

 

• 이벤트 위임(Event Delegation)은 뭘까요?(기존 질문 내용 복습)

  • 다수의 자식 요소에 이벤트를 모두 등록시킬 필요없이 부모에 이벤트를 등록시킴으로써 아래 이벤트들을 바인딩하는 것을 말합니다.(참고)
  • 이러한 위임이 가능한 것이 하나의 이벤트가 발생되었을 때 상위 태그까지 영향을 미치는 내부 작동원리 덕분이라고 하네요.
  • 현재 단계에서 Comment 지우기를 하고 있는데요. 이 이벤트 위임 덕분에 각각의 자식 요소에 이벤트 등록을 하지 않더라도 부모 태그에서 관리를 할 수 있습니다.

• ajax 처리 후 path이동하면서 white page뜨는 경우

  • 현재는 해결한 상태인데요. 아직도 제가 어떻게 해결했는지 모르겠습니다.
  • 분명 여러 테스트를 진행하면서 크롬의 캐시지우기를 다하고 심지어 Intellij의 캐쉬지우고 restart도 다 해봤거든요.
  • 그런데 이전 기능 추가되기전 제대로 된 곳으로 돌아가 다시 하나하나씩 기능을 다시 채워나갔는데 그때부터 다시 ajax처리가 제대로 되었습니다.
  • 그리고 다시 되는 시점에서 이전에 했을때 제대로 ajax처리가 안되는 코드를 가져와 다시 붙여봤는데 이제는 다시 되네요..
  • 해결되서 기쁘지만 한편으로 원인을 제대로 파악하지 못해 찝찝하네요.
  • 그냥 제가 말하고 싶은 해결법은 되는 시점으로 다시 돌아가서 차근차근 새로 구현한 기능을 붙여넣으면서 하나씩 체크해보는 것입니다!

• Inline 태그와 Block 태그

  • 이거 때문에 고생을 많이 했습니다. 분명 한줄로 만들고 싶은데 제 마음대로 잘 되지 않았습니다.

  • <div> 태그는 Block 태그로 하나를 쓰면 한줄을 다 차지하게 됩니다. 하지만 style=display: inline 을 통해서 Inline 태그의 속성을 부여할 수 있긴 합니다.

  • 제가 원하는던 것은 부모 태그가 있고 아래 자식 태그 3개가 한 8:1:1 비율로 구성하게 하는 것이었습니다. 그래서 다음과 같이 구성해봤습니다

    <div>
        <span></span>
        <span></span>
        <span></span>
    </div>
    

  • span 태그는 Inline태그라 한줄 안에 여러 요소를 넣을 수 있거든요.

  • 그런데 span 태그의 단점은 width 속성을 쓸 수 없다는 것입니다. 저는 비율를 넣기 위해 width 를 써야하는데 말이죠..

  • 여러 고민을 했는데 쉽게 제 맘처럼 잘 되지 않더라구요. 이 부분은 프론트엔드 분들께 도움을 청해봐야겠습니다.

• JQuery 유용한 메서드

  • $(선택자1).closest(선택자2)

    • 이것은 선택자1보다 상위 태그 중 가장 가까운 선택자2를 찾아줍니다.
    • 이벤트가 발생한 지점에 여러 유사한 구조가 있을 때 해당 구조를 찾는데 유용합니다.
    • 주의할 점은 상위 태그라는 점입니다. 같은 레벨의 태그 중 하위 태그 레벨이라면 우선 같은 레벨보다 상위 태그를 찾은 다음 다시 하위태그로 내려와서 제가 원하는 곳으로 접근할 수 있었습니다.

  • $(선택자).replaceWith(바꿀 html 내용)

    • 선택자 부분의 html내용을 통째로 바꿀 수 있습니다.
    • 저의 경우 답변 수정완료 후 template를 다시 덮어바꿔버릴 때 사용하였습니다.