생활코딩 front-end/Javascript (15) 썸네일형 리스트형 {SFB} Javascript day 16 - UI vs. API ○ User Interface vs Application Programming Interface 다음과 같은 버튼이 있고 그 버튼을 누르면 경고창이 뜬다. 그렇다면 이 버튼을 누가 사용하고 있는걸까? 바로 웹 앱을 이용하는 사용자가 이런 버튼과 같은 조작장치를 이용해 웹 애플리케이션을 사용하고 있는 것이다. 사용자가 시스템을 제어하기 위해 사용하는 조작장치를 UI 라고 한다. 이번엔 우리가 만든 웹 애플리케이션 코드를 보자. 위 이미지에 나오는 경고창은 우리가 만든 걸까? 우리가 만들기도 했고, 우리가 만들지 않기도 했다. 경고창이 실행되는 타이밍과 텍스트는 우리의 의도가 반영되기 때문에 우리가 만든 것이라고도 볼 수 있다. 하지만 한 줄짜리 코드에는 경고창의 모양이나 기능이 일절 설명돼 있지 않다. 그.. {SFB} Javascript day 15 - library & framework 소프트웨어를 만들때 혼자 만드는 것보다는 다른 사람이 이미 잘 만든 것을 부품으로 삼아 내가 만들고자 하는 것을 빠르게 조립해서 만드는 것이 오늘날 소프트웨어를 만드는 아주 중요한 기본이다. 이때 library 와 framework 를 알아 두면 좋다. 둘 모두 다른 사람의 도움을 받아 소프트웨어를 만든다는 점에서 비슷하다. ○ library 는 무엇인가 정리 정돈돼 있는 곳이다. 내가 만들고자 하는 프로그램에 필요한 부품들이 되는 소프트웨어들을 잘 정리 정돈해 놓은 곳이여서 내가 그 부품을 가져오는, 재사용하기 쉽게 돼 있는 소프트웨어를 library 라고 한다. ○ framework 의 경우에는 우리가 만들고자 하는 것이 있을 때 그것이 무엇이냐에 따라(게임이든 웹이든 채팅프로그램 등등) 그것을 만들.. {SFB} Javascript day 14 - 파일로 쪼개서 정리 정돈 코드가 많아지면 함수로 정리정돈하고, 함수와 변수가 많아지면 객체로 정리정돈하면 된다. 그렇다면 객체가 많아지면 어떻게 정리정돈 할 수 있을까?? 우리가 여태 만들었던 것을 다른 곳에도 적용한 뒤 잘 작동하는 것을 확인한 뒤, links.setcolor 의 색을 powderblue에서 yellow 로 바꾸고 싶다면 바꾸면 된다. 하지만, 이 바꿔야할 페이지들이 1억개라면 이것을 다 바꾸기란 불가능 할 것이다... 이러한 상황에서 해결할 수 있는 도구는 바로 파일로 쪼개는 것이다. 우선, color.js 파일을 따로 만들어준 뒤 모든 웹페이지에 공통적으로 들어가는 코드를 로 대체한 다음 실행해도 잘 작동하는 것을 확인할 수 있다. 하지만, 내부적인 구현방법은 완전히 달라진 상태이다. 즉, 파일로 쪼개진 상.. {SFB} Javascript day 14 - 객체3 ● 객체의 활용 우리가 만들었던 예제를 활용해서 객체를 적용해보자. 객체를 만들기 위해 var ??? = { } 를 잊지 말자!!!!!!!!!!!!!!!!!!!!!!!!!! var ??? = [ ] 는 뭐였다? 배열!!!!!!! 위 코드와 같이 Body 객체에 setbackgroundcolor(); 메서드 를 적용한 것처럼 하기 위한 body 객체를 만들어보자. 우리가 중복되지 않도록 하기 위해 함수의 이름을 길게 지어서 나뉘었던 것들을 객체로 담아보는 것이다. 우선, body 관련 함수를 담을 Body 객체를 만들어보자. 객체를 만들기 위해 var Body = {} 로 표현해주고 객체의 property 로 setcolor 라고 지정해준뒤 그 변수의 값으로 function 을 지정해주면 된다.( 왜냐면 .. {SFB} Javascript day 14 - 객체2 ● 객체와 반복문 반복문을 써서 배열에서 데이터를 모조리 가져올 수 있었던 것처럼 생성된 객체에 있는 데이터를 모조리 다 가져와야 하는 경우에는 어떻게 해야할까? 이때 바로 for..in 을 써야 한다. 우리가 만들었던 coworkers 객체의 모든 정보를 가져와야 한다고 가정해보자. 그러기 위해 for(var key in coworkers) { } 라고 입력한다. 이말의 의미를 풀어보면 for는 coworkers 라는 변수가 가르키는 객체에 있는(in) key 값을 가져오는 반복문이다. 그리고 여기서 key 값이라고 하는 것은 programmer, designer, bookkeeper, data scientist 를 가르킨다. 즉, key 라는 것은 우리가 가져오고 싶은 정보(egoing, leezch.. {SFB} Javascript day 13 - 객체 ● 객체(object) 객체라는 것은 함수라는 개념과 대립되는 개념이 아니고 함수라는 기반 위에 객체라는 것이 존재하는 것이라고 생각하면 된다. 객체라는 개념은 엄청 광범위하다. 여기에서는 그 중에서 한면만 공부하는 것으로 생각하자. 바로, 정리 정돈의 수단으로서의 객체이다. 프로그래밍을 하다 보면 코드가 많아지고, 코드가 많아지면 잘 정리 정돈하기 위해 함수라는 것을 쓴다. 그리고 함수뿐만 아니라 연관돼 있는 변수가 엄청나게 많아지면 역시나 똑같이 복잡도의 한계에 도달하게 됩니다. 바로 그러한 상황에서 서로 연관된 함수와 변수를 같은 이름으로 그루핑해서 잘 정리 정돈하기 위한 도구를 객체라고 생각하면 된다. 우선 우리가 했던 코드들을 중복된 부분을 함수로 만들어서 적용시킨 결과를 보자. 이렇게 중복되는.. {SFB} Javascript day 12 - 함수의 활용 ● 함수 활용 우리가 만든 예제에서 함수를 활용하여 폭발적인 힘을 부여해보자. 위 이미지에서 버튼을 함수를 이용해서 좀 더 효율적으로 바꾸는 작업을 해보자. 이처럼 동작하는 내용은 똑같지만 코드를 효율적으로 만드는 것을 refactoring 이라고 한다. 함수는 refactoring 의 중요한 수단 중 하나이다. 우선 onclick 이벤트의 js 코드를 함수의 출력문으로 사용하기 위해 따로 태그의 로 옮긴다. 그리고 웹 브라우저에게 이러한 일련의 코드가 nightdayhandler() 라는 이름의 함수라는 것을 알리기 위해 function nightdayhandler() { 일련의 코드 } 를 만들어준다. 위 스크린샷은 함수에 이름을 지정해준 이미지이다. 이렇게 함수의 이름까지 지정해주면 이 로직들은 함.. {SFB} Javascript day 11 - 함수(return문) ● return 문 함수는 입력과 출력의 두 가지로 이뤄져 있다. 입력은 매개변수와 인자라는 것이며 출력은 return 과 관련이 있다. return을 배우기 전에 표현식(expression)이 무엇인지 알아야한다. 1+1 은 2 이다. 여기서 1+1 이 2의 표현식이다. 2-1 은 1이다. 여기서 2-1 이 1의 표현식이다. 1 === 1 은 true 이다. 여기서 1 === 1 은 true 의 표현식이다. 함수도 마찬가지이다. 위 코드에서 sum(2, 3) 이라는 함수를 실행하면 document.write(left+right+' '); 이 실행되겠지만, 이번에는 sum(2, 3)을 실행했을 때 2+3의 계산결과인 5를 받도록 표현식을 만들고 싶을 때 바로 return 을 알아야한다. 다시 코드로 돌아.. 이전 1 2 다음
