허도경, limewhale

프론트 개발에 관해서 프로그래밍을 하다 보면 어디선가는 반드시 마주치게 되는 단어가 있습니다. 바로 웹팩, 바벨, 폴리필입니다. 각 단어의 의미와 역할을 정확히 알고 있다면 상관없지만 어렴풋이 기능이 다르다고만 생각했거나 각 기능에 대해 명확히 설명할 수 없다면 이 글을 읽으면 많은 도움이 될 거 같습니다. 참고로 웹팩, 바벨, 폴리필은 프론트 면접에서도 자주 물어보는 용어입니다. 📖 폴리필(Polyfill) 폴리필을 사전에서 찾아보면 충전솜이라는 의미를 가지고 있습니다. 베개나 이불의 솜이 부족하면 우리는 충전 솜을 이용하여 부족한 부분을 채우는 역할을 합니다. 폴리필의 역할은 사전 의미처럼 부족한 부분을 채워주는 역할을 합니다. 그러면 부족한 것은 무엇이며 무엇을 채워주는가?라는 의문이 들 수 있습니..

TL;DR😄 watch와 computed 모두 Vue 인스턴스 내의 정의된 데이터 값에 변경이 일어나는지 감시하고 변경이 될 때마다 정의된 함수가 실행됩니다. computed는 기존에 정의된 데이터 값을 기반으로 새로운 데이터 값을 활용하기 위해 사용합니다. 정의된 데이터 값을 바탕으로 새로운 데이터 값을 생성하고 새로운 데이터 값에서 참조하고 있는 기존 데이터 값의 변경을 감지합니다. 그리고 참조하고 있는 데이터 값의 변경과 상관없이 최초에 computed에 정의된 데이터 함수를 실행합니다. watch는 watch에 정의된 데이터 값 하나만을 감시하기 위해 사용합니다. 또한 computed와 다르게 실제 데이터 변경이 일어나기 전까지는 실행되지 않습니다.(초기에 할당된 값에 변경이 일어나야만 watch..

자바스크립트 ES5에서는 새로운 기능이 추가되고 기존 기능 중 일부가 변경되었습니다. 기존 기능을 변경하였기 때문에 하위 호환성 문제가 발생하게 되는데 이러한 문제를 대비해서 변경사항 대부분은 ES5의 기본 모드에선 활성화되지 않도록 적용하였습니다. 대신 use strict라는 특별한 지시자를 사용해 엄격 모드(strict mode)를 활성화했을 때만 이 변경사항이 활성화되게 해 놓았습니다. 💡 strict 모드란? ECMAScript 5에서 처음으로 소개된 strict 모드는 자바스크립트 코드에 더욱 엄격한 오류 검사를 적용해 줍니다. 엄격 모드는 전체 스크립트 또는 부분 함수에 적용 가능합니다. 함수에 적용할 경우에는 "use strict"는 스크립트 최상단이 아닌 함수 본문 맨 앞에 사용하면 됩니다..

💡 CSS 애니메이션 다음 코드는 W3C tutorial에 있는 코드를 가져와 CSS 애니메이션으로 수정한 코드입니다. Click Me **** #container { width: 400px; height: 400px; position: relative; background: yellow; } #animate { width: 50px; height: 50px; position: absolute; background-color: red; } .animation-move { animation: move 4s } /* @keyframes rule */ @keyframes move { from { left: 0; top : 0; } to { top : 350px; left: 350px; } } function ..

💡 제어 컴포넌트 제어 컴포넌트에 대한 공식문서의 설명은 아래와 같습니다. 제어 컴포넌트는 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트됩니다. (중략) 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 “제어 컴포넌트 (controlled component)“라고 합니다. https://ko.reactjs.org/docs/forms.html#controlled-components 사용자 입력을 기반으로 자신의 state를 관리하고 업데이트한다라고 정의되어 있는데,,🤔 솔직히 어떤 말인지 잘 와닿지 않습니다. 한번 코드로 살펴보겠습니다...

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

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

가장 일반적인 자료구조의 큐와 스택에 대해 알아보고 두 자료구조의 차이점도 알아보려고 합니다. 💡 스택 (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는 외부(부모 컴포넌트)에서 상속받는 데이터이며, 데이터를 변경할 수 없습니다.