감자의 개발공부 일지

1. var의 개념과 특징var는 JavaScript에서 가장 오래된 변수 선언 방법.ES6 이전까지 주로 사용되었음.호이스팅(Hoisting) : var로 선언한 변수는 코드에서 선언된 위치와 상관없이 가장 위로 끌어올려짐. 즉, 변수를 선언하기 전에 참조할 수 있지만, 값이 할당되지 않으면 undefined를 반환.함수 스코프(Function Scope) : var로 선언된 변수는 블록 스코프가 아닌 함수 스코프를 가짐. 이는 코드에서 예상치 못한 동작을 일으킬 수 있음.예시console.log(x); // undefinedvar x = 10;console.log(x); // 10장점호이스팅 덕분에 변수를 선언하기 전에 사용 가능. 단점함수 스코프 문제로, 블록 내에서 var를 사용하면 의도치 않은 ..

vue 프로젝트를 생성하기 위해 터미널에서 vue create를 실행하였는데 다음과 같은 오류가 발생하였다! 문제해결 vue create 프로젝트이름 --packageManager npm 다음과 같은 명령어를 치면 문제를 해결할 수 있다! 😊

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..

1. trim() 함수 - 앞과 뒤쪽의 공백을 제거해줌 예제 var study = "Javascript를 공부해보자"; print(study.trim() //Javascript를 공부해보자 2. replace() - / /g를 통해 문자열에서 모든 공백을 찾아서 찾은 공백은 ''으로 변환하여 제거해줌 예제 let study = " Javascript를 공부해보자 "; let result = study.replace(/ /g, ''); console.log("[" + result + "]"); //[Javascript를 공부해보자] + replace(패턴매칭(정규식)문자열, 변경할 문자열)인 원형함수에서 g, i m의 의미 g : 발생한 모든 패턴에 대한 전역 검색을 뜻함 i : 대/소문자 구분 안함을 뜻..