분류 전체보기62 자바스크립트 얕은 복사, 깊은 복사 자바스크립트에서 값은 원시값과 참조값으로 나뉜다.원시값NumberStringBooleanNullUndefined참조값ObjectSymbol원시값은 값을 복사 할 때 복사된 값을 다른 메모리에 할당 하기 때문에 원래의 값과 복사된 값이 서로에게 영향을 미치지 않는다const a = 1;let b = a;b = 2console.log(a); //1console.log(b); //2하지만 참조값은 변수가 객체의 주소를 가리키는 값이기 때문에 복사된 값(주소)이 같은 값을 가리킨다.const a = {number: 1};let b = a;b.number = 2console.log(a); // {number: 2}console.log(b); // {number: 2}이런한 객체의 특징 때문에 객체를 복사하는 방법.. 자바스크립트 문법 2024. 6. 18. 한 입 크기~ 리액트 todo 1. 구현 조건구현 화면은 위와 같음Todo 추가/체크/삭제/검색 기능 2. UI 구현component 나누기 (Header, Editor, List/TodoItem )3개의 component로 나눔HeaderEditorList기본 레이아웃 설정App.cssbox-size: border-box;margin: 0 auto; 가운데 정렬display: flex; flex-direction: column;.App { border: 1px solid gray; box-sizing: border-box; max-width: 500px; width: 100%; margin: 0 auto; padding: 20px; display: flex; flex-direction: column; gap:30px.. 리액트 2024. 6. 17. 코딩앙마 VOCA 1. 2. PUT(수정)아는 단어인지 체크하는 부분은 상태를 유지하는 게 좋음 -> PUT메소드를 이용하여 단어의 isDone필드를 수정하자 // Words.js...function toggleDone() { fetch(`http://localhost:3001/words/${word.id}`, { method: "PUT", headers: { "Content-Type": "application/json", // 보내는 리소스의 타입 (html, 이미지 등) }, body: JSON.stringify({ // body에는 수정을 위한 정보들, JSON문자열로 변환 ...word, isDone: !isDone, }), }).then((res) => .. 리액트 2024. 6. 17. 타이핑 게임 ( setInterval, axios.get() 등 ) 새로운 지식보다는 게임이라서 로직에 빠져들어야 했다. +_+ 좋은 예제 Math.floor(Math.random() * array.length) buttonChange 1. 버튼 비활성화 상태에서 시작 2. axios 로 데이터 다운 후, 활성화 ::: removeChild('loading') # 버튼 동작 (비활성화- loading 후 활성화) - cursor: pointer; - cursor: not-allowed; #ccc ## 종료->게임오버?(초기화) # 타임아웃시 동작?? 클리어인터벌, 그리고??? 시간 초기화. 다시 스타트 # run() 1)getWords() -> buttonChange(게임시작) 2)실시간으로 상태체크 :checkInterval = setInterval(checkStatu.. 자바스크립트 예제 2023. 1. 21. display:flex, position:relative tistory 글 작성 단축키 Ctrl + i block 속성을 inline-block 으로 변경하거나, div 에 float 속성 등. 여러가지 편법 같은 스킬들이 많아졌다. flex, relative 이런 것들을 전체적으로 이해하기 위해서는 먼저 구조를 잡아야 한다. 1. display: inline / block / inline-block / flex / grid 1. 요소는 display 속성이 있다. 화면에 어떻게 표현될지. ( display: none, inline, block, inline-block, flex, grid ) 이하 html 을 구성하는 요소들은 inline이나 block 속성을 갖고 있다. inline 속성은 '안녕하세요' 같은 텍스트나 이미지 등 block 은 텍스트나 이미.. html_css 2023. 1. 12. css 가상 선택자: 형제 + ~, a[href^="http"] 등 1. * : 자식 요소 전체 : 테스트용도. 브라우저 과부하 * { margin: 0; padding: 0; } 별표는 페이지에 있는 전체 요소를 대상으로 합니다. 많은 개발자가 margin과 padding 값을 0으로 세팅하려고 이 선택자를 사용합니다. 간단한 테스트 용도로서는 괜찮습니다. 그러나, 저는 여러분에게 이 별표를 실전에서 사용하지 말라고 권합니다. 브라우저에 과부하가 걸리고, 사용하기에 적절하지 않습니다. #container * { border: 1px solid black; } 이 코드는 #container div의 자식 요소 전체를 대상으로 합니다. 한 번 더 말하지만, 이 선택자를 과다하게 사용하지 마세요. 2. #container 사용은 최소화(←가상클래스). 웬만하면 클래스로 #c.. html_css 2023. 1. 9. html에 data-*사용법 오디오 플레이어를 구현해보다가, 어떤 버튼을 조작하는지 헷갈리기 시작. js 로 조작한 버튼을 알려줄려니, onClick 시, 버튼의 id 를 넘겨주면 되겠다 싶었다. 일반 function을 쓰면, this는 window를 가리키기 때메, 화살표 함수로. 언젠가 본듯한 dataset 속성을 이용하면, js 에서 음원을 조절할 수 있겠다 싶어서, dataset을 해봤는데, 그냥 되네? -_-; 역시, js 는 그냥 갖고 놀아봐야혀. id : this.id class : this.className data-속성 : this.dataset.value 그래서, btnPlayFunc(this.dataset.value) 이제, js 에서 음원을 배열에 담아 놓고, 랜덤플레이나 재생 곡, 순서등을 설정할 수 있겠네?.. html_css 2023. 1. 6. js 타이머 업그레이드 + 할 일 + 시계 + 오디오 붙이기 타이머 디자인에 감동 받으며 따라했다가, 일상 프로그램으로 업데이트해서 실사용하기로 했다. Nas 에 올려놓고, 가족들이 사용하는 앱으로 만들기로 했다. 쉽게 생각했는데, 와우... 이것만 해도 엄청 복잡했다. Todo, Clock, 위치와 온도는 전에 Nomad 코더 따라하면서 했던것을 거의 복/붙 했다. 투두 리스트 로컬 스토리지 조작: 다시 스터디 후, 기능 업그레이드. 드래그 앤 드롭으로 구현하기. 오디오 객체 asmr 을 만들다가, 오디오 객체 다루면서... 주화 이비마에 빠져들었다. 오디오 객체 처음 다루면서, 뜬금없이 욕심이 나서, 나스에 아파치가 작동하고 있어서, 이걸 이용해보기로 했다. 네트워크 드라이브에 노래를 넣는다 -> php 에서 디렉토리를 읽은 후, json 형식으로 쏴준다. 오.. 자바스크립트 예제 2023. 1. 6. 리액트/JS 뮤직 앱 리액트 버전자바스크립트 버전https://www.youtube.com/watch?v=G88qF9JNNi0&t=0s 리액트 2023. 1. 5. js ToDo 앱 : 로컬스토리지 저장/삭제 노마드 코더 ToDo 와 유사 https://www.youtube.com/watch?v=Ttf3CEsEwMQ 자바스크립트 예제 2023. 1. 5. 15개의 JavaScript 프로젝트 빌드 - 바닐라 JavaScript 코스 강의가 무려 8시간이 넘는 거였어... 덜덜 https://www.vanillajavascriptprojects.com/ Javascript Projects || John Smilga Javacript Projects Projects are the most practical way to learn any language, and Javascript is no exception. Solidify your knowledge of Javascript by creating these cool projects. join the course www.vanillajavascriptprojects.com https://www.youtube.com/watch?v=3PHXvlpOkf4 자바스크립트 예제 2023. 1. 5. 배경음 https://gongu.copyright.or.kr/gongu/main/main.do asmr https://blog.kakaocdn.net/dn/b4h8q6/btrVkXhjXsv/XvxQeRH4dW9tVKKrKUJA2k/tfile.mp3 도서관 https://gongu.copyright.or.kr/gongu/wrt/cmmn/wrtFileMediaPlay.do?fileTp=audio/mp3&filePath=L2Rpc2sxL25ld2RhdGEvMjAxOS8yMS9DTFMxMDAwMi8xMzIyMDgyOF9XUlRfMjAxOTExMjFfMQ== 모닥불1 https://blog.kakaocdn.net/dn/ITrmS/btrVBeBpLFk/AABb8xPnGYtHfx1TaumzzK/tfile.mp3 장작-goo.. 기타 2023. 1. 5. 이전 1 2 3 4 ··· 6 다음