효빈 스토리

웹 개발을 하다 보면 DOM을 동적으로 변경해야 할 때가 많습니다. 그중에서 가장 간단하게 사용할 수 있는 방법 중 하나가 innerHTML입니다. 하지만, innerHTML은 편리함과 동시에 몇 가지 중요한 단점이 있어 무조건 사용하기에는 위험한 부분이 있습니다. 이번 글에서는 innerHTML의 단점과 이를 대체할 수 있는 안전하고 효율적인 방법들을 소개하겠습니다. 1. 보안 취약성: XSS 공격의 위험innerHTML의 가장 큰 단점 중 하나는 XSS(Cross-Site Scripting) 공격에 취약하다는 점입니다. 사용자가 입력한 데이터를 검증 없이 innerHTML에 삽입하면, 악의적인 코드가 HTML에 포함되어 실행될 수 있습니다."; document.getElementById('conte..

Chrome 브라우저를 사용하는 사람이라면, Chrome Extension(크롬 익스텐션)에 대해 알고 계실겁니다. 크롬 익스텐션은 구글 크롬의 확장 프로그램으로, 크롬 브라우저를 더욱 편리하게 사용할 수 있도록 도와주는데요,html, css, javascript를 사용할 줄 아는 분이라면, 아주 간단하게 '크롬 시작화면'을 개발해 사용할 수 있습니다. 크롬을 사용하면서, 조금 더 사용하기 편한 북마크가 있으면 좋겠다! 라고 생각을 했었기 때문에이렇게 오른쪽 사이드바에 자주 사용하고 있는 웹 사이트들을 저장해놓고 사용하고 있습니다.  내가 만든 웹 페이지를 이렇게 크롬 익스텐션의 시작 페이지로 사용하고 싶다면,코드를 작성한 폴더 안에 manifest.json 이라는 파일을 추가하고, 아래의 내용을 작성해..

자바스크립트에는 일반적으로 function 키워드를 사용해서 함수를 선언하는 방법 외에도화살표 모양의 기호를 사용하는 화살표 함수가 있습니다.  차이점 1화살표 함수는 function 키워드로 작성한 일반 함수와 어떤 차이점이 있는지,아래에 작성된 코드를 살펴보면서 살펴봅시다.function Counter() { this.count = 0; setInterval(function () { this.count++; console.log(this.count); }, 2000);}const counter = new Counter(); 코드를 실행하면, setInterval 함수에 전달된 콜백 함수의 this는 생성자 함수를 통해 새로 생성된 Counter 객체를 가리키지..

클로저란 무엇일까요? MDN에 클로저가 무엇인지 검색을 해보면, 다음과 같이 설명되고 있습니다.주변 상태에 대한 참조와 함께 묶인 함수의 조합.내부 함수에서 외부 함수의 범위에 대한 접근을 제공. 위의 설명이 잘 와닿지 않으니, 조금 더 자세하게 설명해 보겠습니다.실행 컨텍스트에 대해 잘 모르시는 분들은 이전 포스트를 먼저 읽어주세요🧐실행 컨텍스트 글 바로 보기 코드의 실행 과정클로저는, 자바스크립트 엔진이 아래의 코드를 실행하는 과정을 살펴보면서 이해해 봅시다.let name = '개구리';function makeFunc() {    let name = '고양이';    function displayName() {        console.log(name);    }    return display..

자바스크립트의 this 키워드는 다른 언어들과는 조금 다르게 동작합니다.this는 자신이 속한 객체를 가리키는 키워드로, 함수의 호출 방식에 따라 가리키는 값이 달라지는 신기한 친구인데요, 이번엔 이 this에 대해 알아보도록 하겠습니다. 함수 호출 방법this는 특정 함수가 어떻게 호출되었는지에 따라 달라지기 때문에 함수의 호출 방법에는 어떤 방법들이 있는지 나열해보면, 다음과 같이 나열할 수 있습니다.0. 전역 공간1. 일반 함수 호출2. 메서드 호출3. 생성자 함수 호출4. 콜백 함수 호출  전역 공간우선 전역 공간에 this를 출력하는 코드를 작성해서, 전역 공간에서의 this는 어떤 값을 가리킬지 확인해보면, 위의 이미지처럼, window 객체가 출력이 되는 것을 볼 수 있습니다.이 window..

바닐라 자바스크립트로 SPA를 제작하려면 어떻게 해야 할까요?이번 글을 통해 바닐라 자바스크립트로 SPA를 개발하는 방법에 대해 배워봅시다! Single Page Application우선 SPA는 Single Page Application의 약자로, 단일 페이지 애플리케이션을 의미합니다.SPA의 웹 서버는 오직 하나의 html만을 가지고 있으며, 보통 index.html로 불립니다. SPA는 다음과 같이 동작합니다.1. 초기 로딩 : 사용자가 웹 사이트에 처음 접근할 때, 서버는 index.html 파일을 클라이언트에게 전송합니다.이 파일에는 웹 애플리케이션의 구조를 설정하고, 사용할 js, css 코드가 포함되어 있습니다.2. 클라이언트 측 라우팅: SPA에서는 페이지 전환 시 새로운 HTML 파일을 ..

이번 강의의 주요 주제 중 하나인 상태 관리에 대해 이야기해보려고 합니다. ‘상태 관리’라는 단어를 들으면 대부분 Redux나 Context API와 같은 상태 관리 라이브러리를 떠올릴 것입니다. 이번 글에서는 라이브러리가 아닌, 순수 자바스크립트로 상태 관리를 하는 방법에 대해 다뤄보겠습니다. 조금 더 자세히 이야기해 보면, 상태는 웹 페이지 내에서 눈에 보이거나, 눈에 보이지 않는 모든 변화하는 데이터를 의미합니다. 예를 들어, 사용자가 입력한 데이터, 버튼, 체크박스, 게시글 등이 상태에 해당합니다. 그리고 이들을 관리하는 것이 바로 상태 관리입니다. 상태는 각각의 화면에서, 혹은 보이지 않는 영역에서 실시간으로 변화하는 값이기 때문에, 상태가 언제, 어떠한 값으로, 어떻게 변경되었는지를 관리하는 ..

자바스크립트 엔진은 자바스크립트 코드를 어떻게 실행시킬까요?자바스크립트의 실행 컨텍스트라는 개념을 알고 있다면, 이를 이해할 수 있습니다. 실행 컨텍스트에 대해 알아보겠습니다.실행 컨텍스트란실행 컨텍스트는 영어로 Execution Context다. 직역하면 실행 문맥입니다.실행 문맥? 한국어로 들어봐도 잘 와닿지 않는데요, 그럼 이 글을 계속해서 읽어보겠습니다.자바스크립트 엔진먼저 브라우저가 자바스크립트 코드를 어떻게 실행하는지 알아보겠습니다. 자바스크립트는 "자바스크립트 엔진"이 있는 곳에서 동작합니다. 자바스크립트 엔진이 바로 자바스크립트 코드를 실행하게 도와주는 역할을 하는 녀석이고, 우리가 사용하고 있는 브라우저에는 이 자바스크립트 엔진이 있기 때문에 자바스크립트를 실행할 수 있습니다.그렇다면 자..