Suyeon BLOG

출처 : Do it! 자바스크립트 입문편 DOM 트리가 만들어지는 과정 실시간으로 확인 https://software.hixie.ch/utilities/js/live-dom-viewer/ Study DOM 공부하기 1. Markup test (웹 문서를 작성할 창) 2. DOM view (DOM 트리를 보여주는 창) 3. Rendered view (결과 화면을 보여주는 창)

const Food = ['tomato', 'potato']; const [FirFavFood, SecFavFood] = Food; //FirFavFood -> 'tomato' //SecFavFood -> 'potato'

#1. 숫자 1씩 증가시키기 function App() { const [counter, setCounter] = React.useState(0); const onClick = () => { //setCounter(count + 1); //현재 state 값으로 다음 state 값을 계산하고 싶다면 아래가 더 안전하다. setCounter((current) => current + 1); }; return ( Total clicks: {counter} Click ); } React.render(, 넣을 곳); - setCounter은 counter += 1, React.render(, 넣을 곳) 역할을 동시에 해줍니다. #2. 분을 시간으로 바꾸기 function App() { let [minutes, se..

출처 : 노마드코더 - ReactJS로 영화 웹 서비스 만들기 JSX 란 - JavaScript를 확장한 문법입니다. - 모습은 HTML과 유사합니다. 그래서 JSX로 React 요소를 만드는 게 개발자들 입장에서 굉장히 편합니다. - React.createElement() 는 많이 사용하지 않는 편입니다. 봤을 때 JSX보다 이해하기 어렵기 때문입니다. - JSX의 변수는 대문자로 시작합니다. 소문자로 적어서 HTML의 태그와 헷갈리면 안 되기 때문입니다. //React로 작성 React.createElement( 'h3', {id: 'title', onClick: ()=>{console.log('Click!')}, 'Title' ); //JSX로 작성 const Title = ( {console.lo..

출처 : 노마드코더 - ReactJS로 영화 웹 서비스 만들기 - React를 왜 배워야 하는지, 여기에 노력과 시간을 투자해도 안전한지 알아봅시다. - 무언가를 배울 때 시간이 가장 중요합니다. 만약 2달을 공부했는데 그게 1년 뒤에 사라진 것과, 2달 공부했는데 5-7년 동안 사용되는 것 중 무엇이 더 효율적인가 하면 후자가 정답입니다. 1. React JS를 누가 사용하는가, 규모가 얼마나 큰가 https://trends.builtwith.com/javascript/React - 상위 1만개의 웹사이트에서 44.76%는 React JS를 사용합니다. (위 링크를 통해서 확인할 수 있습니다.) (상위 웹사이트 : 에어비엔비, 인스타그램, 페이스북, 넷플릭스 등) - React JS가 웹사이트를 돌리고..

See the Pen Untitled by OhGod-23 (@ohgod-23) on CodePen.

출처 : Do it! 자바스크립트 입문편 Array를 사용하는 이유 1. 할 일 목록이나 여행 준비물 목록 검토 등을 하는 프로그램에서 새로운 것을 추가하거나 삭제하는 기능이 필요합니다. 이때 Array 객체 기능을 사용합니다. Array 속성 1. concat() - 둘 이상의 배열을 이어주는 역할을 합니다. - 새로운 함수를 만들기 때문에 원래 함수에는 아무런 영향을 받지 않습니다. 2. join - 배열 요소를 연결해주는데 연결할 때 사용하는 기호를 직접 정할 수 있습니다. - 그리고 String형으로 출력합니다. 3. push 와 unshift - push는 배열 마지막에 값을 넣습니다. - unshift는 배열 첫 번째에 값을 넣습니다. (여러 개를 넣어도 상관없습니다.) 4. pop과 shif..

출처 : Do it! 자바스크립트 입문편 객체 종류 1. 내장 객체 - 자바스크립트에서 자주 사용하는 객체가 미리 만들어져 있는 것을 의미합니다. 2. DOM(문서 객체 모델) - 객체를 사용해서 웹 문서를 관리하는 것을 의미합니다. - 이미지를 담는 Image 객체, 웹 문서를 담는 Document 객체가 있습니다. 3. 브라우저 객체 모델 - 웹 브라우저의 주소 표시줄, 창 크기를 관리합니다. - 사용자의 브라우저 종류나 버전을 담고 있는 Navigator, 브라우저에서 방문한 기록을 담는 History, 주소 표시줄 정보를 담고 있는 Location이 있습니다. 4. 사용자 정의 객체 - 자신이 필요할 때 사용할 수 있도록 직접 정의해서 만드는 객체입니다. (object 같이) - let book ..

출처 : Do it! 자바스크립트 입문 for문은 무엇인가 - 초기값이 있으면서 일정한 간격으로 반복할 때 주로 사용합니다. - 따라서 0부터 9까지 반복하는 과정을 수행해야 할 때, for문을 사용하는 것이 적합합니다. See the Pen Untitled by OhGod-23 (@ohgod-23) on CodePen. while문은 무엇인가 - 초기값이나 반복값이 없고 조건에 맞으면 계속 반복을 수행합니다. - while문은 조건에 맞으면 실행하거나 안 맞으면 실행하지 않을 때 사용하고 - do-while문은 조건에 맞지 않더라도 한 번은 꼭 실행되야 할 때 사용합니다. See the Pen Untitled by OhGod-23 (@ohgod-23) on CodePen.

출처 : Do it! 자바스크립트 입문 자바스크립트의 자료형은 기본형과 복합형으로 나누어져 있습니다. 1. 기본형 : Number, String, Boolean, undefined, null - 1. Number : 따옴표 없이 표기된 숫자 자료형입니다. 자바스크립트에서 숫자를 정수와 실수로 구분합니다. - 2. String : '' 또는 ""로 묶어서 나타냅니다. - 3. Boolean : true 또는 false라는 값 두 개를 가진 자료형입니다. - 4. undefined : 변수의 자료형을 정하지 않았을 때를 의미합니다. (ex : 변수를 선언하고 값을 넣지 않았을 때) 이때 자료형을 가진 것이 아니라 그냥 undefined일 뿐입니다. - 5. null : 처음 할당한 값이 더는 유효하지 않을 ..