본문 바로가기

프론트엔드28

[JavaScript Patterns] 핵심 정리: 실전 코딩 적용 전략 📕JavaScript Patterns 📘주요 키워드 #자바스크립트 코딩 규약#자바스크립트 객체의 올바른 사용법#함수를 정의하는 다양한 방법과 장단점#코드 재사용과 상속을 구현하는 방법#자바스크립트 안티패턴과 해결책 📗핵심내용 2장 : 기초 더보기• 전역 변수를 최소화한다. 애플리케이션 당 전역 변수가 한 개만 존재하는 것이 가장 이상적이다. • 함수 내 var 선언을 한 번만 사용한다. 단일한 위치에 모든 변수를 모아놓고 지켜볼 수 있고, 변수 호이스팅으로 인해 발생하는 예기치 못한 부작용을 방지한다. • for 루프와 for-in 루프, Swith문에 대해 살펴보았다. •"eval은 사악하다(eval0 is evil)." • 내장 생성자 프로토타입을 확장하지 않는다. • 코드 작성 규칙을 준수한다.. 2025. 4. 10.

AJAX를 사용해 JSON데이터를 넘길 때 발생 가능한 보안 위협과 해결방안에 관하여... AJAX를 사용해 JSON데이터를 넘길 때 발생 가능한 보안 위협과 해결방안 1. 크로스 사이트 스크립팅 (XSS): 보안 위협: 공격자가 악의적인 스크립트를 웹 페이지에 삽입하여 사용자의 브라우저에서 실행시키는 공격. 해결 방법: 입력 데이터를 이스케이핑하여 스크립트 실행 방지. Content Security Policy (CSP) 헤더 설정하여 스크립트의 실행을 제한. 2. SQL 인젝션: 보안 위협: 악의적인 SQL 쿼리를 입력하여 데이터베이스에 대한 액세스 권한 획득 및 데이터 유출. 해결 방법: 프리페어드 스테이트먼트나 ORM 사용하여 SQL 인젝션 방지. 입력 데이터 검증 및 이스케이핑. 3. 크로스 사이트 요청 위조 (CSRF): 보안 위협: 사용자의 인증된 세션을 이용하여 사용자가 의도치 .. 2023. 10. 22.

