본문 바로가기

분류 전체보기93

[Javascript] 프로토타입 알아보기 - 2 지난 글에 이어서, 코어 자바스크립트를 읽고 프로토타입에 대해 공부한 내용을 정리한다. 메서드 오버라이드(Method Override) : 부모 역할을 하는 객체에 정의된 메서드를 재정의하는 것. var Foo = function (bar) { this.bar = bar; }; Foo.prototype.getBar = function () { return this.bar; }; var foo = new Foo('hello'); foo.getBar = function () { console.log(this.bar + ', World!'); }; foo.getBar(); // hello, World! 가 출력된다 생성자 Foo의 프로토타입에 getBar라는 메서드를 정의한다. 따라서 생성자 Foo 로 만들어.. 2024. 2. 2.
[피그마] 피그마 기능들 정리하기 지난 블로그 글에서, 피그마에서 개인적으로 유용하게 쓰는 기능들을 정리해보겠다고 언급했었다. 피그마를 많이 다뤄보진 않았지만, 다른 사람의 참고가 되었음 하는 마음에 몇 가지를 정리해본다. 컴포넌트(Component) 기능 다양한 곳에서 여러 번 사용되는 컴포넌트를 만들 때 사용된다. 하나의 컴포넌트로 묶으려는 요소들을 모두 선택한 후, 마우스 오른쪽 클릭하여 나오는 메뉴를 통해 컴포넌트를 만드는 것이 가능하다(혹은 맥 기준 Option + Command + K). '중복되는 요소는 그냥 복사 + 붙여넣기로 사용하면 되지 않나?' 라고 생각할 수 있지만, 그럴 경우 컴포넌트의 디자인을 수정해야 할 때 골치아플 수 있다. 복붙한 모든 컴포넌트의 디자인을 수정하던가, 하나를 수정하고 다른 자리의 컴포넌트들 .. 2024. 1. 28.
[Javascript] 프로토타입 알아보기 - 1 코어 자바스크립트를 읽고, 프로토타입에 대해 공부한 내용을 정리한다. 프로토타입(Prototype) : 자바스크립트의 모든 객체와 연결된, 부모 역할을 담당하는 객체. JS에는 클래스 기반이 아닌, 프로토타입 기반 객체 지향 언어이다. 프로토타입을 통해 객체 지향의 상속 개념을 구현한다. 프로토타입의 개념 다음과 같은 코드가 있을 때, 이 코드를 실행한 결과를 도식화 하면 아래와 같은 그림을 그릴 수 있다. const instance = new Foo(); Foo 생성자 함수를 통해 Foo의 인스턴스인 instance를 생성하고 있다. 이 때, instance의 __proto__([[prototype]]) 프로퍼티가 자동으로 부여되고, 이 프로퍼티는 해당 인스턴스의 부모의 프로퍼티(여기서는 Foo의 pr.. 2024. 1. 24.
[Javascript] 콜백 함수 알아보기 코어 자바스크립트를 읽고, 콜백 함수에 대해 공부한 내용을 정리한다. 콜백 함수(Callback Function) : 다른 코드의 인자로 넘겨주는 함수, 매개변수를 통해 다른 함수의 내부로 전달되는 함수. ※ 고차 함수(Higher Order Function): 매개변수를 통해 함수 외부에서 콜백 함수를 전달받은 함수. 콜백 함수를 받은 고차 함수는 원하는 때에 콜백 함수를 실행할 수 있음. 즉, 콜백 함수의 제어권을 다른 함수에 넘겨주는 것. 제어권 고차함수는 콜백 함수에 여러가지 제어권을 가질 수 있다. 1. 호출 시점 고차 함수는 콜백 함수를 자신이 원하는 시점에 실행할 수 있다. var counter = 0; var foo = () => { console.log(counter); if (++cou.. 2024. 1. 21.
[블로그 프로젝트] 0. 블로그 기획과 디자인 이전부터 나만의 블로그를 만들고 싶다는 생각을 갖고 있었다. 특히 웹 개발을 접하고 이 분야를 더 깊게 파고들고 싶다는 생각을 하고 나서부터 그런 생각이 더 깊어졌다. 새해도 되었고, 그동안 조금씩 계획하고 있었던 블로그 개발의 시동을 걸어야겠다는 생각이 들어, 이제껏 개인적으로 정리해두었던 기획과 디자인 아이디어를 올려보고자 한다. 기획 단계, 어떤 블로그를 만들지 정하기 기존 블로그의 단점? 우선, 현재 사용중인 티스토리 블로그에서 느낀 불편함을 나열하자면 아래와 같다. 나만의 디자인 적용의 불편함. 스킨 기능이 있으나, 100% 나만의 개성이 드러나는 디자인을 적용하기엔 불편함이 있는 느낌이다. 에디터의 문제. 특히 코드 등을 정리할 때마다 느낀 것이지만, 다른 블로그 플랫폼인 velog 등에 비해.. 2024. 1. 15.
[웹 기본 쌓기] 렌더링, 리플로우/리페인트 근래 이런저런 자료를 접하며 부족했던 기본 지식을 쌓고 있다. 특히 개발할 때 MDN 문서를 자주 참고하며 도움을 얻는 편이었는데, 이 MDN에 좋은 문서들이 많아 시간 날 때 조금씩 읽는 중. 이미 문서로 나와있는 내용이지만 블로그에 남기며 한 번 더 복습을 하게 되므로... 읽은 것을 백업 겸 가볍게 끄적인 내용을 적는다. 렌더링은 어떻게 될까? (중요 렌더링 경로, Critical Rendering Path) 중요 렌더링 경로 : 렌더링 과정을 일컫는 말(정확히는, 브라우저가 HTML, CSS, JS를 화면상의 픽셀로 변환하는 단계). 브라우저는 요청을 통해 웹페이지에 대한 정보를 받아서 아래와 같은 과정을 거친다. 1. HTML을 분석한다(이때 분석을 파싱이라고 함). 분석한 HTML을 가지고 D.. 2024. 1. 10.

티스토리툴바