우당탕탕 초보 개발자

리액트에서 부모 컴포넌트와 자식 컴포넌트가 존재할 때, 자식 컴포넌트에서 부모 컴포넌트의 내장 function을 사용 하고 싶다면 props를 통해서 사용하곤 했었다, 반대로 부모 컴포넌트에서 자식 컴포넌트의 내장 function을 사용하고 싶다면 어떻게 하면 될까? 1. forwardRef 사용함수형 컴포넌트는 인스턴스가 존재하지 않기 때문에, ref를 사용할 수 없다. 따라서 함수형 컴포넌트에 forwardRef를 감싸 주어서 부모 컴포넌트에서 자식 컴포넌트의 DOM element에 접근할 수 있도록 한다. 여기서 궁금한게 생겼었는데 부모 컴포넌트에서 자식 컴포넌트에 접근을 하려면 자식 컴포넌트의 DOM element가 확정이 되고 ref 에 담긴 current 프로퍼티가 확정된 자식 컴포넌트의 DO..

jQuery 기존에 자바스크립트 언어만으로 구현하기 복잡했던 구문 작성들을 간소화하기 위해 개발된 JavaScript기반 라이브러리다. JavaScript 언어로 유용한 함수나 내용들이 이미 만들어져 있는 모음집이라고 생각하면 된다. 복잡한 자바스크립트 구문을 보다 짧고 쉽게 개발이 가능 하고 적은 양으로 코드를 빠르고 풍부한 기능을 제공합니다. DOM요소와 관련된 스크립트를 보다 쉽게 구현할 수 있다. AJAX(비동기 통신), 이벤트 처리 등 폭넓게 지원합니다. jQuery와 관련된 확장된 플러그인, 오픈 API등을 지원한다(차트, 슬라이드, 애니메이션) jQuery 연결 방법 1. jQuery 라이브러를 다운로드 받은 후, 워크 스페이스 안에 경로를 지정해서 저장.(오프라인 방식) 아래의 링크로 접속..

Jquery란? html 상에서 자주 사용하는 javascript 코드를 간단하게 사용할수 있는 기능을 제공해주는 라이브러리 시작하기 태그 안에 javascript cdn을 넣어서 사용 자주쓰는 JQUERY id로 특정 태그 찾기 : $('#id') input의 입력값 가져오기 : $('#id').val() input의 입력값 셋팅하기 : $('#id').val('입력값') 특정태그 숨기기 : $('#id').hide() 특정태그 보이기 : $('#id').show() 특정 태그에 하위 태그 추가하기 : $('#id').append(tag) 특정 태그 삭제 : $('#id').remove() 특정 태그의 하위 태그 삭제 : $('#id').remove(하위 태그) 특정 태그의 모든 하위 태그 삭제 : $..

정규표현식 정규표현식 정규표현식(REGEX / REGEXP : Regular Expression)이란 특정 패턴을 가진 문자열을 찾거나 또는 찾아서 변경할때 사용하는 형식 언어 정규표현식을 이용하면 문자열에 대해 특정 패턴 조건검사 시 또는 치환(변경)시 복잡한 조건을 제시할 필요 없이 간단하게 처리가 가능하다. 자바스크립트 뿐만 아니라 자바나 오라클 등등 다른 언어에서도 사용이 가능하다. 정규표현식 객체 생성 방법 생성자 구문으로 작성 var regExp = new RegExp("script"); //방법 1 정규식 변수를 선언 var regExp2 = /script/; //방법 2 문자열과 비교하기 RegExp 객체에서 제공하는 메소드 (정규식,메소드(문자열)) 정규식.test(문자열) : 문자열에서..

이벤트(Event) 1. 이벤트 모델의 종류 고전 이벤트 모델 인라인 이벤트 모델 표준 이벤트 모델 1-1)고전 이벤트 모델 요소 객체를 가지고 와서 해당 요소객체에 이벤트 속성에 접근한 후 이벤트 핸들러를 연결하는 방식 이벤트를 제거할 수도 있음(이벤트 속성에 null값 대입) document.getElementById()를 활용해서 해당 요소객체에 이벤트 핸들러를 연결한다(document.getElementsByName.. 등 사용가능) 버튼1 버튼1 이벤트 삭제 1-2)인라인 이벤트 모델 요소 내부에 직접적으로 이벤트 속성을 제시해서 실행할 내용을 정의하는 방식 주로 script 태그에 정의되어 있는 함수를 호출하는 방식으로 사용한다. 인라인 이벤트 모델 요소내부에 직접적으로 이벤트 속성을 제시해서..

Window 객체 Window 객체는 자바스크립트의 최상위 객체이며 크게 BOM과 DOM으로 나뉜다. BOM(Browser Object Model) : location 객체, screen 객체, navigator 객체, history 객체 DOM(Document Object Model) : document 객체 window.open() 첫번째 인자값 : 새 창에서 열고자하는 url 주소 두번째 인자값 : 창이름, 창이름이 같은게 이미 열려있으면 새롭게 열리지 않고 원래 열려있던 창에서 새로고침된다. 세번째 인자값 : 창의 특성, 새로 열릴 창의 너비, 높이, 툴바, 스크롤바, 상태표시줄 등등(브라우저마다 다르다) 예) window.open("http://www.naver.com", "네이버") 창의 특성..

객체 배열을 사용한 다량의 데이터 관리 객체 배열을 이용해서 student1, student2, student3, student4의 변수에 데이터를 저장하고 push() 메소드를 활용해서 students 배열에 모든 데이터를 밀어넣고 그 속에서 합계와 평균을 구해보도록 하겠습니다. 객체2 객체 배열을 사용한 다량의 데이터 관리 확인 New 키워드를 사용해서 객체를 생성할 수 있는 함수인 생성자 함수 확인 Data 내장객체 getFullYear() : 년도 getMonth() : 월 getDate() : 일 getDat() : 요일 getHours() : 시간 getMinutes() : 분 getSeconds() : 초 Date 내장객체 확인

객체 객체 객체 선언 및 호출 객체는 {} 중괄호를 사용해서 생성하고 중괄호 안에 이 객체를 필요로 하는 속성들을 정의한다. 속성 : 속성값의 형태로 정의한다. 속성값으로는 모든 자료형의 값을 담을 수 있다. 객체의 형태 var 변수명 = { 속성명 : 속성값, 속성명 : 속성값, 속성명 : 속성값, . . . . }; 객체 실습 대괄호를 이용해서 객체 내부 속성으로 접근 객체명["속성명"] .을 이용하여 객체 내부 속성으로 접근 객체명.속성명 객체의 속성명 제시시 공백이나 특수문자가 포함될 경우 반드시 문자열의 형태로 제시해야 한다. 객체가 가지고 있는 모든 속성들에 순차적으로 접근하고자 한다면 반복문 제시 단, for loop문으로는 불가능하고 for in문을 사용해야한다. 객체의 속성 중 함수 자료..