Bleeding edge

1. throttle 사용방법 : 예시 window.addEventListener( 'scroll', _.throttle(() => { const currentPagePostion = window.pageYOffset; return toggleScrollIcon(currentPagePostion); }, THROTTLE_TIME), ); 방법이야 검색하면 나오지만, throttle을 사용할 때, 사용 모양을 자꾸 틀려 시간이 소모가 되었다 throttle의 사용방법은 DOMNode.addEventListener( 'event', _.throttle(()=>functionName(), THROTTLE_TIME) 다음과 같다. _.throttle과 그 안에 콜백함수를 화살표함수의 옆에 사용하거나, 화살표 함..

1. HTTP의 진화 과정 표준 이전의 HTTP HTTP/0.9: 문서화된 최초의 HTTP 버전 HTTP/1.0 기존 HTTP의 기능을 확장한 버전 HTTP/1.1 표준화된 HTTP 최초의 HTTP의 요청 메서드는 GET한가지 종류였습니다. 웹이 인기가 생기면서 기존의 HTTP 사양 만으로는 사용자들의 모든 요구사항을 충족할 수 없게 되었고 당시에 명시적인 규약이 없었기에 서버와 클라이언트의 기능이 구현되지 않았습니다. 96년도에 HTTP WG는 96년이 이르면서 HTTP/1.0의 사양을 만들었고 이 이전의 버전에 대해서는 HTTP/0.9라는 이름을 붙였습니다. HTTP1 1996 버전정보가 명시되고, 요청 응답사이에 이를 전송하였습니다 요청 메서드가 GET, HEAD, POST 세가지로 확장되었습니다 ..

바닐라 자바스크립트 렌더 최적화하기 바닐라 자바스크립트로 웹페이지를 만들 때 MVC 아키텍처를 기본으로 잡고 페이지를 많이 만들을 때 전체 렌더가 자주 일어나는 것으로 효율이 좋지 않다는 것을 알게되었다. 일반적으로 한 자바스크립트 파일내에서 상태를 관리하는 객체 state를 만들고 setState를 이용하여 변경된 값을 바꾸는 방식을 통하여 상태를 관리하였다. const setState = (newState) =>{ state = [...state, ...newState)] render()//혹은 render(state) } 위의 방법대로 페이지를 만들면, 페이지 렌더링이 상태의 값 1개가 바뀌면 페이지 전체를 처음부터 다시 로드를 하기 때문에 효율이 좋지 않다. 효율지 좋아지기 위해서 어떤 방법이 있..

오늘 공부한 것 오늘은, 면접 질문에 대해서 나올 수 있는 this에 관해 간단히 정리하려고 한다. 질문은 this란? this의 동작방식, call, apply, bind의 차이 세가지로 준비하려고 한다. 1. this란? this는 호출하는 방법에 따라 다른 객체를 참조하는 키워드이다. 객체 본인을 나타내는 java와는 다르게 javascript는 호출 방법에 따라 동적으로 결정된다. 이러한 차이는 java는 클래스 기반의 OOP이고, javascript는 프로토타입을 기반의 OOP기 때문에 발생합니다. 클래스 기반의 OOP는 컴파일 할 때, 클래스의 틀을 복사합니다. 프로토타입 기반의 OOP는 런타임 과정에서 프로토타입 데이터 구조를 저장합니다. 프로토타입 기반의 OOP는 데이터 구조를 저장하기 때..

페어프로그래밍에서 알게 된 것 1. 한글 regex 사용방법 한글 regex /[ㄱ-ㅎㅏ-ㅣ가-힣]/ 자음, 모음, 자모음을 모두 모은 조합이다. 중간에 자음 모음만 따로 고르는 방법은 /[ㄱ-ㅎ]/ /[ㅏ-ㅣ]/ /[가-힣]/ 과 같이 끊어서 사용할 수 있다. 2. dialog tag 자바스크립트로 더보기와 같은 기능을 사용할 떄는 일반적으로, display none이나, hidden과 같은 것을 이용하여 무언가를 숨기고 다시 show를 반복한다. 하지만, 이 기능은 자체적으로 HTML에 기능을 가지고 있기 때문에 이 기능을 사용하면, 간단한 css만 터치하면 숨기기 기능을 아주 쉽게 사용할 수 있다 바로 details와 summary이다. 사실 내가 오늘 다루고 싶은것은 detail와 summary가..

localhost란? 컴퓨터 네트워크에서 사용하는 루프백 호스트 명으로, 자신의 컴퓨터를 의미한다. 루프백이란? 원래의 장치나 장비로 돌아가는 것을 의미한다 port란? 포트는 연결 종단점 식별과 특별한 서비스에 데이터 연결을 위하여 할당한 숫자이다. 페어프로그래밍 : 복습을 하는게 중요하다고 생각하자. 목표는 되게하는 것이 아니라, 이게 최선의 코드인건가를 고민해 볼 것.우선 요구사항에 맞게 코딩을 하고, 리펙토링을 필수로 한다. 만드는데 1시간을 사용한다면 리펙토링에 3시간을 사용하자. 리펙토리할 때 순위 중복이 없어야한다 네이밍이 중요하다 함수를 나눌 떄 어떤 레벨로 나눌 것인지 인수는 어떻게 나눌 것인지 페어프로그래밍의 장점 즉각적인 피드백으로 빠르게 코드 품질 향상 팀이 소유권을 갖고 코드의 문..

HTML은 선언형 언어라 읽기가 쉽다. 자바스크립트는 멀티 패러다임이다.(명령형, 함수형, 객체 모두를 지원한다). 선언형 : WHAT에 관심이 있다. 인간의 언어에 가깝다. 명령형 : HOW에 관심이 많다. 기계어에 가깝다. 리액트 장점 선언형(가독성이 좋고 유지보수성이 좋다) 컴포넌트 기반이다 SPA를 구분하는 방법? ⇒ HTML이 단 한개! 있는 것을 말한다. spa에서 div를 갈아끼우는 방법도 여러가지가 있다. 가장 있기 있는 방법은 컴포넌트로 갈아끼우는 것이 좋다.(컴포넌트로 렌더링한다) Component 거대한 틀이 있다고하면, 거대한 구성요소의 하나. Component는 재사용을 하기 위해 이야기를 많이 한다. Component의 가반 기본 개념은 태그를 만들어야 가능하다 결합을 낮춘다. ..

JS 이용하여 HTML을 수정하면서, 아무런 문제 없이 사용하던 문제점이 하나가 있었다. 정적요소와 동적요소의 혼합. 위의 현상은, 일관성이 결여가 되면서 보이는 현상이며, 이 일반성 결여는 유지보수성과 가독성을 저하시킨다. 정적 요소와 동적요소의 혼합을 막기 위해서, HTML에 대한 JS의 의존 종속성을 제거해야한다. 이번에 시도한 방법은 동적인 속성(JS만을)을 사용하였다. 정적요소와 동적요소의 혼합에 의해 유지보수성과 가독성이 저하되는 이유에 대해서 간단하게 이야기를 하면 1. 동적으로 콘텐츠를 수정하는 부분이 innerHTML, textContent, classList 등 다양한 방식으로 이루어져 일관성이 떨어진다. 2. HTML 구조가 변경되었을 때 로직을 바꿔야하는 경우가 생길 수 있다. 동적..

Coding Test 1. 백트래킹 완전탐색과 다르게, 조건에 맞지 않은 경우 가지치기하여 탐색시간을 줄이는 기법 조건이 맞지 않을 경우 제외하기 때문에 완전탐색보다 효율적이다. 조건이 맞지 않은 경우, 이전 과정으로 돌아가야 하기 때문에, 재귀를 자주 사용한다. 조건에 대한 설계를 잘하는 것이 중요하다. 1-1. 백트래킹 과정 노드의 유망성을 점검 유망하지 않다면 배제 배제하기 이전 부모노드로 이동하여 다른 손자 노드 탐색 (배제를 하였다면 불필요한 부분은 다시 돌아가지 않는다) 1-2 백트래킹 문제 특징 주로 재귀 함수로 구현하기에 주어지는 N의 크기가 적다 이전 과정으로 탐색이 필요한 경우 주로 Check 배열을 많이 사용한다. Todo List todo list를 만들 때 실수가 많이 나는 부분 ..