개발감성

6개의 li태그 중 하나 혹은 여러개의 노드를 삭제해본다. 클릭한 노드 삭제하기 menu 아이디를 가진 ul태그 아래의 li태그를 클릭했을 때 해당 노드를 삭제한다. 메뉴3을 클릭하면 해당 노드가 삭제된다. 모든 노드 삭제하기 - remove( ) 삭제 버튼을 누르면 ul태그의 모든 자식태그를 삭제한다. ul태그 안의 모든 li태그가 삭제된다. children으로 자식노드에 접근하는 대신 li태그를 직접 지정하여 삭제한다. li태그 수만큼 메소드를 호출하여 일일히 삭제해준다. 짝수 인덱스 노드 모두 삭제하기 - even li태그에 :even선택자를 주어 짝수 인덱스의 노드를 모두 삭제한다. 0,2,4인덱스 노드가 삭제된다. 홀수 인덱스 노드 모두 삭제하기 - odd li태그에 :odd선택자를 주어 홀수 ..

6개의 li태그가 있고 li태그를 클릭했을 때 원하는 위치로 이동하도록 해본다. 그 전에 이동에 사용되는 함수는 노드의 생성에 사용될 수 있다는 걸 알아둔다. [자바스크립트] 노드 생성하기, prepend, append, insertBefore, insertAfter, before, after, prependTo, appendTo 위와 같은 리스트형태에 버튼이나 li태그를 클릭하면 노드를 추가해본다. jQuery없이 JS로 노드 생성 메뉴가 6까지 생성되어 있으니 cnt변수의 초깃값을 6으로 지정하고 버튼이 클릭될 때마다 cnt값 developefeel.tistory.com append( ) - 마지막 위치로 이동 클릭된 li태그(this)를 menu아이디를 가진 태그의 제일 마지막 위치에 추가한다. 메..

위와 같은 리스트형태에 버튼이나 li태그를 클릭하면 노드를 추가해본다. jQuery없이 JS로 노드 생성 메뉴가 6까지 생성되어 있으니 cnt변수의 초깃값을 6으로 지정하고 버튼이 클릭될 때마다 cnt값을 1씩 증가시킨다. createElement를 통해 li태그를 생성해주는 li createTextNode를 통해 li태그안에 텍스트 내용을 생성해주는 liText getElementById를 통해 menu아이디를 가진 ul태그를 지정해 노드를 생성해줄 위치를 지정 만들어진 텍스트 노드를 li태그안에 appendChild를 통해 자식 노드로 붙여준다. li태그를 menu, ul태그에 붙여주면서 노드를 생성한다. 버튼 클릭 시 ul태그안에 li태그가 새로 생성된다. prepend( ) - 제일 앞 위치에 노..

.NET 설치 Download .NET (Linux, macOS, and Windows) Free downloads for building and running .NET apps on Linux, macOS, and Windows. Runtimes, SDKs, and developer packs for .NET Framework, .NET, and ASP.NET. dotnet.microsoft.com 위 링크에서 위를 클릭해 닷넷SDK를 설치해준다. 설치가 되었는지, 버전을 확인해 본다. dotnet new -l 를 통해 생성가능한 프로젝트의 리스트를 본다. 11번째 라인에 ASP.NET 코어를 통해 리액트를 만들어준다는 것을 확인한다. 프론트엔드단은 React.js를 백엔드단은 ASP.NET을 사용하여..

ul태그안에 li태그가 다섯 개 있다. filter( ) - 선택된 태그 중 원하는 걸 필터링 li태그를 지정하고 filter와 find를 적용시켜봤다. filter만 적용되고 find는 적용이 되지 않는다. filter는 선택된 태그 중에서 찾으므로 li태그 중 filter클래스를 가진 세 번째 태그가 선택됬다. li태그의 하위태그에는 find가 없을뿐더러 하위태그자체가 존재하지 않기에 find는 작동하지 않는다. find( ) - 선택된 태그에 속하는 모든 요소에서 찾음 이번엔 li태그가 아닌 ul태그를 지정하여 똑같이 filter와 find를 실행한다. 이번엔 filter가 먹히지 않고 find의 푸른배경 효과만 나타났다. ul태그중에는 filter클래스를 가진 태그가 없기 때문에 filter는 작..

