그동안 너무 여러 업무를 하면서 여러 가지 일을 하다보니 머리가 복잡해서 한번 정리가 필요할 것 같았다. 기초적인 것과 많이 쓰지만 가끔 잊어버리고 검색하게 되는 것을 정리해 나가려고 한다. (극히 주관적인 내용으로 강좌가 아닌 본인의 리마인딩을 위한 내용정리이다.) 바스크립트(위키백과)는 오브젝트 기반의 스크립트 프로그래밍 언어이다.(사전적인 내용은 링크의 위키백과를 참조하면 된다.) 스크립트 프로그래밍 언어는 응용 소프트웨어를 제어하는 컴퓨터 프로그래밍 언어로 응용 프로그램과 독립적으로 사용된다고 한다.(위키백과 참조: 스크립트 언어) 하지만 요즘은 nodejs나 여러 가지 강력한 라이브러리 때문에 구분의 의미가 없는 것 같다.
가장 많이 듣는 것이 자바와의 관계다. 우선 자바와는 전혀 관계가 없다. 하지만 둘 다 C에서 출발했기 때문에 문법이나 외형이 비슷하다. 예전에 들은 얘기 중 하나는 창시자가 자바가 인기를 끌 때여서 그냥 이름을 따서 지었다는 것이다.Java Script는 주로 브라우저에서 실행한다. 웹 개발, 모바일 개발 등은 익스플로러 때문에 정말 고생했다. 요즘은 거의 신경 쓰지 않아도 되지만 호환성을 본다는 버튼이 있다. 같은 CSS 같은 코드인데도 보이는 것, 동작하는 것이 다르다…이렇게 웹이 발달해서 인터넷=인터넷 익스플로러인가 했는데 지금은 모두 크롬을 사용한다. 나도 크롬이 뭔지 몰랐는데 크롬으로 개발해 개발 완료 후 익스플로러에 호환성을 테스트했다.(MS조차 기존 익스플로러를 버리고 가장자리를 사용한다. 웹 개발할 때는 이제 막 익스플로러 10이 나왔기 때문에 심할 때는 6에서 10까지 호환성을 모두 맞춰야 했는데 정말 미칠 지경이었다. 아무 문제 없는 쉬운 코드인데, 6만이 아니라 8만 화면이 깨져서… 왜 관공서들은 다 익스플로러 6, 8을 쓰는지…이제는 그런 호환성에는 신경 안 써도 되니까 정말 편해진 것 같아.
javascript 를 사용해서 html을 조작하려면
DOM (Document Object Model)에 대해 알아야 한다.
DOM은 Tree 구조로 되어있다.이런 식으로 부모 자식으로 이루어져 있다.나중에 복잡한 dom 요소를 제어하게 되면 같은 종류의 태그가 매우 많다. 제어하는 모든 요소에 id나 name을 부여하는 것이 아니면 특정 요소에 자녀 노드를 찾거나 부모 노드를 찾도록 제어하는 요소를 선택하는 경우가 많다.
요소를 선택하는 방법을 너무 많이 써서 시간이 오래되어도 잊지 못하는데, 한때 j Query만 사용하다 보니 vanila JS가 갑자기 생각나지 않았던 기억이 난다.
특정 요소의 id를 이용한 선택 특정 요소의 name을 이용한 선택 개발을 처음 할 때는 name에서 찾을 때와 같은 것이 여러 개 있으면 배열로서 받는다는 것을 알지 못했고, get 방식으로 서버단으로부터 데이터를 받는데 데이터가 도착하지 않아 고생했다. 공부할 때 같은 이름으로 몇 가지 요소를 만들어 본 적이 없어서 name이라던가 id라던가 똑같은데 어떻게 두 가지 방법이 있지? 라고 생각했다.) 게시판 목록의 문장검색이나 id로그인 id/pw의 input태그 같은 곳에는 id를 쓰고, 자격등록, 실적등록 등 같은 요소를 여러 개 +/-을 눌러서 늘리고 줄일 때에는 name을 누른다.
특정 요소의 클래스명을 이용한 선택 개발을 하면 기능도 기능이지만 이용자 입장에서는 결국 비주얼이다. 기능이 조금 떨어져도 디자인이 좋으면 사용자들은 더 좋은 프로그램이라고 생각한다. 애플이 선 디자인 후개발 감성 마케팅으로 대박을 터뜨린 것처럼 말이다.디자인을 행할 때 요소별로 개별적으로 디자인은 하지 않는다. 몇 개의 템플릿이나 샘플을 만들어 놓고 이를 활용한다. 그 때문에, 범위가 적은 id 나 name보다는 태그 자체(p, h1, h2, a 등)나 클래스를 이용해 유사한 사람끼리 조합해 쓴다.
바꿔 말하면, 비슷한 사람들을 클래스로 만들기 때문에 기능도 유사한 경우가 많고, id나 name이 없어도 로그인 패널, 결과 테이블 등 찾으려는 요소들이 이미 디자인 적용을 위해 class가 적용되어 있는 경우가 많으므로, class Name을 이용한 선택을 정말 많이 사용한 것 같다.
쿼리 셀렉터를 이용한 선택 쿼리 셀렉터는 csselector를 기반으로 엘리먼트를 선택한다고 한다. jQuery에서의 실렉터는 위의 방식을 사용한 듯하다.query Selector는 한 가지 요소만 찾고 클래스 이름, NAME 등 여러 요소가 반환되면 그 첫 번째 요소만 선택한다. query Selector All은 여러 요소를 배열로 받는다.
엘리먼트 추가/삭제와 같은 방법으로 요소를 만들어 특정 위치에 추가하거나 삭제할 수 있다. 이전에는 별로 사용되지 않았지만 최근에는 SPA(Single Page Application)를 많이 사용하고 있기 때문에 동적으로 요소를 추가/제거하는 경우가 많아진 것 같다.
이전 프로젝트는 한꺼번에 많은 요소와 내용을 만드는 경우가 많아 태그에서 내용을 문자열로 저장했다가 추가하는 부분에 innerHTML로 한꺼번에 넣는 경우가 많았다. 상황에 맞추어 보다 효율적인 방법을 사용한다.# javasciprt # getElement # querySelector # createElement # appendChild # insertBefore # removeChild