프론트엔드 개발 취업 아카데미 [16, 17차] 필기 / 드디어 자바스크립트!

<!-- 기다렸다 자바스크립트. 역시 어렵다! -->

드디어 기다려왔던 자바스크립트, UI 개발 강의가 시작되었다! 완전 기초 이론수업은 건너뛰고 바로 코드를 작성했다. 수업 시작하자마자 여러 가지 방법으로 구구단을 만들었다. 아 진심으로 바보가 된 기분이었다. 머리로는, 말로는 어떻게 해야겠다고 감은 잡혔지만. 도저히 스크립트로 구현하기가 어려운 것이다. 선생님이 돌아다니시며 진행도를 확인하는데 노트북 화면을 숨기고 싶었다. 이것저것 작성해보고 구글 서칭도 해봤지만 해결이 안 된 부분이 있었다. 아무튼 혼자 작성하는 시간을 종료하고 선생님의 코드를 확인하는데 '아 내가 하려고 했던 게 저건대!'라는 내적 소리침. 아 왜 머릿속으로는 알겠는데 정작 스크립트로 작성이 안 되는지. 그건 아마도 내가 코어 스크립트를 제대로 이해하지 못하고 있기 때문인 것 같다. 일단 오늘 작성한 스크립트 문을 완전 이해가 될 때까지 순서 그대로 여러 번 반복 작성을 해봐야겠다. 아 이러다가 UI 개발은 어떡하려고 이러는지..! 더 열심히 하라고!

 

---

[프론트엔드개발 16차 필기] 번뜩할 때마다 필기를 한 관계로 두서가 없음.

JS실습은 퍼블리싱 수업에서 클론 코딩했던 기아, 스벅 홈페이지를 활용할 예정이다.

• 프로그래밍을 한다는 과정, 사고 자체가 어려운 것이다. 때문에 이론이 아닌 개념을 제대로 알아야 한다. 코드를 작성하면서도 느낌적으로 떠오르도록.
• CORE, DOM, BOM 
  돔을 자주 사용한다지만 보통 돔 공부에만 매몰되어 있다. 세부적인 돔 명령어는 실습하면서 습득하도록 한다. CORE자바스크립트가 가장 중요하다. 코어를 제대로 이해하면 다른 언어들을 공부할 때 도 도움이 될 것이다. 코어를 익히고 돔을 잘 조작하도록 하자. 돔 명령어는 외워야 하는 것들이다. (자주 사용하는 것 20개 정도) BOM - 브라우저를 건드리는 작업은 우선순위 제일 뒤로. 
• 앞에 document가 있으면 아~html문서를 조작하는구나! 라고 알고 있으면 된다.
• 작성 위치는 CSS와 비슷하다. 기왕이면 외부 파일로 사용하자. 그런데 단 하나의 페이지에서 사용되는 경우에는 페이지 하단에 작성하는 것도 좋다.
• alert, console.log 등 출력문은 디버깅을 하기 위해 사용한다. (주로 콘솔로그를 사용하도록.)
• 변수는 데이터 data 를 저장한다.
• 함수는 절차 혹은 동작을 저장한다. 파라미터(인자)를 넣어 동작을 하게 하고, return리턴을 통해 내가 원하는 값을 호출한다. (return - 값 전달 후 바로 함수 종료)
• 전역 변수, 지역 변수. 함수의 외부, 내부에 위치한다. (global, local)
• 전역 함수보다 지역 함수를 사용할 것.
• 객체는 프로퍼티(값), 메서드(동작, 함수)를 가지고 있다. ex) 객체 슬라이드를 작업할 때. 필요한 데이터와 동작을 먼저 정리하고 코드를 작성한다. (data - 현재 보이는 것, 전체 개수, 시간, prev next 기능 / 동작 - 페이징, 온오프 기능 등)

---

[프론트엔드개발 17차 필기] 번뜩할 때마다 필기를 한 관계로 두서가 없음.

• 다시 복습. 
  변수는 data, 값을 저장한다. 정보를 전달하는 데이터 구조로서 접근하자.
• 함수는 절차나 동작을 저장한다. 파라미터는 함수에 무언가 전달하는 패턴이다. 한 개일 때는 변수, 여러 개일 때는 배열. 함수 안에 데이터를 전달할 때 객체로 정의해서 전달 가능하다. 
• 파라미터가 변수인지 객체인지 배열인지. 3개 중 하나다.
• 함수는 특정 작업을 수행하도록 설계된 코드블록이다.
• return 리턴. 특정한 값을 전달한다. 리턴을 만나는 순간 함수의 기능은 정지된다.
• 전역 함수, 지역 함수 - 함수의 밖, 안에 위치한다. 중복되지 않게 주의해서 써야 한다.
• 제어문 - 조건문, 반복문
  if, switch, for 등.
  (반복문은 일단 for문을 잘 다루면 되겠다. 나머지 for~ 문들을 천천히 알아가도 된다.)
• 호이스팅! 
  선언된 변수, 함수를 제일 위로 올려버린다.
  함수는 선언된 위치에 상관없이 아무 곳에서 호출해도 결과가 나온다. 그러나 변수는 undefined가 호출된다. (호이스팅은 되는데 값은 찾지 못하는 것).
