jineecode

0. 알고리즘 1. JS 첫 제시어 저장: word = '자바스크립트' 대답(answer에 저장): prompt(word) 첫 제시어의 끝: word[word.length-1] 대답의 첫글자: answer[0] true라면: answer을 word로 할당 false라면: alert창 팝업 let word = '자바스크립트' let answer = prompt(word) if(word[word.length-1]===answer[0]){ word = answer } else { alert('이건 끝말잇기입니다') } 끝말잇기를 반복한다. 이때 let word 위에 while문을 넣으면 word가 다시 '자바스크립트'로 대체되기 때문에 let answer 위에 넣어주어야 한다. let word = "자바스크립..

1. 터미널에서 실행. npm run start 2. 실행 종료. ctrl C JS 코딩하는 법 1. public 폴더는 index.html 이 있는 곳. ( 이 react 파일을 실행한 결과가 담긴 html 이다. ) 2. root public/index.html html의 #root가 src/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') ); document.get..

REACT를 설치하기 전에.... node.js와, npx를 설치해주자. npx 설치법: npm install npx -g (node.js 와 npm이 깔려있어야 함. npm은 nodejs를 설치했다면 같이 깔림) 설치 확인 법 더보기 아래와 같이 설치하지 않아도 다음과 같은 터미널 명령어로 설치가 가능하다. C:\Users\jin>npx create-react-app (파일명) 0. npm install -g create-react-app - 한번 다운로드받고 이후 추가적인 다운로드가 필요없다. - 최신버전을 사용하지 못할 수 있다. npx create-react-app -항상 최신버전의 react를 사용할 수 있다. - 매번 새롭게 다운로드 받아야한다.( 다운로드 이후 삭제되기 때문에 용량 차지 x ..

NodeJS ★LTS(Long Term Support) : 안정화된 버전 Current : 최신 버전 nodejs를 다운받으면 npm도 자동으로 설치됩니다 터미널에 npm -v 라고 치시면 버전이 뜹니다 win + r > cmd > npm -v

들어가기에 앞서... React를 배우려는데 Nodejs는 왜 깔아야하며, npm은 왜 나오는 것일까? nodejs는 backend 영역이라고 생각했던 나는 react에 입문하며 많은 사실을 깨달았다. 😂 JS는 근본적으로 한계와 문제점을 가지고 만들어져 이 점을 보완해줄 무언가가 필요하기 때문에 설치해주어야 할 것이 많다. 0. React 란? 프론트엔드 라이브러리. 왜 react인가? 1. Node.js Chrome V8 Javascript 엔진으로 빌드된 Javascript 런타임이다. 런타임이란? Node.js 에 대한 오해 Webpack 과 Babel 같은 도구들이 자바스크립트 런타임인 Node.js 를 기반으로 만들어져 있다. 해당 도구들을 사용하기 위해서 Node.js 를 설치한다. 2. N..

style의 display를 변경시키는 메서드 1. show() hide() 2. fadeIn() fadeOut() 3. slideDown() slideUp() + eq() 선택한 요소의 인덱스 번호에 해당하는 요소를 찾습니다. $("선택자").eq("숫자"); HTML aaa bbb ccc aaa bbb ccc CSS p { border: 1px solid; padding: 20px 0; display: none; } jquery 결과 show()는 'style=display:block' 을 넣어주고 hide()는 'style=display:none'을 넣어준다. 코드 분석 버튼을 클릭하면, 클릭한 대상의 인덱스를 변수명에 담아, p태그를 일제히 숨기고, 해당하는 요소만을 보인다. $(".tab>but..

1. id=main-title의 배경색을 파란색으로 바꿀 것임. event google 클릭하세요 event는 어떤 사건이며, 버튼을 클릭하면 이벤트가 발생하며 어떤 동작이 일어남. 2. 버튼을 클릭하면 바꿔야하므로 일단 js로 버튼을 가져와야 함. 결과 : 클릭하세요 3. 버튼을 클릭하면 이벤트 배경색을 파란색으로 바꾼다는 것은 동작을 수행한다는 것이며 어떤 기능임. 즉 함수를 만들어야 함 미리 함수를 만들어 놨다가 버튼을 누르면 호출시키도록 코드를 짜야함. 바꿀 부분이 id=main-title 이므로, mainTitle도 가져옴. 5.이제 버튼과 함수를 연결시키자. btn.addEventListener('click',btnClickHandler); 결과 물론 on~ 을 써도 같은 결과가 나온다 btn..

1. document.getEelementById('') DOM (Document object model) DOM (Document object model) header s header section 1 s header section 2 2. getElementsByTagName hello DOM (Document object model) header s header section 1 s header section 2 결과: var title = document.getElementById("main-title"); var titleSpan = title.getElementsByTagName("span"); console.log(titleSpan[0]); 결과: hello getElementsByTagNa..