Lifecycle 생성 / 수정 을 의미한다. Mount 함수 Method 영역 컴포넌트 생성 함수 : 자동실행 특징 화면이 뜨자마자 실행된다. 최초 1번만 화면이 뜰 때 실행된다. 사용법 import { useEffect } from 'react' useEffect(() => {실행문;} , [ 감시할 변수 ]) 예제) let [element , setElement] = useState(true); 컴포넌트 생성 함수 : 자동실행 Mount 함수 useEffect(() => { 실행문 } , []) 컴포넌트 수정 함수 : 자동실행 변수의 값이 바뀔 때 자동 실행된다. useEffect(() => { 실행문 } , [ 감시할 변수 ]) 결과 컴포넌트 생성 함수 = 최초 실행문 컴포넌트 수정 함수 = 최초..
분류 전체보기
컴포넌트(Component) 파일명 : B_Home2.js 컴포넌트는 크게 2가지로 Attibute,Method/ 화면에 구현될 곳 으로 나누어지는 것 같다 (아직까지는 그런듯...) function B_Home2() { Attirube , Method return( 화면에 구현될 곳 ) } 바인딩 변수 선언 바인딩 변수 : 화면에서 수정이 일어났을 때 정상적으로 보이게 만들어주는 변수 let [변수명, 수정(setter)함수] = useState(초기값) 예제) import {useState} from 'react' 로 불러 와 주고 function B_Home2() { Attirube , Method,연산영역 let [ element, setElement ] = useState("초기값") // el..
컴포넌트란? 쉽게 말해서 페이지? 같은 얘 이름(파일명).js => 부모 - 자식 관계를 가짐 : 새로운 html 태그가 생성 App.js 리액트의 첫번째 페이지(컴포넌트) 리액트 서버가 가동되고 처음으로 실행되는 페이지(js) 자식 컴포넌트를 만들어 보자!! 리액트 페이지의 단축키 : rfce 부모 컴포넌트 App.js 우선 import 하는방법 import 컴포넌트명 from "주소값" 그러면 자식 컴포넌트(Home) 생성이 완료되었습니다!
이제 리액트다!! 와이~! 뭔가 다른 것들을 적지도 않고 ㅋㅋ { 부트스트랩은 적지도 않았네.. 넘어가.. } 리액트 매우 기대중 cd hello-world == hello-world 프로젝트(폴더)가 생김 프로젝트 생성 / 연결 완료!! ctrl + c (중단) # 최초 한번만!! npm install -g create-react-app # react 프로젝트 만들기 : npx create-react-app 프로젝트명 # react 프로젝트 실행하기 : cd 프로젝트명 (프로젝트명 폴더로 들어가기) npm start (react 서버 가동 명령어) # react 프로젝트 중단하기 vscode 터미널 창에서 : ctrl + c npm start (= 실행) React / Vue : SPA(Single P..
배열 구조분해 할당 가독성을 증가 시키기 위해 사용 일반코딩 let array = [1,2] 그러면 인덱스 넘버로 array[0] = 1 array[1] = 2 로 썼을 것이다 구조분해 할당 let array = [1,2] let [firstNum , secondNum] = array; firstNum = 1 secondNum = 2 가 된다.
formData 파일 업로드 할 때 일부 사용한다 특징 : 페이지 이동시 데이터를 전송할 수 있습니다. 예시 1) (1) HTML form 태그에서 데이터 가져오기 let sign = document.querySelector("태그") let form = new FormData(sign) (2) form 태그 데이터 가져오기 formData.get("name태그값")
호이스팅이란? 함수의 위치를 강제로 위로 이동시키는 것 대상 1) 함수 선언식 함수 2) 변수 함수 호이스팅 함수 선언식 = function sample() {실행문} = 호이스팅이 일어난다!! 다른 함수표현식 , 화살표함수는 호이스팅이 없다. 변수 호이스팅 var
프론트엔드(react) 통신(axios) 백엔드(springboot) 통신 데이터 전송 시 한글이 인식이 안될 경우가 있다 인코딩 / 디코딩 인코딩 데이터 전송시 인식 안되는 문자들을 일시적으로 브라우저에서 인식 할 수 있는 문자로 바꿈 사용법 encodeURIComponent("문자열") 디코딩 인코딩한것을 다시 한글등으로 바꿈 사용법 decodeURIComponent(인코딩 변수);
Method = 함수 요소 탐색 메서드 .children() : 자식 선택 .parent() : 부모 선택 .parents() : 모든 부모 선택 (쓰긴할까 싶음) .closest("대상부모태그") : 대상부모태그중 가장 가까이 있는 태그를 선택 .siblings() : 형제,자매 (모두 선택) .find() : 찾기 .eq(인덱스번호) : 인덱스 번호 선택 .slice(시작 인덱스,끝 인덱스 (-1)) : 시작인덱스부터 끝인덱스 앞까지 선택 .next() : 다음 태그 (하나) .nextAll() : 다음 모든 태그 .prev() : 이전 태그 (하나) .prevAll() : 이전 모든 태그 .nextUntil("대상태그") : 선택태그 ~ 대상태그 사이까지만 선택하기 / 대상이 밑에 있을때 .prev..
EVENT(이벤트) 일반 이벤트 .click : 클릭 했을때 적용 .dbclick : 노드를 더블 클릭했을 때 .hover : 요소 위에 마우스를 올렸을때 == $("선택자").hover(function(){마우스 올림},function(){마우스 나감}) .mousedown : 요소에서 마우스를 눌렀을때 .mouseenter : 요소에서 마우스가 진입했을 때 .mouseleave : 마우스가 요소에서 벗어났을때 .mousemove : 요소에서 마우스를 움직였을 때 .mouseout : 요소에서 마우스 포인터가 떠났을때 .mouseover : 요소에서 마우스를 올려놓았을 때 발생 .mouseup : 마우스 포인터를 요소에 올려놓고 마우스 버튼을 눌렀다 떼었을 때에 발생 .toggle : 요소를 클릭할 때..
일반 css선택자와 비슷함 selector .class , #id , this , 태그선택자 , * $("선택자") : $ 와 () 로 시작한다. $("*") : 전체 선택자 $(this) : 현재 선택한 태그 $(".class") : 클래스 선택자 $("#id") : Id 선택자 $("태그") : 태그 선택자 등등 css선택자 사용가능
TODO: 기본구문 $(selector).action() $ 기호로 jQuery를 정의/액세스 선택자(selector)를 통해 HTML요소를 "쿼리 (혹은 검색)" 요소에 실행할 수 있는 jQuery의 action() 기본 구문 $(document).ready(function() { $("css선택자").함수("속성명","값"); }) 축약형 구문 $(function() { $("css선택자").함수("속성명","값"); == 실행문 }) 축약형 구문 2) $(function() { $("css선택자").함수({속성명 : "값"}); == 실행문 }) 같은 선택자 여러 함수 Method chaining $(function() { $("css선택자").함수("속성명","값").함수("속성","값"); ==..