복수 요소에 이벤트 리스너 걸기 복수요소 자체에 이벤트 리스너를 거는 것은 불가하며 node 요소의 iterator 속성을 사용해 요소 하나 마다 이벤트 리스너를 걸어주어야 합니다. 타겟 노드를 선택한 후 반복문을 사용해 개별 요소를 변수에 담고, 개별 요소마다 eventListener를 지정하는 방식을 사용할 수 있습니다. 예시 window.onload = () => { let buttons = document.getElementsByClassName('delButton'); for(var i=0;i 2023. 10. 15.

크롬 강력 새로고침 단축키 크롬 강력 새로고침 방법 1. 개발자도구 F12 1-1. 개발자도구 열기 1-2. 홈페이지 새로고침 아이콘 우클릭 1-3. 강력 새로고침 클릭 2. 단축키 CTRL _ SHIFT + R 2023. 9. 17.

'addEventListener is not a function' 에러 해결 문제 원인 getElementByClassName으로 가져온 값이 배열이었는데 배열의 몇 번째 요소에 이벤트리스너를 적용할 것인지 특정하지 않아 생긴 문제였다. 해결 배열의 모든 요소에 이벤트를 걸고 싶다면 for loop 배열의 특정 요소에 이벤트를 걸고 싶다면 index를 특정해준다. 참고 블로그 https://developer0809.tistory.com/153 2023. 8. 20.

JS TEMPLATE ENGINE 의 개념과 Handlebars 사용법 안녕하세요 오늘은 js template engine에 대한 소개를 해보려고 합니다. js template engine이란? 템플릿 엔진의 등장 배경 웹에는 서버, 클라이언트가 있습니다. 기존에는 서버에서 데이터 베이스의 데이터를 가져온 뒤 HTML로 만들어 클라이언트에게 보내주었습니다. 하지만 이 방식은 페이지의 일부만 변경해도 전체 페이지를 다시 그려야 하는 문제가 있었습니다. 이를 보완하기 위해 Ajax가 등장했고, 변경이 필요한 부분만 재가공하여 보여주는 것이 가능해졌습니다. 보통 js, Jquery를 사용하는 경우 HTML에 가공된 데이터를 보여주는데, 조금의 실수라도 있는 경우, 페이지가 보이지 않거나 이상하게 보입니다. 이 때문에 사람 친화적인 문법을 가지고 서버에서 받아온 데이터를 효과적으로.. 2023. 7. 28.

npm 에러 : > 'npm'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 오류 해결 문제 상황 js template engine 인 pug를 사용하기 위해 $ npm install pug해당 명령어를 intelliJ terminal에 입력했더니 npm 에러 : > 'npm'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 이러한 오류가 발생했습니다. 다양한 이유가 있을 수 있지만 저의 경우 node.js가 아직 설치되지 않아 명령어를 인식하지 못해 발생한 오류였습니다. 문제 해결 node,js 설치 https://nodejs.org/ko/download 해당 링크에 들어가 본인의 운영체제에 맞는 msi를 설치합니다. 저는 window 64 bit 버전을 다운로드 받았습니다. 파일 경로 확인 및 환경 변수 설정 node.js 기본 설치 .. 2023. 7. 28.

AJAX를 이용한 웹 응용 프로그램의 동작 원리 앞서 REST API와 AJAX의 개념에 대해 학습했습니다. AJAX는 어떻게 동작하는 걸까요? 이번 포스팅에서는 AJAX가 동작하는 순서에 대해 적어보려고 합니다. 이전 포스팅이 궁금하신 분들은 링크를 클릭해주세요. REST API (Representational State Transfer) 에 대하여 REST의 개념 REST는 Representational State Transfer의 약자로 자원을 이름으로 구분하여 해당 자원의 상태를 주고 받는 모든 것을 의미합니다. REST를 사용하는 이유 웹페이지가 로드된 후 특정 상황에서만 howtomakecode.tistory.com AJAX란? AJAX의 개념 오늘은 AJAX의 개념과 장단점에 대한 포스팅을 해보려고 합니다. AJAX란? (Asynchron.. 2023. 7. 25.

REST API (Representational State Transfer) 에 대하여 REST의 개념 REST는 Representational State Transfer의 약자로 자원을 이름으로 구분하여 해당 자원의 상태를 주고 받는 모든 것을 의미합니다. REST를 사용하는 이유 웹페이지가 로드된 후 특정 상황에서만 서버에서 데이터를 불러오기 위해 새로고침 없이 페이지를 업데이트하기 위해 백그라운드에서 웹서버에 데이터를 전송하기 위해 REST의 구성 요소 자원 (Resource) : HTTP URI 자원에 대한 행위 (Verb) : HTTP Method 자원에 대한 행위의 내용 (Representations) : HTTP Message PayLoad REST의 특징 SERVER-CLIENT STATELESS CACHEABLE LAYERED SYSTEM UNIFORM INTERFACE R.. 2023. 7. 25.

AJAX란? AJAX의 개념 오늘은 AJAX의 개념과 장단점에 대한 포스팅을 해보려고 합니다. AJAX란? (Asynchronous Javascript And XMl) AJAX란 자바스크립트를 이용해 서버,브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신기능입니다. AJAX 사용시 서버와 통신하기 위해서 XMLHttpRequest객체를 사용한다는 특징이 있습니다. JSON, XML, HTML, TXT형식 등 다양한 포맷을 주고 받을 수 있습니다. AJAX의 가장 큰 특징은 이름에서도 찾아볼 수 있듯이 비동기성(Asynchronous)이라고 할 수 있습니다. 동기: 한 개의 데이터 요청에 대한 서버의 응답이 이루어질 때까지 다른 요청은 대기 상태 비동기: 데이터 요청의 순서에 상관없이 여러 프로세스가 한꺼번에 처리되는 방식 A.. 2023. 7. 25.

자바스크립트 이벤트 태그 정리 안녕하세요. 자바스크립트 이벤트의 개념 및 이벤트 함수의 종류와 쓰임에 대해 알아보도록 하겠습니다. 자바 스크립트 이벤트 (event) 먼저 자바스크립트에서의 이벤트란 무엇일까요? 이벤트란 웹 브라우저가 알려주는 HTML/JSP 요소에 대한 사건의 발생이라고 할 수 있습니다. 웹 페이지에 사용된 자바스크립트는 이렇게 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있습니다. 이벤트 객체는 전역 객체로써 모든 태그에 객체를 참조시킬 수 있습니다. 자주 쓰이는 JS 이벤트 함수 종류 change 변동이 있을 때 발생 click 클릭 시 발생 focus 포커스를 얻었을 때 발생 keydown 키를 눌렀을 때 발생 keyup 키에서 손을 뗀 경우 발생 load 로드가 완료되었을 떄 발생 mousedown 마우스.. 2023. 7. 24.

JSON parse, stringify 개념 정리 및 코드 저번 포스팅에서 JSON의 개념에 대해 알아보았습니다. 이번에는 JSON 형식으로 데이터를 변환하는 방법과 다시 String 형식으로 변환하는 방법에 대해 포스팅하겠습니다. JSON이 궁금하신 분들은 아래 링크를 참조해주세요. JSON이란? JSON 개념 이해하기 안녕하세요. 오늘은 JSON이라는 언어에 대해 공부를 해보았습니다. 먼저 JSON이란 무엇일까요? JSON이란? (JavaScript Object Notation) JSON이란 JavaScript Object Notation의 약자로, 사람이 읽을 수 있는 텍스트를 howtomakecode.tistory.com JSON은 프로그래밍 언어가 아닌 텍스트를 가독성 높게 정리하는 형식 중 하나입니다. 따라서 형식을 지정하고 풀 수 있는 함수가 존재하.. 2023. 7. 24.

JSON이란? JSON 개념 이해하기 안녕하세요. 오늘은 JSON이라는 언어에 대해 공부를 해보았습니다. 먼저 JSON이란 무엇일까요? JSON이란? (JavaScript Object Notation) JSON이란 JavaScript Object Notation의 약자로, 사람이 읽을 수 있는 텍스트를 사용하여 데이터를 저장하고 전송하는, 데이터 공유를 위한 개방형 표준 파일 형식입니다. JSON 데이터의 특징 형태의 특징 JSON 데이터는 key/value 쌍으로 구성되어있습니다. key와 value은 콜론(:)으로 구분되며 왼쪽이 key, 오른쪽이 value입니다. - 하나의 JSON객체는 중괄호({})로 둘러싸여 있으며, - 하나의 객체는 쉽표(,)를 사용해 여러 프로퍼티를 포함할 수 있습니다. - 여러 개의 객체를 대괄호([])를 사.. 2023. 7. 24.

제이쿼리 $(document).ready(function(){}); jQuery에서 함수를 사용하기 위해서 문서 준비 시 다음 함수를 실행하라는 의미의 다음 코드를 적어주어야 합니다. 이 코드를 간략하게 다음과 같이 적을 수 있습니다. 2023. 7. 24.

datepicker 사용해서 캘린더 그리기 안녕하세요. 오늘은 기본적인 캘린더를 그리고 사용하는 방법에 대한 포스팅을 해보려고 해요. javascript에서 날짜를 표현하는 방법 2가지에 대해 소개해드릴게요. 방법 1. input = type"date" date 타입이란? date 타입의 input 태그는 사용자가 날짜를 입력하거나 선택할 수 있는 컨트롤입니다. date 타입의 특징 - date 타입은 기본적으로 연/월/일 데이터를 저장합니다. - 시간 입력이 필요한 경우, time 입력칸을 추가하거나 datetime-local 유형을 사용합니다. - 화면에 보이는 날짜 형식은 브라우저에 따라 다르지만, 실제저장값과 value 특성 은 항상 'yyyy-mm-dd'형식을 사용합니다. - min / max 등의 특성을 지정하여 최소 / 최대 한계를 .. 2023. 7. 21.

JS에서 null, undefined, empty 체크하는 방법 javascript에서는 null,undefined ,0 을 어떻게 처리할까요? 여러가지 상황 예시를 들어 이해해보는 시간을 갖도록 해요. 한 코드 블럭 안에 있는 코드들은 모두 같은 역할을 한답니다. 1. 값이 0과 일치하는지 확인하고 싶은 경우 if( value === 0 ) if( !value ) 2. 값이 0보다 큰지 확인하고 싶은 경우 if( value > 0 ) if ( value ) 3. undefined,null,공백문자를 판별하고 싶은 경우 obj === undefined obj === null obj === "" obj === 0 !obj 4. 문자열이 비어있지 않다는 것을 판별하고 싶은 경우 if ( string !== "" ) if ( string ) 5. 4번과 반대되는 경우 if.. 2023. 7. 19.

자주 쓰이는 jQuery 함수 모음 자주 쓰이는 jQuery들을 그룹별로 묶어 정리하였습니다. jQuery 선택자 선택자명 설명 $('tag') 태그명으로 요소 선택 $('.class') class명으로 요소 선택 $('#id') id명으로 요소 선택 $('div li') div 안에 있는 모든 li 요소 선택 $('div > p') div 의 p태그라는 직계 자식 선택 $('this') 현재 선택 중인 요소 선택 jQuery 메소드 메소드명 설명 eq(n) n번째 위치하는 요소 선택 length() 요소의 개수 반환 parent() / parents() 요소의 직계 부모 / 모든 부모 선택 children("a") 요소의 a태그의 직계 자손 선택 prev() / nex() 이전 / 다음 요소 선택 val() 텍스트에 입력한 값 반환 te.. 2023. 7. 19.

이전 1 2 다음

티스토리툴바