Ella 프론트엔드일지

0. 한줄평 - 자주 바뀔것 같은 데이터들은 state에 저장했다가 html에 {데이터바인딩} 해놓자 - 바뀌지 않는 것들은 state로 굳이 저장할 필요가 없다. - state는 상품명,글제목, 가격 이런것처럼 자주 변할 것 같은 데이터들을 저장하는게 좋다. 1. 리액트의 state란? - 컴포넌트가 가질수 있는 상태 ex) 시계라는 컴포넌트가 있다면 time 이라는 state를 가질 수 있음 2. useState - useState를 사용하기 전에 코드창 상단에 아래와 같이 import를 해야한다. import {useState} from 'react' 🔸useState란? - 우리의 컴포넌트의 상태를 간편하게 생성하고, 업데이트 시키게 해주는 도구 ex) time = 6시 (시간의 상태는 계속해서 ..

리액트 VS 자바스크립트 이벤트 처리하는 방법 비교 자바스크립트에서는 이벤트핸들러를 onclick 으로 표현 리액트에서는 onClick 으로 카멜케이스로 표시하고 있다. 또한 자바스크립트에서는 "" 안에 리액트에서는 {} 안에 함수를 넣고있다. 1) 함수를 만들어서 함수로 전달 Show name이라는 버튼을 클릭하면 ella라는 글씨가 콘솔창에 보이게 해주세요~ function Hello() { function showName() { console.log("ella"); } return ( Hello Show name ); } export default Hello; 2) 직접 이벤트리스너 안에 함수 전달 function Hello() { return ( Hello { console.log(28); }} ..

선언 할당 범위 호이스팅 생성 과정 var 재선언 O 재할당 O function 함수 내부 가능 1. 선언 및 초기화 단계 2. 할당 단계 let 재선언 X 재할당 O {} 블록(중괄호 내부) 가능 1. 선언단계 2. 초기화 단계 3. 할당 단계 const 재선언 X 재선언 X {} 블록(중괄호 내부) 가능 1. 선언 + 초기화 + 할당 1. 호이스팅 호이스팅의 사전적인 정의를 살펴보자 끌어올린다라...뭘 끌어올린다는거지??? 바로 변수나 함수의 선언이 코드 최상단으로 끌어올려지는 듯한 현상을 말한다. 지난번 https://ella951230.tistory.com/entry/자바스크립트-변수-const-let-var 자바스크립트) 변수 const, let, var 1.var , let , const 한눈..

1.var , let , const 한눈에 정리하기 선언 할당 범위 var 재선언 O 재할당 O function 함수 내부 let 재선언 X 재할당 O {} 블록(중괄호 내부) const 재선언 X 재선언 X {} 블록(중괄호 내부) 2. 구체적으로 살펴보기 1) var : 재선언이 가능하다?? 먼말이지? 재선언이 가능하다는 말은 아래와 같이 변수를 선언해주는 키워드를 계속 쓸수있다는 말이다. var만 재선언 가능하고 let이나 const 는 불가능하다. var 이름 = 'kim' var 이름 = 'park' var 이름 ; var 이름; 동일하게 재선언할 때 let 과 const 는 아래와 같이 오류가 난다. 2) 선언과 할당 그림으로 한눈에 보기 3) let 은 재할당이 가능하고, const 는 재할..

✅문제 원인 - 리액트를 설치하고 나서... HTML 태그를 집어넣으려고 하니... emmet기능 즉, 자동완성 기능이 안된다....ㅜㅜㅜㅜ 하드코딩을 무지 싫어하기 때문에 이런건 바로바로 수정해줘야한다. 아래와 같은 코딩을 일일히 자동완성도 안되는거..수작업으로 치고있던 1인 ㅠㅠㅠ ✅문제 해결 1. 비쥬얼스튜디오 코드 열어서 명령팔레트를 연다(컨트롤 + 쉬프트 + p) 2. setting.json 검색해서 사용자 설정으로 들어간다. (기본설정으로 들어가면 안됨. 읽기전용임. 무조건 사용자 설정!) 3. 아래와 같은 문구를 추가해준다 "emmet.includeLanguages": { "javascript": "javascriptreact" } 이제 emmet기능이 될것이다

✅문제 원인 리액트를 처음 설치한 닝겐... APP.js 에서 jsx문법을 적용해서 태그를 바꾸니까 자꾸 아래와 같은 WARNING 표시가 뜬다. 물론...라이브서버에서 바뀐 태그가 잘 보여서 작업하는데는 문제 없는것 같아서 안바꿔도 될것같은데 거슬림.. 아래 warning 메세지의 뜻은 logo라는 변수는 쓰이지 않고 있다. post라는 변수도 쓰이지 않고 있으니 지워라~ 대충 요런뜻이다. 이런거 자꾸 나타나서 지우고 싶음 ✅해결방법 1) 코드를 집어넣는다. 그럴땐, App.js 등 자바스크립트 파일 맨 윗 상단에 아래와 같은 코드를 집어넣는다. Warning을 출력해주는 기능을 Lint 라고 하는데 Lint를 끄는 기능이다. /* eslint-disable */ 이렇게하면 밑에처럼 성공했다고 뜬다. ..