염딩코

Hi there ~ 👋 오늘은 밋팀의 북마크 기능을 구현하던 중 발생한 일을 공유할까 해요...!😁   인터넷이 느린 환경이나 API 호출 딜레이가 발생할 경우에 북마크가 적용될 때 딜레이가 발생하는 경우가 있었습니다.  (오늘도 어김없이 밋팀을 작업하는 johnyeom씨)  클릭 시 바로 적용이 안 되는 것이 보이시나요??..🧐  사용자 경험(UX)의 측면으로 봤을 때, 정말 좋지 않다고 생각했고 열심히 구글링을 해보았습니다!!🔥🔥🔥 이는 바로 '낙관적 업데이트'라는 개념을 통해서 지연 시간에 대한 불편을 해소할 수 있었습니다! 낙관적 업데이트란 무엇인가?낙관적 업데이트는 사용자의 동작에 대한 응답을 기다리지 않고 미리 UI를 업데이트하는 것입니다.낙관적 업데이트가 적용되기 이전의 북마크는 ..

Hi there~다들 잘 지내고 계신가요??😃저는 최근에 졸업작품을 마무리하고 프로젝트의 기능들을 하나씩 리팩토링하는 과정에 있습니다 :)   최근에 밋팀 메인페이지에 필터 기능을 구현하던 중 특이한 현상을 마주했습니다..! OMG..!!  제가 원하는 모습은 삭제버튼을 눌러도 드롭다운 창이 닫히지 않는 것이었어요!!하지만,,, 닫혔죠? 구글링을 하던 중 저와 비슷한 상황을 겪으신 분을 발견했어요!!! stopPropagation() 이라는 메서드를 통해서 해결할 수 있었습니다 😁 저의 코드는 현재 아래와 같은 구조를 띄고 있어요.부모 컴포넌트의 wrapper에서 클릭 이벤트가 발생하면 창을 닫고 열도록 구현이 되어있고,이 이벤트는 자식 컴포넌트들에게 전파가 되죠. 자식 컴포넌트 1에서는 아무런 문제..

며칠전 사이드 프로젝트의 댓글 기능을 작업하고 있었다. 정상적으로 동작하는지 확인하기 위해 테스트를 하던 중 아래의 사진과 같은 에러가 발생했다. "안녕"을 입력하면 "녕"까지 추가로 입력이 되었고, "하이"를 입력하면 "이"까지 추가로 입력되었다. 원인을 파악하다가 도저히 왜 이벤트가 두 번 실행되는 것인지 알 수 없었다. 구글링을 해서 찾아낸 결과, 영어와 다르게 자음과 모음의 조합으로 한 음절이 만들어지는 한글의 특성 때문에 발생하는 오류였다. onKeyDown / onKeyUp 를 onKeyPress로 변경하면서 오류는 해결할 수 있었다. onKeyDown / onKeyUp 키를 누르고 때는 동작 자체에 반응한다. 문자, 숫자, Ctrl, Shift, Alt, F1~F12, Scroll Lock,..

함수 객체의 프로퍼티 함수 객체의 프로퍼티에는 arguments, caller, length, name, __proto__, prototype 프로퍼티가 존재한다. arguments 프로퍼티 함수 객체의 arguments 프로퍼티 값은 arguments 객체 arguments 객체는 함수 호출 시 전달된 인수들의 정보를 담고 있는 순회 가능한 유사 배열 객체 지역변수처럼 사용(외부 참조 불가) 자바스크립트는 함수의 매개변수와 인수의 개수가 일치하는지 확인하지 않는다. 다음 예제를 살펴보자. 함수를 정의할 때 선언한 매개변수는 함수 몸체 내부에서 변수와 동일하게 취급한다. 즉, 함수가 호출되면 함수 몸체 내에서 암묵적으로 매개변수가 선언되고 undefined로 초기화된 이후 인수가 할당된다. 그래서, 선언..

