과거의 내가 미래의 나에게

기능 컴포넌트를 만들 때 컴포넌트의 데이터를 가져가거나 변형시키는 등 외부에서 컴포넌트 내부로 접근하는 경우가 잦다. 이 때 컴포넌트의 데이터나 함수에 접근하는 방법은 생각보다 다양한데 이를 정리해보려한다.  1. Props부모가 자식에게 데이터를 전달할 때 사용한다. 자식은 props를 직접 수정할 수 없고 단지 받아서 읽기만 할 뿐이다.이를 사용하는 경우는 보통 부모가 자식에게 데이터를 단방향으로 전달할 때인데 자식이 이 데이터를 딱히 변경하지 않고 사용만 할 때 주로 쓴다. 부모 메시지: {{ message }}  2. Emit자식이 부모에게 데이터를 전달할 때 사용한다. 부모는 @event 리스너를 통해 이벤트를 감지하고 데이터들을 업데이트 하거나 조작할 수 있다.이를 사용하는 경우는 자식이 부..

작년 10월쯤 지도 공부를 조금 해놨는데, 그 조금이 뭐라고 요새 개발하는데 너무 도움이 된다. 근데 저번 글들이 다소 구성이 조악해서 아마 나중에 다시 건드려야 할 것 같다. 지도 컴포넌트를 만들다보니 전체적으로 크게 구조를 잡고 들어가는 식으로 하려다가 너무 모르는 것이 많아서 일단 기능을 구현하면서 익히고 다시 컴포넌트화를 시켜야 할 듯 하여 먼저 다짜고짜 기능을 구현해보려한다.오늘은 지도 위에 마커를 띄운 것과 클러스터를 생성한 것에 대해 기록하고 추가적으로 정리할 것이 있다면 해보려한다.   Marker 띄우기지도 위에 다양한 마커를 띄우고 개별 마커를 클릭하면 해당 마커의 스타일이 변경되는 작업을 기록해둔다.마커는 지도 위에 위경도 좌표를 기반으로 하여 점 객체가 띄워진 형태다. 해당 점 객체..

지난 시간까지는 비동기가 필요로 하게 된 배경 및 JS에서 비동기적인 처리를 하는 방법에 대해서 알아보았다. 오늘은 이러한 비동기적 처리를 개발자들이 어떻게 코드로 처리하게 되는 지 정리해볼 것이다.   AJAX 이전의 비동기 처리 방법AJAX 이전에는 비동기 함수 자체가 적었다. 기껏해야 타이머 함수나 이벤트 핸들러정도일까? 그 때는 HTTP 요청조차 동기적으로 진행했기에 비동기 처리에 대한 필요성은 더욱 부각되지 않았다. 따라서 비동기를 처리하는 방법은 태스크 큐와 이벤트 루프를 통한 콜백 함수의 실행으로 구성되어 작업되었다. 그렇기에 초기 비동기 함수들은 애초에 인자에 콜백 함수를 입력하도록 되어있는 듯 하다.  AJAX 이후의 비동기 처리 방법의 발전1. 비동기 처리 방법: 콜백 함수AJAX라는 ..

오늘은 비동기 처리가 무엇인지에 대한 명확한 정의를 알아보고 JS가 비동기 처리를 어떤식으로 수행하는지에 대해 살펴볼 것이다.  동기적이고 싱글 스레드로 구성된 JSJS가 브라우저 혹은 node 등에 의해 실행되기 시작하면 작성된 순서대로 코드가 실행된다. 순서가 오면 해당 코드에 대한 실행 컨텍스트가 만들어지고 콜 스택에 push 되는데 이것이 코드가 실행된다는 것이다.예를 들어 특정 함수가 순서가 와서 호출당하면 해당 함수는 콜 스택에 실행 컨텍스트로 만들어져 push 되고 함수의 실행이 완료되면 콜 스택에서 pop되어 제거된다.JS는 싱글 스레드이기에 한 번에 단 하나의 실행 컨텍스트만 실행할 수 있다. 이 뜻은 동시에 2개 이상의 함수가 실행될 수는 없다는 것이다.함수 2개가 실행되기 위한 방법은..

비동기에 대해서는 이미 어렴풋이 알고있다. 그렇기에 개발을 함에 있어서 관련된 문제를 해결할 수 있으며 또 이를 활용하여 여러 개발도 해왔다. 그러나 왠지 누군가 나에게 비동기에 대해 잘 알아? 라고 물어볼 때 나는 쉽사리 긍정할 수 없었고 또 가끔은 개발할 때 비동기 이슈같은데 명확한 원리를 이해 못하고있음을 느낄 때도 있었다. 25년에는 JS의 기본 이론을 좀 더 잘 알고자하는 목표를 세웠기에 이에 대한 첫 걸음으로 비동기에 대해서 완전히 마스터해보려고 공부하며 글을 정리해본다.   비동기에 대한 자잘한 의문들JS는 싱글 스레드 기반이고 동기적인 코드 실행이 기본이다. 따라서 비동기를 구현하기 위해서는 JS만으로 해결하는 것이 아닌 브라우저 엔진의 이벤트 루프 시스템을 이용한다. 이렇게 비동기가 어떻..