글이 좋아서 링크를 통해 공유합니다.( https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Virtual-DOM/1\. 브라우저 로딩 과정 1\. 파싱 2\. 스타일 3\. 레이아웃

[Tech concert : front-end 2019 - 데이터 상태관리. 그것을 알려주마](를 보고 정리한 내용입니다. FE에서 상태관리란? 페이지 작업을 하던 프론트 개발 방식에서 이제는 Web app으로 진화하여 동기, 비동기 로직을 수행하고 API를 AJA

이벤트 관련 이슈를 작업 도중 자꾸 헷갈리는 이벤트 수식어와 핸들 과정을 정리해보는 시간을 가져볼까한다.브라우저에서 이벤트가 어떻게 감지되는지 또 어떻게 전파되는지 확인해본다.이벤트 버블링은 특정 화면 요소에서 이벤트가 발생하였을때 해당 이벤트가 더 상위의 요소들로 전

프로그램을 개발할땐 각각의 특색에 맞는 개발 언어가 존재한다.이러한 언어는 컴퓨터가 바로 해석할 수 있는 단계가 아닌 개발자가 작성(코딩)하기 편한 언어(고급언어)로 되어있다.고급언어를 컴퓨터가 이해하기 위해서는 번역기가 필요하다. 오늘 알아볼 내용이 바로 이 번역기에

자바스크립트는 싱글 스레드로 돌아가는 언어이다. 하지만 비동기적 로직들로 인해 이를 헷갈려하는 사람들이 존재한다. 그래서 자바스크립트가 어떤 방식으로 동작하는지에 대해서 알아보고 왜 싱글 스레드인지를 학습하려합니다.자바스크립트가 동작하는 방법을 이해하기 위해서는 JS

클로져는 내부함수가 외부함수의 실행 컨텍스트에 접근할 수 있는 것을 가르킨다.클로져는 함수와 함수에 의해 생성되는 범위 객체를 함께 지칭하는 용어.자바스크립트는 함수가 실행될 때 언제나, '범위' 객체(실행 컨텍스트)가 생성되어 해당 함수내에서 생성된 지역 변수를 여기

📖 들어가기 텔레그램 메신는 안드로이드, iOS, Mac, Window 등 모든 플랫폼에서 사용 가능한 무료 메신저입니다. 텔레그램 메신저의 장점 중 하나로는 API가 공개되어 다른 프로그램 또는 플랫폼과 연계해 사용 가능하다는 점입니다. > 텔레그램 봇을 만드는

서비스를 개발하고 운영하면서 필요했던 클라이언트의 에러 로그 트래킹 시스템 도입을 정리SPA(Single Page Application) + CSR(Client Side Rendering)로 구성된 서비스들이 많아지고 있습니다. 서비스를 운영하다보면 개발자의 예상과는

모든 npm package는 이름을 가지고있습니다. 그리고 약간의 패키지들은 scope를 가지고있습니다. 이런 스코프를 가지고있는 패키지들은 이름을 정하는 룰이 있습니다. 바로 @ symbol과 slash를 사용하는 것이죠.이것을 scoped packages 라고 부르

서버측에서 엑셀 파일을 리드하여 원하는 작업을 수행하는 작업이 있었는데 엑셀 파일에 대량(5만개 정도)의 데이터보다 초과일때 response time이 예상보다 길어지는 이슈가 생겼다. 또 그 응답속도를 예측 할 수 없었기에 한정된 데이터의 크기만큼만 전송 가능하도록

프론트 디자인을 구성하다보면 Modal부분이 거의 필수적으로 사용되기 마련이다. 요즘은 여러 라이브러리에서 이런 모달들을 지원해주기 때문에 따로 내가 만들 필요는 없지만나만의 커스텀 디자인을 만들고 싶은 경우도 있고, 어떤 구조로 만들어지는 궁금하기도하다. 그래서 오늘

프로젝트를 여러개 진행하다보면 작성자 설정을 실수하여 원하지않는 작성자명이 들어가는 경우가 있는데 이것을 고쳐보도록하자.터미널을 이용한 커맨드라인으로 이 문제를 해결함. git log를 명령어를 이용해서 실수한 커밋에 대한 해쉬값을 가져온다.git rebase -i {

git을 사용할때 파일 이름이나 디렉토리 이름을 대소문자만 바꿨을뿐인데 추적이 안되는경우가 있다.이경우에는 git에서 제공하는 mv명령어를 이용해서 파일 이름을 변경하면된다.

ESLint와 Prettier를 사용하는 이유ESLint 적용하기Prettier 적용하기ESLint + PrettierGit hook을 이용한 자동화 방법ESLint와 Prettier는 보통 프로젝트 시작 단계(초기 셋팅)에서 코드 포맷팅과 코드 품질을 위해서 사용합니

ESLint 설정과 옵션을 건드리면서 알게된 사실을 기록합니다.프로젝트에 ESLint를 설정하는 방법eslintrc 파일의 설정문서를 이해하며 사용회사 내에서 담당하던 프로젝트에 Lint 설정이 아주 독특하게 되어있었다. 팀에서 사용하는 모든 린트 플러그인들을 모아서

Leetcode algorithm study plan > 문제 링크1부터 N까지의 수 중에서 제공되는 isBadVersion 함수를 통해 가장 낮은 수에서의 true값을 찾는 문제. O(log n)으로isBadVersion 함수@param {Integer}@return

Leetcode algorithm study plan > 문제 링크정렬된 배열중에서 타겟값과 일치하는 값의 위치를 찾아라. O(log n)으로O(log n)으로 풀어야하는 문제이므로 이진탐색을 이용한다.이진탐색 조건중인 배열의 정렬상태를 확인한다.이진탐색은 배열의 값이

문제링크정렬되지 않은 숫자 배열에서 가장 작은 배열에 없는 양의 수를 구하여라.배열의 양의 숫자만 남도록, 오름차순으로 정렬한다.제일 처음 요소가 1이 아니라면 1을 리턴cnt값을 1로 시작해서 배열을 순회하면서 cnt값도 함께 올려주면서 체크한다.이때 중복된값이 연속

Problem 문제 링크 주어진 배열의 요소들을 합하여 target의 값이되는 조합을 구하여하는 문제 Solution combination sum 요소의 중복을 뺀 방법 현재 인덱스를 추가하지않고 뎁스를 이어나가면된다. JS Code

문제 링크후보리스트에서 중복을 허용하여 합했을 때 target이 나오는 경우를 구한다.DFS를 이용하여 배열의 순서대로 depth로 들어간다. 깊은 뎁스로 이동 하면서 해당 인덱스의 값을 더하고, 그 값이 target과 일치하면 저장, 초과하면 함수를 리턴시켜 더이상