DOMContentLoaded - 브라우저가 HTML을 전부 읽고 DOM트리를 완성하는 즉시 발생 (이미지 파일()이나 스타일시트 등의 기타 자원은 기다리지 않음) – DOM이 준비된 것을 확인한 후 원하는 DOM 노드를 찾아 핸들러를 등록해 인터페이스를 초기화할 때 활용 document 객체에서 발생, 이 이벤트를 다루려면 addEventListener 사용 - HTML문서 처리중 태그 만나면 DOM 트리 구성 멈추고 태그 실행 스크립트 실행이 끝난 후 에 나머지 문서 처리 load - HTML로 DOM트리를 만드는게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는것이 끝났을떄 발생 beforeunload/ unload - 사용자가 페이즈를 떠날때 발생 defer, async..
폼 요소 input textarea event 이벤트 설명 특이사항 change 값이 변경될 때 이벤트 발생 텍스트 입력의 경우 포커스를 잃을 때 실행 input 텍스트가 입력될 때마다 이벤트 발생 change와 달리 즉시 실행 cut, copy, paste 잘라내기·복사하기·붙여넣기 할 때 이벤트 발생 브라우저 기본 동작을 막아 이벤트 실행을 막을 수 있음. event.clipboardData 프로퍼티를 사용하면 클립보드에 저장된 데이터를 읽고 쓸 수 있음 submit 이벤트와 메서드 submit 이벤트는 폼을 제출 할 시 발생 주로 폼을 서버로 전송하기 전 내용검증하거나, 폼 전송 취소 할 시 사용
이벤트 리스닝 및 이벤트 핸들러 수행 const onChange = () => { console.log("ya"); }; //카멜케이스로 작성 //() x, 앞쪽에 함수 생성하는것이 좋음 useState 컴포넌트 하뭇가 다시 호훌되는곳에서 변경된 값 반영하기 위해 state로 값을 정의할 수있게 해줌 리액트 컴포넌트 함수안에서 useState 호출 cosnt [현재 상태값, 업데이트하는 함수 ] = useState (); useState Hook 왜 상수형 사용 ? 등호를 사용해서 값 할당 안함 state 업데이트 하는 방법이 아니기때문 input const hello [hello, sethello] = useState(""); const hi = (event) => { sethello(event.tar..
구조분해할당 Destructuring assignment 구조 분해 할당 구문은 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수있게 하는 표현식 배열 구조 분해 let users = ['mike', 'tom', 'jane']; let [user1, user2, user3] = users; //같은것 let user1 = user[0]; let user2 = user[1]; let user3 = user[2]; console.log(user1); //'mike' console.log(user2); //'tom' console.log(user3); //'jane' 배열 구조 분해 : 기본값 let [a,b,c,] = [1,2]; //기본값 없을시 undefined let [a=3, b=4, c=5]..
커맨드 용어 cd 이동 mkdir 폴더만들기 ls -al 파일 보여주기 cat 파일의 내용을 화면에 출력 nano 파일만들기 q 나가기 j/k스크롤바 조작 git init 초기화 .git git repository git status working tree status 상태 git add . 버전으로 만들거니 staging area에 올려라 git commit -m "내용" 버전생성 git log show version 만들어진 버전 확인 git diff 최근 commit vs 현재파일 차이점 보여줌 git difftool 커밋아이디 현재파일 vs 특정커밋 비교가능 git branch 브랜치명 브랜치 생성해줌 git switch 브랜치명 브랜치로 이동 git merge 브랜치 합치기 메인브랜치로 이동해서..
return ( Blog 냥 {post[0]} {setPlus(plus + 1);}}> ♥ {plus} 7월 28일 발행 {post[1]} 7월 28일 발행 {post[2]} 7월 28일 발행 ); } jsx (확장문법) - class넣을땐 className사용 - 변수 넣을 때{ } 중괄호 사용 = 데이터바인딩 {서버에서 데이터를 가져와서 사이사이에 넣음} - style 넣을땐 style={ { 스타일명:'값' } } 괄호안엔 오브젝트,스타일명작성시 바사용 안됨 카멜케이스로 기입 state const [post, setPost] = useState([ "귀여운 고양이가 궁금해?", "귀여운 강아지", "귀여운 햄스터" ]); const [plus, setPlus] = useState(0); state ..
map map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열 반환 const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => {number} ); 엘리먼트를 반환하고 엘리먼트 배열의 결과를 listItems에 저장 왜 key를 넣어야 하는가? key는 react가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 도움. 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야함. 가장좋은방법! 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열 사용 대부분의 경우 데이터ID를 KEY로 사용
터미널에 git이 설치되어있는지 확인 (맥은 자동설치, 윈도우는 설치필요) git 초기화와 로컬 저장소 git init: git 초기화 .git 이라는 숨겨진 폴더가 만들어짐 이게 로컬 저장소 한폴더에 하나의 로컬 저장소만 유지해야만 함 내 컴퓨터에서 폴더 생성 깃배쉬에 들어가서 만든 폴더 들어감 프로그램 만들기 cd 프로그래명 git init 깃 초기화 됨 ls 폴더에 있는 모든걸 보여줌 ls -al 숨겨진 폴더까지 보여줌 git add: commit 하나의 버전이라 생각하면 됨