여러 태그가 존재하는 html문서에서 원하는 태그에 접근한다. children( ) - 선택한 태그의 자식 태그 제일 상위의 div태그인 samplePage에 children를 사용해 자식태그에 파란 테두리를 만들어준다. 또한 콘솔창에 자식이 몇인지도 출력해준다. 바로 아래 div태그 세개가 선택이 되고 갯수는 3이 나오는 것을 확인한다. contents( ) - 선택한 태그의 자식 태그 & 텍스트 태그 content는 children과 같이 자식 태그를 지정하며, 텍스트 태그까지 포함해서 찾아준다. 물론 태그속의 내용인 텍스트 노드에는 테두리가 생기지 않지만 콘솔의 내용은 텍스트 태그까지 추가된 7개가 나온다. aqua색의 테두리가 세개의 div영역에 생기고 콘솔엔 7이 찍히는 것을 확인한다. 매개변수..

세 개의 버튼을 누르면 li태그에 각각 접근하는 작업을 해본다. each( )는 지정된 태그를 반복하여 접근하는 함수다. index 값 출력 태그 선택자로 li태그를 선택한 후 each메소드에 index를 받도록 한다. 그리고 index를 출력하도록 해줬다. 첫 번째 버튼을 누르면 each로 접근한 li태그들의 인덱스를 각각 구해준다. index, item값 출력 이번엔 index뿐 아니라 item까지 매개변수로 받아온 뒤 item의 textcontent를 받아 출력한다. 두 번째 버튼을 누르면 인덱스 값에 li태그안의 text값까지 같이 출력한다. css 변경하기 li태그들을 변수에 저장한 뒤 1번과 마찬가지로 index를 매개변수로 주었다. each는 반복문 처럼 태그들에 접근하여 각 index가 커..

5개의 div요소를 각각 접근하는 방법을 알아본다. jQuery를 이용해 변수에 div태그를 배열로 저장한다. eq( ) - jQuery divList에는 div태그들이 배열로 저장되어있고 eq를 사용하면 해당 인덱스의 요소를 호출할 수 있다. 이때 eq는 jQuery객체를 리턴해주므로 jQuery문법을 사용해 다룬다. 인덱스 1의 div의 배경색이 파란색으로 변경됬다. get( ) - js element get메소드는 eq와 다르게 js의 순수 엘리먼트 요소 형식으로 넘어온다. 사용법은 비슷하지만 js의 문법을 통해 다뤄야한다. 인덱스 0의 div의 배경색이 하늘색으로 변경됬다. arr[ ] 메소드 없이 배열 자체로 취급하여 다룰 수 있다. 이때도 js의 element형식으로 넘어온다. 인덱스 4의 d..

실제 노드요소 접근은 jQuery등 다른 Lib을 사용해 접근하는 것이 편하다. 여기선 js기본문법을 통해서만 요소 접근 삭제 생성을 한다. 참가자의 이름을 적고 신청버튼을 누르면 명단에 이름이 작성이 되고, 옆에 x표시를 누르면 이름이 삭제가 되는 페이지를 작성하고자 한다. html코드는 위와 같다. 이름입력을 받는 input태그와 누르면 newRegister함수가 호출되도록 하는 버튼태그를 만들고 nameList라는 이름의 참가자 명단을 출력하는 div태그를 만들었다. 신청버튼 클릭시 이름입력 - createElement, querySelector, createTextNode, appendChild 버튼 클릭시 호출되는 newRegister함수다. newP는 createElement로 p태그를 만들어..

Node.js 설치 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 위 사이트에서 LTS를 클릭해 다운받아준다. 다운이 끝나면 cmd창에서 버전확인을 해주고 리액트앱을 설치해준다. react-app 설치 설치시 tar버전경고가 떴고 확인해보니 동작하는덴 이상이 없다고 했다. 버전확인을 해 설치가 완료됨을 확인했다. react-app 테스트 테스트 할 경로에 cmd를 실행시켜본다. 해당 경로에 원하는 이름으로 프로젝트를 생성하면 몇분이 지나 프로젝트가 생성된다. 폴더에 프로젝트가 생성된 것을 확인가능하다. 해당 폴더에 들어가서 npm start로 실행시켜본다. 3000번 포트로 정상적으로 실..