분류 전체보기62

• JS 타임앤타이머 2) +-5분 추가. ToDo , 날씨 추가 지금까지 웹사이트 전체를 만들겠다. ERP 수준, 쇼핑몰 수준을 생각하다 보니, 지식이 모두 파편적이다 보니, 휘발성이 너무나 강했다. 그래서, 실제로 내가 사용할 수 있는 프로그램으로 만들면서, 아 이런거 있으면 좋을텐데,,,, 하는 것을 구현하면서 공부하기로 했다. 실용성 1. 알람 (정각 알람, 타이머, 현재 시간 등)) 대표적으로 시간관리, 투두 관리도 내가 원하는 대로. 2. asmr 플레이어 asmr 도 찾아서 듣는 것이 아니라, 미리 배정을 해놓는 것이다. 실시간 라디오 방송도? 3. 나만의 ToDo 투두 리스트를 큰 두 분류로 작성하게 한다. (즉시 할일, 오늘 할 일, 완료, 대기) 삭제, 수정, 분류 변경 추가. 드래그앤드롭 추가 4. DB와 서버 작업 일단은 로컬 스토리를 이용하지만,.. 자바스크립트 예제 2023. 1. 4.

• new Audio() 사용 Audio객체는 play()가 호출되어 재생이 시작 되면, 끝까지 재생이 완료되기 전에는 반복 호출하여 재생할 수 없다. 아래 코드는 for문으로 Audio객체.play()를 10회 반복 호출하지만, 브라우저에서 실행해보면 단 한번만 재생된다. (크롬을 제외한 브라우저에서 실행해보시길. 크롬은 사용자의 액션이 없는 상태에서의 오디오 자동재생이 금지되어 있다) 그러나 경우에 따라서는 동일한 음원 파일을 연달아 바로 재생해야할 때가 있다. 특히 게임 개발 중에는 미사일을 발사할 때마다 효과음이 중첩 재생되어야 한다. 필요할 때마다 매번 새로운 Audio 객체를 생성하여 재생하는 것도 방법이지만, 이 경우 Audio 리소스 로드에 시간이 걸려서 딜레이가 발생할 수 있다. 가장 좋은 방법은 미리 여러개의 Aui.. 자바스크립트 예제 2023. 1. 4.

• 

  js 타임앤타이머 기록 (1) https://velog.io/@hanganda23/구글-타이머-JS로-만들기 자바스크립트로 구글 타이머 만들기 타이머 만들기 velog.io 이 글 무심코 봤다가, html, css, js 모두 기초 밖에 몰라서, 연습해보기로 함. 기능 추가해볼까? 5분 추가, -5분 추가 기능 처음부터가 아니라, 현재 지난 시간( 남은 핀수 또는 제거된 핀 수) 에 더하기. 음성 녹음 기능. 일정 시간 후, 녹음한 메세지 (? 회) 재생 위치 기반 오늘의 날씨. 주요 뉴스? 현재 시간에서 시간과 분 사이 : 깜빡이기 3항 연산자로 초((가 홀/짝 일 때마다 : 표시하고, 표시안하기 ${ss % 2 ? ` ` : `:`} let textTime = `${hh < 10 ? `0${hh}` : hh}${ss % 2 ? `.. 자바스크립트 예제 2023. 1. 3.

• append 와 appendChild 차이 append 노드 객체(Node object)나 DOMString(text)를 사용할 수 있습니다.// appendChild는 텍스트 사용 불가 parent.append('텍스트'); 한번에 여러 개의 자식 요소를 설정할 수 있습니다. // append 는 한번에 한 개 document.body.append(div, 'hello', span, p); append 는 리턴값이 없다. console.log(document.body.append~~~ ) // appendChild는 노드객체를 리턴한다. const div = document.createElement('div'); const span = document.createElement('span'); const p = document.createElem.. 자바스크립트 문법/문법 정리 뼈대 2023. 1. 1.

