문대승 on LinkedIn: 당근 인터뷰 솔직 후기 🥕 - 면접비 처음 받아보다 백수 생활 2달 차, 슬슬 생활비가 쪼들리던 무렵에 당근마켓 인터뷰 기회를… | 22 comments (2024)

저의 개발 지도자분입니다

3

면접 때 잘못 말한 기술 질문 답변들 - 이제부터는 제대로 답변하자!면접관: 자바스크립트에서 다중 상속이 가능한가요?면접 중에 받은 질문 중 하나는 “자바스크립트에서 다중 상속이 가능한가요?“라는 것이었습니다. 당시 저는 “아니요”라고 대답했습니다. 왜냐하면 자바스크립트에서 다중 상속을 지원하는 명확한 기능을 본 적이 없었기 때문입니다. 그 당시의 저의 이해를 바탕으로 한 설명은 다음과 같습니다:자바스크립트의 상속 방식자바스크립트는 프로토타입 기반으로 상속을 구현합니다. 이 과정에서 중요한 개념은 다음과 같습니다:• 프로토타입 체인: 자바스크립트 객체는 다른 객체를 참조하는 프로토타입 속성을 가지고 있으며, 이를 통해 상속이 이루어집니다.• 메서드 검색: 자식 객체가 메서드를 호출할 때, 그 메서드가 자식 객체 자체에 없으면 프로토타입 체인을 따라 상위 객체를 순차적으로 검색합니다.• 메모리 최적화: 프로토타입 체인 내의 메서드는 실제로 복사되지 않으며, 필요할 때 참조됩니다.이와 같은 이유로, 저는 자바스크립트에서 다중 상속이 불가능하다고 생각했습니다. 다중 상속이 가능하다면 자식 객체가 여러 부모 프로토타입을 가지게 되고, 메서드를 호출할 때 해당 메서드가 어느 부모에 있는지 알 수 없기 때문입니다. 따라서 자바스크립트는 다중 상속을 지원하지 않는다고 판단했습니다.그러나 현실적으로는…이론적으로는 자바스크립트에서 다중 상속이 불가능하다고 할 수 있습니다. 하지만 현실에서는 **믹스인(Mixin)** 기법을 사용하여 이를 해결할 수 있습니다. 믹스인은 하나의 객체가 여러 소스 객체의 메서드를 복사하여 사용하는 방식으로, 여러 부모의 메서드를 하나의 자식 객체에 혼합할 수 있습니다.자바스크립트는 전통적인 다중 상속을 지원하지 않지만, 믹스인 패턴을 사용하여 이를 구현할 수 있습니다. 또한, 타입스크립트에서는 interface를 통해 다중 상속을 보다 명확하게 표현할 수 있습니다. 좀만 더 생각해보았다면 잘 설명할 수 있을텐데 아쉬운 답변으로 남습니다.

61

1 Comment

저처럼 웹 프론트엔드로서 데이터 시각화에 관심있으신분 있으신가요?? 지금 진행하고 있는 차트 라이브러리 프로젝트를 함께할 메인테이너를 모집합니다. 관심있으신분은 메시지 주세요!

40

제 다이어그램 서비스 이용자가 36명을 돌파했습니다!! 홍보는 한국에 많이 한거 같은데 대부분이 외국인입니다!! 마케팅이란 정말 모르겠군요. 어제는 디스코드에 한분이 기능 피드백을 주셨습니다. 내가 만든서비스 이용자와 처음으로 대화한 순간입니다! 낯가리지만 열심히 대답해보았습니다

40

4 Comments

