노란색으로 warnings이 뜨는 이유? eslint 문제! eslint 란? 잘못된 코딩 관습을 잡아주는 문법 체크사항 라이브러리 이런 warnings을 보기 싫으면 ? 상단에 코드 추가 /* eslint-disable */ 문법적 warnings이 사라짐! 예제 1) 좋아요 버튼 만들기 JSX에서 클릭함수는 이렇게 사용한다. onClick = {클릭될 때 실행할 함수} onClick = {()=>{}} //콜백함수로 디자인 가능 camelCase를 사용하고 { 중괄호 }를 사용하고 중괄호 안에는 함수 따봉을 클릭하면 좋아요 수가 올라가게 만들기! 이때 좋아요는 누르면 바로 변하므로, state에 넣어주는 것이 효율적이다. 이때 함수로 state값을 변경하려고 하니 변경이 되지 않았다. 이유는 stat..

jsx문법이란? 자바스크립트 파일 안에서 html을 직관적으로 작성하기 위해 도와주는 react 내장 문법 특징 class 선언 , 리액트는 태그 내에 class라는 키워드를 사용하지 않고 className 을 사용한다. 데이터 바인딩이 쉽다는 점 데이터 바인딩이란? 자바스크립트 데이터를 html에 넣는 작업을 의미documemt.getElementById()... 이럴 필요가 없음! 서버에서 가져온 데이터를 html에 보여줘야함! 넣는 방법은 {중괄호}를 사용하여 변수로 선언, 함수도 렌더링이 가능 로고를 import 해서 이미지를 넣는 방법 , 변수명도 가능 html에 여러가지 속성도 data-binding이 가능한데, html중 style 속성은 object로 ! { 속성명 : 속성값}을 사용, 이..

https://nodejs.org/ko/ node.js 최신 버전으로 설치하기 visual studio code 사용하기! 원하는 폴더를 만들어서 visual studio code에서 file - open folder로 이동 터미널 열어서 리액트 프로젝트 생성 명령을 입력한다. npx create-react-app 프로젝트명 npx : 라이브러리 설치를 도와주는 명령어 (node.js 설치가 잘 되어있어야 이용이 가능하다.) create-react-app : 리액트 셋팅이 다 된 boilerplate, 만들기 쉽게 도와주는 라이브러리 설치 하면 리액트에 필요한 파일이 다 생성이 된다. 코드 짠 것을 미리보기 띄우는 법 npm start 실시간으로 라이브 개발 서버를 띄워줘서 크롬으로 미리보기 가능하다. ..

리액트 설치 없이 간단한 코딩이 가능한 사이트 https://replit.com/ The collaborative browser based IDE Replit is a simple yet powerful online IDE, Editor, Compiler, Interpreter, and REPL. Code, compile, run, and host in 50+ programming languages. replit.com react 는 spa = 싱글 페이지 어플리케이션으로 웹페이지가 하나밖에 없다. (html 파일이 딱 하나) 이 내용을 자동으로 업데이트 해주므로 refesh 할 필요가 없다. -index.html 기억해두기 -main.jsx html 과 app.jsx파일을 연결해주는 것! 즉 html과..