본문 바로가기

전체 글

Express.js로 간단한 서버 만들기

javascript 2024. 11. 3. Express.js로 간단한 서버 만들기 웹 개발을 하다 보면, 간단하게 서버를 제작해야 하는 경우가 발생한다.예를 들면 바닐라로 SPA를 제작했을 때 각각의 페이지를 불러와야 하는 경우가 있다. 그렇기 때문에 나는 프론트엔드 개발잔데, '내가? 왜?'라는 생각보다는웹 개발자라고 하더라도, 간단하게 서버를 만드는 방법 정도는 알아두면 좋다. Node.js우선 node.js에 대해 알아야 한다.node.js는 크롬 브라우저의 V8 엔진으로 빌드된 또 다른 자바스크립트의 실행 환경, 즉 런타임 환경이다.따라서 node.js를 사용하면 웹 브라우저의 외부에서 자바스크립트를 실행할 수 있다. 하지만 node.js 만으로 복잡한 웹 서버를 구축하는 것은 다소 번거롭고 시간이 많이 소요될 수 있기 때문에,express를 사용하면 조금 더 편리하게 웹 서버..

DOM API로 요소 조작하기

javascript 2024. 10. 25. DOM API로 요소 조작하기 자바스크립트로 DOM 요소를 어떻게 조작할까?? DOM은 자바스크립트가 자신에게 접근해서 조작할 수 있는 방법을 제공한다. DOM이 제공하는 방법을 활용해 웹 요소를 조작하기 위해서는 DOM 트리의 구조에 대해 잘 알고 있어야 하는데, DOM 트리는 아래의 그림을 통해 이해할 수 있다. DOM 트리자바스크립트를 사용해 DOM 요소에 접근하려면, DOM이 제공하는 방법인 DOM API를 사용해야 한다. DOM API를 이용해 요소들을 조작하려면, 가장 먼저 조작하고자 하는 요소를 찾은 다음, 해당 요소를 선택해 선택된 요소를 조작해야 한다. 조작해야 하는 요소를 찾고, 그다음에는 DOM 트리의 가장 위쪽에 위치한 노드인 문서 노드에 접근한다. 그다음, 요소 노드, 어트리뷰트 노드, 텍스트 노드를 순서..

innerHTML은 안전한가?

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

한입 FE 챌린지 2기를 마무리하며

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

HTML, CSS, Javascript로 크롬 시작화면 개발하기

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

화살표 모양 함수는 뭐가 다를까?

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

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

함수 호출 방법에 따라 달라지는 this

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

이전 1 2 다음

Recent Posts

Popular Posts

Calendar

티스토리툴바