본문 바로가기

JavaScript228

[javascript] css 제어로 확장형 사이드 메뉴 만들기 안녕하세요. 오늘은 javascript로 DOM의 css style을 동적으로 제어하여 확장형 사이드 메뉴 만드는 법을 알아보도록 하겠습니다. 완성 시 이렇게 만들어지는 모습 확인하실 수 있습니다. 전체코드.html × 회사소개 연혁 비즈니스 연락처 ☰ 메뉴 열기 확장형 메뉴 메뉴열기 버튼 클릭 시 확장형 메뉴가 왼쪽에서 오른쪽 방향으로 나옵니다. 아래 링크 참고하였습니다. https://hianna.tistory.com/671 [Javascript] DOM의 style(css) 변경하기, 읽기 (style, getComputedStyle()) Javascript를 이용하여 DOM 객체를 다루는 방법을 알아보고 있습니다. [Javascript] 선택자, DOM 특정 요소(element) 찾기 [Javas.. 2023. 3. 23.
[JavaScript] fetch 요청 취소 조건에 따라 서버로 보낸 요청을 취소해야 하는 상황이 있습니다. 예를들어, 동영상 업로드를 하는 기능을 사용하다가 업로드 취소를 해야하는 경우가 생기죠. 이때, AbortController를 사용하면 요청 취소가 가능합니다. let abortController = new AbortController(); // fetch 요청 취소 fetch('/videoUpload', { //요청 보내기 signal: abortController.signal, method: 'post', body : "넣고 싶은 데이터" }).then(function(json){ console.log(json); }); const cancel = (e) => { // 취소 이벤트 abortController.abort(); } 2023. 3. 19.
[JavaScript] Selector 태그에 placeholder 적용하기 안녕하세요 이번시간에는 웹페이지를 만들 때 자주 사용하는 select 태그에 placeholder를 적용하는 방법에 대해 알아보겠습니다. 일반적인 input태그나 textarea 같은 경우에는 태그 안에 placeholder = "텍스트"와 같은 형태로 간단하게 구현히 가능하지만, selector에서는 이와 같은 기능을 따로 제공하지 않습니다. 예제 코드 및 실행 화면입니다. 코드의 전체적인 원리는 placeholder용 option을 하나 생성한 뒤 비활성화 처리하고, css에서 invalid 속성을 활용해 해당 option만 색깔을 옅은색으로 처리하는 방식입니다. 과일 종류 사과 귤 복숭아 메론 수박 2023. 3. 18.
[JavaScript] 체크박스 커스텀하기 안녕하세요 이번 시간에는 html에서 기본적으로 제공되는 체크박스를 커스텀하는 방법을 알아보겠습니다. 아래의 코드는 input 태그를 안보이게 처리한 뒤 for 속성을 통해 label 태그와 연결하고 label을 커스텀 하는 형태입니다. index.html label의 for와 input의 id 값을 일치시킴으로써 input과 label을 연결하였습니다. 커스텀 버튼 index.css input 태그는 안보이게 처리한뒤 체크박스 버튼이 true일 때와 false일 때의 css class를 각각 작성합니다. .checkbox_class { display : none; } .checkbox_label { color : #404040; background-color : #c0c0c0; border-radius.. 2023. 3. 4.
[JavaScript]XmlHttpRequest 사용해서 http 통신하기. 안녕하세요 이번시간에는 javascript 에서 웹 브라우저와 웹 서버 간에 데이터를 전송하는 http를 사용하기 위한 객체 인 XmlHttpRequest를 방법에 대해서 포스팅 해보겠습니다. open() 메소드는 (httpRequestMethod, URL, Sync-Async,) 순서로 다음과 같이 작성합니다. httpRequestMethod : get, post 등등.. URL : 요청주소 Sync-Async : true == 비동기, falsce == 동기 send() get, post 요청에 따라 인자값을 넣어 줄 수있고 안 넣어 줄 수도 있습니다. 2023. 3. 3.
[javascript] Webrtc 1:1 영상통화 구현하기 안녕하세요. 이번 시간에는 webrtc 1:1 영상통화를 구현해보겠습니다. 시그널링 서버 코드를 돌리기 위한 node.js 세팅이 완료되었다는 가정을 하고, 영상통화 구현을 위한 코드에만 초점을 맞춰서 설명하겠습니다. + 참고 socket.io 와 express 버전 "express": "4.17.1", "socket.io": "2.3.0" server.js //express는 다음과 같은 것을 제공한다. // 1. http 통신 요청 (Request; GET, POST, DELETE 등)에 대한 핸들러를 만든다. // -> 핸들러는 특정 데이터에 특화되어 있고, 특정 작업에 중점을 둔 함수, 방식 // 2. 템플릿에 데이터를 넣어서 응답을 생성하기 위해 "view" 렌더링 엔진과 통합을 한다 // ->.. 2023. 2. 23.
[javascript]정규식(regular expression) 안녕하세요! 개발을 하다 보면 아이디와 비밀번호가 원하는 조건으로 만들어져 있는지, 이메일이 이메일 양식대로 입력되었는지 확인하는 경우가 많은데요, 오늘은 이 때 사용되는 자바스크립트 정규식에 대해 함께 알아봅시다. 1. 정규식? MDN web docs는 정규 표현식을 "문자열에서 특정 문자 조합을 찾기 위한 패턴"이라고 설명하고 있습니다. 정규식도 하나의 객체로 RegExp의 exec()와 test() 메소드를 사용할 수 있습니다. 또한 정규식은 문자열에서 쓰이는 패턴이기 때문에 String의 match(),matchAll(),replace(),replaceAll(),search(),split() 메서드도 함께 사용가능합니다. 2.정규식 구조 위에서 정규식은 특정조합을 찾기위한 패턴이라고 설명했습니다... 2023. 2. 19.
Formdata와 fetch를 활용하여 서버로 데이터 전송하기 안녕하세요 이번 시간에는 Formdata와 fetch를 활용하여 서버로 데이터를 전송하는 방법에 대해 알아보려 합니다. 일반적으로 서버에 데이터를 전송하기 위해 form 태그를 사용하여 전송합니다. 하지만 자바스크립트로도 FormData()라는 클래스를 통해 데이터를 전송할 수 있습니다. FormData를 활용하면 자바스크립트 로직 상에서 데이터를 서버에 전송해야 할 때 자바스크립트단에 html5 태그를 넣지 않고도 전송이 가능하며, 페이지 전환 없이 비동기로 데이터를 전송하고 값을 되돌려 받고 싶을 때도 유용하게 사용 가능합니다. 기본적인 사용법은 다음과 같습니다. 아래의 예제는 두 종류의 텍스트와 파일을 서버에 전송한 뒤 제대로 서버로 전달이 되었는지 확인하기 위한 코드입니다. 우선 다음과 같은 형태.. 2023. 2. 15.
[Javascript] Local storage를 사용하여 로그인 정보 저장하기. 안녕하세요. 오늘은 웹스토리지 중 로컬 스토리지를 사용하여 로그인 정보(아이디)를 저장하는 기능에 대해 살펴보겠습니다. 이번 포스트는 이전의 [javascript] 웹 스토리지 (local storage & session storage)와 이어지니 상세 개념은 해당 포스트 참고 바랍니다. * 본 포스트에서는 로컬스토리지가 잘 동작하는지, 로그인 정보 저장을 통해 알아보는 것이므로 따로 서버로 아이디 및 비밀번호를 송신하여 확인하는 부분은 생략되었습니다. 우선 UI를 먼저 설정해보겠습니다. 로그인 화면을 위한 CSS와 HTML 코드입니다. login_css.css body { background-color: #29275a; font-size: 16px; line-height: 1.25; letter-spa.. 2023. 2. 5.

티스토리툴바