JavaScript 검색 결과

해당 글 77건

parentElement vs parentNode

parentElement vs parentNode 자신의 상위 엘리먼트를 찾아 오는 이 두 메서드는 무엇이 다를까? console.log(document.body.parentNode); // 엘리먼트를 출력한다 console.log(document.body.parentElement); // 엘리먼트를 출력한다 어..음.. 똑같은 기능을 하는 것 같은데? 하지만 다음 코드를 실행해보면 그 차이를 알 수 있다 console.log(document.documentElement.parentNode); // #document console.log(document.documentElement.parentElement); // null console.log(document.documentElement.parentNo..
JavaScript 2021. 5. 25. 19:47

Element.closest()

See the Pen QWpMONR by unganam (@unganam) on CodePen. 위와 같이 리스트 안에 아이템 리스트가 존재하고 아이템 리스트 안에 또 버튼이 존재하는 html이 있다 여기서 버튼을 눌렸을 때 해당 엘리먼트가 삭제되게끔 이벤트를 등록하려고 한다 li 이벤트 등록의 경우 const $ul = document.querySelector('ul') const liElems =[...document.querySelectorAll('.item')] liElems.forEach($li=>$li.addEventListener('click',e=>{ $ul.removeChild(e.target) })) 페이지 내에 있는 아이템들을 모두 가져와서 배열로 만든 뒤 클릭 이벤트를 주고 클릭 이..
JavaScript 2021. 5. 24. 13:23

클래스 상속

https://ko.javascript.info/class-inheritance 클래스 상속 class Parent { field = 'a' say(){ console.log('im your father') } } class Child extends Parent{ } 상속받은 클래스 Child는 부모의 메서드와 필드를 다 사용할 수 있다 const ch = new Child() console.log(ch.field) // im your father ch.say() // a 메서드 오버라이딩 위에서 처럼 say 함수를 그대로 사용할 수도 있지만 자체적으로 다른 함수를 사용하고 싶다면 그냥 동일 명의 함수를 필드에 작성하면된다 class Child extends Parent{ say() { console.l..
JavaScript 2021. 5. 23. 14:23

local/session Storage

로그인 시스템을 개발할 때 토큰 값을 임시로 저장해두는 용도로 loaclStoarge의 set, get기능을 급해게 검색해서 썼는데 개념을 확실히 잡고 가려고 정리 공통점 두 스토리지는 동일안 메서드와 프로퍼티를 제공하고 있다 setItem(key, value) – (키,값) 쌍을 보관 getItem(key) – 키에 해당하는 값을 받아옴 removeItem(key) – 키와 해당 값을 삭제 clear() – 스토리지 초기화 key(index) – 인덱스에 해당하는 키를 받아옴 length – 스토리지의 길이 차이점 localStorage 같은 도메인의 경우 데이터가 모든 창과 탭에서 공유된다 브라우저나 OS를 껏다 켜도 데이터가 사라지지 않는다 session Storage 현재 떠 있는 탭 내에서만 데..
JavaScript 2021. 5. 22. 14:52

fetch API