⚛️ 아직도 CRA로 리액트 프로젝트를 만드시나요?리액트 프로젝트를 수동으로 만드는건 너무 귀찮습니다. 보일러플레이트 파일들이 많기도 하고 webpack으로 CSS 로더와 JPG 로더 등 각종 설정을 하는 것은 귀찮고 어렵죠. 생각만 해도 머리가 지끈거립니다. 그래서 많은 사람들이 CLI 명령어 하나로 리액트 프로젝트를 생성할 수 있는 Create React App(CRA)을 애용하죠.저도 처음 리액트를 배울 때 템플릿 자동 생성의 유용함을 절실히 느꼈습니다. 그때는 parcel 번들러로 리액트 프로젝트를 만들면서 수많은 시행착오를 겪었어요. 그때 처음으로 개발을 배웠을 땐데 정말 힘들었습니다. 물론 리액트의 작동 원리를 알게 된 건 좋았지만, 그 이후로는 무조건 템플릿 자동 생성 도구를 사용하기로 마음먹었습니다. 편한게 짱이니까..그런데 CRA가 만능은 아니더라고요. 프로젝트가 커지면 설정 옵션을 수정해야 할 때가 오는데, CRA는 이 부분이 꽤나 불편합니다. 저는 CRA로 만든 프로젝트에 스토리북을 추가하려고 했을 때, 여러 번 벽에 부딪혔던 기억이 생생합니다. 진짜 웃프지만, 결국 craco라는 의존성을 추가로 설치해서 옵션을 오버라이딩해야 했어요. “도대체 왜 이렇게 복잡하게 만들어 놨을까?“라고 혼잣말을 했던 적이 한두 번이 아니었죠.여기서 저는 Vite (바이트X, 비트라고 읽어요)를 발견했습니다. Vite는 CRA의 새로운 대안으로 떠오르고 있습니다. Vite는 번들러로서 webpack을 대체할 뿐만 아니라 React, Svelte, Vue 등 여러 프레임워크의 템플릿 생성을 지원합니다. 그리고 무엇보다도 설정 파일을 직접 수정할 수 있게 해주니, 자유도가 훨씬 높아요.사용법도 간단합니다. 터미널에 npm create vite@latest my-react-app -- --template react 한 줄만 입력하면 끝! vite.config.xn--ts-xn6i 노출해줘서 CRA의 설정 파일을 찾아 헤매던 시절로부터 탈출할 수 있습니다.2023년에 리액트 문서에 CRA 대신 Vite를 사용 예시로 대체하자는 PR이 올라왔어요. CRA에 대해 불만을 가지고 있는 사람이 저뿐만은 아니였나 봅니다. CRA의 전망은 어떻게 될까요? 이에 대해 재밌는 글을 가져와 봤습니다. https://lnkd.in/g9qtK-mm

33

플리터 튜토리얼을 만들고 있습니다! 플리터는 구글 플러터 프레임워크의 자바스크립트 버전인데요. 간단한 사용법을 작성해봤습니다.docs: https://lnkd.in/gURBQBZX

12

"스벨트의 reactivity는 어떻게 구현할까"에 대한 재미있는 코딩영상이 있어 소개드립니다.스벨트에서는 값을 읽는 동작에서 subscribe 동작을 감춰놓는데요. 저도 그럴꺼라 예상만하고 제대로 살펴보진 못했는데, 영상에서 잘 소개해 주셨네요

5

