문제를 해결 하는 논리: 알고리즘

코딩을 하는 이유가 무엇일까? 일이라서? 무언가를 만들고자? 근원적인 이유는 문제를 해결하고자 라고 말할 수 있다. 결국 코딩은 도구 혹은 수단일뿐 문제에 대한 해결은 코딩을 하는 개발자의 논리에 달려 있다.

프로그래밍 언어는 자기 스스로 생각하지 않는다. 프로그래밍 언어는 단지 엄청 빠른 반복적인 연산을 할 뿐이다.

📝알고리즘의 목업 수도코드(의사코드, Pseudocode)

자바스크립트에 숙달되지 않는 이상 나의 문제 해결 논리를 즉각적으로 코드로 옮기기는 힘들다. 특히나 여러 요구사항이 섞여 있는 문제를 해결할때 사고를 정리하지 않으면 이상한 길로 빠지기 쉽다.

수도코드는 사고의 정리와 논리의 구조를 기록해두고 코드를 작성하는 동안 지속적으로 흐름을 따라 갈수 있도록 도와준다. 사실 수도코드를 제대로 작성 하기만 한다면 코딩은 수도코드를 자바스크립트의 문법에 맞춰 옮겨 적는일 밖에 되지 않는다.

• 요구사항이 하나 이상인 문제를 여러개로 쪼개서 생각할 수 있다.
• 문제를 일상적인 문장으로 표현할 수 있다.
• 잘게 쪼갠 특정 문제가 이미 배운 JavaScript의 어떤 개념과 연관되는지 생각해낼 수 있다.

코드 스타일링, 코드 컨벤션

코드 스타일링은 2가지 측면에서 중요하다.

• 여러 부서와 함께 개발해야 하는 협업환경에선 내가 작성한 코드를 다른 사람이 봤을때에도 쉽게 이해할 수 있어야 한다. 소통 비용을 줄이기 위해서!
• 내가 적은 코드에 에러가 나오는 경우, 에러를 빠르게 찾기 위해!

코드 스타일링의 좋은 예제 NHN 코딩 컨벤션과 Google JavaScript Style Guide

코드 스타일링의 일관된 중요 포인트는 다음과 같다.

• 일관성
• 높은 가독성
• 시멘틱, 본질적인 의미
• 간결할 것

다음은 잘못 적용하고 있던 코드 스타일링 이다(제대로 파악하고 앞으론 올바르게 적용하자!)

• if, for, while문의 끝에는 세미콜론을 사용하지 않아야 한다. 중괄호로 끝나는 statement는 이미 종료가 암시되어 있기 때문... 나는 반대로 알고 모두 세미콜론을 붙였었다ㅜㅜ
• 함수 표현식의 끝에는 세미콜론을 사용!

DOM을 통하여 HTML을 JS로 조작하자!

HTML은 트리구조를 취하고 있다. 이는 JavaScript의 객체와 구조적으로 동일하다. DOM(Document Object Model)은 HTML(Document)에 접근하여 자바스크립트의 Object처럼 HTML을 조작(Manipulation)할 수 있는 Model이다.

다시 말해 DOM을 사용하면 HTML의 트리구조를 자바스크립트의 객체를 다루듯이 조작할 수 있으며 자바스크립트를 통해 HTML을 동적으로 만들수 있음을 의미한다. HTML의 구조나 메소드들은 document 객체에 담겨 있으며 이 document객체를 통해 HTML을 조작하게 된다.

DOM의 CRUD

CREATE, 엘리먼트를 만드는 방법

document.createElement('태그이름')

변수 선언 및 할당을 하는 것과 같이 엘리먼트를 특정 변수에 할당해 줄수 있다.

const myElement = document.createElement('div')

myElement는 현재 연결이 되어 있지 않은 노드, 생성은 되었으나 구조에서 붕 떠있다.

노드를 연결해주자 APPEND

document.연결대상.append(변수명)

특정 변수에 할당해 주었기 때문에 이 변수를 이용하여 document의 메소드를 이용해 특정 위계의 하위에 엘리먼트를 연결해 줄수 있다.

document.body.append(myElement)
//body태그의 자식으로 myElement(div태그)를 연결해 주었다.

READ, 원하는 태그를 조회

document.querySelector()
document.querySelectorAll()

쿼리셀렉터가 조회하는 대상은 태그의 이름, 태그의 class, 태그의 id다. 쿼리셀렉터는 조회해온 HTML 엘리먼트들을 배열과 유사한 형태로 가져온다. 해당 유사 배열엔 for문의 사용이 가능하다.

const selectedElement = document.querySelector('#banana')
//id가 banana인 엘리먼트를 가져온다.

const selectedElements = document.querySelectorAll('.fruits')
//class가 fruits인 엘리먼트들을 가져온다

UPDATE, 엘리먼트에 내용을 추가

element.textContent = '내용'
element.classList.add('class명')
element.setAttribute('id', 'id명')

innerHTML을 통한 추가는 지양하도록 하자!

myElement.textContent = 'hi!'
//<div>hi!</div>
myElement.classList.add('fruits')
//<div class="fruits">hi!</div>
myElement.setAttribute('id', 'banana')
//<div class="fruits" id="banana">hi!</div>

DELETE, 엘리먼트를 삭제

element.remove()
element.removeChild()

myElement.remove()
//myElement를 삭제
node.removeChild()
//자식 node를 삭제