리액트로 axios를 써봤지만 서버와 통신을 해봤지만 바닐라로 fetch만 사용해서 서버와 통신하라고 좀 버벅인 느낌이 있어서 정리 개념부터 차근차근 알아보는 것은 아니고 실제로 사용한 코드를 보면서 어떻게 사용한다 라는 느낌 fetch 보통 콜백지옥을 벗어나고 가독성을 높이기 위해 async/await와 같이 쓰인다 async function check () { const response = await fetch('url') } 이렇게 fetch의 url외에 파라미터로 아무것도 넣지않고 호출하면 get메서드로 요청된다 서버와 통신하는 과정에서 에러가 날 수도 있고 실제로 그렇게 된다면 사용자에게 에러를 알려주어야한다 에러 핸들링 async function check () { const response ..
JavaScript 2021. 5. 21. 14:44

바닐라 자바스크립트로 컴포넌트 만들기 -2

참고 Vanilla Javascript로 웹 컴포넌트 만들기 | 개발자 황준일 Vanilla Javascript로 컴포넌트 만들기 9월에 넥스트 스텝 (opens new window)에서 진행하는 블랙커피 스터디 (opens new window)에 참여했다. 이 포스트는 스터디 기간동안 계속 고민하며 만들었던 컴포넌트를 junilhwang.github.io 기능 추가 현재는 아이템을 추가하는 일만 하고 있지만 좀 더 기능을 추가해서 todo list처럼 작동하게 하고자한다 아이템의 내용을 입력받는 input, 완료/미완료 토글 버튼, 완료/미완료를 기준으로 아이템을 필터하는 버튼 class Items extends Component{ get filteredItems (){ const {filterBy, ..
JavaScript 2021. 5. 19. 21:13

바닐라 자바스크립트로 컴포넌트 만들기 -1

리액트를 배우다 보니 컴포넌트 기반으로 개발을 하는 것이 얼마나 효율적인지 알게됐고 과제 테스트로 자바스크립트로 컴포넌트를 만들어 구현하는 것을 자주 접하다 보니 확실하게 정립해놓고 가는게 나중에 시간을 덜 뺏기겠다 싶어서 공부한 내용 대부분의 내용이 여기를 참고했다 파일 구조 //main.js import App from './App.js' new App(document.querySelector('#app')) // App.js function App(){ } export default App index.html에서 main.js를 불러오면 main은 App을 불러오고 App에는 js로 만든 컴포넌트들을 다 불러와서 화면이 구성되어있다 components 디렉토리에는 그러한 컴포넌트들이 준비되어있는 저..
JavaScript 2021. 5. 17. 20:55

IntersectionObserve API, 무한 스크롤

원래 이전에 레이지 로딩에 이어서 IntersectionObserve 두 번째 시간 별 다른 검색 없이 쉽게 구현할 수 있어서 쪼금 김이 빠졌다 아마 그런만큼 헛점이 많을 줄 알았으나 구현 퀄리티를 제외하고 코드의 흐름에는 크게 차이가 없는 것 같아서 뿌듯했다 상황은 데이터를 검색 후 200개의 아이템을 응답으로 받은 상황을 가정 구현하려고 하는 바는 다음과 같다 아이템 7개를 먼저 화면에 보여주고 스크롤이 마지막에 닿으면 다음 7개를 밑에 붙여서 추가로 그린다 200번째 아이템까지 반복 매우 간단. 초기 코드 .container{ list-style:none; } .item{ width: 100px; height: 100px; background: black; margin: 10px; list-styl..
JavaScript 2021. 5. 15. 13:32

IntersectionObserve API, 레이지 로딩

우아한 테크 캠프 2차 과제를 대비하면서 프로그래머스에서 과제 테스트를 연습하고 있었는데 무한 스크롤과 레이지 로딩 구현이 나오길래 연습 겸 기록을 남긴다 scroll 이벤트 단순하게 scroll 이벤트로도 레이지 로딩과 무한 스크롤이 구현 가능하다 하지만 이 방법은 두 가지 문제가 존재하는데 스크롤 이벤트를 써 본 사람이라면 알겠지만 휠을 한 번 내릴 때 마다 콘솔창에 무수히 많이 찍히는 이벤트 로그들.. 그 로그들을 봤다면 이게 성능에 영향을 준다는 것을 직감적으로 알 수 있을 것이다 getBoundingClientRect()을 사용해서 특정 엘리먼트의 위치를 파악하려 할 때 DOM전체를 다시 그리는 리플로우가 발생해서 심각한 성능 저하를 가져온다 그래서 나온 것이 IntersectionObserve..
JavaScript 2021. 5. 13. 12:42

소수, 실수 계산 오류, 부동소숫점

알고리즘 문제를 푸는데 소숫점이 포함된 실수끼리의 계산을 해서 출력하는데 말도 안되는 값이 튀어나와서 너무 당황스러웠다 문제를 푸는 코드를 재현하는 것은 너무 귀찮기도하고, 인터넷에 가장 많이 떠도는 예시가 나의 상황과 유사했는데 그 코드를 재현하면 다음과 같다 const float1 = 0.1; const float2 = 0.2; console.log(float1+float2); 이때 로그에 찍히는 결과값은 누구나 예상할 수 있듯 0.3이되어야한다 하지만 실제로 출력되는 값을 보면 0.30000000000000004이 나오는 것을 볼 수있다 왜 이런걸까? 고정소숫점 그리고 부동소숫점 고정소숫점 모두들 알고 있는 사실이겠지만 컴퓨터는 2진수로 모든 것을 처리한다 하나의 실수를 표현하기 위해서 컴퓨터가 사..
JavaScript 2021. 4. 16. 19:42