Life and IT

Cross Browsing이란? 한국소프트웨어진흥원의 "Cross Browsing 가이드"에 따르면 다음과 같이 설명하고 있다. Cross Browsing이란 적어도 표준 웹 기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우지지 않도록 공통 요소를 사용하여 웹페이지를 제작하는 기법을 말하는 것이다. 또한, 지원할 수 없는 다른 웹브라우저를 위한 장치를 구현하여 모든 웹브라우저 사용자가 방문했을 때 정보로서의 소외감을 느끼지 않도록 하는 방법론적 가이드를 의미하는 것이다. 이는 인터넷 환경 자체가 일반 테스크톱 웹 브라우저뿐만 아니라 모바일, 임베디드 기기, 홈 네트 워킹용 장비 등 아주 다양한 인터넷 환경이 존재하며, 일반인, 장애자,..

Renderer Process(이하 렌더러 프로세스)의 내부 작동 렌더러 프로세스는 웹 퍼포먼스의 많은 측면을 다룬다. 이것은 렌더러 프로세스의 내부에서는 많은 작업들이 존재하기 때문이다! 렌더러 프로세스에는 어떤 일들이 벌어질까? 렌더러 프로세스는 웹 콘텐츠들을 다룬다 렌더러 프로세스는 탭의 내부에서 발생하는 모든 것들에 대해 책임을 가지고 있다. 렌더러 프로세스에서 Main thread(이하 메인 스레드)는 당신이 사용자에게 보내는 코드의 대부분을 다룬다. 만약 당신이 web worker 또는 service worker를 사용한다면, 자바스크립트의 코드 일부는 때때로 Worker thread가 다루게 된다. Web Worker와 Service Worker Web Worker와 Service Worke..

모든 HTML 요소는 박스 모양으로 구성되어있다. 이것을 박스 모델이라고 부른다. 나는 css를 다루며 padding, margin, border를 흔하게 사용해왔는데, 박스 모델은 이 세 가지에 내용(content)을 더해 구성되어있다. 또한 박스는 width, height 속성을 가지고 있다. 이 두 속성은 내용 부분을 대상으로 적용된다. 따라서 padding, margin, border의 크기는 포함되지 않는다.

클라이언트와 서버 간의 포트가 다르면 클라이언트에서 api 요청을 할 때 cors 정책에 위반이 된다. 이를 해결할 수 있는 방법으로 프록시 서버를 구축하여 서버와 서버 간의 통신을 하도록 해서 우회하는 것을 선택하였다. 이때 사용한 것이 웹팩 데브 서버이다. 이를 위해 웹팩과 웹팩 데브 서버에 대해서 알아보았고 내용을 정리해보았다. 웹팩으로 해결하려는 문제 자바스크립트 유효 범위 es6 modules 문법과 웹팩의 모듈 번들링으로 해결 - es6 modules 문법 import, from, export, default와 같이 모듈 관리 전용 키워드를 사용하므로 가독성이 좋다. 비동기 방식으로 작동하고 모듈에서 실제로 쓰이는 부분만 불러오기 때문에 성능과 메모리 부분에서 유리하다. 브라우저 별 http ..

스토어 스토어는 내부적으로 리듀서와 1. 애플리케이션의 상태, 2. 이벤트 리스너, 3. dispatching 여부를 나타내는 값 (isDispatching: boolean)을 관리한다. createStore API 내부 api 코드를 통해 구독하고 있는 리스너를 등록 및 관리하는 것을 알았다. action의 유효성 체크, dispatching 여부를 확인하고 등록된 리스너들을 forEach로 순회하며 수행하는 전반적인 과정을 알 수 있었다. 여기서 replaceReducer의 경우, 실제 구현 코드에서는 nextListeners와 currentListeners로 리스너 목록의 변경에 대한 상태를 분리해서 slice에 대한 비용을 줄였다고 한다. 하지만 리듀서 자체를 동적으로 활용한다는 점은 아직 와닿지..

https://leetcode.com/problems/merge-two-sorted-lists/ Merge Two Sorted Lists - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 나의 풀이) /** * Definition for singly-linked list. * function ListNode(val, next) { * this.val = (val===undefined ? 0 : val) * this.next = (next===undefined ?..

JS 인스턴스 클래스나 프로토 타입으로 만들어낸 것. 생성된 인스턴스의 원래 객체인 클래스 또는 프로토타입이 가지고 있는 프로퍼티와 메서드를 모두 상속받는다는 특징이 있다. export default 모듈 모듈을 내보낼 때 default 키워드가 붙으면 해당 모듈엔 하나의 개체만 존재한다고 명시하는 것이다. default가 있으면 모듈을 불러올 때 중괄호로 감싸지 않고 기입이 가능하다. 프로토타입 오브젝트의 메소드를 사용할 때에, 가장 가까운 프로토타입 오브젝트의 메서드를 먼저 참고한다. => 메서드 오버라이드 Ajax : 비동기 처리를 가능하게 만듬 V8 : 서버 로직 상당수를 브라우저 로직으로 넘어오게 하여 프런트 엔드 개발자에 대한 인식이 달라짐 nodeJS : 프론트 엔드와 백엔드를 모두 다룰 수..

https://leetcode.com/problems/search-insert-position/ Search Insert Position - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 나의 풀이) 시간 복잡도를 생각하지 않고 푼 코드는 다음과 같다. /** * @param {number[]} nums * @param {number} target * @return {number} */ var searchInsert = function(nums, target) ..

https://programmers.co.kr/learn/courses/30/lessons/42842 코딩테스트 연습 - 카펫 Leo는 카펫을 사러 갔다가 아래 그림과 같이 중앙에는 노란색으로 칠해져 있고 테두리 1줄은 갈색으로 칠해져 있는 격자 모양 카펫을 봤습니다. Leo는 집으로 돌아와서 아까 본 카펫의 노란색과 programmers.co.kr 나의 풀이) 전체 면적 = brown + yellow yellow = (전체 너비 - 2) * (전체 높이 - 2) 위 방정식을 세운 후 전체 면적에 대한 너비와 높이를 구한다(완전 탐색). 두 번째 방정식에 맞는 너비와 높이를 구한다. function solution(brown, yellow) { const area = brown + yellow; cons..

컴포넌트를 정의하는 방법은 두 가지가 있다. 함수 function Welcome(props) { return Hello, {props.name}; } 이 함수는 데이터를 가진 하나의 "props"(properties, 속성을 나타내는 데이터) 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트이다. 이러한 컴포넌트는 JavaScript 함수이기 때문에 말 그대로 "함수 컴포넌트"라고 호칭한다. 클래스 class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } React의 관점에서 볼 때 위 두 가지 유형의 컴포넌트는 동일하다. 컴포넌트 렌더링 이전까지는 DOM 태그만을 사용해 R..