본문 바로가기
728x90

개발자의 주머니

 (52)
뷰 라이프사이클이란? life cycle, 인스턴스의 생명 주기 vue 라이프사이클이란 vue의 인스턴스가 생성된 순간부터 종료될 때까지의 순환되는 주기를 말한다. 인스턴스는 이 과정에서 다양한 단계를 가지고, 개발자는 이를 이용해 화면과 데이터를 컨트롤 한다. 따라서 생명 주기 단계 마다 어떤 일들이 일어나는 지 이해하고 개발하는 것이 중요하다. 라이프사이클 단계 마다 메서드를 사용해 개발자가 원하는 커스텀 로직을 수행할 수 있기 때문에 vue는 따로 Controller를 가지고 있지 않다. 그림으로 보는 라이프사이클 new Vue()뷰 인스턴스 생성 Init Events & Lifecycle이벤트와 라이프사이클 초기화 ① beforeCreate인스턴스가 초기화된 직후, 데이터 관찰 및 이벤트/감시자 설정 전에 동기식으로 ..
자바스크립트와 브라우저의 관계 동적인 웹사이트를 위한 언어의 탄생 넷스케이프 브라우저는 모자이크 브라우저에 비하면 이미지가 들어가 조금 더 사용자들에게 fancy한 느낌을 주었지만, 여전히 갈증을 느낀 Marc Andereeson은 웹사이트를 더욱 동적으로 만들고자 했다. 이에 프로그래밍 언어를 브라우저에 추가하고자, Brendan Eich를 영입해 sheme script를 변형해 새로운 언어를 만들었다. 짧은 시간안에 Mocha(1994년)라는 언어를 개발하고 추후 LiveScript로 이름을 바꾼다. 넷스케이프 브라우저 안에 LiveSctipt Interpreter 엔진을 탑재해 내놓게 되고, 이로서 개발자들이 LiveScript를 배워 코드를 작성하면 넷스케이프 브라우저가 해석해 DOM을 조작하는 등의 동적 브라우저를 만들 수 ..
웹브라우저란? 웹브라우저란 웹페이지를 보여주는 창문이다. 이 한 문장으로 비개발자에게는 웹브라우저를 간단 명료하게 설명해 줄 수 있을 것 같다. 모든 웹페이지는 브라우저라는 창을 통해서만 볼 수 있고, 크롬·파이어폭스·오페라 등등 은 각기 다른 기능을 가진 창틀에 해당한다. 웹브라우저는 웹페이지를 다운 받아 렌더링해 사용자에게 보여주는 역할을 한다. 프론트엔드 개발자라면, 다양한 회사들이 만들어낸 웹브라우저가 각기 다른 기능을 가진 창틀이라는 점에 주목해야 한다. 현재는 브라우저들이 웹표준을 지키고자 하여 호환성이 많이 좋아졌지만, 왜 저마다 브라우저가 다르게 보이는 지 알고, 클라이언트를 개발해야만 서로 다른 창틀을 이용하는 사람들에게 내 제품을 완성도 있게 보여줄 수 있다. 브라우저가 작동하는 깊은 원리를 배우기에..
html 특수문자 코드 마크업 하다보면 자주 사용하는 html 특수문자 코드 HTML 마크업을 하다보면 '' 같은 특수문자 사용이 필요하다. HTML 마크업을 위해 이미 예약된 문자들(ex. 태그를 위한 ''), 키보드로 표시할 수 없는 문자(ex. ⓒ, ∞ 등)를 표현하기 위해 엔티티 코드를 사용한다. 아래는 개발자들이 자주 사용하는 엔티티 코드이다. 유니 코드 문자 이름 상징 > 보다 큰 / / 삭감 " " 인용 ' ' 아포스트로피 & & 앰퍼샌드 © © 저작권 ® ® 등록 상표 ° ° 정도 « « 왼쪽을 가리키는 이중 각도 » » 오른쪽을 가리키는 이중 각도 공백 공백 정리 모든 HTML 문자 참조 목록은 World Wide Web Consortium에서 관리한다. 자료 출처 [HTML Character ..
ES11 자주 사용하는 문법 정리 옵셔널 체이닝 연산자(Optional chaining) ?. 는 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수있다. ?. 연산자는 . 체이닝 연산자와 유사하게 작동하지만, 만약 참조가 nullish(null 또는 undefined)이라면, 에러가 발생하는 것 대신에 표현식의 리턴 값을 undefined로 단락된다. 함수 호출에서 사용될 때, 만약 주어진 함수가 존재하지 않는다면, undefined를 리턴한다. const adventurer = { name: 'Alice', cat: { name: 'Dinah' } }; const dogName = adventurer.dog?.name; console.log(dogName); // expected output: undefined console.l..
ES6 자주 사용하는 문법 정리 단축 속성명(Shorthand property names) 객체의 속성값이 변수로 할당되어 있다면, 변수 이름만 적을 수 있다. let a = "foo", b = 42, c = {} // 객체의 속성값이 변수로 할당되어 있다면, let object = {a: a, b: b, c: c}; let es6 = { a, b, c }; // 변수 이름만 적을 수 있다. console.log(object.a === es6.a); // true 중복된 속성명(Duplicate property names) ECMAScript 5 엄격 모드 코드에서, 중복된 속성명은 SyntaxError로 간주됐습니다. 런타임에 중복을 가능케 하는 속성 계산명 도입으로, ECMAScript 2015는 이 제한을 제거했습니다. var a..
[페이지교체알고리즘] 자리를 양보해가며! 문제 라이캣과 자바독이 배에 타고 보니 좌석이 3개밖에 없었습니다. 가장 먼저 탄 사람이 당연히 앉아야지! 아니, 가장 키가 큰 사람이 앉아야지! 아니, 가장 덩치가 큰 사람이 앉아야지! 사람들이 수근 거릴 때, 개리가 말했습니다. 모두 알고리즘 보물을 찾으러 가는 것이 아닌가!? 개굴! 그러니 모두 알고리즘 문제로 승부를 봅시다. 개굴! 그때 라이캣이 손을 들었습니다. 주목해주냥! 내게 좋은 아이디어가 있다냥! 다리가 아픈 동물들이 순서대로 들어온다. 동물들의 종류는 다음과 같다. : 무척추동물, 척추동물, 어류, 양서류, 파충류, 조류, 포유류 동물들의 '종'이 같을 경우 무릎에 앉을 수 있다. 다 회복된 동물들은 언제든지 빠질 수 있다. 무릎에 앉을 경우 1초로 카운트 한다! 아무도 없거나, 자리가..
[시간연산] 섬으로 가라! 문제 라이캣은 동료가 된 자바독과 함께 섬으로 향했습니다. 항구에서 배를 기다리는데 배에 탈 수 있는 사람의 수는 시간마다 다르다는 사실을 알게 되었습니다. 한 배에는 탈 수 있는 인원이 정시에는 25명, 10분마다 15명씩 탈 수 있습니다. 배는 매일 9시부터 21시 전까지(21시를 포함하지 않습니다) 10분단위로 들어옵니다. 전체 대기 인원은 14,000,605명입니다. 우리는 14,000,606번째와 14,000,607번째에 배를 타게 됩니다. 앞사람이 아프거나, 대기를 못하고 빠질 경우 대기인원이 줄어들 수도 있습니다. 라이캣과 자바독이 다른 배를 타야 할 경우에는 뒷배를 타야 합니다. 1월은 1024일, 2월은 512일, 3월은 256일, 4월은 128일, 5월은 64일, 6월은 32일, 7월은..
JAVA독과 함께! 문제 저기 징검다리가 보이지? 내 친구들이 징검다리를 건널거야! 하지만 징검다리는 버틸수 있는 내구도가 한계가 있지! 내 친구들의 몸무게, 돌의 내구도, 친구들의 점프력을 고려하여 내 친구 루비독, 피치피독, 씨-독, 코볼독이 각각 다리를 건널 수 있는지 알아봐줘! 친구들은 더 추가 될 수도, 덜 건널 수도 있어! 각 돌들이 얼마나 버틸수 있는지 배열로 주어집니다. (내구도 0까지는 독의 몸무게를 버틸 수 있습니다. 0미만이 되면 독은 살아남지 못합니다.) 각 독들의 개인정보가 JSON(JSON은 큰 따옴표로 묶여야 합니다. 가능하다면 json을 import하여 풀어보세요!)으로 주어집니다. 개인정보는 보호되지 않습니다. 각 돌에 독들이 착지할 때 돌의 내구도는 몸무게만큼 줄어듭니다. ex) [1,2,1..
ES5 자주 사용하는 문법 정리 Array.isArray() Array.isArray() 메서드는 인자가 Array인지 판별합니다. Array.isArray([1, 2, 3]); // true Array.isArray(Array.prototype); // true Array.prototype은 스스로도 배열입니다 Array.isArray({foo: 123}); // false Array.isArray('foobar'); // false Array.isArray(undefined); // false // instanceof vs isArray // Array 객체를 판별할 때, Array.isArray는 iframe을 통해서도 작동하기 때문에 instanceof 보다 적합합니다. // 아래 코드를 실행하면 지원하지 않는 환경에서도 Arr..
728x90

티스토리툴바