허도경, limewhale

💡 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 ..

애자일 방법론이란? 애자일 방법론 이란, ‘Agile = 기민한, 날렵한’ 이란 뜻으로 좋은 것을 빠르게 취하고, 낭비 없게 만드는 다양한 방법론을 통칭해 일컫는 말로서 앞을 예측하며 개발하지 않고, 일정한 주기를 가지고 계속 검토해 나가며 필요할 때마다 요구사항을 더하고 수정하여 커다랗게 살을 붙이면서 개발해 프로세스 모델 방식을 말합니다. 미리 정해진 몇 개의 단계에 따라 엄격한 순서대로 이루어지는 일직선의 과정인 폭포수의 프로세스와는 비교가 많이되는 반대의 개념입니다. 애자일 방법론의 진행 과정 애자일 방법론은 계획 → 설계(디자인) → 개발(발전) → 테스트 → 검토(피드백) 순으로 반복적으로 진행되며 계획을 세운 후 다음 단계까지 기다려서 절차대로 진행하는 폭포수 모델과 달리 먼저 진행 후 분석..

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

💡 REST API 란 REST API는 웹에서 데이터를 전송 및 처리하는 방법을 정의한 인터페이스를 말합니다.. 모든 데이터 구조와 처리방식은 REST에서 URL을 통해 정의되며, 그래서 매우 직관적으로 이해할 수 있습니다. REST API에서 REST는 (Representational State Transfer)의 약자로 소프트웨어 프로그램 아키텍처의 한 형식입니다. 즉, 자원을 이름 (자원의 표현)으로 구분하여 해당 자원의 상태 (정보)를 주고받는 모든 것을 의미하며 월드 와이드 웹 (WWW)과 같은 분산 하이퍼미디어 시스템을 위한 소프트웨어 개발 아키텍처의 한 형식입니다 REST는 기본적으로 웹의 기존 기술과 HTTP 프로토콜을 그대로 활용하기 때문에 웹의 장점을 최대한 활용할 수 있는 아키텍처 ..

💡 비동기 프로그래밍(Asynchronous) Callback Promises async & await 👍 Callback 함수란? 다른 함수가 실행을 끝낸 뒤 실행(call back)되는 함수(⇒ 나중에 호출되는 함수)를 말합니다. 영어의 의미로 Call(호출) back(뒤에)의 개념으로 이해하면 쉽습니다. 다시 말해 코드를 통해 명시적으로 호출하는 함수가 아니라, 함수를 등록해 놓은 후 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수입니다. 파라미터로 함수를 전달받아, 함수의 내부에서 실행됩니다. ✔ 콜백 함수 (Callback Function) 사용 이유 자바스크립트에서 비동기적 프로그래밍을 할 수 있기 때문입니다. 자바스크립트는 싱글스레드를 사용하는데, 멈춤을 방지해줍니..

📖 이벤트 루프란 무엇인가요? 콜스텍(Call Stack)에서 이벤트가 순차적으로 진행되면 이어서 콜백큐(Callback Queue)에서 하나씩 동작을 Loop 시키는 것을 말합니다. 자바스크립트는 싱글 스레드 기반의 언어이고, 자바스크립트 엔진은 하나의 호출 스택만을 사용합니다. 이는 요청이 동기적으로 처리되어, 한 번에 한 가지 일만 처리할 수 있음을 의미합니다. 그러나 자바스크립트가 사용되는 환경을 생각해보면 우리는 많은 작업이 동시에 처리되고 있음을 알 수 있습니다. 예를 들면 브라우저에서 특정 이벤트를 발생시키고 동시에 여러 데이터를 호출해오는 경우가 발생하죠. 이런 환경이 가능하게 하는 것은 네트워크 요청과 같은 동작이 비동기적으로 이루어지기 때문입니다. 💡 이벤트 루프가 왜 필요할까? 자바스..

자바스크립트에서의 실행 컨텍스트는 굉장히 중요한 개념입니다. 실행컨텍스트를 이해하게 되면 Javascript의 동작 원리를 이해할 수 있게 됩니다. 자바스크립트의 동작원리를 이해하게 되면 코드가 에러를 발생하게 되더라도 좀 더 쉽게 예측이 가능해지게 됩니다. 이는 코드를 작성하거나 수정할 때 굉장한 차이점을 가지게 됩니다. 해당 내용이 조금은 어렵게 느껴질 수 있고 광범위하게 느껴질 수도 있지만 천천히 글을 따라서 읽다 보면 충분히 이해할 수 있도록 정리해보겠습니다. 📖 실행 컨텍스트란? 실행 컨텍스트란 코드가 실행되기 위해 필요한 환경 정보들을 모아 놓은 객체입니다. 실행 컨택스트의 동작은, 동일한 환경에 있는 코드들을 실행할 때 필요한 환경정보를 모아 컨텍스트를 구성하고, 이를 콜 스택에 쌓아놓은 뒤..

'자바스크립트는 유연한 언어다.' 라는 말을 들어보셨을 거라 생각합니다. 이는 자바스크립트의 언어적 특성 때문인데 지금은 많은 사람들이 자바스크립트의 단점으로 지적하는 부분 중 하나의 특성입니다. (그래서 최근에는 타입스크립트가 주목을 받고 있습니다.) 그럼 왜 자바스크립트가 유연한 언어이냐? 그것은 자바스크립트가 자체적으로 일반적인 언어에선는 에러가 발생되어야 하는 부분에서 에러를 발생시키지 않고 데이터 타입을 변환시키기 때문입니다. 그렇기에 우리는 자바스크립트가 어떤 방식으로 데이터의 형 변환을 하는지 이해하면 많은 도움이 됩니다. 자바스크립트의 형 변환은 크게 두가지 입니다. 자바스크립트 엔진이 필요에 따라 ‘암시적변환’ 을 혹은 개발자의 의도에 따라 ‘명시적변환’ 을 실행하는데 형변환을 시행하는데..

디바운싱(Debouncing)과 쓰로틀링(Throttling) 은 사실, 자바스크립트의 개념이라기보다는 프로그래밍 기법 중 하나입니다. 둘 다 디바이스(일반적으로 CPU)의 최적화를 위해 사용되곤 합니다. 이 두 가지 방법 모두 DOM 이벤트를 기반으로 실행하는 자바스크립트를 성능상의 이유로 JS의 양적인 측면, 즉 이벤트(event)를 제어(제한)하는 프로그래밍 기법입니다. 그렇다면 디바운싱과 쓰로틀링이 각각 무엇을 의미하는지 알아보시죠! 디바운싱(Debouncing) : 연이어 발생한 이벤트를 하나의 그룹으로 묶어서 처리하는 방식으로, 주로 그룹에서 마지막, 혹은 처음에 처리된 함수를 처리하는 방식으로 사용됩니다. 쓰로틀링(Throttling) : 연이어 발생한 이벤트에 대해, 일정한 delay를 포..

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