염딩코

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를 수행할 ..

Longest Common Substring 과 Longest Common Subsequence 란? LCS는 주로 최장 공통 부분 수열(Longest Common Subsequence)을 말합니다만, 최장 공통 문자열(Longest Common Substring)을 말하기도 합니다. 문자열 ABCDEF와 GBCDFE를 이용하여 차이점을 예시로 들어보면 해당 예시에서 최장 공통 부분수열(Longest Common Subsequence)은 BCDF, BCDE가 될 수 있습니다. 부분수열이기 때문에 문자 사이를 건너뛰어 공통되면서 가장 긴 부분 문자열을 찾으면 됩니다. 최장 공통 문자열(Longest Common Substring)은 BCD입니다. 부분문자열이 아니기 때문에 한번에 이어져있는 문자열만 가능합..

문제 풀이 처음에는 가장 많이 겹치는 순으로 제거하면서 겹치지 않는 선들만 남기려고 헀다. 하지만, 이 접근 방식은 DP와 거리가 있다고 생각을 했고 오히려 Greedy 알고리즘에 가깝다는 생각이 들었다. DP의 가장 중요한 특성 중 하나인 bottom-up을 고려하여 다시 생각을 해보는 시간을 가졌다. ⇒ 결과적으로 겹치지 않는 경우를 카운트 첫 번째 줄부터 마지막 줄까지 순차적으로 보면서 겹치는 경우를 고려하려고 했으나 쉽지 않았다. 처음에 입력을 받을 때, 랜덤한 순서로 받기 때문에 오름차순으로 정렬하여 우선 조금 더 쉽게 판단할 수 있도록 했다. (왼쪽을 기준으로 오름차순 정렬) 오름차순으로 정렬하여 가장 긴 수열(경우)를 찾는 것 = 가장 많이 겹치지 않는 경우

풀이를 생각해낸 과정 이 문제는 예전에 알고리즘 과제와 유사하다는 느낌을 받았다. (그래서 예전 알고리즘 수업 자료도 보면서 다시 공부를 했다.) 목적지에 도달을 하면 경우의 수에 1을 더하는 방식을 생각을 했었고, 그 과정에서 지나온 경로들을 모두 처리해줘야 했었다. 지나온 경로는 상하좌우를 따지면서 내리막길인 경우에 다른 표기를 해야한다고 생각했다. 그렇게 목적지에 도달하면 해당 경우의 수를 1씩 증가시키면서 답을 구하려고 했다. 오렌지 부분에서 고민을 많이 했고, 시간이 너무 지체되어서 참고를 하면서 구현을 했다. 풀이에 대한 설명 세부적인 내용은 주석을 통해서 간단하게 설명을 했고 핵심적인 내용 위주로 설명을 하면 각각의 노드에 왔을 때, 상하좌우를 따지면서 범위를 벗어났다면 continue를 하..

풀이 function solution(numbers) { const arr = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine']; for (let i = 0; i < arr.length; i++) { numbers = numbers.split(arr[i]).join(i); } return Number(numbers); } arr로 각 숫자를 구분하기 위해서 나열하는 것은 필수의 과정인 것 같다. 다만, 이것을 객체로 할 것인지 혹은 배열로 할 것인지에 따라 풀이 과정이 달라진다. 배열로 푼다면 replaceAll 메서드를 활용할 수도 있다. function solution(numbers) { const word..