guricode

리액트를 다루는 기술을 읽으며 차분하게 복습하고 있다. 첫번째 목표는 투두리스트를 만들어 배포하는것. 교육을 받을때 미리 만들어서 올린 동기생이 있었는데 뒤늦게 나마 만들려고 해본다. 교재에 들어있던 코드중 new라는 연산자가 있어 검색하게 되었다. 함수로 객체를 생성한 뒤에 변수를 가져와서 적용시킬때 new라는 연산자를 사용한다. new 연산자는 영역을 만들어서 함수 내부의 내용을 실행해 준다. MDN에 있던 내용으로 살펴보자 See the Pen Untitled by leeys (@agent-megurii) on CodePen. 코드의 콘솔로그를 살펴보면 함수 Car 객체에 인자를 넣고 mycar라는 변수에 new 생성자 함수를 사용하여 Car안에 있던 객체의 인자를 부여 했다, 콘솔로 Car와 my..

See the Pen Untitled by leeys (@agent-megurii) on CodePen. 제이쿼리에서 사용하는 draggable 메소드로 axis는 움직이는 축, containment는 선택자를 포함하는 부모요소 revert는 되돌아가는 속성을 키고 끄는 요소입니다.

See the Pen Untitled by leeys (@agent-megurii) on CodePen. 일단 스크립트로 x라는 변수에 70과 80을 넣은 배열을 만들었습니다. 그리고 console.log로 x 를 찍어 확인합니다. (도출되는 값) // [object Array] (2) [70,80] 이제 total변수에 x배열에 있는 0번과 1번의 값을 더한값을 선언합니다. ex) x[0]+x[1]; 그리고 콘솔로 total값을 확인합니다. 150 이걸로 알수있는 사실은 배열의 순서는 0번부터 시작한다는 겁니다. 그러면 x배열에 0번과 1번에는 각각 70과 80이 들어가있습니다. 그러면 2번에는 아무런 값도 없는데 -배열추가하는 첫번째 방법 x[2] = 100;로 x의 배열2번으로 100을 선언해주고 ..

See the Pen Untitled by leeys (@agent-megurii) on CodePen. 1.보통 태그에 있는 클래스로 스크립트에 선언을 한후 선택자로 쓸수 있지만 대상에 id값이 있는경우 선언할 필요없이 바로 선택자로 사용할수 있습니다. 2.이번에는 자바스크립트에 selectedCard라는 함수를 선언하고 select 태그에 onchange를 작성하여 함수를 넣었습니다. 그렇게되면 select박스가 선택될때 seletedCard명령이 실행됩니다. 저는 셀렉트카드함수에 클래스를 추가,제거하는 명령을 주었습니다. 대신 if문을 이용하여value값이 "00"이 아닐경우에만 실행되도록 하였습니다. 연습장에는 태그에 class도 넣어서 클래스 선언시 선택자가 작동하도록 작성되었습니다. id로 쓰..

오늘은 리엑트 배운것을 복습해보겠습니다.. 우선 리엑트 터미널에 진입해서 npx create-react-app 폴더명을 입력해줍니다. 명령어를 입력하면 폴더 생성을 알아서 해줍니다.. 시간이 좀 걸려요 조금 기다리면 리엑트 폴더가 생성됩니다. 아까 명령어로 입력한 testfolder가 생겼습니다. 이제 이 폴더에 진입해주어야하는데 다시 터미널로 갑니다. cd라는 명령어로 폴더에 진입할수 있습니다. 다시 나오고 싶으면 cd..을 입력하면 상위폴더로 나옵니다. 이제 리엑트를 시작해주어야합니다. cd명령어로 해당 디렉토리로 진입했다면 터미널에서 npm start명령을 주게되면 아래 화면이 나오면서 리엑트 실행이 완료됩니다.

See the Pen Untitled by leeys (@agent-megurii) on CodePen. 자바스크립트에서는 const elsome = document.querySelector('.클래스명')로 선택자를 지정할수 있다. 하지만 ul태그 안에 여러개의 li태그를 전부 선택하고 싶을때 querySelectorAll을 사용하여 li태그 전부를 선택자로 묶을수 있다. const elsome = document.querySelectorAll('.클래스명') querySelectorAll로 item-list의 li와 input을 모두 선택해 주었다. button태그에 id값이 btndel인 값을 선택자로 onclick 이벤트를 주었다. id값을 불러와서 명령을 줄때는 const로 선언하지 않아도 사용..

https://nodejs.org/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org (위에 설치링크) 페이스북이 react를 만들어 내면서 react붐이 한번 일어났었습니다. 자바스크립트 기반 런타임이지만 백단서버쪽도 작업 가능하게 해주는 신비로운 물건이라고합니다. 출처 - https://www.npmtrends.com npm trends: Compare NPM package downloads Which NPM package should you use? Compare NPM package download stats over time. Spot trends, pick the winner. w..

자바스크립트 할당연산자에 대해서.. 저번 포스트에서 배운 innerHTML은 태그안의 내용을 바꿔주는 명령어입니다. innerHTML에 여러개의 내용을집어넣으려면 선택자.innerHTML = 내용1 선택자.innerHTML = 내용2 선택자.innerHTML = 내용3 이런식으로 한다면 최종적으로 선택자의 HTML은 내용3만이 출력되게 됩니다. 여기서 산술연산자를 사용해서 명령을 줘야하는데 = 부등호앞애 + 를 넣어허 +=를 만들어주어서 선택자.innerHTML += 내용1 선택자.innerHTML += 내용2 선택자.innerHTML += 내용3 이렇게 만들어주면 내용1,내용2,내용3이 모두 선택자에 출력되게 됩니다. +=라는 연산자는 더하기와 같다고 보시면 됩니다. 이와같이 부등호=앞에 *나 +를 넣..

이번에 배울 언어는 자바스크립트입니다. 출력 자바스크립트(js)에서는 기본적으로 변수 선언과 상수 선언이 있습니다. 변수선언은 계속해서 변하는 값을 선언할수 있고, 몇번이든 계속 쓸수 있습니다. 상수선언은 스크립트 내에서 전부 사용할수 있으며 변하지 않는 속성입니다. html에 div class인 print에게 자바스크립트 내에서 사용할수 있게 상수선언을 하려고 합니다. 아래는 스크립트입니다. 화면에 출력된 내용 = '출력' html에 있는 print라는 클래스에 자바스크립트 내에서 사용할수있는 const라는 선언식을 작성한 후 elPrint라는 이름으로 상수 선언을 했습니다. 이제 선언된 상수로 스크립트에서 명령을 줄수가 있습니다. 오늘 해볼 명령은 HTML내용을 바꿀수 있는 innerHTML입니다. ..