leesche blog

우리는 모두 똑같은 시간 속에서 살고 있…지 않나? 시간은 우리 모두에게 동일하게 흐르는 것처럼 보입니다. 우리 모두 같이 늙어가잖아요?! (그렇지 않을 수도 있겠죠…) 하지만 기술의 세계에서, 특히 데이터를 다루는 작업에서 시간은 예상치 못한 복잡성을 드러냅니다. 이 글에서는 웹프론트엔드 개발자로서 광고 및 전환 추적 데이터 수집 작업을 하면서 겪은 시간 관련 문제와 그 해결 과정을 공유하고자 합니다. 사례 문제의 시작 플랫폼 회사의 웹프론트엔드 개발자로서, 저의 주요 업무 중 하나는 사용자가 우리 플랫폼의 특정 페이지에 진입하거나 UI의 특정 부분을 충분히 오래 인지했을 경우 이를 임프레션 이벤트로 기록하는 것이었습니다. 이 데이터는 사용자가 언제 해당 페이지나 UI를 인지했는지에 대한 시간 정보를 ..

테스트 코드 작성 중, 컴포넌트가 실제로 어떻게 렌더링되는지 알고 싶을 때가 있다. 나는 제대로 한 것 같은데 안 되니까 답답해서 숨이 안 쉬어지고 영문을 몰라 팔짝 뛸 노릇이다. 그럴 때는 해당 컴포넌트에 test id를 prop으로 전달하고, screen.debug 메서드의 인자로 해당 엘리먼트를 넘겨보자(test id를 꼭 사용할 필요는 없고, 어떻게든 엘리먼트만 잡을 수 있으면 된다). screen.debug가 실행될 때 해당 엘리먼트가 어떤 상태였는지 터미널에 출력된다. 아래는 사용 예시다. test('A 필터를 선택했을 때 10일을 넘어선 기간을 입력하면 에러 메시지가 보여야 한다.', () => { renderComponent({ filterOption: 'A' }) const startDa..

상수 처리 왜 하는가? 내 생각을 적어보자면, "가독성을 높이고, 쉽게 유지보수를 하기 위해"라고 생각한다. 변경을 쉽게 하기 위해 하드코딩된 문자열과 숫자들이 여기저기 흩어져 있는 코드에서, 요구사항이 바뀌거나 상황이 바뀌어 그 구체적인 값을 변경해야 한다면, 시간과 비용이 많이 들 것이다. 하지만 하드코딩하지 않고 그 값들이 하나의 변수에 담겨 상수 처리되어 있다면, 위와 같은 상황에서 상수 값만 바꾸면 아주 쉽게 모든 값들이 변동된 값을 참조하도록 할 수 있다. 의미 파악을 위해 또, 하드코딩된 값을 처음 보면 그 값이 도대체 왜 그 값인지, 무엇을 의미하는지 알기 힘들다. 그런데 숫자와 문자열이 있어야 할 자리에 대문자로 대문짝만하게 어떤 단어가 적혀있다면, 그 자리에 어떤 역할을 하는 값이 있을..

트리다 트리!!! 문제 링크 문제 설명 n개의 음의 아닌 정수를 적절히 더하거나 빼서 타깃 넘버로 만드는 경우를 수를 구하는 문제다. 해결 과정 결국 n 개의 모든 수를 각각 더하거나 뺄 수 있다. 그리고 그 경우의 수를 알고, 그 값들이 타깃 넘버인지 비교해야 한다. 처음에는 어떻게 이 모든 경우를 반복문으로 구한단 말인가? 절망하다가 뭔가 규칙이 느껴지는 듯 했다. 더하거나, 빼거나, 더하거나 빼거나 ... 그리고 그 값은 누적된다. 트리다 트리!! 마치 위와 같은 형태였다. 오오, 이것은 트리였다! 트리의 모든 요소를 다뤄야 하나? 그리고 numbers로 들어온 요소의 수를 더하든 빼든 그 결과만 모아서 확인해야 하는데, 그것은 트리에서 같은 깊이, Level을 들여다보면 됐다. 그렇다면 트리를 어..

기억에 의존한 글이라 사실과 다를 수 있으니 참고만 하시길 바랍니다🙃 일정 서류 지원 1월 31일까지 프렙 시작 3월 1일 프렙 끝 4월 30일 최종 코딩테스트 4월 30일 ~ 5월 2일 (3일동안 원하는 시간에 치르면 됨) 프렙에 지원하기까지 과정 자기소개서 제출 퀴즈에 대한 정답, 자기소개, 코스 수료 후 계획 3가지 항목을 작성해야 했다. 글자 수 제한이 없었기에 솔직하게 자신을 드러내려 노력했다. 퀴즈 정답은 운이 좋게도 바닐라코딩 블로그에 실리기도 했다. 입학 과제물기한 내에 요구사항을 만족한 입학과제물을 제출하면 된다. 입학 과제물은 사전학습가이드를 완료했다면 충분히 해결할 수 있는 난이도였다. 자기소개서 제출 이후 합격 메일을 받고 결제를 하면 사전학습가이드(이것은 언제나 볼 수 있다)와 입..

문제 링크 해결 과정 문제 설명이 길고 복잡해 이거 1단계 맞나, 싶었지만 자세히 들여다보니 난이도가 쉬운 문제였다. 로또에서 불분명한 번호 0이 몇 개 나오는지 파악하면 최고순위와 최저순위를 자연스럽게 파악할 수 있다. 즉, 0은 어떤 번호던지 될 수 있으므로, 0이 모두 당첨번호이면 최고순위, 당첨번호가 아니면 최저순위가 된다. 따라서 이를 파악하기 위해 알아야 하는 기존의 번호들에서 몇 개가 당첨번호이고, 불분명한 번호가 몇 개인지 알아내는 것이다. 그러면 맞춘 개수에 따라 몇 등인지 알고 정답을 반환할 수 있다. 소스 코드 function solution(lottos, win_nums) { const rankPerMatches = [6, 6, 5, 4, 3, 2, 1]; const unknownN..

이진 트리의 최대 깊이 구하기 문제 링크 문제 설명 이진 트리의 최대 깊이를 구하는 문제다. 해결 과정 처음엔 전역에 depth 변수를 선언하고 자식 노드가 있을 때마다 depth를 추가하는 재귀 함수를 작성했지만 잘 되지 않았다. 한 쪽 노드의 양쪽 자식 노드가 null일 때 다른 쪽을 판단하지 못하고 리턴되는 것이 문제였다. 그래서 끙끙 머리를 싸매다가 검색으로 해당 문제에 관한 글을 읽었다. 다루기 힘든 어려운 큰 문제를 다루기 쉬운 작은 문제로 나눠서 해결하는 재귀 방법을 소개하고 있었다. 바로 차용해봤다! 좀 더 끈기 있게 붙잡고 있었으면 풀 수 있었을까? 의문이 든 문제. 소스 코드 var maxDepth = function (root) { if (!root) { return 0; } retu..

🙋‍♂️프로토타입이 뭐죠? 두 가지를 잘 구분해야 합니다. 내부슬롯으로서 프로토타입, [[Prototype]] 프로토타입 내부슬롯은 자바스크립트 엔진에서 관리하는 객체로, 자신(인스턴스)을 생성한 생성자 함수의 prototype 프로퍼티를 가리킨다. 금단의 프로퍼티, 던더프로토(__proto__)로 **[[Prototype]]**에 접근할 수 있다. 생성자 함수의 프로퍼티인 prototype 프로토타입(prototype)은 생성자 함수가 될 수 있는 모든 함수의 프로퍼티로 생기는 객체인데, 그 이름이 prototype이다. 지금은 잘 이해되지 않더라도 계속 읽고 실습해보면서 둘의 차이와 관계를 알아보아요! 🙋‍♂️더 자세히 말해주세요! ECMAScript를 참고해볼까요? 프로토타입은 "다른 객체들을 위한..

HTML 엘리먼트에 접근할 때 클래스 이름으로 접근하고는 한다. 그리고 클래스 이름을 아예 데이터로 저장하기도 했다. 그리고 심지어 나는 클래스 리스트를 복제해 그 리스트의 요소를 pop하며 사용했는데 이는 안 좋은 행동인 것이 확실하다. 결론부터 말하자면, HTML에 작성된 클래스 순서가 영원히 보장되지 않고, 배포 주체에 따라 바뀔 수 있다. 예를 들어 보자. 아래와 같은 옵션이 있다. 옵션은 플레이 옵션(혼자, 대결)과 보드 크기(작은, 큰) 두 종류이며 각 옵션들 중 한 개씩 선택할 수 있다. // index.html 혼자 하기 대결하기 작은 게임 보드 큰 게임 보드 나는 아래와 같이 선택한 옵션 엘리먼트의 클래스 리스트를 받은 다음 pop하여 optionType과 optionName에 할당했다...

이 글은 이 링크의 글을 기반으로, 저에게 필요한 내용을 군데군데 보충하여 작성되었습니다. ECMAScript는 Javascript랑 무슨 관계예요? ECMA International에 의해 제정된 표준들 중 하나인, ECMA-262가 ECMAScript를 정의합니다. ECMA International은 정보 통신에 대한 표준을 제정하는 비영리 표준화 기구입니다. ECMA-262는 ECMA International이 제정한 수많은 표준들 중 하나입니다. 따라서, ECMAScript는 ECMA International에 의해 제정된 ECMA-262 기술 규격에 의해 정의된 범용 스크립트 언어의 사양(specification)를 뜻합니다. 스크립트 언어는 무엇인가요? 존재하는 시스템 또는 실체(entity)..