본문 바로가기

전체 글

 (341)
하루는 길고 십년은 짧다 'Y Combinator 신임 사장이 서른이 되면서 쓴 글'페이스북에서 우연히 본 글이었다. "하루는 길고 십년은 짧다." 제일 마음에 드는 문장이어서 따로 만들었다.
[아홉번째] JavaScript - Web Browser / Ajax , JSON Ajax(Asynchronous JavaScript and XML) 자바스크립트를 통해 내부적으로 통신할 수 있는 것.- 누가 : 사용자들이- 무엇을 : 지금 당장 필요로하지 않는 정보들을- 언제 : 나중에 필요로할 때- 어떻게 : 서버에서 가져와주는 기술 - 왜 : 그게 사용자 입장에서 효율적이니까 Asynchronous JavaScript and XMLXML은 중요하지 않다. 요즘엔 다른 데이터도 다 취급하기 때문에주로 JSON을 많이 사용.비동기적으로 서버와 통신을 하는 방식동기적인 것은 동시적인 것 JSON(JavaScript Object Notation)JavaScript 에서 객체를 만들 때 사용하는 표현식서버와 통신을 통해서 작업을 해야하는 상황에서 유용하고 광범위하게 사용하는 기술이다. j..
[여덟번쨰] JavaScript - Web Browser / 이벤트 II 이벤트키보드를 눌렀을 때 텍스트가 입력되는 것은 기본적으로 웹브라우저가 가지고 있는 API 라고 할 수 있다.input 태그를 불러왔을 때 submit 버튼을 누르면 데이터가 전송되는 것도a href 태그를 클릭하면 URL로 이동하는 것도기본 이벤트 동작들즉 API브라우저들의 구성요소들이 우리가 원하는 작업이 실행될 수 있도록 하는 것이 이벤트 - 동작 취소하기.checked 됬을 때 return false를 해주면 실행되지 않도록 해서동작의 취소 기능을 구현한다. 이벤트 타입- 폼 form form이라는 이벤트 안에 submit을 만든다.submit : 사용자가 입력한 폼의 정보들을 서버로 전송하는 명령change : 텍스트 입력창에 입력을 하면 그대로 입력blur : 포커스를 뺏을 때focus : 포..
[일곱번째] JavaScript - Web Browser / 이벤트 I 이벤트자바스크립트의 하이라이트! 이벤트란 말 그대로 사건. 웹 브라우저 상에서 일어나는 사건을 말한다.- 이벤트 타겟(event target) : 이벤트가 발생하는 태그- 이벤트 타입(event type) : onclick ...- 이벤트 핸들러 : 실행될 코드 이벤트 프로그래밍을 하기 위해서는 이벤트의 대상에 이벤트 핸들러를 등록해줘야 한다.크게 3가지 등록방법이 있다. 1. inline 방식태그안에 이벤트가 속성으로 직접 들어가 있다.태그에 직접 기술되어 있기 때문에 어떤 이벤트가 있는지 알기 쉽다.HTML의 정보로서의 목적에 어긋난다.또한 복잡한 코드를 삽입할 수 없다. 2. 프로퍼티 리스너이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식event || window.event;even..
[여섯번째] JavaScript - Web Browser / 문서의 기하학적 특성 문서의 기하학적 특성 1. 요소들간의 관계여러 가지 Element들의 크기 , 위치 ,.getBoundingClientRect() 메서드 top : 최상단으로부터 문서의 시작점과의 거리left : 최좌측으로부터 문서의 시작점과의 거리height : 문서의 엘리먼트의 세로 길이width : 문서의 엘리먼트의 가로 길이 = padding + border (margin값을 포함하지 않는다.)right : 최좌측으로부터 문서의 끝나는 지점까지의 거리bottom : 최상단으로부터 문서의 끝나는 지점까지의 거리 ClientWidth ClientHeight : 테두리를 제외한 값 offsetParent : 위치 측정에 기준이 되는 객체를 출력 cf) CSS의 박스 모델을 되돌아보면 이해가 쉽다. 2. 뷰포트(View..
설문지 제작의 어려움 디자인 프로젝트라는 수업을 하고 있다.쉽게 말하자면 UX 과목이다.구체적인 사용자 계층을 정하기 위해서관심분야의 넓은 사용자 층을 정하고 점점 좁혀나가는 방향으로 가고 있다.우리 팀이 선택한 테마는여행이다. 여행하는 사람들 대상으로 어떠한 서비스가 탄생할 수 있을거라 생각했다.막연하게. 인터뷰도 해보고여러 가지 조사들도 많이 해봤다. 그리고는 더 많은 정보를 얻기 위해 설문지를 배포하자는 계획을 세웠다.정말 좋은 경험이었고설문지 만드는게 이렇게 어려운 일이었다는걸 깨달았다. 처음 6시간 동안은 설문을 해주실 분들을 위주로 설문을 만들어가려했다.최대한 객관식으로 응답의 편리를 주었고의식의 흐름에 따라 설문에 응할 수 있도록 흐름에 맞는 질문들을 적재적소에 배치했다.그리고 섹션을 많이 나누어 쓸데없는 질문이..
[다섯번째] JavaScript - Web Browser / Node Node 객체. 각각의 객체들에게 관계를 부여하는 API가 있다.body 태그의 첫번째 자식start.firstChild는 줄바꿈이다. 보통 이런 식.그래서 #text가 출력된다. 놓치지 말것!노드 타입. 1. Node 관계 API Node.childNodes자식노드들을 유사배열에 담아서 리턴한다. Node.firstChild첫번째 자식노드 Node.lastChild마지막 자식노드 Node.nextSibling다음 형제 노드 Node.previousSibling이전 형제 노드 2. 노드 종류 API노드 작업을 하게 되면 현재 선택된 노드가 어떤 타입인지를 판단해야 하는 경우가 생긴다.이런 경우에 사용할 수 있는 APINode.nodeTypenode의 타입을 의미한다.- 각각의 숫자에 해당하는..
[네번째] JavaScript - Web Browser / jQuery JavaScript 와 jQuery의 비교를 살짝 보고 // >> jQuery 라이브러리란? 현재 시점에서 가장 많은 사람들이 사용하는 자바스크립트 라이브러리.라이브러리란 자주 사용하는 로직을 재사용할 수 있도록 고안된 소프트웨어적은 코드로 많은 일을 할 수 있는 효율성을 보인다!DOM이 할 수 없는 것을 제이쿼리가 할 수 있는 것은 아니다.제이쿼리에 DOM이 담겨져 있으므로.제이쿼리만 사용한다면 라이브러리 바깥 쪽에 있는 기능을 알지 못할 수 있다.인간은 도구를 사용한다! 라이브러리를 적재적소에 활용할 줄 알아야 한다. CDN = Contents Delivery NetworkjQuery 파일을 따로 다운받지 않아도 jQuery를 연동해서 사용할 수 있다. src="//code.// 앞에 http가 생략..

티스토리툴바