목록Front-end (4)
Rego의 블로그
프로젝트를 진행하던 중 특정 배열의 길이가 0보다 크면(>0) 동작하는 조건문을 작성했습니다. 아래의 코드와 유사한 조건문이었는데요. if (arr.length > 0) { // do something.. } 이 조건문에 대한 피드백이 있었습니다. 타입 검사와 런타임에서 발생하는 오류를 확인하는 상표 기법이라는 것이 있다! 피드백을 받고 상표 기법에 대해 학습할 내용이 이펙티브 타입스크립트에 있다고 하기에 학습을 진행했습니다. 상표 기법 예시 추가 예정 위의 예시를 보고는 객체에서만 쓰일 수 있는거 아닌가? 했었는데요. 그 중 저희 프로젝트에서 사용할 만하다고 판단한 예시가 있었습니다. 해당 예시 type AbsolutePath = string & {_brand: 'abs'}; const isAbsolu..

프로토타입(Prototype) 객체 자바스크립트는 프로토타입 기반 객체 지향 프로그래밍 언어입니다. ES6 이전의 자바스크립트(클래스가 추가되기 전의 자바스크립트)에서는 클래스 없이도 객체를 생성할 수 있습니다. 클래스 없이 객체를 생성하는 법 var person = { name: 'Park', age: 3, walk: function () { console.log('one step foward'); } }; console.log(typeof person); // object console.log(person); // {name: 'Park', age: 3} 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있는데요. 다른 객체 지향 언어에서의 상속처럼 부모 객체의 프로퍼티와 메소드..
우테코 레벨3가 시작된 지도 벌써 6주차에 접어들건만, 이제야 2주차에 했던 웹팩 빌드에 대한 글을 쓰네요. 프로젝트 빌드라고는 CRA로밖에 못했던 저이기 때문에 웹팩으로 프로젝트 빌드를 해야 하다는 청천벽력 같은 소리를 듣고 호다닥 공부를 해야만 했습니다. 주저리 주저리 떠들어댔지만, 결국 이 글을 쓰는 목적은 순전히 제가 다시 보기 위함이기 때문에, 웹팩 빌드에 대한 뭔가 프로페셔널하고 딥한 글을 원하셨던 분은 귀중한 시간을 다른 곳에 쓰셨으면 좋겠네요😄 저희 조는 패키지 매니저로 yarn을 선택했는데요. NPM이 패키지를 순차적으로 설치하는 동안 yarn은 병렬 설치를 수행하여 더 나은 속도와 성능을 제공한다고 합니다. https://www.knowledgehut.com/blog/web-develo..
반드시 잊어버릴 나를 잘 알기에 기록하는 글 #1 브라우저 렌더링이란? 브라우저 렌더링은 브라우저(Chrome, Edge, Safari 등)가 HTML, CSS, JS로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것을 말합니다. 파싱(Parsing)이란, 프로그래밍 문법에 맞게 작성된 텍스트를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해하고, 토큰에 문법적 의미와 구조를 반영하여 파스 트리를 생성하는 과정을 말합니다. 브라우저는 아래의 과정을 거쳐 렌더링을 수행합니다. 브라우저는 HTML, CSS, JS 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 ..