전체 글 (36) 썸네일형 리스트형 React - State와 Props React란? : 사용자 정의 태그 (html 태그와 다르게 반드시 대문자로 시작) === Component props: 우리가 만든 component에 html 태그들처럼 속성을 갖게 하는 것 사용자 태그에 정의한 속성들을 모두 사용자 컴포넌트의 첫번째 인자로 object를 넘겨줌. (첫번째이자 유일한 인자, props) >> 재사용성 state 리액트를 유동적으로 다루기 위해 존재하는 객체 useState() 라는 리액트 함수를 사용하여 State라는 저장공간에 담아 사용 setValue는 값을 바꿀 때 사용. 이를 호출하면 value가 변경된 값으로 setting되어 App 컴포넌트가 reRender. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있지만 props(외부자를 위한)는 (함수.. CSS - display: flex 부모 요소인 Flex Container와 자식 요소인 Flex Item Flxe 기능의 영향을 받는 전체 공간은 부모 요소인 Container 설정된 Flex 속성에 따라 Container 속 자식 요소인 Item들이 여러 형태로 배치 * 배치 방향 속성 _ flex-direction .container { flex-direction: row; /* flex-direction: column; */ /* flex-direction: row-reverse; */ /* flex-direction: column-reverse; */ } * 정렬 속성 메인축 방향 설정 justify-content .container { justify-content: center; /* justify-content: flex-st.. HTML Form input의 유효성 검사를 작동시키기 위해서는 input이 form안에 존재해야 함. input을 form안에 위치시켰을때 엔터를 누를때마다 form은 자동적으로 submit form안의 button 또는 type이 submit인 input을 클릭하거나 enter를 누르면 작성한 form이 "submit" submit은 엔터를 누르거나 버튼을 클릭할 때 발생 > 기본 동작인 브라우저 새로고침 > form submit 기본 동작을 맞는 함수 preventDefault(); vanilla JS Challenges 2022/03/07~2022/03/21 객체 안에 메서드 선언하기 const object = { handleMousEnter: function(){ /// }, handleMouseLeave: function(){ /// } }; 사용한 Event - mouseenter, mouserleave, resize, contextmenu h2.addEventListener("mouseenter", superEventHandler.handleEnter); h2.addEventListener("mouseleave", superEventHandler.handleLeave); window.addEventListener("resize", superEventHandler.handleResize); window.addEventListener("contextmen.. [객체지향의 사실과 오해]_역할, 책임, 협력 관점에서 본 객체지향 01. 협력하는 객체들의 공동체 / 02. 이상한 나라의 객체 - 객체의 특징 여러 객체가 동일한 역할을 수행할 수 있다. 역할은 대체 가능성을 의미한다. 각 객체는 책임을 수행하는 방법을 자율적으로 선택할 수 있다. 하나의 객체가 동시에 여러 역할을 수행할 수 있다. 객체는 상태를 가지며 상태는 변경 가능하다. 객체의 상태를 변경시키는 것은 객체의 행동이다. 행동의 결과는 상태에 의존적이며 상태를 이용해 서술할 수 있다. 행동의 순서가 실행 결과에 영향을 미친다. 객체는 어떤 상태에 있더라도 유일하게 식별 가능하다. - 객체지향의 본질 객체지향이란 시스템을 상호작용하는 자율적인 객체들의 공동체로 바라보고 객체를 이용해 시스템을 분할하는 방법 자율적인 객체란 상태와 행위를 함께 지니며 스스로 자기 자신을.. [ERROR] - Could not find or load main class worker.org.gradle.process.internal.worker.GradleWorkerMain https://blue-mina.tistory.com/94 [ERROR] Intellij Could not find or load GradleWorkerMain 에러해결 검색어를 잘못 선택한건지 몰라도, 이 에러를 해결한다고 3시간이나 걸렸습니다.. 인텔리제이는 코드작성에는 편하지만, 책이나 강의를 따라할 때 세팅을 잘 못해서 발생하는 문제들은 해결이 blue-mina.tistory.com [JAVA] test code 작성법 1. build.gradle 파일에 추가 dependencies { testCompile('org.junit.jupiter:junit-jupiter:5.4.2') testCompile('org.assertj:assertj-core:3.11.1') } test { useJUnitPlatform() } 2. 오른쪽 gradle tap > refresh 3. src 아래에 test폴더 생성 > test 폴더 아래에 java폴더 생성 후 작성 [React JS] Arrow function이란? ▶ 화살표 함수(Arrow function) var/let/const 함수명 = (매개변수) => {실행문} : 일반 함수 표현식보다 단순하고 간결한 문법 : return 명령어 없이도 함수 실행을 종료시키고 값을 반환. : 익명함수, 함수를 재사용하지 않을 목적으로 함수에 이름을 붙이지 않는 것. // 매개변수가 없는 경우 var foo = () => console.log('bar'); // 매개변수가 하나인 경우 var foo = x => x; // 매개변수가 여러개인 경우 var foo = (a, b) => a + b; // 간단하게 한줄로 표현할 땐 "{}" 없이 값이 반환됩니다. var foo = (a, b) => { return a + b }; // "{}" 사용 > 리턴 존재 var foo .. 이전 1 2 3 4 5 다음
