학원에서 배운 것85 KDT 5th 웹개발자 입문 수업 38일차 리액트 prettier, eslint 로 초기 세팅하기 1. npm i -D prettier 2. npm i -D eslint 리액트 폴더 최상위에 세팅하기 1. .vscode 폴더 생성 2. .vscode 폴더 안에 settings.json 파일 생성 { "[javascript]": { "editor.maxTokenizationLineLength": 2500, "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascriptreact]": { "editor.maxTokenizationLineLength" : 2500, "editor.formatOnSave" : true, "editor.defaul.. 2023. 3. 29. KDT 5th 웹개발자 입문 수업 37일차 배열을 state 로 사용하면..? export default function StateProblem() { let [state, setState] = useState([0]); console.log('initial state : ',state); return ( {state} { state[0] = 1; setState(state); console.log('after state : ',state) }} > 1로 만들기 ) } 실제 콘솔창에 0 -> 1로 변화했는데, html 상에선 변경이 안되는 이유 원시 타입의 경우 값을 저장할 때 그 값 자체를 저장하지만, const location1 = 'korea'; const location2 = 'korea'; location1 === location2 //.. 2023. 3. 28. KDT 5th 웹개발자 입문 수업 36일차 JSX 문법 JSX 는 결국 Babel 에 의하여 JS 로 번역이 되므로 1. class -> className 기존 DOM 요소에 class 를 부여할 때 쓰던 class 를 className 이라고 써야 한다. (class 는 키워드이므로) 2. 데이터 바인딩이 용이 원래 HTML 은 정적인 페이지를 구현하는데 사용이 되었지만 현대의 웹은 서버와 통신을 하여 변경해줄 필요가 있으며 이 경우 DOM 에 JS로 접근하는 document.getElementById() 등을 사용해줘야 하지만, JSX를 사용하면 HTML 요소는 return () 안에, JS의 경우 { } 안에 써주면 된다. 3. JS 는 { } 안에 써준다. 대부분의 JS 문법을 사용할 수 있지만, 예외적으로 if 문 등은 불가능하다. ❥ .. 2023. 3. 27. KDT 5th 웹개발자 입문 수업 35일차 - 2 Virtual DOM 부드럽고 빠르며 아키텍쳐에 대한 고민이 적다. https://ko.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org CDN React 시작하기 function helloWorldButton() { return React.createElement( "button", { onClick: () => {} }, "Hello, React World!" ); } const e = React.createElement; const domContainer = document.querySelector('#app'); const root .. 2023. 3. 24. 이전 1 2 3 4 5 6 7 ··· 22 다음
