본문 바로가기

생활코딩

 (25)
(생활코딩) Javascript 라이브러리와 프레임워크 소프트웨어를 만든다고 하면 혼자 만드는 경우는 없다. 우리는 누군가가 만든 소프트웨어 위에서 동작하는 소프트웨어를 또 만들고 있다. (이를들면 웹브라우저) 아니라고 하더라도 우리가 소프트웨어를 만들 때 혼자 만드는 것보다는 다른 사람이 이미 잘 만들어 놓은 것을 부품으로해서 내가 만들고자 하는 것을 빠르게 조립해서 만들어 가는것이 오늘날 소프트웨어를 만드는 기본이라고 할 수 있다. 생산자로서 소비자가 되며 소프트웨어의 사회성을 알아보자. 라이브러리(Library) 와 프레임워크(Framework)가 있다. 이 두 가지는 다른 사람의 도움을 받아 소프트웨어를 만든다는 점에서 비슷한데 라이브러리는 일단 도서관이라는 뜻으로 내가 만들고자하는 프로그램에 필요한 부품이 되는 소프트웨어를 잘 정리정돈해놓은, 재사용..
(생활코딩) Javascript 파일로 쪼개서 정리 정돈하기. 태그가 있는 html파일에는 수정사항이 모두 다 반영되므로 유지보수하기 쉽다. 또한 가독성이 좋아지며 코드가 훨씬 더 명확해지며 코드의 의미를 파일의 이름을 통해서 우리가 확인할 수가 있다.
(생활코딩) Javascript 객체 -3- 객체프로퍼티(property)와 메소드(method)에 대해서 알아보자. 객체에는 데이터를 담을 수 있다. 전에는 문자를 담았지만 배열, 숫자, 함수등등 다 담을 수 있다. 여기서 객체에 함수를 담아보자. coworkers는 이미 만들어 놓은 게 있으니까 그대로 활용하고, coworkers라는 객체에 메소드를 추가해보자. showALL이라는 메소드를 추가해서 coworkers에 있는 각각의 데이터들을 iterate해서 화면에 출력하는 for(var key in coworkers)코드를 넣어 놓는다. 해당 코드를 출력하면 위와같이 나오는데, 아주 좋은 방법은 아니다. coworkers라는 객체명이 coworkers[key]라고 박혀있기 때문에, 만약에 이 객체의 이름이 바뀐다면 데이터를 못가져오는 현상이 ..
(생활코딩) Javascript 객체 -2- 객체에 대해서 간단히 알아보자. 객체는 배열과 다르게 중괄호({ })를 사용해서 값을 선언한다. coworkers라는 객체에 "yeony"라는 정보를 "programmer"라는 딱지를 붙여서 저장한 것이다. 해당 정보를 꺼낼 때는 coworkers.programmer로 값을 꺼낼 수 있다. 여기서 ".(점)"은 object access operator라고 부른다. 즉 이 객체에 액세스, 접근하는 오퍼레이터이다. 위에서 객체를 만드는 방법과 만들어져있는 객체에서 데이터를 가져오는 방법을 살펴보았다. 이미 객체가 만들어진 상태에서 정보를 추가하고 싶다면 객체명.저장할 값명="저장할 값"형태로 추가하면 된다. 저장할 값명에 띄어쓰기(공백)가 들어가는 경우에는 문법적으로 오류이기 때문에 ".(점)"을 쓸 수 없..
(생활코딩) Javascript 객체 -1- 객체를 알아보자. 영어로는 Object라고 부른다. 객체는 함수 기반위에서 객체라는 것이 존재한다. 프로그래밍을 하다보면 코드가 많아지고, 그 코드들을 잘 정리정돈하기 위해서 함수라는걸 쓴다. 또 함수가 많아지고, 그 함수와 연관되어 있는 변수들이 많아지면 복잡도의 한계에 도달된다. 그러한 한계에서 서로 연관된 함수와 변수들을 같은 이름으로 그룹핑해서 잘 정리정돈하기 위한 도구를 객체라고 한다. 전에 함수 포스팅에서의 코드를 보면 중복되는 부분들이 있다. 저 중복된 코드들을 함수로 독립시켜보자. 5줄의 코드가 1줄의 함수로 줄어든 것을 볼 수 있다. 그리고 해당 부분의 코드가 중복이 되니 함수로 정의해준다. 물론 한 줄 밖에 되지 않기 때문에 함수화시키는 것은 별로 의미가 없을 수도 있지만, 의미가 불명..
(생활코딩) JavaScript 함수활용 전 포스팅에서 배열과 반복문을 활용한 예제에서 함수를 이용해 코드를 효율적으로 바꿔보자. 리팩토링! 해당 코드를 보면 코드 길이가 길고, 이러한 코드의 버튼을 여러개 생성해야 된다라고 하면 유지보수가 힘들어질 것이다. 그래서 이 코드를 함수로 정의해서 해당 함수만 호출하면 해당 기능을 이용할 수 있게 만들어보자. onclick안에 조건들을 복사해서 태그 안에 복사해준 뒤, night_Handler()라는 함수로 정의해준다. 여기서 매개변수로 self란 값을 주고, 복사한 코드에서 this라고 된 부분들을 self로 바꿔준다. 또 정의한 함수를 사용하기 위해 해당 함수 인자로는 this값을 주면 이전 코드와 똑같은 기능을 하지만 길이가 훨씬 줄어들은 것을 볼 수있다. 해당 기능의 버튼을 여러개 만들어도 코..
(생활코딩) Javascript 배열과 반복문의 활용 배열과 반복문을 활용해서 낮에는 링크의 글꼴 색이 blue로, 밤에는 글꼴 색이 powderblue로 되게 작성해보자. 변수 links를 모든 태그를 선택하게 만들고, 반복문의 조건으로 i가 links 개수 미만까지 반복문의 명령이 돌아가게 만든다. 반복문안의 명령들은 links[i].style.color='powderblue'로 links 배열 안의 index 순서대로 (i=i+1) 글꼴 색을 powder blue로 바꿔준다. else 일때는 글꼴 색을 blue로 바꿔준다.
(생활코딩) Javascript 반복문 (Loop) While 이번에는 반복문(Loop)에 대해서 알아보자. 순서대로 실행되는 것이 프로그램의 기본적인 실행 순서이다. 그런데 어떤 경우에는 필요에 따라서 두 번째와 세번 째 실행되어야 되는 명령을 반복적으로 실행해야 될 때가 있다. 그러한 경우에는 반복적으로 코드를 짤 수 있지만, 반복해야 될 코드의 내용이 엄청나게 많아진다면 수정이 불편해질 수 있다. 이 불편함을 반복문으로 해소할 수 있다. 반복문에는 for()도 있지만 일단 여기서는 while()만 사용한다. while()도 조건문과 같이 조건에 boolean데이터 타입이 들어가야한다. 조건이 true인 동안에는 조건이 false가 될 때까지 while의 명령들이 실행된다. 조건이 false가 되면 while문은 종료되며 while문 바깥쪽에 있는 코드가 실행된..

티스토리툴바