일급객체 일급객체란 무엇일까? 다음의 조건을 만족하는 객체를 일급객체라 한다. 1. 무명의 리터럴로 생성할 수 있음.(즉, 런타임에 생성이 가능함.) 2. 변수나 자료구조(객체, 배열 등)에 저장할 수 있음. 3. 함수의 매개변수에 전달할 수 있음. 4. 함수의 반환값으로 사용할 수 있음. 자바스크립트에서 함수는 위의 조건을 모두 만족한다. 그래서 자바스크립트에서는 함수를 일급객체라고 할 수 있다. 다음 예제를 살펴보자. 함수가 일급객체라는 것은 함수를 객체와 동일하게 사용할 수 있다는 의미다. 객체는 값이므로 함수는 값과 동일하게 취급할 수 있다. 일급객체로서 함수가 가지는 가장 큰 특징은 일반 객체와 같이 함수의 매개변수에 전달할 수 있으며, 함수의 반환값으로 사용할 수도 있다는 것이다. 그렇다면 일..

React에서 useEffect 훅은 함수 컴포넌트의 side effect를 수행할 수 있도록 한다. side effect: 흔히 부작용으로 알고 있지만, 프로그래밍에서는 "변화가 발생하는 행위"로 이해하면 된다. useEffect의 effect 함수와 clean-up 함수에 대해서 알아보기 전에 React에서 마운트와 언마운트의 개념을 알고 있어야 한다. 마운트(mount): 마운트는 컴포넌트가 최초로 렌더 될 때 거치는 과정이다. 이후 props와 state가 변경될 때는 마운트 과정을 거치지 않는다. 언마운트(unmount): 언마운트는 컴포넌트가 삭제될 때 거치는 과정이다. useEffect의 기본 구조는 아래와 같다. useEffect를 사용하면 함수 컴포넌트에서 side effect를 수행할 ..

객체를 생성하는 방법 중 객체 리터럴에 의한 객체 생성은 가장 일반적이고 간단한 객체 생성 방식이다. 그 외에도 다양한 객체 생성 방식이 있는데, 그 중 생성자 함수를 사용하여 객체를 생성하는 방식에 대해 살펴보자. Object 생성자 함수 new 연산자와 함께 object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다. // 빈 객체의 생성 const person = new Object(); // 프로퍼티 추가 person.name = 'April'; person.sayHello = function () { console.log('Hi! My name is ' + this.name); }; console.log(person); // {name: "April", sayHello: ƒ} person...

내부 슬롯과 내부 메서드 프로퍼티와 어트리뷰트를 이해하기 위해 먼저 내부 슬롯과 내부 메서드를 알아보자. 더보기 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드다. ECMAScript 사양에 등장하는 이중 대괄호([[ ... ]])로 감싼 이름들이 내부 슬롯과 내부 메서드다. 내부 슬롯과 내부 메서드는 ECMAScript 사양에 정의된 대로 구현되어 자바스크립트 엔진에서 실제로 동작하지만, 개발자가 직접 접근할 수 있도록 외부로 공개된 객체의 프로퍼티는 아니다. 내부 슬롯과 내부 메소드는 직접 접근하거나 호출할 수 없다는 의미이다. (단, 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단을..

자바스크립트는 싱글 스레드 기반 언어이다. Non-blocking 방식의 비동기적인 동시성 언어이며 콜 스택, 이벤트 루프와 콜백 큐, 그리고 여러가지 다른 API들을 가지고 있다. 자바스크립트 엔진인 V8은 콜 스택과 힙을 가지고 있다. 힙은 메모리가 할당되는 부분 콜 스택은 함수가 호출될 때, execution context가 쌓이는 영역 콜 스택(Call Stack) 그림을 보면, 자바스크립트 엔진인 V8이 가지고 있는 힙과 콜 스택이 있고, 웹 브라우저에서 제공하는 Web API가 DOM, Ajax, setTimeout 등을 제공하는 것을 알 수 있다. 하단에는 event loop와 콜백 큐가 있는 것을 확인할 수 있다. 하나의 스레드 = 하나의 콜 스택 = 한 번의 한 작업 자바스크립트는 Sin..

Prototype은 뭘까? 오늘은 prototype에 대해서 공부해봅시다! Prototype에 대해서 공부하기 전에 JavaScript에서 class에 대한 내용을 잠시 설명하고 가겠습니다. 아래의 코드를 보시면 기계라는 것을 통해서 object를 마음껏 찍어낼 수 있습니다. 비슷한 object를 쉽게 만들고 싶을 때, 아래와 같은 문법을 사용할 수 있습니다. // object 복사 기계(부모) function 기계() { // 복사된 object가 기본으로 가질 속성 this.q = 'strike'; this.w = 'snowball'; } // object 생성(자식) var nunu = new 기계(); console.log(nunu); // { q: "strike", w: "snowball" } ..