데브코스
코딩 테스트 팁
&&와 || 연산을 조건문 뿐만 아니라 아래와 같이도 간단하게 실행할수도 있다.
// flag가 true일 경우에만 실행됩니다.
flag && func();
if문의 실행문이 함수같은 경우에 초간단으로 사용할 수 있는 방법인 것 같다.
Virtual DOM
DOM을 반복적으로 조작하게 되다보면 브라우저는 조작할 때마다 렌더링을 다시 해야한다. 이러한 현상이 반복되면 자원을 지속적으로 많이 소모하는 문제가 생겨 성능의 저하를 야기한다.
이러한 현상을 해결하기 위해 DOM트리를 자바스크립트 객체로 만들어 이벤트나 DOM이 수정되는 경우 직접 DOM을 수정하지 않고 가상 DOM을 통해서 바뀌는 부분만 변경해주어 렌더링시켜준다.즉, 수정사항이 여러번 있더라도 달라진 부분만 실제 DOM에게 전달하기에 여러번 렌더링을 진행하지 않고 한번만 렌더링을 진행한다.
React, Vue도 이런 방식이라고 하는데 React를 공부할 때 이러한 부분을 생각하면서 학습해야겠다.
즉시 실행 함수
나 같은 경우에는 html을 실행하고 딱 한번만 실행되는 스크립트에서 즉시실행 함수를 사용한 경험이 있었는데 그 밖에도 여러 이유 때문에 사용한다.
스크립트에 작성된 각종 함수나 변수들이 window 객체 내부에서 사용되어 전역적으로 사용된다. 하지만 즉시실행 함수로 실행시켜버리면 이러한 일이 일어나지 않기에 전역 컨텍스트가 오염될 일을 방지할 수 있기에 사용한다.
execCommand
이 메서드에 대해서 처음 알았는데 웹 페이지에 텍스트 에디터를 구현할 때 정말 유용한 기능이라고 느꼈다. 하지만 더이상 웹 표준에서 사용되지 않는 다는 사실이 약간 아쉬웠다..
개인 공부
innerhtml의 취약점
개인 프로젝트를 진행하며 div태그 안에 단순히 텍스트를 입력하는 용도로 innerhtml을 사용했다. 별 생각없이 단순 텍스트만 넣을거여서 사용했는데 우연히 여러 블로그를 보다가 보안에 취약하다는 사실을 알았다.
간단하게 말하면 XSS(Cross-Site Scripting)라는 공격이 있는데 웹 사이트에 악성 스크립트를 주입해 사용자의 정보를 탈취하거나 오류를 일으키는 등 문제를 발생시키는 공격기법에 취약해진다는 것이다.
특히 내가 구현하고 있는 TODOLIST처럼 입력 창에 입력된 내용이 innerhtml을 통해서 해당 내용이 코드로 유입되는 방식이라면 큰 문제를 야기할 수 있다. 이러한 사실을 인지하고 해당 코드를 innertext로 모두 변경해주었고 이후에도 innertext 또는 textContent를 통해서 대체하여 사용하려고 한다.
프론트엔드는 여러 분야를 신경써야 하는데 그 중 보안도 꽤나 중요한 부분을 차지하기에 잘 신경써야겠다.
htmx
벨로그 메인은 항상 볼게 많다. 개발 관련해서 얻어갈 수 있는 지식이 정말 많다. 오늘 접한 htmx도 그 중 하나이다.
https://velog.io/@betalabs/%EB%82%98-%ED%98%BC%EC%9E%90-%EB%8B%A4%ED%95%B4%EB%A8%B9%EC%9D%84-htmx
위 블로그를 보고 알았는데 간단하게 요약하면 굉장히 간결한 방식으로 개발자가 동적인 사이트를 만들 수 있게 해주는 자바스크립트 라이브러리라고 한다.
직접 실습까지는 안해보았지만 더 찾아보니 당장은 잘 쓰이지 않아도 꾸준히 개발되는 라이브러리라고 한다. 추후에 시간이 되면 실습하는 기회를 가져봐야겠다.
후기
첫 과제를 제출은 했지만 마음에 안든다. 괜히 추석연휴를 쉬었다는 생각이 들고 다음 과제는 미리미리 시작해서 마음에 들때까지 연마해서 제출해야겠다.
