[TIL-15] 생활코딩 WEB2 JavaScript-34~37(완강)

34. 파일로 쪼개서 정리정돈하기

• 많은 웹페이지 감당하기 위해 연관된 코드들을 파일로 묶어서 그룹핑.
  • 같은 코드를 각 페이지의 html 파일마다 적을 필요 없음.
  • js 파일을 한번 수정하면 연결된 모든 웹페이지가 수정됨.
  • 코드가 명확해지고 의미 파악 뚜렷해짐.
• 파일 쪼개기
  • 새로운 파일 "파일명.js" 만들고, <script> 태그 제외한 코드 붙여넣음.
  • 원래 있던 코드 지우고, <script src="파일명.js"></script>
    
    • 웹브라우저가 js 파일을 다운로드해서 해당 페이지의 html 파일에 그 코드가 있는 것처럼 작동.

 

35. 라이브러리와 프레임워크

• 다른 사람의 도움을 받아 소프트웨어 만들기
• 라이브러리 : 내가 만들 프로그램의 부품이 되는 소프트웨어를 재사용하기 쉽도록 정리된 것.
  • jQuery : 가장 유명하고 안정적.
    • 검색해서 파일 다운로드 혹은 CDN
      • 예) 구글에서 제공하는 CDN 선택해서 <script src="파일명.js"></script> 앞에 코드 복붙하면 jQuery 라이브러리 주소 첨부됨.
    • 반복문 만들어줌.
      • 주석 단축키 : 블록해서 "컨트롤 + /"
      • $('a') : 모든 a 태그를 j쿼리로 제어함.
      • .css('color', 'red') : css라는 함수를 사용하면 색깔 등 css 변경 가능.
      • $('a').css('color', 'red'); : 모든 a 태그의 css를 색상 빨강으로 변경.
• 프레임워크 : 처음부터 끝까지 다 만들지 않게 해주는 반제품.
  • 만들고자 하는 것이 뭐냐에 따라 언제나 필요한 게 있고, 기획에 따라 달라지는 게 있음. 공통적인 건 프레임워크로 만들어놓고, 내가 만들려는 것에 따라 달라지는 부분 수정.

 

36. UI vs API

• UI : user interface
• API : application programming interface
  
  • 애플리케이션 만들기 위해 프로그래밍할 때 사용하는 조작장치.
  • 예) 웹브라우저의 경고창을 띄워주는 alert
  • API를 순서대로 실행(프로그래밍)함으로써 애플리케이션 만들어짐.

 

37. 수업을 마치며

• 지금은 프로젝트 할 때!!
  • 머리 복잡하게 배운 개념 다 써먹으려고 하지 말고 최소한의 지식, 즉 순서대로 실행된다는 것만으로 현실의 문제 해결.
  • 도저히 해결할 수 없을 때가 오면 함수, 반복문, 객체 등 적용.
  • 다시 한계에 부딪히면 이제 더 공부하기.
• 검색 꿀팁
  • 웹페이지의 어떤 태그 삭제하거나 자식태그 추가하고 싶으면,
    • document 객체 찾아보기. 필요한 메소드 있을 것.
    • 안 되면 DOM(document object model) 찾아보기. document는 DOM의 일부.
  • 웹브라우저 자체를 제어해야 한다면,
    • window 객체 찾아보기.
      • 예) 현재 웹페이지의 주소 알아내기, 새 창 열기, 웹브라우저의 화면 크기 알아내기.
  • 웹페이지 리로드하지 않고 정보 변경하고 싶으면, ajax 필요.
  • 웹페이지 리로드 되어도 현재 상태 유지하고 싶으면,
    • cookie : 사용자를 위한 개인화된 서비스 제공 가능
  • 인터넷 끊겨도 동작하는 웹페이지 만들려면, offline web application
  • 화상통신 웹앱 : webRTC
  • 사용자 음성 인식, 음성으로 정보 전달 : speech
  • 3차원 그래픽으로 게임 등 만들려면, webGL
  • 가상현실 : webVR

 

---

개발 입문에 대해 검색하고 유튜브 영상들을 많이 찾아봤는데 다들 생활코딩을 이야기해서 도대체 뭔지 궁금했는데 강의 세 개를 끝냈다. HTML, CSS, JS 모두 커리큘럼이 쌩초보자들이 따라갈 수 있을 정도의 난이도이고, 딱 기본만 가르친다는 목표 덕에 분량이 길지 않아서 완강할 수 있었다. 강의자인 이고잉님의 설명이나 말투도 집중하는 데 효과적이었던 것 같다. 중간중간 멈춰가면서 1.25에서 1.5배속으로 들으면 딱 좋았다.

이 강의까지 듣고 나서는 프로젝트를 하라고 하셨는데 뭘 해야 할지 고민이다. 웹 수업을 따라하면서 만들고 있던 고양이 페이지를 업그레이드해볼지, 새로운 프로젝트를 시작할지, 카카오톡 클론코딩으로 바로 넘어갈지 고민이다. 인프런에 결제해놓은 비전공자 개발 입문 강의를 보고 학습법을 참고해야 할 타이밍 같다. 아직 준비하기까지밖에 안 봐서 엄청 많이 남아있다ㅋㅋ