효빈 스토리

innerHTML은 안전한가?

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

인프런에 첫 강의(웹 프론트엔드를 위한 자바스크립트 첫걸음)를 낸 이후 여러 가지 이벤트들을 진행해 왔는데요, 그중에서 항상! 가장 참가자가 많고 인기 있는 이벤트는 '한입 FE 챌린지'입니다. 한입 FE 챌린지?한입 FE 챌린지는 강의를 구매하고 끝까지 수강하지 못하는 분들을 위해 진행하게 되었습니다. 강의를 구매하면 됐지, 강사가 강의를 완강하든 말든 무슨 상관이야?라고 생각하실 수도 있겠지만, 제가 도움을 드리고자 제작한 강의를, 돈까지 내고 구매하셨는데.. 도움을 드리지 못하면 너무 아쉽잖아요?? 그래서 '강의를 구매한 분들'을 대상으로, 강의를 스스로 끝까지 완강하기 어려운 분들을 모집해서 이렇게 약 3주 동안 매일매일(휴일 제외) 1시간 분량의 강의를 수강하고, 수강한 강의 내용을 복습할 수 ..

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 파일을 ..

2024 인프콘에 다녀왔습니다!!추첨은 떨어졌지만,, 다행히 지식공유자로 초대권을 받아서 다녀왔습니다😊 꼭! 오프닝 세션부터 듣고 싶어서 오전 9시 20분쯤 도착했는데요, 정말 일찍 가서 듣길 잘했다는 생각이 드는 오프닝 세션이었습니다. 글로벌로 나가는 인프런! 영상이 자동으로 더빙, 그리고 번역되는 것이 정말 신기했습니다.. 😮 인프콘 발표는 아래의 발표들 외에도 많은 발표를 들었는데요, 너무 몰입해서 듣느라 사진을 못 찍었네요😅이번에는 저번보다 더 다양한 주제들이 있어서 좋았던 것 같습니다. 들었던 발표들에 대해 전부 작성하는 것보다는 가장 인상 깊게 들었던 세션에 대해서, 그리고 네트워킹 후기와 전반적인 느낀 점을 적어보려고 합니다! 우선 가장 인상 깊었던 세션은 바로 '목적 조직 구조 안에서..

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

회사를 다니면 9시부터 6시 또는 8시부터 5시와 같이 출근과 퇴근시간이 정해져있다.하지만 혼자 집에서 일을하게 되면, 일을 시작해야하는 시간도 없고 일을 그만해야하는 시간도 없다. 23년 2월 퇴사를 하고 혼자 일을 하겠다고 다짐한 이후 3달~4달 정도는 혼자서 일을 하는 것이 익숙하지 않아 시간을 잘 활용하지 못했던 것 같다. 전날 일찍 잠에 들지 못해 피곤한 날은 잠을 더 자게되어 일을 늦게 시작한다거나, 집중이 잘 되지 않는 날은 휴식을 취해버린다거나 이런식으로 시간을 낭비한 날이 점점 늘어갔다. 어떤 방식으로 해결을 해야할까 고민을 하고 있을 때, 친구들을 통해 '열품타'라는 어플을 알게되었다.열품타는 보통 수험생, 공시생 등 기간을 정해놓고 매우 열심히 공부를 해야하는 사람들이 많이 사용하고 ..