허도경, limewhale

설명에 들어가기 전에 필수 개념 2가지를 먼저 눈에 익혀주세요. Render: DOM Tree 를 구성하기 위해 각 엘리먼트의 스타일 속성을 계산하는 과정 Paint: 실제 스크린에 Layout을 표시하고 업데이트하는 과정 💡 useEffect useEffect는 컴포넌트들이 render와 paint 된 후 실행됩니다. 비동기적(asynchronous) 으로 실행됩니다. paint 된 후 실행되기 때문에, useEffect 내부에 dom에 영향을 주는 코드가 있을 경우 사용자 입장에서는 화면의 깜빡임을 보게됩니다. useEffect의 라이프사이클 (출처) 💡 useLayoutEffect useLayoutEffect는 컴포넌트들이 render 된 후 실행되며, 그 이후에 paint 가 됩니다. 이 작업은 ..

💡 rendering이란? 사용자의 화면에 미리 정의해 둔 화면을 보여 주는 것을 렌더링이라고 합니다. 💡 re-rendering이란? 사용자의 화면에 변화가 생겨(데이터 변경, 화면의 사이즈 축소 또는 확대 등)서 이를 다시 새롭게 정의하여 보여주는 것을 의미합니다. ✔ 컴포넌트가 re-rendering 되는 조건 자신의 상태가 변경될 때 (state 변경) 부모 컴포넌트가 re-rendering(리렌더링) 될 때 자신이 전달받은 props가 변경될 때 forceUpdate 함수가 실행될 때

자바스크립트에서 사용하는 call, apply, bind에 대해 알아보려고 합니다. 하지만 그전에 JavaScript에서 this에 대해 우선 먼저 알아보겠습니다. 아니 나는 call, apply, bind가 궁금해서 왔는데 왜 this를 이야기 하는거죠? 라는 의문이 드실 텐데.. 우선 this를 이해하게 되면 부수적으로 call, apply, bind가 연관되어서 이해되기 시작합니다. 그리고 This를 이해하게 되면서 우리를 그렇게 괴롭히던 다양하게 변경되는This(트렌스포머)를 이해할 수 있게 됩니다. 📖 This 너는 누구니? 자바스크립트 내에서 this는 '누가 나를 불렀느냐'를 뜻한다고 합니다. 즉, 선언이 아닌 호출에 따라 달라진다는 거죠. call, apply, bind는 자바스크립트에서 ..

📖 객체지향이란? 객체지향 프로그래밍(Object-Oriented Programming)이란 프로그램을 설계하는 개념이자 방법론을 의미합니다. 여기서 나오는 객체라는 단어가 현실에서는 잘 쓰이지 않는 단어라 의미가 안 와닿을 수 있습니다. 이해하기 쉽게 예시로 설명하자면, 주변에 존재하는 모든 사물(자동차, 건물, 옷 등), 생명체(사람, 고양이 등) 하나하나가 다 객체라고 할 수 있습니다. 따라서 객체지향 프로그래밍이란 단어 뜻 그대로, 프로그램을 상태(state)와 행위(behave)로 이루어진 객체라는 기본단위로 나누고, 이 객체들간의 상호작용을 통해 프로그램을 설계하고 개발하는 것 입니다. 💡 객체지향 언어의 특징 4가지 👉 캡슐화(Encapsulation) 한 객체가 특정한 하나의 목적을 위해 ..

가장 일반적인 자료구조의 큐와 스택에 대해 알아보고 두 자료구조의 차이점도 알아보려고 합니다. 💡 스택 (STACK)이란? 스택의 개념 스택(stack)이란 쌓아 올린다는 것을 의미합니다. 따라서 스택 자료구조라는 것은 책을 쌓는 것처럼 차곡차곡 쌓아 올린 형태의 자료구조를 말합니다. ✔ 스택의 특징 스택은 위의 사진처럼 같은 구조와 크기의 자료를 정해진 방향으로만 쌓을 수 있고, top으로 정한 곳을 통해서만 접근할 수 있습니다. top에는 가장 위에 있는 자료는 가장 최근에 들어온 자료를 가리키고 있으며, 삽입되는 새 자료는 top이 가리키는 자료의 위에 쌓이게 됩니다. 스택에서 자료를 삭제할 때도 top을 통해서만 가능하며 스택에서 top을 통해 삽입하는 연산을 'push' , top을 통한 삭제하..

