본문 바로가기

Frontend136

[Javascript] Object 객체란? ✔️ 객체는 프로퍼티로 구성되어있다. ✔️ 프로퍼티는 키와 값으로 구성되어있다. ✔️ 프로퍼티늬 값에서는 모든 자료형이 허용된다. 빈 객체(빈 서랍장)을 만드는 방법 //객체 생성자 문법 let user = new Object(); //객체 리터럴 문법 let user = {}; 리터럴과 프로퍼티 객체 리터럴 기본형 let user = { name : 'John', age : 12 } 객체 호출 console.log(user.name) //joy console.log(user.age) //27 객체 추가 user.isAdmin = true; console.log(user.isAdmin); //true 객체 삭제 delete user.age; console.log(user.age); //undef.. 2021. 12. 27.
[Javascript] for in / for of 차이 1 for in ✔️ 객체의 열거 가능한 '속성들'을 순회할 수 있도록 해줌. ✔️ 객체의 key 값에 접근 가능. value 값에는 직접 접근 불가 ✔️ 모든 객체에서 사용 가능. //Array let arr = ['a', 'b', 'c']; for(let i in arr){ console.log(i, arr[i]); } //0 a, 1 b, 2 c //Object let object = {a:1, b:2, c:3}; for(let prop in obj){ console.log(prop, obj[prop]); } //a 1, b 2, c 3 //Rendering template literal let TemObject = {a:1, b:2, c:3}; for(let property in object){ .. 2021. 12. 27.
[javascript] resize 이벤트 1 resize 이벤트란? 사용자가 브라우저 창이나 프레임을 변경했을 때 호출되는 이벤트 사용 방법 - window.onresize 속성 - window.addEventListener('reisize', ...) 주의할 점 오직 window 객체에서만 발생한다. window 객체에 등록된 핸들러만 이벤트를 수신한다. 그리고 resize 이벤트는 창의 크기를 미세하게 조절해도 여러번 실행되기 때문에 DOM 수정과 같은 복잡한 처리는 실행하지 않도록 해야한다. * requestAnimationFrame, setTimeout, customEvent 등을 이용해 이벤트를 스로틀(throttle)하는 것이 좋다. 2 resize 이벤트 활용 See the Pen Untitled by yanggjoy (@yangg.. 2021. 11. 29.
[javascript] scroll event 1 스크롤 이벤트란? document view나 element가 스크롤 될 때 발생하는 이벤트. ◾ 스크롤 이벤트에서 주의할 점 스크롤 이벤트는 한번 실행될 때 매우 빠른 속도로 실행된다. 이것을 눈으로 확인해보기 위해 테스트를 해보았다. document.addEventListener('scroll', function(){ console.log('event call'); }) 스크롤 이벤트가 발생되면 콘솔에 event call이 찍히도록 해보았다. 스크롤을 한번만 했을 뿐인데 11번이나 실행되며 만약 이벤트리스너 안에 복잡한 DOM 조작을 넣는다면 컴퓨터는 당연히 느려질 수 밖에 없을 것이다. 그래서 스크롤 이벤트에서는 복잡한 작업을 실행하지 말아야 한다. 그렇다면 이것을 해결할 방법은 없을까? ◾ 스크.. 2021. 11. 29.
css 가시성 제어(overflow/visibility/display) visibility 요소를 화면에서 show/hide 시킬 수 있으며 화면에서 가려지나 그 자리는 지키고 있다. visibility:hidden; 속성값 - visible : 요소가 보임. - hidden : 요소가 보이지 않지만 공간을 잡고 있기때문에 레이아웃에 영향을 미친다. - inherit : 부모 요소의 값을 상속 display 요소를 표시하는 방법을 지정한다. display:none; 요소가 완전히 사라진다. 공간도 차지하지 않는다. overflow 자식 요소가 부모 요소의 범위를 초과할 때 어떻게 처리할지 결정해준다. overflow : hidden; 부모 요소의 범위를 넘어가는 자식요소의 부분은 보이지 않도록 처리한다. 2021. 11. 6.
OAuth 개념 및 동작방식 이해하기 1 OAuth 란? 다른 서비스의 회원 정보를 안전하게 사용하기 위한 방법 고객이 자신의 네이버 아이디/비밀번호를 우리 서비스에 알려주지 않아도, 네이버에 있는 고객의 정보를 우리의 서비스에서 안전하게 사용하기 위한 방법. 2 OAuth 참여자 💻 Resouce server(Facebook, Google, Twitter 등) Client가 제어하고자 하는 자원을 보유하고 있는 서버. 👤 Resource owner(자원의 소유자) Client가 제공하는 서비스를 통해 로그인하는 실제 유저. 📱 Client(웹 어플리케이션) Resource Server에 접속해서 정보를 가져오고자 하는 클라이언트. 3 OAuth Flow 등록(Resgister) Client가 Resource Server를 이용하기 위해서는.. 2021. 10. 30.
반응형

티스토리툴바