말도 안되는 요구사항을 들어보신적이 있으신가요??첫 회사는 의료 검사 서비스를 제공하는 곳이였는데요. 특이한점은 업종이 출판사란 점과 저자인 교수님과 함께 검사 서비스를 기획 + 개발해야 한다는 점이었습니다. 여러 교수님들과 협업하면서 이런저런 검사시스템을 만들던 중, 이제 검사 결과지를 만들어야 하는데 결과지에는 다양한 정보가 차트로 표현되어야 했습니다.막대그래프는 꺽은선 그래프와 겹쳐서 보여야 하고, 값이 0인 경우는 데이터 라벨이 보이면 안되며, 몇몇 라벨은 줄바꿈이 적용되어야 하고, 레이다 차트에서 텍스트는 어떤 것은 오른쪽 정렬, 어떤 것은 왼쪽 정렬로 나열되어야 하는 등 이걸 내가 구현할 수 있을까? 하는 막막함이 앞섰습니다.다른 곳은 어떻게 문제를 해결하나 보니, 차트 라이브러리를 정하고 그 안에서 디자인을 결정한다는 의견이 많았습니다. 그러나 저는 교수님의 말을 거스를 수 없기 때문에.. 똑같이 구현하는 것 외에는 빠져나갈 구멍이 없었습니다. 그리고 교수님의 기획이 틀린 것도 아니구요.처음부터 그려야할까? 아니면 요구사항을 만족하는 차트라이브러리를 찾아봐야 할까? 고민하던 중 처음부터 만드는 건 항상 안좋은 결과를 나타냈기 때문에, 차트라이브러리를 어떻게든 찾아서 활용하는 쪽으로 리서치를 했습니다. 이때 처음으로 오픈소스 코드를 읽기 시작했습니다. 내 코드 짜는 것도 힘든데 남의 코드를 읽는 것은 저에겐 너무 어려운 일이었습니다. 회사에서는 물론, 일과후에도 주말에도 계속 라이브러리 코드들을 봤던 기억이 있네요이런 저런 라이브러리를 찾아보던중 nhn의 toast chart를 보게되었습니다. 코드를 보니 계산과 페인팅 계층이 잘 나눠져 있었고 각 동작이 런타임에서 수정가능하도록 설계되어 있었습니다. brush라는 객체를 잘만 조작하면 포크뜨지 않고서도 원하는 대로 커스텀을 해볼 수 있겠다 생각이 들었습니다.다행이도(?) nhn의 toast chart의 private field가 타입스크립트로만 막혀 있었기 때문에 (맴버변수에 #이 안붙어 있음) 과감히 any로 캐스팅해서 원하는 필드명의 값이나 함수 동작을 수정했습니다. 여러 시행착오가 있었지만 결과적으로 원하는 디자인과 100% 일치하게 차트를 구현할 수 있었네요.차트라이브러리로 원하는 차트를 만드는건 마치 mui 컴포넌트로 원하는 홈페이지를 만드는것만큼 어렵습니다. 이미 정해진 디자인이 있는 라이브러리에선 커스텀이 제약되어있거나 불가능할 수 있죠. 비록 이번에는 무사히 잘 커스텀했지만, 앞으로 서비스를 만들때마다 이게 커스텀이 될까? 말까? 라는 두려움은 여전히 남아있었습니다.차트가 사용되는 서비스를 개발하는 프론트엔드 개발자들은 모두 저와 같은 고민을 경험하지 않았을까요. 특히 차트가 메인 제품에 핵심 기능인 모니터링 서비스나 거래소 서비스를 운영하는 경우, 차트의 인터렉션이 차트 바깥의 정보와 상호작용하면서 복잡한 커스텀을 요구할 거 같습니다. 아마 큰 회사들은 각자 자기만의 차트들을 개발하고 있을거구요.이와 같은 문제의식 아래, 차트 개발을 좀 더 쉽게 해주는 방법이 없을까 고민하면서 여러 라이브러리들을 만들었습니다. 데이터 시각화 라이브러리인 flitter 그리고 이걸 활용한 headless-chart죠. healess-chart는 이름대로 사용자가 직접 디자인하고 단지 껍데기만 제공 합니다. 사용자는 flitter에서 제공하는 위젯을 통해 원하는 디자인을 커스텀 할 수 있죠. 애니메이션은 물론 인터렉션 커스텀, z-index의 순서 조작, svg와 canvas를 모두 호환하며 모든 프레임워크에서 사용 가능하도록 설계되었습니다. 서버사이드 랜더링도 가능하구요.저는 headless-chart의 가능성일 실험해보기 위해, 시간날때마다 종종 다른 라이브러리의 디자인을 똑같이 베껴보곤 합니다. 이번에는 highchart라는 라이브러리를 똑같이 따라해봤는데요. 비슷한가요?? 지금 열심히 라이브러리와 문서를 개발하고 있습니다. 조만간 배포하면 공유하도록 하겠습니다.개발현황은 아래 링크에서 확인할 수 있습니다. star 한번씩 눌러주면 힘이 날거 같습니다 ㅎㅎgithub: https://lnkd.in/gTY-jpJZ* flitter를 활용해서 erd 서비스도 만들어봤습니다. 무료니까 필요하신분들은 자유롭게 이용해주세요.easyrd: https://lnkd.in/gPVHrKNF

25

3 Comments