전체 글21 [javascript] 자바스크립트 객체지향 - Object Oriented Programming(OOP) 객체지향 자바스크립트는 객체지향 프로그래밍 능력을 가진 언어이다. 객체지향 프로그래밍은 실제 세계에 기반한 모델을 만들기 위해 추상화를 사용하는 프로그래밍 패러다임이다. 객체지향 프로그래밍은 관계성 있는 객체들의 집합이라는 관점으로 접근하는 소프트웨어 디자인으로 볼 수 있다. 각 객체는 별도의 역할이나 책임을 갖는 작은 독립적인 기계로 볼 수 있는 것이다. 객체지향 프로그래밍은 보다 유연하고 유지보수성이 높은 프로그래밍을 하도록 의도되었다. 또한 객체지향적인 코드는 개발을 보다 단순하게 했고, 시간이 흐른 뒤에도 보다 쉽게 이해할 수 있도록 했으며, 복잡한 상황이나 절차들을 덜 모듈화 된 프로그래밍 방법들보다 더 직접적으로 분석하고, 코딩하고, 이해할 수 있도록 만들었다. - 객체지향 자바스크립트 개요 .. 2020. 1. 28. [javascript] Arrow Function 이모저모 const foo = (num) =>{ return num++ } // 리턴값이 간단한 한줄의 화살표 함수는 아래와 같이 작성할 수 있다. const foo1 = num => num++ // 인자가 하나라서 num을 감싸는 소괄호()를 생략 // 리턴값이 간단해서 return을 감싸는 중괄호{} 및 return 생략 const foo2 = num => (num++) // 혹은 return만 생략할 수 있다. 화살표함수의 화살표가 두개인 형태 (첨에 보고 띠용했다.) curried function(Currying)(커링함수) 이라고 하는 것 같다. 인자로 함수를 받는 것. 참고 : https://stackoverflow.com/questions/32782922/what-do-multiple-arrow-fu.. 2019. 11. 5. [javascript] 개행문자(\n) 줄바꿈 처리 및 특정 단어 바꾸기 개행문자 바꾸기 \n을 로 변경 1. forEach 웬 forEach? 할수도 있지만 리액트(react) 프로젝트를 했었을때 줄바꿈을 forEach 혹은 map을 사용해서 했었다. 안녕하세요 \n줄바꿈 \n연습을 \n하고 \n있습니다.\n\n\n\n줄바꿈이 \n잘 \n 될까요? 2. replace + 정규식 안녕하세요 \n줄바꿈 \n연습을 \n하고 \n있습니다.\n\n\n\n줄바꿈이 \n잘 \n 될까요? 하면서 코드의 마지막을 pInner = pInner.replace(/\\n/gi,''); 라고 작성했는데 콘솔에만 바뀐값이 나오고 화면에는 출력이 안되었다. pInner은 pTag.innerHTML를 담은 하나의 string값이기 때문에 변수 pInner의 값만 바뀌고 pTag의 실제 innerHTML값.. 2019. 11. 4. [javascript] DOM 요소에 각각 이벤트 걸기 wrap이라는 클래스를 가진 ul 안의 li에 각각 접근하여 클릭 이벤트를 걸어주고 싶을 때. 예시 : 각 li를 클릭하면 li안의 텍스트가 콘솔에 찍힌다. 1번 2번 3번 4번 5번 6번 7번 8번 9번 1. for문을 이용하여 접근 const li = document.querySelectorAll('.wrap li'); for(let i= 0 ; i{ console.log(e.target.innerText); }); }; 2. forEach를 활용하여 접근 const li = document.querySelectorAll('.wrap li'); li.forEach((v)=>{ v.addEventListener('click',(e)=>{ console.log(e.target.innerText); }) .. 2019. 11. 3. [javascript] 자바스크립트 이벤트와 이벤트 헨들러 MDN에서 가장 일반적인 카테고리를 참고했다. 그 외 더 자세한 정보는 하단의 참고 페이지 링크에서 확인 이벤트 사용법 Element.addEventListner('click',(e)=>{ //클릭되었을 때의 코드 // e.target // e.type // e.screenX // e.screenY // e.ctrlKey // e.altKey ... ETC }) 이벤트 핸들러 사용법 - 이벤트 앞에 on을 붙히면 된다. - HTML은 대,소문자를 구분하지 않지만 리액트 등에서는 구분을 해서 써 주어야 한다. 버튼 핸들링 제거 버튼 마우스 이벤트 * 포인팅 장치 : pc는 마우스, 모바일은 손 등 이벤트 이벤트 핸들러 발생하는 시점 click onClick 포인팅 장치 버튼이 엘리먼트에서 눌렸다가 놓였을 .. 2019. 11. 1. [React] 리액트 인라인 스타일 적용 더블브라켓을 사용하여 인라인 스타일을 적용할 수 있다.(권장되지 않음) 2019. 10. 27. 이전 1 2 3 4 다음