본문 바로가기

목록

 (152)
9. HTML templating HTML 요소는 페이지를 불러온 순간 즉시 그려지지는 않지만, 이후 javascript를 사용해 인스턴스를 생성할 우 있는 HTML 코드를 담을 방법을 제공한다. template === 콘텐츠 조각을 나중에 사용하기 위해 담아놓는 컨테이너. 💨 templating HTML이 반복되는 부분은 template로 만들고, 서버에서 받은 데이터(JSON 포멧) 을 결합해 화면에 추가하는 작업이다. HTML과 데이터를 섞어서 웹 화면에 보여주는 작업으로써 서버에서 데이터를 조회 후 그 내용들을 동적으로 HTML로 만들어서 보내주는 식으로 진행된다. 💨 templating을 하는 방법 #1. 서버에서 file 로 보관 후 Ajax로 요청해서 받아오기. 대규모 프로젝트에서 사용. server1.template 이런 ..
8. method chaining ✅ method chaining 이란? 객체를 이용할 때 여러 method를 편하게 사용하게끔 만든 것이다. let Person = function () { this.age; this.height; }; Person.prototype.setAge = function (a) { this.age = a; return this; }; Person.prototype.setHeight = function (h) { this.height = h; return this; }; let mung = new Person(); console.log(mung.setAge(28).setHeight(181)); 만약에, return this; 를 해주지 않는다면 mung.setAge(28).setHeight(181); 이 아니라..
7. 객체 안에 함수 저장하기 const person = { name: "Mung", age: 28, speech: function () { console.log(`빨리 취업하고 싶다`); }, }; 그래서 함수를 왜 굳이 객체로 선언하는데? 중복을 피하기 위해서! 앞서 업로드한 prototype의 개념과 유사하다. #ES6 : 새로운 객체 리터럴 기능 1. 프로퍼티 key 에 계산식 사용 객체 내부에서 프로퍼티의 key를 [계산식] 으로 사용할 수 있다. const one = 1; const two = 2; const strHi = "hi"; const strMung = "mung"; const newObj = { [1 + 1]: "first", [one + two]: "second", [strHi + strMung]: "third..
6. prototype 과 this 를 통한 함수 재활용 function Animal() { this.name = name; } Animal.prototype.sleep = function () { console.log("sleep"); }; function Human (name, language) { this.name = name; // 이미 function Animal 에서 선언된 것으로 중복이 발생. this.language = language; } Human.prototype.sleep = function () { console.log("sleep"); } Human.prototype.write = function () { console.log("write"); } var dog = new Animal("badooki"); var Mung = new H..
7. text 가운데 정렬 💨 line-height 이용하기 line-height : 글자가 한 줄에서 차지하는 높이. 예를들어, 칸 안의 글자를 가운데 정렬해야한다고 할 때 그 칸의 height와 line-height의 값을 동일하게 해주면 글자가 가운데 정렬이 된다. text-align: center; 또한 입력해주어야한다. margin: 2px; height: 150px; text-align: center; line-height: 150px; width: 150px; background-color: white; border-radius: 5px; font-size: 80px; color: bisque;
6. :hover 작동하지 않는 경우 지금까지 화면 전환을 하려할 때, css opacity: 0; 과 opacity: 1; 을 이용했다. 그런데 방금!! 갑자기 멀쩡히 되던 hover 기능이 작동하지 않았다. 구글링 끝에 나름의 결론을 얻었다. opacity: 0; pointer-events: none; 이렇게 코드를 작성하니 opacity: 1; 인 div 클래스 안에 있는 button:hover 이벤트가 제대로 작동했다. 아직 코린이라 이유는 잘 모르는데 잘 해결되서 다행이네,, 😶
5 . property : getter & setter 객체의 프로퍼티는 크게 두 가지로 나뉜다. 1. 데이터 프로퍼티 (data property) 밑에서 배울 접근자 프로퍼티를 제외한 모든 프로퍼티. 2. 접근자 프로퍼티 (accessor property) 접근자 프로퍼티의 본질은 함수이다. 이 함수는 값을 획득(get) 하고 설정(set) 하는 역할을 담당한다. let obj = { get propName() { // getter, obj.propName을 실행할 때 실행되는 코드 }, set propName(value) { // setter, obj.propName = value를 실행할 때 실행되는 코드 } }; getter 메서드는 obj.propName 을 사용해 프로퍼티를 읽으려고 할 때 실행되고, setter 메서드는 obj.propName =..
5. CSS 를 이용해 버튼을 누르면 화면이 바뀌게 하기 퀴즈 앱과 같은 앱을 만들 때 버튼을 누르면 화면이 바뀌게 해야한다. 이 때 opacity 와 z-index를 잘 이용하면 된다. 우선은 페이지를 만든다. ✅ opacity: 0; --> 완전 투명. 화면에 안보임. opacity: 1; --> 기본값. 화면에 보임. 이벤트 유무에 따라 보여질 화면을 opacity: 0; 으로 설정해 안보이게 한 후, z-index 값을 줘서 active될 요소를 조금 띄운 다음에 opacity: 1; 을 줘서 화면에 보이게 한다. 뒤에 숨어있던 화면이 앞으로 나오게 된다.

티스토리툴바