Life and IT

모든 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..

JSX (JavaScript XML) JavaScript를 확장한 문법이다. JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모든 기능이 포함되어있다. JSX는 React "element"를 생성한다. JSX란? React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 '컴포넌트'라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리한다(복잡성을 낮춘다). JSX의 중괄호 { } 안에는 JS의 유효한 모든 표현식을 넣을 수 있다. JSX도 표현식이다. JSX를 if 구문 및 for loop 안에 사용하고, 변수에 할당하고, 인자로서 받아들이고, 함수로부터 반환할 수 있다. JSX 속성 정의 어트리뷰트에 따옴표를 이용하여 문자열 리터럴을 정의할..

https://programmers.co.kr/learn/courses/30/lessons/42587 코딩테스트 연습 - 프린터 일반적인 프린터는 인쇄 요청이 들어온 순서대로 인쇄합니다. 그렇기 때문에 중요한 문서가 나중에 인쇄될 수 있습니다. 이런 문제를 보완하기 위해 중요도가 높은 문서를 먼저 인쇄하는 프린 programmers.co.kr 나의 풀이) 이번 알고리즘도 풀지 못하였다. 제한 시간을 2시간으로 두고 풀어보았고, 수 차례 쓰고 지우고를 반복했지만 무엇인가 벽이 느껴졌다. 아이디어 힌트를 얻고 풀긴 했지만 2단계에 들어서고부터는 계속 힌트를 얻어 풀고있는데 만족스럽지 못하다. function solution(priorities, location) { let rank = 0; while (pr..