☁️ 구름 X kakao DeepDive41 [JavaScript] this 참조 바꾸기 - bind, call, apply 독감으로 골골대다가 회복후에 적는 밀린 블로그..앞으로는 꾸준히 적어야겠다. 에효효 폭풍 업로드 예정https://s2ej1n.tistory.com/58 [JavaScript] 자바스크립트 this 키워드 (메소드, 함수, 생성자함수, 화살표함수, Lexical this)시험기간이 겹쳐서 이제야 올리는 블로그 포스팅자주 사용하지만 잘 모르는 this에 대해 공부하였다.this라는 키워드는 여러 상황에서 다른 것들을 참조한다.메소드에서는 객체를 가리키고함수s2ej1n.tistory.com 저번시간 this 강의에서 보통 함수 안에서 this를 사용하면 Window객체를 참조하게 된다.⇒ 이거를 바꿀 수 있는 방법은 없나? 있다!아래의 방법들이 그러한 방법이다! 1. call() 메소드 사용하기call 메서.. 2025. 1. 9. [JavaScript] 자바스크립트 this 키워드 (메소드, 함수, 생성자함수, 화살표함수, Lexical this) 시험기간이 겹쳐서 이제야 올리는 블로그 포스팅자주 사용하지만 잘 모르는 this에 대해 공부하였다.this라는 키워드는 여러 상황에서 다른 것들을 참조한다.메소드에서는 객체를 가리키고함수에서는 window 객체를 가리킴생성자 함수에서는 빈 객체를 가리킴1. 메소드에서 this 사용 ⇒ 해당 객체를 가리킨다 (참조한다): 메소드에서 this를 사용할 경우 해당 메서드를 호출한 객체를 참조한다. ✏️ 메소드 : 객체의 속성으로 추가된 함수// Method => Object// 객체 audioconst audio = { // 속성타이틀은 a라는 속성값을 가짐 title: 'a', // play는 객체 안에 있으니 메소드 play() { console.log('play this.. 2024. 12. 22. [프로그래모] 유튜브 클론 코딩 - 📝 쇼츠 페이지 기획 이번에는 깃허브도 익히고, 팀프로젝트가 어떻게 흘러갈지 알아보는 느낌으로 간단하게 하기로 하였다.우선 기획서부터 작성!시험기간이라 가장 간단해보이지만 그래도 무한스크롤 기능이 있어 재밌어보이는 쇼츠 페이지를 선택했다.바쁜 시기라 얼마나 구현할 수 있을지는 모르겠지만, 그래도 보이는 화면의 기능은 다 분석해보았다.🎬 쇼츠 메인 페이지 쇼츠 화면 : 가운데 정렬동영상 부분 : 추가 정보 / 프로필 박스 / 제목 / 음악 등 기타 정보(제목과 웹사이트 타이틀 동일)맨 오른쪽 위아래 화살표(오른쪽 정렬) : 클릭시 위 쇼츠, 아래 쇼츠로 이동 (부드럽게 구현)구독 / 좋아요 버튼 : 클릭시 활성화 / 비활성화 스타일링 다르게✔️클릭 전후 변경 ✔️버튼 마우스 hover 스타일🎬 쇼츠 상세 페이지... 누를시.. 2024. 12. 10. [퍼실리테이터] 공부할게 너무 많은 CSS.. 리액트 공부중에 이런 방식으로 CSS를 작성하는 예시를 보게 되었다.그냥 css를 파일로만 따로 만들어서 사용했던 나는 이 방식을 처음 보았고오호, 이거 현업에서도 사용하는건가? 협업할때 불편한거 아닌가?실제 현업에서는 무엇을 사용할까? 싶어서 프론트퍼실님을 찾아갔다. 그래서 알게 된 사실1. 순수 CSS (그냥 CSS 파일 따로 파서 작성하는거)는 현업에서 잘 사용하지 않는다.2.. 위의 경우... 보통은 버튼별, 검색창별로 스타일 컴포넌트로 빼놓거나 modul.css 자주 사용한다.3.. 현업에서는 modul.css 또는 styled component (CSS in JS)Tailwind Css (라이브러리) *부트스트랩은 별로 추천하지 않는다고 하심. https://tailwindcss.com/ Ta.. 2024. 12. 4. [JavaScript] 자바스크립트 (이벤트의 세 단계 흐름, Event Bubbling, Event Capturing, Event Delegation) Event Bubbling: 가장 깊게 중첩된 요소에 이벤트가 발생했을 때 이벤트가 위로 전달되는것을 말함. (bubble up)그림에서는 3번이 가장 깊게 중첩되었음.3번→ 2번 → 1번 순으로 진행됨.3번요소, 2번 요소, 1번 요소에 그 이벤트에 대한 핸들러가 있다면3번→ 2번 → 1번 순으로 진행됨. div -> form 순으로 alert 뜸 --> FORM DIV P 이벤트 버블링 중단: event.stopPropagation()FORM DIV P Event Capturing: 이벤트 버블링과 다르게 제일 상단에 있는 요소에서 아래로 이벤트가 내려오는 것이걸 이해하려면 실제로 이벤트가 어.. 2024. 12. 4. [JavaScript] 자바스크립트(Event Listenr & Event 객체, Event 종류 모음) DOM Event“어떠한 버튼을 클릭했을 때 어떠한 액션이 일어나게 하려면 어떻게 해야 할까요?”Event Listener마우스를 이용해서 버튼을 클릭할 때는 클릭 “이벤트"가 발생한다.⇒ 이렇게 이벤트가 발생했을 때 어떠한 액션을 위한 함수(= 이벤트 리스너)를 호출한다.addEventListener()어떠한 이벤트가 발생했을 때 이벤트 리스너를 호출하기 위해서는 이벤트 리스너를 해당 객체나 요소에 등록해주어야한다. 1. Property Listener자바스크립트 코드에서 프로퍼티(객체의 속성)로 등록 (=onload 같은 속성에 함수(핸들러)를 할당하는 방식)⇒ 이벤트 핸들러를 DOM 객체의 프로퍼티에 할당하는 방식= 즉, 이벤트를 특정 객체에 속성으로 등록하는 것window.onload = func.. 2024. 12. 3. 이전 1 2 3 4 5 6 7 다음
