허도경, limewhale

단순한 정보를 제공하던 정적인 웹 화면에서 이제는 정보제공은 물로 다양한 인터렉션과 애니메이션 효과까지 적용된 웹 화면들이 늘어나고 있습니다. 오히려 정적인 웹 화면을 찾는 게 더 힘든 것 같다는 생각이 들 정도로 회사를 대표하는 대부분의 사이트에 들어가 보면 웹 사이트들이 크고 작은 애니메이션 효과가 적용되어 있습니다. 그 중 가장 많이 사용되는 효과는 단연 스크롤 애니메이션일거라 생각됩니다. 스크롤 애니메이션이란 웹 화면의 스크롤이 이벤트가 발생해야 하는 웹 화면의 위치에 도달하였을 때 미리 정의해놓은 이벤트 효과가 발생되는 효과를 말합니다 애니메이션 효과를 적용하는 방법은 대표적으로 인터섹션옵저버를 사용하거나 윈도우의 스크롤 값과 이벤트가 적용되어야 하는 타깃의 offset값을 비교해서 애니메이션을..

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

React, Vue 모두 CLI(command-line interface)를 통해 신규 프로젝트를 생성할 수 있게 제공하고 있습니다. vue 역시 CLI를 통해 프로젝트를 설치하기 위해선 아래의 명령어를 터미널에 입력하면 CLI를 통해 프로젝트를 설치할 수 있습니다. 💡 CLI 설정하기 ✔ Install npm install -g @vue/cli # OR yarn global add @vue/cli ✔ Create a project vue create my-project # OR vue ui 👍 프로젝트 설치 정상적으로 프로젝트를 설치하면 'default'와 'Manully' 옵션이 있는데 이 중 Manully 옵션을 선택하여 들어가게 되면 Vue에서 우리가 원하는 옵션을 선택하여 설치할 수 있습니다. ..

요즘 핫한 React와 Vue 모두 'Vertual Dom' 이라는 것을 사용합니다. 그럼 도대체 버추어 돔이 무엇이길래 요즘 가장 핫하고(스벨트 미안: 그리고 참고로 스벨트는 버추어 돔을 사용하지 않습니다) 사용빈도가 높은 두 프레임워크에서는 버추어 돔을 사용할까요? 우선 버추어 돔(Vertual Dom)을 이해하기 전에 선행 지식으로 알아두면 좋은 것은 브라우저의 동작원리입니다. 브라우저의 동작원리를 모른다고 해서 버추어 돔을 이해하지 못하는 것은 아니지만 확실히 브라우저의 동작원리를 이해하고 있으면 왜 버추어 돔을 사용하는지와 버추어 돔이 무엇인지 좀 더 명확하게 이해하실 수 있습니다. 브라우저의 동작원리를 심도있게 알고 싶으시다면 이전에 작성한 브라우저는 어떻게 동작하는가? 를 먼저 읽어 보시고 ..

이 글은 React에 관심이 있는 분들이라면 모두를 대상으로 작성되었습니다. 동기 워낙 빠르게 다변하는 IT에서 Angular, Vue, React는 확실히 자신들만의 생태계를 구축하며 Front개발에는 이제 빠져서는 안 되는 라이브러리로 자리 매김했습니다. 저도 Angular, Vue 두 프레임워크는 실무에서 사용을 해 본 적은 없지만 개인적으로만 공부를 해 본 상태였고 혼자서 공부를 하지 않고 있는데 하루가 다르게 변하는 코드들을 보면서 더 이상은 미룰 수 없다고 판단하여 공부를 시작했습니다. 운이 좋게도 저는 현재 개발팀에 소속되어서 UI 개발 업무를 담당하고 있는데 팀에서 인원들을 나누어 각자의 관심 분야를 공부하고 토의하는 자리를 만들면 좋겠다는 의견이 있었고 저는 관심분야인 React를 선택하..

React를 최근에 공부를 하고 있습니다. 요즘은 너무나 많은 자바스크립트 라이브러리가 나와 있고 이미 실무에서도 해당 라이브러리를 많이 사용하고 있습니다. 이전에 Vue를 공부하면서 포트폴리오도 Vue로 만들기도 했지만 혼자서 공부를 한다는 것에 한계가 있었고 아무래도 혼자서 공부를 하며 업무와 병행하다 보니 공부를 한다는 게 생각처럼 쉽지 않았습니다. 이 글은 큰 목차로 보면 UI 개발 카테고리에 포함되어야 하는 것이 맞지만 React는 너무나 큰 생태계를 가지고 있고 React만으로도 다루어야 되는 이야기 목차가 많다고 생각하여 별도의 항목으로 나누게 되었습니다. 이 글은 저와 같이 React를 공부를 하고 싶은데 막연히 어떻게, 또 어디서부터 시작을 해야 되지? 하는 의문과 불안감 등의 고민을 가..