밤은 짧아, 걸어 아가씨야

[하루한냥] 레이아웃 구현 : 반응형 웹페이지를 위한 준비 프로젝트를 모바일에 최적화된 화면으로 기획했기 때문에 다양한 모바일 기종의 화면 크기에 맞추는 작업이 필요하다. 레이아웃 구현 단계를 진행하며 반응형으로 구현하고자 신경 쓴 부분이 크게 3가지가 있었다. 첫째로는 Layout 컴포넌트의 스타일 속성, 둘째로 스타일 토큰에서의 사이즈 지정, 마지막으로 Body 컴포넌트에서의 flex 속성 적용이 있다. 이번 포스트에서는 반응형 프로젝트를 만들기 위한 코드를 기록하려 한다. 1. Page, Layout 컴포넌트 구현 우선 배경이 될 Page 컴포넌트에서는 width, height를 100vw, 100vh로 잡고 연한 회색으로 칠해주었다. Layout 컴포넌트에서는 모바일 최적화를 위해 440x920으..

[하루한냥] 레이아웃 구현 : 메뉴바 구현과 리팩토링 드디어 개인 프로젝트를 시작했다. 매일 고양이 스티커로 하루의 기분을 기록하는 감정일기장 프로젝트이다. 워낙 이것저것 기록하는 것을 좋아하기도 하고 고양이도 좋아해서 이런 프로젝트를 해보면 재밌을 것 같았다. 피그마로 UIUX 스토리보드 기획과 디자인까지 직접 다 진행하고 있다. 프로젝트 세팅과 기본적인 구성을 마치고 이제 레이아웃 구현을 하고 있다. 별로 어렵지 않았던 이전 작업들에 비해 이번 메뉴바 구현은 조금 어려운 점이 있었다. 이번 글에서는 메뉴바를 구현하고 코드를 리팩토링해가는 과정을 담아보았다. 디자인 시안 모바일 최적화된 프로젝트이기에 뷰포트의 크기를 width 440px, height 920px으로 잡고 디자인했다. 기본적인 레이아웃은..

1. 클래스에서 Object.create에 대해서 설명해 주세요. Object.create()는 새로운 객체를 생성하는 메소드 이 메소드는 인자로 전달된 객체를 상속하기 때문에, 기존 객체의 프로퍼티와 메소드를 그대로 사용할 수 있음 2. Object.create 함수는 클래스와 어떤 관계가 있을까요? 모두 상위 객체, 클래스를 상속하는 새로운 객체를 만들 수 있는 공통점이 있음 Object.create는 인자로 어떤 객체를 전달하는지에 따라 원하는 객체를 상속하는 새로운 객체를 생성 클래스에서는 extends 키워드를 사용해 상속 관계를 정할 수 있음 3. Object.create와 new Object는 어떻게 다를까요? Object.create로 객체를 생성하면 인자로 넣은 객체를 상속하는(프로토타..

※ 실제 게임 와우(월드 오브 워크래프트)의 공략이나 게임 개발 등과는 전혀 관련이 없는 내용입니다. 자바스크립트의 Class 개념을 학습하며 작성된 글입니다. 인스턴스? 누구세요? 자바스크립트에 입문하고 인스턴스라는 용어를 처음 알게 되었을 때, 일상에서 자주 사용하는 단어가 아니다보니 개념을 익히기가 어려웠다. 내가 알고 있는 인스턴스의 쓰임이라고는 와우의 '인스턴스 던전' 뿐이었다. 혹은 인스턴트(instant)의 오타인 줄 알았다. 인스턴스를 사전에서 찾아보면 '사례'라는 뜻으로 나와있다. 자바스크립트의 클래스를 학습하면서 객체, 인스턴스라는 단어를 자주 사용하게 되는데, 그럴 때마다 머릿속 한 편에 있던 '클래스의 인스턴스는 와우의 인스턴스 던전과 도대체 무슨 관계인걸까?'라는 물음이 해소되질 ..

1. 객체란 무엇인가요? 키(key)과 값(value)으로 이루어진 프로퍼티(Property)들의 집합 2. 객체가 생성되는 과정에 대해서 설명해주세요. 생성자 함수로 객체를 생성할 수 있음 생성자 함수에 new 연산자를 붙여 호출하면, 새로운 인스턴스가 만들어짐 3. 프로토타입과 프로토의 차이에 대해서 설명해 주세요. 프로토타입은 생성자 함수의 특정 데이터 타입에서 사용할 수 있는 메소드가 담긴 객체 프로토[[prototype]]는 인스턴스에서 생성자 함수의 프로토타입에 접근할 수 있는 통로 역할 4. 생성자 함수에 대해서 설명해 주세요. new 연산자를 붙여서 호출할 경우 쉽게 새로운 객체를 만들 수 있는 방법 유사한 객체를 여러 개 만들 수 있음 첫 문자는 대문자로 쓰고, new 연산자를 붙여서 사..