주의!⚠️ 본글에서는 독자들이 HTTP method가 무엇인지 안다는 전제 하에 이야기를 진행합니다. Get과 Post는 Http method 중 가장 많이 쓰이는 method가 아닐까 싶습니다. 하지만 이 글을 읽는 당신은 둘의 차이점을 알고 계시나요? TL;DR😡 Get은 가져온다는 개념이고, Post는 수행한다는 개념으로 받아들이면 쉽습니다. 즉, Get은 서버에서 어떤 데이터를 가져와서 보여줄 때 사용합니다. 어떤 값이나 내용, 상태 등을 바꾸지 않는 경우에 사용을 하는 것입니다. 이에 비해, Post는 서버상의 데이터 값이나 상태를 바꾸기 위해서 사용합니다. 게시판으로 예를 들자면, 글의 내용에 대한 목록을 보여주는 경우나, 글의 내용을 보는 경우는 Get에 해당합니다. 그리고 글의 내용을 저장..

Props 부모 컴포넌트에서 자식 컴포넌트한테 전달하는 데이터 값으로 읽기 전용의 데이터입니다. 불변의 데이터 부모로부터 전달되는 데이터(읽기 전용) 변경 불가 State (상태) 컴포넌트에서 사용하는 값으로 값을 수정하고 사용할 수 있는 데이터입니다. 가변 데이터 구성 요소에 의해 유지 변경 가능 Props와 State 차이점 State는 내부 (컴포넌트)에서 생성하고 활동하고, 데이터를 변경할 수 있고 Props는 외부(부모 컴포넌트)에서 상속받는 데이터이며, 데이터를 변경할 수 없습니다.

CSS 작업에 사용하면 유용한 요소인 속성 선택자를 정리해 봅니다. 💡 [attribute] a[target] { color: red; } a 태그에 target이라는 속성을 가진 요소를 선택합니다. link 선택함 link 선택하지 않음 💡 [attribute=”value”] a[target="_blank"] { color: red; } a 태그에 target=”_blank”라는 속성을 가진 요소를 선택합니다. ※ target이 반드시 _blank인 요소만 선택됩니다.(주의!) link 선택함 link 선택하지 않음 link 선택하지 않음 💡 [attribute~=”value”] div[class~="apple"] { background-color: red; } apple이라는 class를 가진 요소를..

메모이제이션(memoization)이란? useMemo 함수에 대해서 알아보기 전에 알고리즘 시간에 자주 나오는 메모이제이션(memoization) 개념에 대해서 잠깐 알아보겠습니다. memoization이란 기존에 수행한 연산의 결괏값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말합니다. memoization을 잘 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있습니다. useMemo와 useCallback을 너무나도 어렵게 설명하는 곳이 많아서 여기서는 간단하게만 알아보겠습니다. 1. useMemo 메모이제이션된 '값'을 반환한다. 용법 useMemo(() => fn, deps) useMemo는 deps 가 변한다..

자바스크립트를 사용하다 보면 한 번쯤은 Lodash에 대해 들어보게 됩니다. Lodash는 자바스크립트에서 구현하기 힘든 부분을 보다 쉽게 사용할 수 있도록 도와주는 라이브러리입니다. 성능적인 개선 부분에서도 많이 사용하는데 공식문서 가이드 를 참고해도 사용방법을 알 수 있지만 구체적인 예시가 있어야 이해하기가 쉽기에 아래 예제를 통해 사용 방법을 익혀 봅시다. 👏 Collection 배열과 객체 모두 사용 가능한 메서드 💡 filter _.filter( 컬렉션, 검색할 데이터 또는 콜백 함수 ) 컬렉션에서 해당 데이터 또는 콜백 조건에 맞는 데이터를 포함한 컬렉션을 반환합니다. 리스트 검색 조건에 유용합니다. var users = [ { user: 'barney', age: 36, active: tru..