React 썸네일형 리스트형 ESLint에 대해서 알아가기 ESLint 설정에 대해 알아가기 ESLint에 대해서 알아가면서, 설정에 대한 좋은 글이 있어서 참고 및 정리 해놓을려고 한다. 항상 설정에 대해서는 카피를 해서 사용만 해봤지, 해당 설정에 대해서는 무지 했던거 같다. 이번에 EsLint설정에 대해서 파해쳐 볼려고 한다. 아래 글을 참고해서 적을려고 한다. https://www.daleseo.com/eslint-config/ ESLint 상세 설정 가이드 Engineering Blog by Dale Seo www.daleseo.com 설정 파일 형식 ESLint는 JSON, YAML, JavaScript와 같이 다양한 형식의 설정 파일을 지원한다고 한다. 설정 파일의 이름은 항상.eslintrc 가 되야하며, 원하는 포맷에 따른 확장자를 사용해야합니다.. 더보기 React Hook과 Closure의 관계(feat. useState) Nextjs에서 timer를 만들다가 고민에 빠진 내용에 대해서 기록하고 싶어서 글을 쓰고 있다. React hook을 정말 많이 사용했고, 지금 timer만들때도 사용했지만, 정작 이 훅들이 어떻게 동작하는지에 대해서는 생각하지 못했었던거 같다. timer를 만들면서 useState에 클로저란 개념이 적용되어 있다는 것을 알게 되었고 그 내용을 천천히 적어보려한다. Closures 란? 여러 사이트에서 Clsoure란 개념이 존재하지만 가장 명확하게 정리한 개념을 적어놨다. “[Closure] makes it possible for a function to have “private” variables.” -W3Schools 클로저 덕분에 함수가 개인 변수를 가질 수 있게 되었습니다. let foo = .. 더보기 프레임워크와 라이브러리 프레임워크와 라이브러리 기준!!! 누가 누구를 컨트롤 하는가??? 내가 코드를 컨트를 하는건가? 모든 결정을 다 내리고 있는가? 아니면, 누군가 정해놓은 규칙에 따르고 있는가? 이것이 기준이다. 내가 코드를 컨트롤 하고 있다 === 라이브러리 라이브러리 정의는 개발에 필요한 것들을 미리 구현해 놓은 도구이다. 재사용이 가능한 기능을 미리 구현해놓고 필요한 곳에서 호출하여 사용 가능하도록 만들어진 집합이다. 프레임워크와의 차이는 내가 필요할 때마다 부를 수 있고, 필요없어 졌을 때, 삭제에도 전체 코드에는 문제 없는것이 라이브러리이다. 누군가의 규칙에 따라 코딩하고 있다 === 프레임워크 프레임워크의 정의는 애플리케이션 개발 시 필수적인 코드, 알고리즘, DB 컨넥션 등의 기능들을 위해 뼈대(구조)를 제공.. 더보기 Hoisting 이란? 유례? Hoisting : 끌어올리다. 식별자를 끌어올리다. hoisting은 어디서 나온걸까? 호이스팅을 알려면 먼저 알아야 할 것이 있는데, 실행컨텍스트 이다. Context : 해당 코드의 배경이 되는 조건, 환경정보를 뜻한다. Excution Context? 코드를 실행하는데 필요한 배경이 되는 조건/ 환경 동일한 조건과 환경을 지니고 있는 코드 조각들을 한데 모아 놓은 덩어리가 있다고 했을때, 이 코드뭉치를 실행할 때, 필요한 조건이나 환경정보가 실행컨텍스트라고 명명합니다. Excution Context → Lexical Enviroment 실행컨텍스트안에 있는 Lexical Enviroment를 알아야한다. Lexical Environment는 어휘적 / 사전적 환경 실행컨텍스트를 구성하는 환.. 더보기 브라우저 workflow & virtual DOM - 01 최근에 virtual DOM의 동작과정에 대해 궁금해서 찾아봤다. 근데 virtual DOM을 이해하기 위해서는 순서가 있다... 허허허허허헣헣ㅎ virtual DOM을 이해하기 위해서는 브라우저 workflow를 알고 가면 좋다. 이해가 훨씬더 잘되는 느낌? 그래서 오늘은 브라우저 workflow과정을 적고 가려고한다. 브라우저? 브라우저란 무엇일까? 우리가 인터넷을 접속할 때 사용하는 Chrome, Safari, FireFox, Explorer 등을 말한다. MDN 웹 브라우저(Web browser)혹은 브라우저는 웹에서 페이지를 검색하고 표시하며 사용자가 하이퍼링크 를 통해 추가 페이지에 접근할 수 있도록 하는 프로그램입니다. 브라우저는 사용자 에이전트의 가장 친숙한 유형입니다. 브라우저는 유저가 .. 더보기 Virtual DOM 알아보기 Virtual DOM 이 무엇일까? “DOM을 추상화한 가상의 객체” regular DOM의 추상화 개념을 활용할 새로운 또 다른 DOM 이다. 이것은 빈번한 repaint와 reflow문제를 보완하였으며, Dynamic UI를 만들기 위해 적합한 기능들이 내장되어 있다. 그러므로 Virtual DOM은 SPA 모델의 웹 어플리케이션 에서는 regular DOM 보다 최적의 성능을 발휘한다. 그래서 왜필요하다고? 복잡한 SPA(싱글 페이지 어플리케이션) 에서는 DOM 조작이 많이 발생합니다. 그 뜻은 그 변화를 적용하기 위해 브라우저가 많이 연산을 해야한다는 소리고, 전체적인 프로세스를 비효율적으로 만듭니다. 만약 뷰에 변화가 생기면, 그 변화는 실제 DOM에 적용되기전에 가상의 DOM에 먼저 적용시키고.. 더보기 Portal Portals Portal은 부모 컴포넌트의 DOM계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공합니다. 이 말은, 컴포넌트들의 상하 관계, 구조를 가지고 있는 문서인 DOM 상에서, 자식 컴포넌트를 부모 컴포넌트 바깥에 있는 다른 컴포넌트에 전달할 수 있다는 뜻이다. ReactDOM.createPortal(child, container) 첫 번째 인자(child)는 엘리먼트, 문자열, 혹은 fragment와 같은 어떤 종류이든 렌더링할 수 있는 React 자식입니다. 두 번째 인자(container)는 DOM 엘리먼트입니다. createPortal 메서드의 첫번째 파라미터 child를 통해 우리가 원하는 컴포넌트를 Portal에 집어 넣을 수 있다. 두 번째 인자 contai.. 더보기 이전 1 다음
