감자의 개발공부 일지

DOM을 꼭 직접적으로 건드려야 할 때 ref를 사용 state만으로 해결할 수 없는 기능 이 있다. 1. 특정 input에 포커스 주기 2. 스크롤 박스 조작하기 3. Canvas 요소에 그림 그리기 위와 같은 상황에서는 DOM에 직접적으로 접근해야 한다. 이를 위해 ref를 사용해야 한다. 1. 콜백 함수를 통한 ref 설정 - ref를 만드는 가장 기본적인 방법 - ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달해 주면 됨 - 이 콜백 하무는 ref 값을 파라미터로 전달 받고 함수 내부에서 파라미터로 받은 ref를 컴포넌트의 멤버 변수로 설정해줌 예제 {this.input=ref}}/> 2. createRef를 통한 ref 설정 - createRef 함수를 사용하면 더 적은 코..

- 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트라고 함 1. 이벤트 이름은 카멜 표기법으로 작성 예제 onclick -> onClick 2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달 3. DOM 요소에만 이벤트를 설정 가능 예제1 -> YourComponent를 클릭할때 doThat 함수를 실행하지 않고 그냥 이름이 onClick인 props를 YourComponent에게 전달해줌 -> 자체적 이벤트 설정 불가능! 예제2 { /* ~ */} -> 전달받은 props를 컴포넌트 내부의 DOM 이벤트로 설정은 가능! - Clipboard - Composition - Keyboard - Focus - Form - M..

- properties를 줄인 표현으로 컴포넌트 속성을 설정할때 사용 - 부모 컴포넌트로부터 자식 컴포넌트로 전달된 데이터를 의미(부모 컴포넌트가 설정) - state와 달리 read-only - 자식 컴포넌트에서 전달받은 props를 변경이 불가능, props를 전달해준 최상위 부모 컴포넌트만 props를 변경 가능 ( 부모요소에서 설정) - 컴포넌트의 상태를 나타냄 - 상태에 따라 변화가 가능 - 직접 변경 가능 - state가 변경되면 컴포넌트를 다시 렌더링 해야함 - 외부에 비공개, 컴포넌트가 스스로 관리 해야함 props state 상위 구성 요소에서 초기 값을 가져올 수 있는가? O O 상위 구성요소에서 변경 할 수 있는가? O X 컴포넌트 내부에서 기본값을 설정할 수 있는가? O O 구성 요..

1. JSX란? JSX(JavaScript XML)는 자바스크립트의 확장 문법으로 XML과 매우 비슷하게 생김 2. JSX의 장점 - 일반 자바스크립트만 사용한 코드보다 JSX로 작성한 코드가 더 가독성이 높고 작성하기도 쉬움 - div나 span과 같은 HTML태그를 사용할 수도 있고 JSX안에 컴포넌트도 작성이 가능하여 활용도가 높음 3. JSX 문법 (1) 컴포넌트에 여러 요소가 있다면 반드시 부모 요소로 하나로 감싸야 가능 예제 - 에러 발생 function App() { return ( Hi! Let's Study React Bye! ); } export default App; 위와 같이 작성하게 된다면 다음과 같은 에러가 발생한다. 본 에러는 부모 요소가 없기 때문에 발생한다. 예제 funct..

1. 기본화면 구성 2. 데이터베이스 생성 data.json { "days": [ { "id": 1, "day": 1 }, { "id": 2, "day": 2 }, { "id": 3, "day": 3 }, { "day": 4, "id": 4 } ], "words": [ { "id": 1, "day": 1, "eng": "book", "kor": "책", "isDone": false }, { "id": 3, "day": 2, "eng": "car", "kor": "자동차", "isDone": false }, { "id": 5, "day": 3, "eng": "school", "kor": "학교", "isDone": false }, { "id": 6, "day": 3, "eng": "pencil", "kor..

첫번째 오류! $ yarn create react-app my-app 다음과 같은 명령어를 통해 새로운 프로젝트를 생성할려고 했는데.. 오류가 발생하였다....😒 해결방법은 다음과 같다 $ yarn global add create-react-app $ create-react-app my-app 오류 해결 😊 두번째 오류! $ yarn add sass classnames react-icons 다음 명령어를 시도하였더니 이런 오류가 발생했다...😒 오류좀 그만나왔으면... 서치결과 ignore-engine 속성이 없어서 오류가 나는것 같다 $ yarn config set ignore-engines true 위의 명령어를 사용하여 엔진 버전이 일치하지 않을때도 커맨드가 진행되도록 설정한다. 오류 해결 😊

Uncaught (in promise) TypeError: Failed to fetch 관련한 에러가 발생했다. 너무 어이없게 오류가 나서 다음엔 문제 없이 진행하기 위해 쓰는글... Uncaught (in promise) TypeError: Failed to fetch와 같은 에러가 발생하는 이유는 크게 2가지이다. 1. URL 주소를 잘못 침 이 경우 localhost를 통해 진행되었다고 가정했을때, localhost:3000/~~~ (X) https:localhost:3000/~~~ (X) 다음과 같은 방식으로 진행된다면 위의 오류가 발생한다! http:localhost:3000/~~~ (O) 꼭 http로 넣어주는걸로...😒 2. CORS처리에서 문제 아직 공부중에 있어서 자세히는 알 수 없지만 ..

React 학습 도중 npm install -g json-server로 json-server를 설치할때 다음과 같은 에러가 발생하였다. 오류 수정방법 1. 윈도우+R을 통해 다음과 같은 실행 창에 powershell를 연다. 2. 다음과 같은 명령어를 통해 정책부분을 확인한다. Restricted=제한되었다는 뜻 3. 제한을 풀어주기 위해 set-executionpolicy unrestricted명령어를 실행해준다. 다음과 같이 변경하시겠습니까?가 나오면 Y를 입력해준다. 4. 그 후 json-server--watch~~명령어를 다시 실행하니 잘 작동한다!😊