판봉 개발 일기

수업시간과 더불어서 간단한 ui요소가 있는 todo를 만들었습니다. 부트스랩을 쓸 수 있는 코드를 집어넣고 간단하게 만들어봤는데 화면은 이렇습니다. 부트스트랩에는 신기한게 많았습니다. 원래라면 body에 margin: 0 auto;를 해주어야 body가 가운데로 오게 되있는데 부트스트랩 안에 있는 명령어로 해결 할수 있었습니다. 그리고 form 태그 안에 flex도 설정할 수 있더군요 그리고 또한 중요했던 점이 form에 바로 onsubmit-"return false"를 넣어줘야 한다는 점이었습니다. 왜냐하면 넣어주지 않는다면 클릭시에 서버로 전송이 되어서 새로고침이 되어버렸습니다. 브라우저 이벤트에는 여러가지가 있습니다. 위에 것들이 기초 이벤트입니다. console창에서 event를 확인해보면 여러가..

manipulation 이번시간에는 저번에 이어서 manipulation에 정리하겠습니다. manipulation이란 뭐 "조작"이란 의미를 가지고 있습니다. 그렇다면 Document에서 무언가 조작하는걸 의미하겠죠? annother 태그 먼저 DOM 노드를 만들때 쓰는 두가지 메서드가 있습니다. 위의 코드에 있는 것 처럼 그리고 저번시간에 배운 innerHTML을 이용해서 해당 요소의 내용을 채워 넣을 수 있습니다. 그렇지만 이 3가지만으로는 아직까지 웹페이지에는 요소들이 나타나지 않습니다. 그래서 이 요소를 넣기위한 방법들이 여럿 존재합니다. 그 방법을 밑에서 알아보겠습니다. 삽입 메서드 보시면 자식요소와 형제요소로 나누어서 추가를 할 수 있습니다. 중간에 setTimeout이란 메서드를 이용해서 시..

정보처리산업기사를 오늘 시험을 보고왔습니다. 비전공자 공부 방법 : 시나공 필기 책, cbt 기출문제 공부 기간 : 1달정도 하루 공부 시간 : 1~3시간 사이 북부직업전문학교라는 곳에서 시험을 봤는데 다행히 아버지가 차로 태워주셔서 약 40분?정도 시간이 걸린것 같습니다 (필자는 부천에 서식중...) 이름이 [학교]가 붙어서 학교의 이미지를 생각했는데 건물 안에 있는 거더라구요 학원같은 느낌? 앞에는 벤치가 있는데 거기서 사람들이 다 기다렸습니다. 시국이 시국인지라.. 가채점 결과는 다행히 턱걸이로 합격을 했습니다. 주위에 시험을 본사람들을 알아보니 역시나 이번 시험이 좀 어려운 편이었던것 같네요 이번 3회차 시험은 21년도의 마지막 필기시험이었는데 22년도부터 아예 과정이 확 바뀐다고 하니까 좀 문제..

Attribute-property 이번시간에는 제목 그대로 attribute-property에 대해서 알아 볼겁니다. 브라우저는 웹페이지를 만나면 HTML을 읽고 DOM객체를 생성합니다. 그리고 요소노드(element node)에서 대부분의 표준HTML속성들은 DOM객체의 프로퍼티가 되죠. 가 있으면 DOM 객체에서 body.id="page"로 사용할수있는것처럼요 하지만 인생처럼 이렇게 쉽게쉽게 흘러가지만은 않습니다. 만약 표준이 아닌 속성이 있다면 어떻게 될까요? 위에 방식으로는 찾을 수가 없습니다. 그럴때에는 querySelector가 아닌 getAttribute를 이용해야합니다. 바로 비표준 속성을 가져오는 것이죠. 물론 위의 사진처럼 setAttribute라는 것을 이용하여 비표준 속성을 변경할 ..

DOM NODE DOM 노드는 종류에 따라서 각각 다른 프로퍼티를 지원합니다. 주로 쓰이는것중에는 tagName이란게 있는데 tagName은 프로퍼티의 요소 노드에만 존재합니다. 반대로 nodeName이란것도 있는데 이것은 모든 Node에 존재하기 떄문에 그다지 많이 쓰이지는 않을 것 같습니다. Node property innerHTML이란 것을 이용하면 HTML을 문자열 형태로 받아 올 수 있습니다. 또한 요소안의 HTML을 수정 하는 것도 가능하죠. 실무에서도 많이 쓰인다고 하니 중요한 부분입니다. p 태그 div 태그 위 코드를 사용하여 livesever에서 돌리면 이런 결과가 나옵니다. setTimeout이란 것을 이용해서 시간이 지나면 원래의 body 내부에 새로운 html태그가 추가된것을 확인..