• 

  디지털 시계 : new Date() -> getMonth()+1, getDate(), getDay() const todayDiv = document.getElementById("today"); const nowDiv = document.getElementById("now"); const timeDiv = document.getElementById("time"); nowDiv.textContent = "new Date()"; todayDiv.textContent = "날짜"; timeDiv.textContent = "시간"; function getTime() { // console.log("getTime 테스트"); // const WEEKDAY = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"]; const WEEKDAY = ["일", "월", "화", "수", .. 자바스크립트 예제 2022. 12. 31.

• 

  스톱워치 + 타이머 예제 (setInterval & clearInterval) 유튜브 유노코딩 예제 : https://www.youtube.com/@user-mr8co8gy4p/featured 상당히 쉽게 설명하고, 예제가 좋다. 약간의 응용으로 타이머 추가. 00 : 00 : 00 스톱워치(시작) 정지 리셋 3min 5min 10min @font-face { font-family: 'LABDigital'; font-weight: normal; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/fontlab/LABDigital.eot'); src: url('https://cdn.jsdelivr.net/gh/webfontworld/fontlab/LABDigital.eot?#iefix') format('emb.. 자바스크립트 예제 2022. 12. 31.

• [노마드코더] snowflake 노마드 코더 짱이야. 노마드 코더 강의는 참으로 잘 짜여져있어. 그냥 대충 라이브로 떼우는 강의들과 비교하면 기분 상할꺼임. 노마드 코더 만세. body { background-color: black; } .snowflake { width: 8px; height: 8px; border-radius: 50%; background-color: white; animation: fall 10s linear; /* name-duration-linear일정속도 */ /* Math.random() * 20+최소_동작시간으로 */ position: absolute; top : 1px; } @keyframes fall { from {} to { transform: translateY(100vh); opacity: 0; .. 자바스크립트 예제 2022. 12. 30.

• wsl 에서 zsh 삭제. 접속 불가. ㅠ 해결 I'll throw in a few non-root options as well for future readers: In this particular question, where the user's shell was set to Zsh, which had been uninstalled: wsl -e bash The -e/--exec argument launches the specified executable in place of the shell defined in /etc/passwd. Then, of course, a chsh could be issued from inside WSL. Or we can just shortcut it entirely with: wsl -e chsh -s /usr/bin.. 자바스크립트 문법/문법 정리 뼈대 2022. 12. 29.

• 

  삽질의 연속. 학습기 (리액트+노드+서버) 미친 휘발성 자바스크립트 - 노드js - 리액트 강의를 계속 넘나들면서, 아 이 미친 휘발성 어떡해야하니. 풀스택을 생각하며 뭔가 빨리 끝까지 가보려하니, 학습량은 방대하고, 서로 연결은 각각 찾아서 해야하다보니, 시간은 몇 배로 들고, 학습중인지라 헷갈림만 더 해갔다. 대안은? 이 휘발성을 막기 위해서는 평상시에 조금이라도 써야하는 것이 진리다. 엑셀을 배우려면, 최대한 엑셀을 사용하려하는 것처럼.. 지금까지 단발성으로 만들어봤던 파이썬 서버, PHP 서버, DB서버들 얼마나 많았는데, 남은게 없니. 컴터와 함께 다 사라졌다. 1. QNAP 나스에 ubuntu22.04 + MySQL 세팅! Ubuntu 22.04 와 Nginx , MySQL 등 DB 서버 설치. 이제 사라지지 않을꺼야... ㅠ 이와 같.. 자바스크립트 문법/문법 정리 뼈대 2022. 12. 22.

• 

  vscode 프린트 : 라인넘버, 행번호 출력 settings 로 가서, inherit -> on 자바스크립트 문법/문법 정리 뼈대 2022. 12. 20.

• 

  JSON.stringify(), JSON.parse() JSON(Javascript Object Notation)이란? 서버에서 클라이언트로 데이터를 보낼 때 사용하는 양식이다. 클라이언트가 사용하는 언어에 상관없이 통일된 데이터를 주고 받을 수 있도록 만들어진 텍스트 기반의 데이터 교환 표준이다. 자바스크립트 객체에 프로퍼티 값들을 넣어 JSON형태로 Ajax에 전달한다. 기본 형태는 JSON Object 형태로 객체와 비슷한 형태지만 key와 value의 string 타입은 ""를 붙여 나타낸다. { "name": "hong", "job" : [], "age" : 20, } JSON 메서드 JSON.stringify() javascript 객체를 JSON 문자열로 변환한다. JSON.stringify(value, replacer[optional], spa.. 자바스크립트 문법/문법 정리 뼈대 2022. 12. 17.

• 노마드 ToDo ( javascript - react) 리액트 input value 추출, 배열에 요소 추가, map 으로 리스트 꺼내서 보여주기 1. 입력값 알아내기 onChange 로 인풋 value 를 알아낸다. 2. onSubmit 시, 현재 toDo 를 기존 toDos 에 추가. : 배열 앞에 추가하기 위해 ( ... 스프레드 연산자 이용) submit 기본 동작(새로고침)을 막자. 입력없이, submit 하면 무시. submit 동작 끝에, 인풋박스를 공백으로 만든다. 3. toDos 배열을 화면에 보여주기 toDos 리스트를 map 으로 를 붙여서 loop 4. toDos 리스트에서 요소 삭제 1) 할 일 리스트 (삭제) 클릭 : ()=>deleteToDo(index) 2) toDos 배열.filter(삭제클릭한 인덱스가 아닌 것들로 필터 적용).. 자바스크립트 예제 2022. 12. 17.