본문 바로가기

전체보기178

S1: React-Router로 트위터 페이지 설치 : npm install react-router-dom Router 구성 1. APP.js 구성 이 과정을 통해 Route에 연결된 path주소에 해당하는 컴포넌트를 연결한다. * BrowserRouter 태그를 app.js에서 사용하지 않고 index.js에서 선언/사용 할수도 있다. 2. Sidebar.js 설정 * a태그와 비슷한 Link는 a태그와 달리 페이지를 새로 가져오지 않는다. 3. NavLink 사용하기 2021. 9. 14.
S1: React 랜덤함수로 명언 출력하기 2021. 9. 13.
S1: React 기초 / JSX규칙 / create-react-app JSX 규칙 1. 하나의 엘리먼트안에 모든 엘리먼트가 포함 ( div로 묶기 ) 2. 클래스선언시 className으로 선언 3. React 엘리먼트는 대문자로 작성해야한다. 4. 자바 스크립트 표현식은 중괄호 사용 (const value 선언등을 내부에서 쓸 때 { } ) 5. if문 대신 삼항연산자를 사용한다. 6. 컴포넌트 안에서 나오는 html 문법들은 ( ) 로 묶어준다. 객체를 JSX표현식으로 바꾸는법 create-react-app 빠른 react spa를 위한 여러 툴체인이다. 설치 : npx create-react-app "만들 폴더명" 2021. 9. 13.
S1: obj[키값] / 스프레드 / deep복사 obj가 객체로 만들어져 있고 새로운 객체를 만들어낼때 obj[키값] 을 하게되면 키값과 일치하는 obj내부 key값으로 객체가 새로 만들어진다. obj["키값"] = 새 키값 배열 구조분해와 ...스프레드 얇은복사와 깊은복사 배열.concat(배열2) 기존 배열에 concat의 배열2 요소를 추가할 수있다. typeof typeof의 반환값은 '타입'으로 문자열로 표기된다. 2021. 9. 10.
S1: 회원가입 폼 만들기 작동 조건 #1. 아이디에는 4자리 이상이 들어가야하며 4자리 이상일시, "사용할 수 있는 아이디" 4자리 미만일시, "아이디는 최소 4자리 이상이여야 합니다." 가 출력된다. #2. 비밀번호와 비밀번호 확인이 같을 시 넘기고 다를 시 "비밀번호가 일치하지 않습니다." 출력 #3. 비밀번호와 비밀번호 확인칸 둘중 하나라도 빈칸일 시 검사를 안하므로 반응이 없다. #4. #1~#3까지 만족해야 회원가입 버튼이 활성화 된다. 작성 아이디 입력, 사용할 수 있는 아이디 div, 아이디가 최소 4자리이상이여야합니다 div, 비밀번호, 비밀번호 입력 확인, 비밀번호가 일치하지 않습니다div, 회원가입의 엘리먼트를 변수에 할당합니다. message의 div에는 hide 클래스를 주어 css로 hide클래스가 적용되.. 2021. 9. 9.
S1: 엘리먼트(El)과 DOM 엘리먼트 추가와 삭제 새로운 엘리먼트 생성 : document .createElement('div') 기존 엘리먼트에 추가 : presentEl .append(newEl) 클래스 추가 : presentEl .classList . add('클래스명') 추가했던 엘리먼트 삭제 : newEl. remove() 모든 자식 엘리먼트 삭제 : 1. document.querySelector('#div') .innerHTML= "" 2. removeChild() for문 / forEach * HTMLCollection과 NodeList은 유사배열이라서 배열의 메소드를 쓸수 없으므로 배열로 바꾼뒤 메소드를 쓸 수 있다. 2021. 9. 8.