js코드를 파일로 만들어서 html에 가져오는 경우에, script 선언 위치를 어디에 할지에 대한 고민이있습니다. 대부분은 body가 끝나는 부분에 선언하는 경우가 많습니다. 그 이유는 ?? 위의 코드처럼 javascript 코드를 head 부분에 선언한 경우에 어떻게 실행되는지를 설명해보면, 브라우저는 해당 html코드를 한줄한줄 해석하게 됩니다. 그러다가 script 태그를 만나, 해당 array.js라는 js파일을 다운받는 과정이 필요하고 실제로 코드에 적용하기 위해서 js파일을 실행하는 시간이 필요합니다. 그러면, 브라우저는 js파일을 다운받고 실행하는 시간동안은 나머지 HTML 코드를 parsing을 하지 못하게 되고, 유저들은 그만큼 기다리는 시간이 길어지게 됩니다. 그렇기 때문에, body..
IT 공부
전 포스팅에서는 props와 state를 이용해서 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 것을 해봤습니다. 그러면, 하위 컴포넌트에서 상위 컴포넌트에 영향을 주는 것은 불가능한가?? 이벤트를 발생시켜 영향을 주는 것이 가능합니다. list 목록을 만들어서, 클릭을 할 때 해당 리스트의 내용을 화면에 보여주는 이벤트를 만들어 볼려고 합니다. 우선 list를 만들어 보겠습니다. 리스트 컴포넌트 추가하기 app.js this.state = { header: {title: 'WEB', subject: 'WORLD WIDE WEB'}, contents: [ {id: 1, title: "HTML", desc: "HTML IS ..."}, {id: 2, title: "CSS", desc: "CSS IS ..
저번 포스팅에서는 상위 컴포넌트에서 하위 컴포넌트로 값을 전달할 때 props를 사용했습니다. 여기서 주목할 점은 props는 오직 읽기만 가능한 값이라는 것입니다. React 공식 document에서는 두개의 코드를 예로들어 설명하고 있습니다. 값의 변경없이 읽기로만 사용되는 경우 function sum(a, b) { return a + b; } 함수가 실행되더라도 a와 b의 값에는 영향이 없습니다. 값의 변경이 있는 경우 function withdraw(account, amount) { account.total -= amount; } 함수가 실행되면 account.total의 값이 변경이 됩니다. props는 위의 두가지의 경우에서 전자에 해당하는 경우에만 사용할 수 있다는 것입니다. 하지만, 개발하..
저번 포스팅에서는 새로운 component를 생성했었는데, App과 Header 컴포넌트 사이에는 아무런 연관도 없이 각자가 독자적인 코드였는데, 동적인 페이지를 만들기 위해서는 서로간 데이터를 주고 받을 수 있어야 합니다. 그것을 할 수 있게 도와주는 것이 props입니다. props는 상위 컴포넌트에서 하위 컴포넌트로 값을 보내고 싶은 경우 사용이됩니다. 즉, 저번 component 생성하기에서 만들었던 App컴포넌트로부터 Header 컴포넌트로 값을 보내고 싶은 경우 App.js import React from 'react'; import Header from './components/Header'; import logo from './logo.svg'; import './App.css'; func..
일단 React의 전체적인 흐름을 파악하기 위해서, index.html, index.js, app.js 파일을 살펴보겠습니다. index.html index.html이 실제로 브라우저에 보여지는 화면인데, 파일안에는 아무 컨텐츠도 존재하지 않습니다. 그런데도, react의 로고나 링크같은 것이 보였던 이유는 태그 때문입니다. index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; ReactDOM.render( , document.getElementById('root'..
React 프로젝트를 생성하는 것에는 여러가지 방법이 있는데, 이번에 해볼 것은 create-react-app을 이용해서 생성하는 방법입니다. node.js 설치 create-react-app 설치 react 새 프로젝트 생성 여기서 create-react-app이란 React프로젝트를 설치하고 실행하는데 필요한 패키지라고 생각하면 된다. npm은 nodeJs package manager로써 nodeJs로 만들어진 여러 프로그램들을 쉽게 검색, 설치, 업데이트, 삭제등을 CLI명령어로 쉽게 가능하도록 도와준다. node.js를 설치하는 이유는 node.js에 npm이 포함되어 있기 때문에 npm을 설치하기 위한 과정입니다. create-react-app 설치 npm install -g create-rea..
