본문 바로가기

프로그래밍/Front-end22

자바스크립트로 엔터키 폼 전송 막는 방법 - -웹사이트에서 폼을 작성할 때, 사용자가 실수로 **엔터키(Enter)**를 눌러 폼이 제출되는 일이 있죠?예를 들어, 로그인 폼이나 검색창에서 엔터키를 눌러서 페이지가 새로고침되거나 입력값이 전송되는 일이 생기면 당황스러울 수 있습니다.이런 문제를 해결하려면 엔터키로 인한 폼 제출을 막는 방법을 알아두면 유용해요!오늘은 자바스크립트와 jQuery를 활용해서 엔터키로 인한 폼 제출을 막는 간단한 방법을 알려드릴게요.이 방법을 사용하면 실수로 엔터키를 눌러 폼이 제출되는 상황을 예방할 수 있습니다.1. 엔터키로 인한 폼 전송 문제HTML 폼에서 사용자가 **엔터키(Enter)**를 누르면 대부분 자동으로 폼이 제출됩니다.특히 폼 안에 텍스트 입력 필드가 있을 경우, 엔터키를 눌러 검색을 하거나 로그인하.. 2024. 12. 11.
자바스크립트로 웹 페이지의 '뒤로가기' 에러와 캐시 문제 해결하기 - -웹 개발 중, 사용자가 '뒤로가기' 버튼을 클릭했을 때 페이지가 제대로 작동하지 않거나, 캐시된 내용 때문에 오류가 발생하는 문제를 겪은 적이 있나요?이 문제는 꽤 자주 발생하는데요, 그럴 때마다 답답하고 속상할 수 있죠.오늘은 그런 문제들을 자바스크립트를 이용해 해결하는 방법을 알아보려고 해요. 어려워 보일 수 있지만, 차근차근 따라오시면 쉽게 해결할 수 있습니다!1. 히스토리 API로 뒤로가기 제어하기먼저, 브라우저 히스토리 API를 활용해서 뒤로가기 버튼을 눌렀을 때 발생하는 문제를 방지할 수 있어요.히스토리 API를 사용하면, 사용자가 뒤로가기를 눌러도 이전 페이지로 돌아가지 않게 하고, 대신 페이지를 강제로 새로 고침하도록 만들 수 있습니다.Ex) 뒤로가기 버튼을 눌렀을 때 강제로 새로 고.. 2024. 12. 10.
자바스크립트로 날짜와 시간 포맷하기 - -안녕하세요! 오늘은 자바스크립트에서 날짜와 시간을 어떻게 포맷하는지에 대해 알아볼게요.웹 개발을 하다 보면 종종 날짜와 시간을 특정 형식으로 보여줘야 할 때가 많죠.자바스크립트에서는 날짜를 다루기 위한 여러 가지 방법을 제공하는데요, 그 중 하나가 Date 객체입니다.이 글을 통해 Date 객체를 사용해서 날짜와 시간을 원하는 형식으로 포맷하는 방법을 쉽게 알아보겠습니다. 1. 현재 날짜와 시간 가져오기우선, 자바스크립트에서 현재 날짜와 시간을 가져오려면 Date 객체를 사용하면 됩니다.var today = new Date();이 코드 한 줄로 today라는 변수에 현재 날짜와 시간 정보를 담을 수 있어요.이제 today 객체에서 날짜와 시간 정보를 하나씩 꺼내볼게요. 2. 날짜와 시간 값 추출하기.. 2024. 12. 3.
자바스크립트에서 날짜 및 시간 포맷팅하는 간단한 방법 - -안녕하세요! 오늘은 JavaScript에서 날짜와 시간을 원하는 형식으로 포맷하는 방법을 소개하려고 해요.웹 개발을 하다 보면, 자주 현재 시간을 특정 포맷으로 변환해야 할 때가 있죠.예를 들어, **"2024년 10월 28일 09시 05분 03초"**를 **"20241028090503"**와 같은 형식으로 변환하고 싶을 때요.그렇다면 어떻게 해야 할까요? 1. 기본적인 방법 우리는 Date 객체를 사용하여 현재 날짜와 시간을 가져올 수 있어요.그리고 이를 문자열로 변환하고 포맷을 맞추는 작업을 해야겠죠. 먼저 기존의 코드를 살펴볼까요?var today = new Date();var year = today.getFullYear();var month = today.getMonth() + 1; // .. 2024. 11. 28.
자바스크립트로 라디오 버튼 체크 제어하기 - -안녕하세요! 오늘은 자바스크립트를 이용해 라디오 버튼의 체크 상태를 제어하고, 선택된 값을 활용하는 방법에 대해 알아보겠습니다.웹 폼에서 라디오 버튼은 사용자에게 여러 옵션 중 하나를 선택하게 할 때 사용되죠.사용자가 버튼을 클릭할 때마다 선택된 값을 추출하여 다른 동작을 할 수 있도록 하면, 웹 페이지의 동적인 기능을 구현할 수 있습니다.1. 라디오 버튼 HTML 코드먼저, 라디오 버튼을 HTML로 작성해보겠습니다.여러 옵션을 제공하는 기본적인 라디오 버튼의 예는 다음과 같습니다.OneTwoThreeFour위 코드에서는 4개의 라디오 버튼을 만들었고, 각 버튼에 onclick="javascript:check();"를 추가하여 버튼이 클릭될 때마다 자바스크립트 함수 check()가 실행되도록 설정했.. 2024. 11. 28.
자바스크립트로 멀티 체크박스 다중 선택 박스 제어하기 - -안녕하세요! 오늘은 웹 페이지에서 멀티 체크박스를 제어하는 자바스크립트(jQuery) 로직을 소개하려고 해요.여러 개의 체크박스를 한 번에 제어하거나, 사용자가 선택한 항목을 배열 또는 JSON으로 처리하는 방법을 알아볼 거예요.실제로 웹 폼을 만들 때 자주 사용되는 기능이니까, 이해하고 활용할 수 있으면 유용하답니다. 1. 전체 선택 체크박스 만들기먼저, 전체 선택 체크박스를 만들어보죠.하나의 체크박스를 클릭하면, 관련된 모든 체크박스가 자동으로 체크되거나 해제되는 방식입니다.$(document).ready(function() { $("#chkAgreeAll").on('click', function() { // 전체 동의 체크박스가 체크되었으면, 나머지 체크박스도 체크 .. 2024. 11. 27.
자바스크립트에서 빈 값 체크와 기본값 설정하는 방법 - -자바스크립트에서 빈 값이나 null 값을 처리하는 건 꽤 중요한 작업이죠.예를 들어, 사용자로부터 입력을 받거나 API에서 데이터를 받아올 때, 예상치 못한 빈 값들이 있을 수 있습니다.이런 값들을 제대로 처리하지 않으면 의도치 않은 오류가 발생할 수 있죠.오늘은 이런 상황에서 유용하게 사용할 수 있는 빈 값 체크와 기본값 설정 로직을 소개하려고 해요!1. 빈 값 체크 함수: isEmpty빈 값, 즉 undefined, null, 그리고 빈 문자열 ""을 확인할 때는 isEmpty라는 함수를 사용할 수 있어요.이 함수는 주어진 값이 빈 값인지 아닌지를 정확하게 판단해줍니다.function isEmpty(str) { if (typeof str == "undefined" || str == null.. 2024. 11. 26.
자바스크립트로 숫자만 입력받는 방법 --안녕하세요! 오늘은 자바스크립트를 활용해서 웹 페이지에서 숫자만 입력 받는 방법을 알려드릴게요. 간단한 방법으로, 숫자 이외의 문자는 입력되지 않도록 제한할 수 있어요. 이 기능은 예를 들어, 전화번호나 나이, 금액 등을 입력받는 입력창에서 유용하게 사용할 수 있습니다. 자, 그럼 어떻게 구현할 수 있는지 한번 알아볼까요?1. onKeyup 이벤트로 실시간 숫자 제한하기 첫 번째 방법은 onKeyup 이벤트를 사용하는 거예요.  이 방법은 사용자가 키를 떼는 순간, 입력된 값을 실시간으로 확인하고 숫자만 남기게 해줍니다. 위 코드에서 중요한 부분은 **replace(/[^0-9]/g, "")**인데요, 이 정규식을 통해 숫자 이외의 모든 문자를 찾아서 자동으로 제거해 줍니다. 2. input 이벤트를.. 2024. 11. 21.
자바스크립트로 입력값 검증하는 방법: 아이디, 비밀번호, 이메일 체크하기 - -안녕하세요? 오늘은 프론트앤드 개발 중에서, 자바스크립트를 활용한 입력 값 검증 로직에 대해서 알아보도록 하겠습니다.웹사이트나 앱에서 회원가입을 할 때, 아이디, 비밀번호, 이메일을 입력받는 폼이 있죠?그런데 이 입력값이 잘못되면 회원가입이 제대로 되지 않거나, 보안에 문제가 생길 수 있습니다.그래서 우리는 자바스크립트를 이용해 사용자 입력을 정규식으로 검증할 수 있습니다.오늘은 아이디, 비밀번호, 이메일에 대한 입력값을 자바스크립트 정규식을 사용해 어떻게 체크할 수 있는지 알아보겠습니다. 직접 사용해볼 수 있도록 코드도 함께 공유할게요!1. 아이디 체크하기아이디는 일반적으로 영문, 숫자, 또는 영문과 숫자가 혼합된 형태로 입력받습니다.또한, 아이디는 4자리 이상 100자리 이하로 제한이 있는 경우.. 2024. 11. 14.
제이쿼리를 이용한 필수 입력 체크 -  -안녕하세요, 여러분! 오늘은 웹 개발에서 자주 사용되는 사용자 입력 필드의 유효성을 체크하는 방법에 대해 이야기해보려고 해요.  특히 자바스크립트를 이용한 간단한 함수들을 소개할게요. 1. nullCheck 함수 먼저, 사용자에게 입력을 요구하는 경우가 많죠?  이때 입력값이 비어있다면 사용자에게 친절하게 알려주는 것이 중요합니다.  그래서 만든 함수가 바로 nullCheck입니다.  이 함수는 특정 ID를 가진 입력 필드의 값을 체크하고, 값이 없으면 알림을 띄워줍니다. > function nullCheck(id, msg) { var temp = $("#" + id).val(); if (!temp) { alert(msg); $("#" + id).focus();.. 2024. 10. 31.
JavaScript로 Map과 List 클래스 구현하기 -  안녕하세요! 오늘은 JavaScript를 사용하여 Map과 List 클래스를 직접 구현하고, 이를 활용한 간단한 웹 애플리케이션을 만들어보겠습니다. 함께 살펴보시죠! 1. Map 클래스 구현먼저 Map 클래스를 만들어 보겠습니다.  이 클래스는 키-값 쌍을 저장하는 기능을 제공합니다.function Map() { this.elements = {}; this.length = 0;}Map.prototype.put = function(key, value) { this.elements[key] = value; this.length = Object.keys(this.elements).length;};Map.prototype.get = function(key) { return thi.. 2024. 10. 30.
자바스크립트로 HTML 색상 코드 다루기 - 안녕하세요, 여러분! 오늘은 웹 개발에서 색상을 다루는 방법에 대해 이야기해보겠습니다.  HTML과 CSS에서 색상 코드를 사용하는 것은 기본적이지만, 자바스크립트를 통해 색상을 동적으로 변경하거나 처리하는 방법을 배우면 웹 페이지를 더욱 매력적으로 만들 수 있습니다. 색상 코드란?HTML에서 색상 코드는 두 가지 주요 형식으로 제공됩니다:Hexadecimal (Hex) 코드: #RRGGBB 형식으로, 예를 들어 #FF5733은 빨간색과 주황색이 섞인 색입니다.RGB 코드: rgb(R, G, B) 형식으로, 각 색상의 값은 0부터 255까지의 숫자로 표현됩니다. 예를 들어 rgb(255, 87, 51)은 동일한 색상을 나타냅니다. 자바스크립트로 색상 변경하기자바스크립트를 사용하면 HTML 요소의 색상.. 2024. 10. 30.
자바스크립트 JSP 페이지 include 방법에 대하여! -- 안녕하세요? 오늘은, JSP 페이지 내에서의 페이지 include 방법에 대해서 알아보도록 하겠습니다.* JSP 페이지 내에서의 정적인 Include 사용법※ @은 Directive 라는 의미로써, 포함하는 문서에 정적으로 컴파일이 되므로, 하나의 파일로 인식하며, 변수 등을 공유합니다. * JSP 페이지 내에서의 동적인 Include 사용법※ 의 action을 이용하는 구문으로써, 파일을 각각 컴파일 한 후 두 파일의 실행 결과를 한 곳에 합쳐서 출력하므로, 변수 등을 미공유하기 때문에, Parameter를 따로 넘겨받아야 합니다. 위의 두 방법은 원격지의 페이지를 포함하지 못하므로 JSTL을 이용하기도 합니다. * In JSTL 사용법※ 태그는 좀 더 일반적이고 강력한 기능을 가진 로써, 와 .. 2024. 9. 27.
자바스크립트 EL태그와 JSTL태그의 정의와 사용법에 대하여! - -안녕하세요? 오늘은, 자바스크립트의 EL태그와 JSTL태그의 정의와 사용법에 대해서 알아보도록 하겠습니다. EL (Expression Language)과 JSTL (JavaServer Pages Standard Tag Library)은 JSP (JavaServer Pages)에서 데이터를 쉽게 처리하고 표현하는 데 사용되는 기술입니다. EL (Expression Language) : EL은 JSP 페이지에서 Java 객체의 속성에 접근하고 표현할 수 있도록 돕는 언어입니다.  문법은 기본적으로 ${} 구문을 사용하여 표현합니다. 셋팅 방법에 대해서 알아도보록 하곘습니다. 1. maven 사용시, web.xml 에 하단 라이브러리 내용 선언 or 디펜던시 추가     jstl-c     /WEB-I.. 2024. 9. 27.
자바스크립트의 동기(synchronous)와 비동기(asynchronous) 처리에 대하여! - -안녕하세요? 오늘은, 자바스크림트의 동기와 비동기 처리에 대해서 알아보도록 하겠습니다.: A와 B의 작업이 실행되는 시각의 차이 동기(synchronous: 동시에 일어나는, 同期: 같은 시기) : 요청과 결과가 동시에 일어남, 요청을 받고, 바로 응답을 해줌, 설계가 간단하고 직관적, 결과가 주어질 때까지 대기, 반환시 반환값 리턴 비동기(Asynchronous: 동시에 일어나지 않는, 非同期: 같은 시기가 아닌) : 요청과 결과가 동시에 일어나지 않음, 동시에 다른 작업이 가능, 시간이 오래걸림, 반환시 콜백의 인자 리턴 예제) var f = require('f');var d = f.readFileSync("file.txt","utf8");console.log(d);f.readFile("file.. 2024. 9. 27.
자바스크립트 CORS(Corss Origin Resource Sharing)과 대처방안에 대하여! -- 안녕하세요? 오늘은 CORS (Corss Origin Resource Sharing)과 그에따른 대처방안에 대해서 알아보도록 하겠습니다. CORS (Corss Origin Resource Sharing)란? : CORS(교차 출처 리소스 공유)는 웹 브라우저에서 구현된 보안 기능으로, 한 출처(도메인)에서 실행되는 웹 애플리케이션이 다른 출처에서 리소스를 요청할 수 있도록 허용하거나 제한합니다. 이는 웹 애플리케이션의 보안을 유지하고 악의적인 사이트가 민감한 데이터에 접근하는 것을 방지하기 위해 중요합니다. CORS (Corss Origin Resource Sharing) 발생 이유는, 보통 Https에서 Http로 요청을 하였을때 혹은, 서로 다른 도메인에서 자료를 가져올 때 발생합니다. 그럼, .. 2024. 9. 27.
vue 설치 및 개발환경 셋팅 - -안녕하세요?오늘은, 프론트엔드 중에서 자바스크립트 기반의 프레임워크인 Vue.js의 설치에 대해서 알아보도록 하겠습니다. vue 프로젝트를 만들기 위해서는, 우선 node.js와 npm이 설치가 되어야 합니다. 아래 사이트에서 node.js를 다운합니다. https://nodejs.org/ko/  다운로드가 완료 되었으면, 설치파일을 실행시켜 줍니다. Next 버튼 클릭동의에 체크를 해 주신 후, Next 버튼 클릭   설치 경로를 지정해 줍니다.   Next 버튼 클릭  설치할 항목들을 선택 해줍니다.   Next 버튼 클릭   Next 버튼 클릭  Install 버튼 클릭 설치 완료 모습입니다.   Finish 버튼 클릭  - 이제, vue 명령어와 빠른 프로젝트 생성 및 관리를 할 수 있도록 .. 2024. 9. 9.
리액트 프로젝트 만들기! 리액트 프로젝트 간단 생성 (create-react-app 사용) - 1. create-react-app 설치명령어 입력 : npm install -g create-react-app              (=npm i -g create-react-app) npm을 이용해, create-react-app 설치 완료 화면 2. create-react-app 을 이용해 프로젝트 생성 명령어 입력 : create-react-app 프로젝트명 create-react-app을 이용한, 리액트 프로젝트 생성 완료 화면 3. 개발 서버 실행 프로젝트 디렉토리 위치에서 명령어 입력 : npm start npm을 이용한, 리액트 프로젝트 개발서버 실행 화면 npm을 이용한, 리액트 프로젝트 개발서버 정상 실행 화면 리액트 프로젝트 실행 완료 후, 정상 브라우저 접속 화면 2024. 9. 5.
앵귤러 (=Angular) 개념 및 특징 정리 - [정의]2009년에 발표한 구글에서 만든 자바스크립트 프레임워크자바스크립트로 만든 클라이언트 측 MVC/MVVM 프레임워크 모던 단일 페이지웹 어플리케이션 개발의 정수  [특징]자바스크립트로 작성할 코드량을 줄여줌: DOM을 선택/조작하는 코드 작성 불필요 양방향 데이터 바인딩이 가능: 모델의 데이터와 뷰 데이터가양방향 데이터 바인딩이 되어모델이 바뀌면 뷰 데이터도 같이 변경됨 HTML, CSS, 로직 등의 개발 영역의 분리: 기존에는 DOM 조작과 이벤트 처리를 위해HTML을 숙지하고 있어야 했지만,AngularJS는 뷰 코드와 로직 코드가명확히 분리   [개념 및 주요요소] Model: 단순 자바스크립트 객체로 된 데이터: 보통 JSON으로 표현되는 어플리케이션의특정한 데이터 구조: JSON 데이.. 2024. 9. 5.
뷰 (=Vue (/vjuː/)) 개념 및 특징 정리 - - 개념 : Java Script 기반의 2세대 프레임워크 중 하나: React에서 영향을 받음: 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크: 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계: 핵심 라이브러리는 뷰 레이어만 초점을 맞추어,  다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉬움: 현대적 도구및지원하는 라이브러리와 함께 사용한다면, 정교한 단일 페이지 응용프로그램을 완벽하게 지원 가능  - 출처 : https://kr.vuejs.org/ Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.org 2024. 9. 2.
리액트 프로젝트 만들기! 리액트 (React) 설치 부터, 환경설정, 기본 셋팅까지! -오늘은, 리액트에 대해서 알아보고,리액트 사용을 위한 필수 설치 및 환경 설정을 해보도록 하겠습니다.   - 리액트 사용을 위한 필수 설치 및 환경입니다.  node.js 설치 (npm)React project 설정webpack 설치babel 설치React 설치 및 설정 (webpack+babel 프로젝트)Hot module replacement 설치...    1. node.js 설치합니다. (npm) : 다운로드 사이트 → https://nodejs.org/en/ Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org  ※ npm ( Node P.. 2024. 9. 2.
리액트 (=React) 개념 및 특징 정리 - - 단순 개념 : 페이스북이 만든 사용자 UI 구축을 위한 컴포넌트 기반 라이브러리: 오직 사용자의 View에만 초점을 맞춤: Reuting 같은 기술이 미포함( but, 현재는 프레임워크 위치 수준 > 커뮤니티의 활발성 ) - 대표적인 특징 1. JSX 문법: 자바스크립트 안에서 html 문법을 사용하여 view를 구성할 수 있게 도와주는 자바스크립트 문법 2. Component 기반: 하나의 html 코드가 아닌, 여러 부분을 분할해서 코드의 재사용성과 유지보수성을 증가 3. Virtual DOM: DOM의 한계를 탈피기 위해 나온 대안: 변화를 가상 돔에서 미리 인지 후 변화( = 불필요한 렌더링 및 연산 비용의 절감화 ): 바뀌지 않은 부분과 바뀐 부분을 자동으로 감지 후 업데이트( = 가상 .. 2024. 9. 2.

티스토리툴바