Selector 이번에는 browser의 selector 즉 선택자에 대해서 알아볼겁니다. 저번시간에 배웠던 것을 이용하면 가까기에 붙어있는 요소들만 접근 할 수 있었습니다. 하지만 언제나 그렇지는 않습니다. 웹 페이지 내에서 원하는 요소 노드에 대해 바로 접근하는 방법이 있습니다. 바로 getElemenet와 querySelector입니다. Element 요소에 id 속성이 있다면 위치에 상관없이 저 메서드를 이용하여 접근 할 수 있습니다. 하지만 선생님께선 저것 말고 두번째로 말씀드린 querySelector를 이용하라고 하십니다. querySelector에는 크게 2가지가 있습니다. 바로 말 그대로 "querySelector"와 "querySelectorAll"이죠 이 두가지의 차이점은 단어에서 유..

이번 시간에는 javascript에서 제어 가능한 DOM에 대해서 알아보겠습니다. DOM 먼저 자바스크립트가 돌아가는 플랫폼을 "호스트"라고 부릅니다. DOM은 문서 객체 모델 이라고 합니다. (Document object Model) DOM은 웹 페이지 내의 모든 콘텐츠를 객체로 나타냅니다.(참고로 수정 가능) 브라우저는 HTML태그를 DOM(문서를 객체화한 구조)로 가지고 있씁니다. 브라우저에선 DOM API라는걸 제공해주는데 여기서 API란 Application Programming Interface를 의미합니다. 여기서 중요한것은 Application도 아닌 Interface입니다. 한마디로 DOM은 브라우저 엔진엔 올라가있는 메모리 구조입니다. DOM TREE HTMl에는 무수히 많은 태그들이 ..

인덱스의 개념 인덱스는 데이터 레코드를 빠르게 접근하기위해 구성하는 것입니다. 데이터가 저장된 물리적 구조와 관계가 있습니다. 레코드가 저장된 물리적 구조에 접근하는 방법을 제공합니다. 인덱스를 통해 파일의 레코드에 대한 액세스를 빠르게 할 수 있습니다. 레코드의 삽입과 삭제가 수시로 일어나면 인덱스의 개수를 줄이는게 좋습니다. m-원 검색 트리(m-way Search Tree) 한 노드가 최대 m-1개의 키와 m개의 Subtree를 갖도록 구성됨 키 값의 일부분이 동일한 문자열이나 숫자로 구성된 자료를 표현하는데 좋음 트리 높이가 얕아져 특정 노드의 검색 시간이 감소됨 삽입, 삭제 시 트리 균형을 유지하기 위해 복잡한 연산이 필요합니다. B-트리의 특징 Index를 구성하는 방법으로 가장 많이 사용하는..

오늘은 자바스크립트의 배열에 있는 메소드들에 대해서 더욱더 알아보겠습니다. for-Each로 반복작업 for-each는 주어진 함수를 배열 요소 각각에 대해 실행할 수 있게 합니다. // for each element call alert ["Bilbo", "Gandalf", "Nazgul"].forEach(alert); 위 코드를 실행하면 차례대로 alert창에 "Bilbo", "Gandalf", "Nazgul"이 실행됩니다. ["Bilbo", "Gandalf", "Nazgul"].forEach((item, index, array) => { alert(`${item} is at index ${index} in ${array}`); }); 위는 인덱스 정보까지 더 해주면서 출력해줍니다. + 매개변수로 넘겨..

오늘은 자바스크립트의 배열에 대해서 알아보겠습니다. 키를 사용해 식별할 수 있는 값을 담은 컬렉션은 객체라는 자료구조를 이용해 저장하는데, 객체만으로도 다양한 작업을 할 수 있습니다. 여기서 컬렉션이란 데이터의 모음을 말합니다. 자바스크립트에서 배열은 주로 스택구조를 사용합니다. 그리고 배열에는 기본적으로 내장되어 있는 메소드가 있습니다. 출력 결과는 추가한 순서부터 차례대로 나옵니다. 또한 배열의 요소에 인덱스번호를 참고하여 해당 인덱스로 접근할수도있으며, length라는 메소드로 해당 배열의 크기를 알아낼수 있고 pop이라는 메소드를 이용하여 해당 배열의 요소를 꺼낼 수 있습니다. pop은 맨 마지막에 넣었던 요소를 삭제합니다.! 스택은 LIFO구조로 후입선출 구조입니다.(마지막에 들어간것이 제일 먼..