📚 성장을 위한 기록저장소 입니다.

State는 Component 내에서 유동적으로 변할 수 있는 값을 저장한다. 개발자가 의도한 동작에 의해 변할 수 있고 사용자의 입력에 따라 새로운 값으로 변경될 수 있다 State 값이 변경되고 재렌더링이 필요한 경우에 React가 자동으로 계산하여 변경된 부분을 렌더링 해준다. State를 console.log로 확인해 보면 배열이라는 것을 알 수 있다. import React, {useState} from "react"; // useState를 react로부터 불러온다. function Counter({title, initValue}) { let countState = useState(initValue); //useState로 initValue를 감싸주고, const count = countSta..

저번 글에서, React 개발환경 세팅까지 다뤄보았다. 이제 본격적으로 React를 사용해 보자! React 개발하기 React에서 가장 중요하고, 강력한 기능은 무엇일까? 💡 바로! component기능이라 할 수 있을 것 같다 코드를 작성할 때 같은 기능을 하는 코드를 중복되게 작성하는 경우 만약 그 코드가 10,000번 필요하다면 똑같은 코드를 10,000 번 작성해야 한다….(수정할 때도 10,000번???🥶) react에서는 component를 만들어 같은 기능을 하는 코드라면 딱 하나의 함수 안에 만들어 놓고, 다음부터는 그 component만 불러오면 된다. 결국 가독성이 매우 좋아지며, 유지보수의 편의성 또한 좋아진다. 한마디로 작은 단위의 부품들을 만들어 필요할 때마다 조립해 쓰는 콘셉트..

DOM?? -DOM 이란 웹페이지에 대한 프로그래밍 인터페이스이다. HTML을 해석해서 트리구조로 나타낸 것이며 Document Object Model의 약어이다! 프런트 개발과 DOM은 떼려야 뗄 수 없는 사이이다. 따라서, 열심히 공부해놔야 한다! DOM의 구조는 추상적개념을 빌려오면 트리형태를 떠올리면 된다. ❗️각각의 요소들을 노드라고 부르고, 가장 중요하고 대표적인 노드로 문서노드, 요소노드, 속성노드, 텍스트 노드가 있다. DOM API를 이용하여 요소들을 선택하고 컨트롤할 수 있다. 가장 대표적인 메서드는 다음 등이 있다. document.querySelector() : 해당 선택자로 선택되는 요소를 1개 선택 document.getElementById() : 해당 아이디의 요소를 선택 (가..

프런트 개발 공부 중 비동기 통신에 대해 공부를 시작했다... 여기서부터 나의 고난이 시작되었다 비동기 통신의 개념과 사용법은 이해하였으나, 아직 문법적인 표현들이 익숙하지 않아서 그런지 볼 때마다 낯설다 더욱 익숙해지도록 다시 공부해보자! JS가 실행되는 과정 JavaScript 엔진이 가동돼서 사람이 작성한 코드르 컴퓨터가 이해할 수 있도록 작업한다. dynamic binding : this가 환경에 따라 바뀌는 것을 동적 바인딩이라 한다. JavaScript를 이해하기 위해서 객체가 진정 무엇인지 이해하는 과정이 필요하다. 객체는 관련된 데이터와 함수의 집합이다. 변수를 선언하고 그 안에 여러 가지 값을 할당해주면 그것이 하나의 객체가 되는 것이다. const person = { name: ['Bo..

연산자 : JavaScript에서는 여러 가지의 연산자가 있습니다. 종류를 살펴보면 산술 연산자 : +, -, *, /, %, ** 증감 연산자 : ++ (1씩 증가), -- (1씩 감소) 대입 연산자 : let x = 10 // 오른쪽에 있는 값 10을 x에 대입. 할당 연산자 : 비교 연산자 : == (값이 같다), === (데이터 타입이 같다), `!=` (값이 다르다) 논리 연산자 : && (AND), || (OR), !(NOT) 이렇듯 여러 가지의 연산자들을 자유롭게 작성하기 위해서 많이 익숙해지고 연습이 필수인것같다. 조건문 : if 문 의 기본 구성은 -> if (조건) {수행할 명령} let a = 20; let b = 40; if (a>b) { console.log("a는 b보다 크다")..