dev/javascript158 [javascript] 자바스크립트 fetch로 formdata post 보내기 폼 데이터를 전송할 때 JavaScript의 fetch api를 사용하면 데이터 전송을 세밀하게 제어할 수 있습니다. 이는 submit과 동시에 데이터를 전송하고 새 페이지로 리다이렉션하는 표준 HTML 동작으로 처리하지 않고 최소한의 dom 조작으로 그냥 백그라운드에서 더이터 전송을 처리하고 효율적으로 통신할 수 있도록 합니다. 준비 post 메시지를 보내는 작업을 하기 전에 post로 보낼 form이 필요합니다. 간단하게 사용자 이름과 비밀번호 두 개의 입력필드를 가지는 양식을 만들어보겠습니다. 먼저 index.html 파일을 만들고 다음의 코드를 입력합니다. Submit 위 코드를 실행하면 다음과 같은 화면을 얻게됩니다. form에 submit 이벤트 추가 먼저 폼 항목을 선택하고 submit 이벤.. 2022. 9. 1. [express.js] post 받는 서버 만들기 이 포스트에서는 express.js를 사용해 간단하게 post 메소드를 받는 서버를 만들어 보겠습니다. post 메소드는 HTTP 프로토콜을 통해 데이터를 전달하는 가장 일반적인 방법으로 post 메소드를 사용해 클라이언트가 보낸 정보를 request body에서 가져오는 방법을 알아보겠습니다. 여기 작성한 모든 코드는 macOS에서 작업했습니다. 프로젝트 생성 node.js의 웹 프레임워크인 express.js를 사용해 서버를 만들기 전에 콘솔에서 적당한 위치에 npm 프로젝트를 생성합니다. $ mkdir test-express && cd test-express $ npm init -y 위의 코드로 test-express 라는 디렉토리를 만들고 그 안에서 npm 프로젝트를 초기화 했습니다. 'npm i.. 2022. 9. 1. [javascript] 자바스크립트 키보드 입력 추가하기 (엔터키 입력) 계산이나 게임을 만들기 위해서는 숫자나 방향키 등 키보드 입력이 필요한 경우가 있습니다. JavaScript는 이같은 상황을 해결하기 위해 키보드 입력 이벤트를 지원합니다. 키보드 입력 이벤트를 추가하는 방법은 꽤 간단하지만 여러가지 권장하지 않는 상황이 있습니다. 이 튜토리얼에서는 2022년에 키보드 입력 이벤트를 추가하는 올바른 방법을 보여줍니다. 키보드 이벤트의 종류 키보드 이벤트를 추가하려면 document 객체에 다음 중 하나를 listen 하면 됩니다. keydown: 모든 키가 눌렸을 때 실행, 눌린 키의 코드 제공 keypress: 문자, 숫자, 기호 등 출력 가능한 키가 눌렸을 때 실행 keyup: 눌렸던 키가 놓아졌을 때 키가 눌릴 때 마다 이벤트 객체가 생성됩니다. 다음의 코드로 객체.. 2022. 8. 31. [javascript] 자바스크립트 배열 비교 방법 (compare two arrays) 참고: https://www.30secondsofcode.org/articles/s/javascript-array-comparison 단순 비교 JavaScript에서 느슨하거나 엄격한 등가연산자(== 또는 ===)로 두개의 배열을 비교하면 대부분의 결과는 false가 됩니다. 심지어 두개의 배열이 동일한 항목을 동일한 순서로 가지고 있더라고 마찬가지입니다. 왜 이런 결과가 나오냐면 JavaScript에서 배열과 객체는 값을 비교하는게 아니라 객체의 주소를 비교하기 때문입니다. 이는 다음의 예제는 원하는 결과를 내주지 않는다는 말입니다. const a = [1, 2, 3]; const b = [1, 2, 3]; a === b; // false JSON.stringify 일반적인 해결 방법으로 많은 사람들.. 2022. 8. 26. [javascript] 자바스크립트 정규식으로 메일 주소 검증 참고: https://sisiblog.tistory.com/244 정규식 let regex = new RegExp("([!#-'*+/-9=?A-Z^-~-]+(\.[!#-'*+/-9=?A-Z^-~-]+)*|\"\(\[\]!#-[^-~ \t]|(\\[\t -~]))+\")@([!#-'*+/-9=?A-Z^-~-]+(\.[!#-'*+/-9=?A-Z^-~-]+)*|\[[\t -Z^-~]*])"); 테스트 코드 const regex = new RegExp("([!#-'*+/-9=?A-Z^-~-]+(\.[!#-'*+/-9=?A-Z^-~-]+)*|\"\(\[\]!#-[^-~ \t]|(\\[\t -~]))+\")@([!#-'*+/-9=?A-Z^-~-]+(\.[!#-'*+/-9=?A-Z^-~-]+)*|\[[\t -Z^-~.. 2022. 8. 2. [javascript] 자바스크립트 배열에서 최대/최소 구하는 방법 (min, max) 참고: https://stackabuse.com/javascript-get-min-and-max-element-of-array/ JavaScript를 쓰다보면 사용자에게 통계를 보여줘야 하거나 슬라이더의 경계를 설정할 경우 배열에서 최소 값과 최대 값을 알아내야 할 때가 있습니다. 이 글에서는 JavaScript 배열에서 최소/최대 값을 알아내는 방법을 알아볼 것이고 이들 사이의 속도를 비교해 보겠습니다. Math 객체를 이용해 Min, Max 얻기 Math는 수학적 계산을 위해 필요할만한 많은 유용한 메소드와 상수를 가지고있는 JavaScript의 내장 객체입니다. 이 글에서는 두개의 메소드를 살펴볼 것인데 Math.min()과 Math.max() 입니다. 두 메소드 다 매개변수로 숫자의 목록을 받고 .. 2022. 7. 5. [javascript] 자바스크립트 base64 사용 방법 (btoa, atob) 참고: https://attacomsian.com/blog/javascript-base64-encode-decode Base64는 바이너리 데이터를 64진법 표현으로 변환하여 정해진 ASCII 문자 집합으로 표현하는 바이너리-텍스트 인코딩 체계입니다. 이는 일반적으로 바이너리 데이터를 전송할 수 없는 미디어에서 전송 작업을 할 수 있도록 바이너리 데이터를 문자열로 인코딩하는데 사용됩니다. Base64는 전송 중에 이진 데이터가 손실되지 않도록 합니다. Base64는 암호화나 압축하는 체계가 아닙니다. 그저 네트워크를 통해 난독화된 문자열을 전송할 수 있도록 바이너리 데이터를 ASCII 문자 집합으로 변환합니다. 예를 들면 텍스트 데이터를 받는 이메일 서버에 이미지나 파일을 보내는 경우가 있습니다. 이 때.. 2022. 6. 30. [javascript] 자바스크립트 대문자 소문자 전환 방법 이 튜토리얼에서는 javascript를 사용해 주어진 문자열을 대문자로 또는 소문자로 변환하는 간단한 메소드를 살펴보겠습니다. 소개 먼저 javascript에는 대문자가 하나도 포함되어있지 않은 소문자를 반환해주는 toLowerCase() 메소드가 있습니다. 비슷하게 어떤 소문자도 포함하지 않는 대문자만을 반환하는 toUpperCase() 메소드도 있습니다. 이 두 메소드는 모두 문자열을 가져와 다른 표현으로 변환합니다. javascript에서 문자열 작업을 할 때 대소문자를 변환해야할 때가 있을 것 입니다. 예를들어 사용자의 이름을 수집하는 가입 양식을 만드는 경우 또는 이메일 주소를 모두 소문자로 표시하고 싶을 때 toLowerCase() 메소드와 toUpperCase() 메소드를 사용하여 문자열을 .. 2022. 6. 29. [javascript] 자바스크립트 URLSearchParams 사용 방법 URLSearchParams API는 URL query parameter에서 자료를 가져오는 방법을 제공합니다. URLSearchParams 객체 생성 세가지 방법으로 URLSearchParams 객체를 생성할 수 있습니다. 1. URL 객체 사용 let url= new URL('https://sisiblog.tistory.com?mode=night&page=2'); let params = new URLSearchParams(url.search); 위의 코드와 같이 직접 URL 객체를 만들어서 URLSearchParams 객체를 생성할 수도 있고 url.search 대신 window.location.search를 사용해 브라우저에서 입력받은 값을 사용해 URLSearchParams 객체를 생성할 수 있습.. 2022. 6. 27. [javascript] 자바스크립트 반올림, 올림, 내림 (round, ceil, floor) javascript는 숫자에 대한 반올림, 올림, 내림 같은 연산을 할 수 있도록 round(), ceil(), floor() 메소드를 제공합니다. 이들은 모두 Math 객체의 정적 메소드입니다. - Math.round() 반올림 메소드 round() 메소드는 ceil()과 floor()의 기능을 모두하는 메소드로 볼 수 있습니다. 이 메소드는 소숫점 숫자를 가장 가까운 정수로 반올림 하는 기능을 합니다. let x = 4.7 console.log(Math.round(x)) // Output: 5 let y = 4.2 console.log(Math.round(y)) // Output: 4 let z = 4.5 console.log(Math.round(z)) // Output: 5 console.log(M.. 2022. 6. 27. [javascript] 자바스크립트 팝업 사용 방법 (alert, confirm, prompt) 참고: https://www.w3schools.com/js/js_popup.asp javascript에서는 alert, confirm, prompt 이렇게 세 종류의 팝업 박스를 제공합니다. 1. Alert Box alert 박스는 사용자에게 정보를 전달하기 위해 자주 사용됩니다. alert 박스가 뜨면 사용자는 ok를 눌러야만 합니다. 문법: window.alert("sometext"); window.alert() 메소드는 window 프리픽스 없이 사용할 수 있습니다. alert("I am an alert box!"); 팝업 박스 안에서 개행을 하려면 \n을 사용하면 됩니다. alert("Hello\nHow are you?"); 2. Confirm Box confirm 박스는 사용자의 활동을 재확인 .. 2022. 6. 14. [javascript] 자바스크립트 버튼 클릭 참고: HTML 버튼 클릭 참고: 자바스크립트 버튼 눌림 효과 html의 button을 클릭하면 onclick 이벤트가 발생합니다. 코드 작성자는 이를 활용해 버튼이 눌린 경우 javascript 코드를 실행하도록 할 수 있습니다. 이러한 onclick 이벤트를 받는 방법은 크게 세 가지로 html에서 직접 받기, javascript로 받기, addEventListener 활용하기 입니다. 1. HTML의 onclick 속성 사용 이 예제에서는 html onclick 속성을 사용해 javascript 함수를 할당하겠습니다. 웹사이트 사용자가 버튼을 클릭하면 그에 해당하는 함수가 실행될 것이고 화면에 alert 다이얼로그를 보일 것 입니다. 버튼을 클릭해주세요 click me html button의 onc.. 2022. 6. 14. [javascript] 자바스크립트 공백 제거(trim, strip whitespace) 1. trim() javascript 문자열에서 공백을 제거하기 위해서는 trim() 메소드를 사용할 수 있습니다. 이는 javascript string의 시작 부분과 끝 부분의 공백을 지워줍니다. 다음은 trim() 메소드의 사용 예제입니다. const str = " Hello World! "; const trimStr = str.trim(); console.log(trimStr); // "Hello World!" trim() 메소드는 매개변수를 받지 않으며 오직 문자열 양 끝의 공백만을 지우는 기능을 합니다. 2. split(), join() trim() 메소드는 문자열 사이의 공백은 지우지 않는데 이와는 다르게 문자열 사이의 공백까지도 제거하고 싶다면 split() 메소드와 join() 메소드를 체.. 2022. 6. 14. [javascript] 자바스크립트 fade-in 페이지 전환 효과 만들기 참고: https://www.digitalocean.com/community/tutorials/js-simple-page-fade-in 페이지 전환 효과는 애플리케이션 사용자의 사용자 경험에 심미적 효과를 줍니다. javascript는 dom(document object model)이 로드될 때를 감지해 css 클래스를 추가/제거 하여 화면 전환 fade-in 효과를 만들 수 있습니다. Step 1 - CSS opacity와 transition 사용하기 먼저 페이지가 열리는 시간과 fade-in되는 시간에 대한 css 규칙을 만들어야 합니다. 이 효과가 어떻게 보일지는 css의 opacity와 transition 속성에 의해 달라집니다. body 항목에 fade 클래스를 추가/제거 함으로 opacity가.. 2022. 6. 13. [javascript] 자바스크립트 forEach 사용 방법 (루프돌기) 참고: https://www.programiz.com/javascript/forEach 이 튜토리얼에서는 javascript forEach() 메소드에 대해 설명합니다. forEach() 메소드는 배열의 요소를 반복하며 함수를 호출합니다. 이 루프 방법은 map 및 set에서도 사용할 수 있습니다. JavaScript forEach forEach() 메소드의 문법은 다음과 같습니다. array.forEach(function(currentValue, index, arr)); 위의 코드를 설명하면 function(currentValue, index, arr) - 배열의 각 항목에 대해 실행할 함수 currentValue - 배열의 값 index (선택 사항) - 현재 항목의 인덱스 arr (선택 사항) - .. 2022. 6. 13. [javascript] 자바스크립트 Date 사용 방법 (현재 날짜 가져오기) 참고: https://www.freecodecamp.org/news/javascript-date-now-how-to-get-the-current-date-in-javascript/ 다양한 프로젝트에서 리소스 생성 날짜나 활동의 타임스탬프 같은 컴포넌트를 만들어야할 일이 있습니다. 날짜와 타임스탬프 형식을 맞추는건 사람을 지치게하는 작업일 수도 있습니다. 이 가이드에서는 이러한 다양한 javascript 날짜 형식을 다루는 방법을 설명하겠습니다. Javascript의 Date 객체 javascript는 Date라는 내장 객체를 가지고 있습니다. 이는 날짜와 시간을 저장하고 그걸 처리하는 메소드를 포함하고 있습니다. 다음 예제에서는 새로운 Date 객체를 생성하기 위해 new 키워드를 사용합니다. const.. 2022. 6. 9. [javascript] 자바스크립트 로컬스토리지 사용 방법 참고: https://www.javascripttutorial.net/web-apis/javascript-localstorage/ 이 튜토리얼에서는 Storage 타입과 javascript localStorage를 사용하여 영구 데이터를 저장하는 방법에 대해 설명합니다. Storage 타입 Storage 타입은 key-value 쌍을 저장하도록 설계되었습니다. Storage 타입은 Object와 같은 추가 메소드를 가지고 있습니다. setItem(name, value) - name을 키로 값을 저장합니다. removeItem(name) - 이름에 해당하는 key-value 쌍을 제거합니다. getItem(name) - 주어진 이름에 대한 값을 가져옵니다. key(index) - 주어진 숫자 위치에 있는 .. 2022. 6. 3. [javascript] 자바스크립트 이메일 검증 방법 (verify email with regexp) 참고: https://stackabuse.com/validate-email-addresses-with-regular-expressions-in-javascript/ 소개 웹 개발자에게 다양한 유형의 사용자 입력을 검증하는 것은 매우 중요합니다. 이는 클라이언트와 서버 사이에 전송되는 데이터의 시작점이 되기 때문에 모든 것이 올바른 발판 위에서 시작하도록 해야 합니다. 또한 사용자 입력은 악의적일 수 있기 때문에 보안도 고려해야합니다. 프론트 엔드에서 입력 유효성을 검사하여 문제를 최대한 피하는 것이 좋습니다. 이 글에서는 정규표현식(regular expression)을 사용하여 이메일 주소를 확인하는 방법을 살펴보겠습니다. Javascript의 정규 표현식 정규 표현식에 익숙하지 않거나 가물가물한 기억을.. 2022. 5. 30. [javascript] 자바스크립트 parseInt 사용 방법 (문자열을 숫자로 변환) 참고: https://www.freecodecamp.org/news/parseint-in-javascript-js-string-to-int-example/ 이 튜토리얼에서는 javascript 함수 parseInt()에 대해 설명하겠습니다. 이 parseInt() 함수는 문자열을 파싱해서 숫자나 NaN(Not a Number)을 리턴합니다. 1. parseInt 작동 방식 parseInt() 함수를 사용하는 주요 목적은 문자열에서 숫자를 추출하기 위함입니다. 이 함수는 입력받은 문자열을 실제 숫자값으로 바꾸어 반환합니다. 구문은 다음과 같습니다. parseInt(string) 다음의 예를 살펴보겠습니다. const myNumber = '3'; console.log(2 + myNumber); // retu.. 2022. 5. 30. [javascript] 자바스크립트 Number 타입 사용 방법 참고: https://www.javascripttutorial.net/javascript-number/ 이 튜토리얼에서는 javascript 숫자 유형과 이를 효과적으로 사용하는 방법에 대해 알아보겠습니다. Javascript의 Number 소개 javascript는 number 유형을 사용하여 정수와 부동소수점 값을 모두 나타냅니다. 기술적으로 javascript number 유형은 IEEE-754 형식을 사용합니다. ES2020에서는 2^53 - 1 보다 큰 수를 표현하기 위해 새로운 타입인 bigint를 기본 유형으로 도입했습니다. 다양한 유형의 숫자를 지원하기 위해 javascript는 다양한 숫자 리터럴 형식을 사용합니다. Integer Numbers 다음은 10진수 정수를 가지는 변수를 선언하.. 2022. 5. 27. 이전 1 ··· 4 5 6 7 8 다음
