e7e

오른쪽 슬라이딩 메뉴를  만들어본 김에 사이드 메뉴도 한번 맹글어보장.자꾸 다른 사람이 만든 걸 가져다만 쓰려하면 정작 필요한 기본 로직 작성 능력이늘지를 않는당.~~ 이건 큰 문제당. 역시 항상 그렇진 않지만, 한번 맹글어보면 생각처럼 어려울 건 없당.그리고 화면으로 로직연습을 하는 건 정말 재밌게 로직 능력을 키워준당. 아래 소스를 복사/붙여넣기로 실행해 보공,(css 빼면 양도 별로 안됨!)차분히 뽀인또를 이해한 다음에, 입맛에 맞게 수정/추가 해 보길 권장!  확인용 메뉴추가 버튼 메뉴이름 서브메뉴1 서브메뉴2 서브메뉴3 서브메..

자바스크립트 2024. 6. 3. 21:52

두발로 우뚝 개발자의 길을 걸으려 하는 패기만땅,이쁨만땅   젊디 젊은 그들은너무도 가져도 쓰는 것에 익숙해져,  간단한 것 조차 만들어 보려는 노력보단먼저 가져다 쓸 껄 찾거나, 따라하기에 따른 결과를  자신의 것인양 오해인지, 착각인지 모를  기어코 기픈 수렁에 기꺼이 자신의 두발을 담근당. 생각을 못하는 것인가?, 안하는 것인가? (분명 습관적 후자당)생각하는 힘을 키우고, 그 힘의 원천근육 논리력을 키워야 한단당.~~ 항상 그렇진 않지만, 실제로 해보면 별거 아닌 것들이 어찌 이리도 많지만,이 별거 아닌거를 직접 생각과 구현을 해보공 아주 쪼끔이라도 코드를 더해간다면 꽤나 듬뿍듬뿍 기쁨과 논리력을 알지 못하는 사이에주머니에 뽈록 챙겨가고 있음을 느낄  수 있당.   화면 오른쪽 슬라이딩 메뉴는 실..

자바스크립트 2024. 5. 30. 21:25

무한 스크롤이나 그 비스무리한 곳에 사용하면 좋을 IntersectionObserver라는 것이 있엉, 요기서 소개한당 부모태그 안의 자식이 부모보다 커질때, 보통 css overflow 속성을 이용 사용자가 스크롤바를 이용할 수 있게 해주는뎅, IntersectionObserver는 특정 자식(target)이 부모 안에서 부모 스크롤바를 움직일 때 몇 퍼센트가 지금 눈에 보이는가?를 관찰해 주고 등록한 포인트들(threshhold)을 지날 때 등록한 callback함수를 불러준당 더 자세한 내용은 역시 자바스크립트의 성지인 MDN에서 확인(아래 링크) https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver 하장. (문서를 읽는 능력은..

자바스크립트 2024. 4. 16. 14:09

인터넷을 사용하다 보면 복사 버튼이 들어있는 사이트들이 꽤 있어서 직접 CTRL+C를 누르지 않고, 마우스로 버튼만 클릭해 주면 쉽게 복사가 되어, 필요한 곳에 CRL+V를 이용하면 된당. 우리가 영역을 선택하고 CTRL+C를 누르면, 메모리의 CLIPBOARD란 곳에 내용이 복사되는뎅, 그걸 이용하는 거시당. 이전엔 아래와 같은 명령어들을 이용했는뎅, 보안상의 이슈가 있어 deprecated 되었당.(쓰지 말란 이야기당!) document.execCommand("copy") document.execCommand("paste") document.execCommand("cut") 아래와 같은 clipboard API를 사용하란당.(2개만 기억하장) navigator.clipboard.writeText() ..

자바스크립트 2024. 4. 16. 08:21

2024.01.08 - [자바스크립트] - Promise(약속) 모르면 바보옹(비동기)글을 읽고 Promise가  맘속에 자리잡았다면, 모두가 그렇진 않겠지만fetch를 이해하지 못할  이유를 책상아래나 모니터 뒤에선 찾을 수 없당. 사실 난 Response객체.text(),  Response객체.json() 메소드가왜 다시 Promise를 리턴하게  맹글었는지는 아직 조금 의문이당.!바로 결과를 리턴하면 사용이 좀 더 편리하지 않았을까앙?가독성?, 실제 Ajax 처리 타이밍이 내가 생각하고 있는 것과많이 다를 깡?  쪼메 궁금하긴 하당 ?  (짐작은 있으나  아직  확신이 없당!) 뭐 암튼  이렇게 만들지 않았을까? 하는 내 추측을 담아  fetch를AJAX와 Promise를 이용해서 직접 일부라도 구..

자바스크립트 2024. 4. 9. 07:53

설마 아직도 Promise(약속)를 모르는 사람들이 현업에도 있다닝!~~ 중학교 시절 친구에게 똥침을 당했던 기억만큼 놀라우리만큼 아프공,아프당~~ 항상 그렇진 않지만 역시 별거 아니당. 띠간을 쪼메 투자해 보장! 마냑 콜백을 모른다면, 여기서 더 읽어도 ㅠㅠ 크게 의미가 없으닝.... 2023.06.09 - [자바스크립트] - 시베리안 허숙희의 자바스크립트 비기닝 12 글을 먼저 차분히 읽고 콜백을 이해하고 다시 오장!(시름 그냥 일콩, 콜백 익장) 보통 비동기는 실행시간이 필요해서, 결과를 바로 return받지 못해, 실행완료 되었을 때, 해당 결과를 콜백함수의 매개변수로 넘겨주는 빵씩으로 마니 사용하는 뎅(AJAX생각?) 요거이 옴팡지게 운이 나쁘면, 비동기 안에 비동기 안에 비동기 식 반복 .....

자바스크립트 2024. 1. 8. 21:51

https://e-7-e.tistory.com/195 글에서 파일 드래그 앤 드랍한 파일들을 AJAX로 전송하는 법을 알아보았당. 구지~ 구지~ 하고 싶진 않지만 form태그를 이용하여 구현/전송하려는 호기심 만땅 소수 열정파들이 있어 form 태그로 전송하는 것도 억지로 구현해보장. 먼저 해결해야 할 문제를 인식해 보장 form 태그를 이용하여 전송하려면 input type=file을 이용해야 하는뎅, 이전 글처럼 사용자가 파일묶음을 마우스로 끌고 왔을 때, 개별 파일의 전송 여부를 체크박스로 제어하려면, 끌고 온 파일들을 개별로 input type=file에 넣어주어야 하는뎅, 요기서 어려움이 발생한당. input type=file의 files 속성(FileList 인터페이스)은 읽기 전용이란 사실이..

자바스크립트 2023. 12. 20. 18:36

외부파일 드래그 앤 드롭1(File Drag and Drop)글에서  사용자 편의를 위한 확장한  드래그 앤 드롭 파일업로드 화면구현에 대해필요한 만큼은 알아 보았당.  이제 기능을 좀더 확장해 보장.조금이라도 포인트에 더 집중하기 위해서, 사용자는 이미지 파일만을 멀티로 선택해서마우스로 끌어 올 수 있고, 우린 그것을 미리보기 해주고, 체크박스를 통해 전송여부를 선택할 수 있다는 아주 제한적인 스토리로 구현해 보장! 제공기능을 피부로 느껴보기 위해 일단 전체 소스를 아래에 붙이니,복사/붙여넣기를 통해 아무 웹서버 위에서 실행시켜 먼저 동작을 확인하장! fullSample.html 외부파일 끌다노킹 이해 파일 리스트 ..

자바스크립트 2023. 12. 19. 20:37