• 따라서 변수는 선언을 한 뒤에 호출해야 하며, 함수는 선언한 위치에 상관없이 아무데서나 호출해도 된다. 함수 호출은 위쪽에 함께 정리해두는 것이 좋다. 함수 선언문은 제일 밑에 정리하도록 하고.
• 지역변수는 외부와 단절되어 있기 때문에 안에서 중복되지 않게만 체크하자.
• var와 let의 차이. 딱 한 번 사용하고 버릴 때 반드시 let을 사용한다. 충돌하거나, 함수 안의 변수가 밖으로 흘러나갈 확률이 떨어진다.
• 함수에도 지역 함수, 전역 함수가 있다. 전역 함수는 지역 함수에서 사용이 가능하다. 또한 전역 변수처럼 여러 번 반복 사용이 가능하다. 그러나 지역 함수는 전역에서 사용이 불가하다. (변수와 같다고 보면 되겠다)
• if문 작성 시 한 줄만 필요할 때 중괄호 제거가 가능하다.
• 반복문의 절차가 중복될 때는 함수로 만들어서 사용하도록 하자.
• JS에서 변수의 이름은 카멜 케이스(낙타 등 모양)로 쓰기.
• JS에서는 대시 기호는 - 사용 불가. (연산자로 착각할 수 있다.) _언더바는 가능하다. 
• (갑분 TIP) HTML에서 인풋의 name속성은 비워둔다. 백엔드 개발자가 정해야 한다.
• 동등 연산자는 3번 === 사용하도록!
• 객체! 객체 안에는 숫자, 문자, 함수 등이 올 수 있다. 여기서 함수는 무명 함수다. (function 객체)
• 객체 안에는 프로퍼티(값)와 메서드(동작)가 있다.
• 객체를 정의할 때 this는 자기 자신을 뜻한다.
• get, set 등 동사로 시작하는 단어 뒤에는 괄호()가 온다.
• 구글링 하여 얻은 소스에서 힌트를 얻고 검증한 후에 사용하자. 내 라이브러리 중 하나로 만들자.
• DOM에서 할 수 있는 작업들! 셀렉트하기(너, 자식, 부모, 형제 등), 속성 바꾸기(get, set, remove 등), 구조 바꾸기, 이벤트 컨트롤하기.
• document에 대한 명령어 전부를 사용하는 것은 불가능하다. 자주 사용하는 것만 자세하고 깊이 공부하자.
• JS에서 셀렉팅할 때. querySelector, querySelectorAll 사용하자. CSS명령어와 똑같다고 생각하면 된다. (한 개 선택, 여러 개 선택)
• querySelector 골라진 것 중 첫 번째 것만 반환한다. 
• querySelectorAll은 지정한 document의 엘리먼트 리스트를 가져온다. 따라서 querySelectorAll 뒤에는 반복문이 같이 따라와야 한다. (아니면 [1] 같이 뒤에 인덱스 번호 붙여야 하는 번거로움이 생긴다.)
  
  var element = document.querySelectorAll('#top-menu > li');

    for (let i = 0; i < element.length; i++) {

      element[i].style.backgroundColor='red';  

  }
• 앞에 get이 붙는 명령어 중에서는 getElementId 만 사용하자. (클래스 찾는 거 노노..)
• 선택하려는 것이 덩어리 인지, 한 개인지. 제대로 파악하고 명령어를 사용할 것.
• 계속 반복적으로 사용하는 스크립트가 있다면! 제이쿼리를 사용하지 않는 이상(짧게 작성) 모듈화를 시키도록 하자. (내 라이브러리가 되는 것)
• NODE 노드에는 태그만 포함되는 것이 아닌 줄 바꿈 등 텍스트 노드가 포함된다. 때문에 NODE셀렉터는 어렵지만 매우 자세한 컨트롤이 가능하다.

---

 

JavaScript Tutorial

W3C 사이트에서 자바스크립트 파트 최대한 이용해서 공부하기. 나중에 JS를 깔끔하게 작성하는데 도움이 될 것 같다.

CORE자바스크립트를 제대로 공부해야 하는 이유는 전체적인 틀을 제대로 이해해야 하기 때문이다. 모든 프로그래밍 언어의 기본이 된다.

 

스코프는 함수를 기본으로 한 용어다. 함수가 선언되면 스코프가 무조건 생성된다. 

var을 사용하면 함수스코프, let과 const를 사용하면 블록스코프. (라고 알고있어도 되려나)

 

** createElement - 지정한 tagname의 html요소를 만들어 반환.

let element = document.createElement(tagName[, options]);

** createTextNode - 텍스트노드를 생성.

텍스트 = document.createTextNode(데이터);

** setAttribute - 지정된 요소의 속성값을 설정. (속성의 현재 값을 얻으려면 getAttribute)

Element.setAttribute(name, value);

** append - 마지막 자식 뒤에 노드 삽입.
** appendChild - 지정된 부모 노드의 자식 목록 끝에 노드 추가.

let aBlock = document.createElement('block').appendChild( document.createElement('b') );