전체 글
ChatGPT에게 회사의 면접 질문 몇 개를 던져보았다
질문과 답변을 번역기로 돌려서 어색한 부분이 다소 존재합니다 Q: 유지보수 가능한 코드란? A: 유지 관리 가능한 코드는 이해하고 수정하기 쉬운 코드입니다. 여기에는 일반적으로 깨끗하고 잘 문서화된 모듈식 코드 작성이 포함됩니다. 유지 관리 가능한 코드는 논리적 방식으로 구성되어야 하며 표준화된 코딩 규칙을 사용해야 합니다. 또한 새로운 버그를 도입하거나 기존 기능을 중단하지 않고 쉽게 업데이트하고 확장할 수 있는 방식으로 설계해야 합니다. 유지 관리 가능한 코드의 궁극적인 목표는 다른 개발자(또는 원래 개발자)가 시간이 지남에 따라 코드 베이스를 쉽게 수정하고 업데이트할 수 있도록 하는 것입니다. Q: 개발자의 관점에서 보다 실용적이고 유지 관리 가능한 코드의 예를 들어 주시겠습니까? A: 물론입니다...
컴포넌트에 대한 횡설수설
컴포넌트란 무엇일까? 컴포넌트의 사전적 의미는 다음과 같다 a part or element of a larger whole, especially a part of a machine or vehicle. constituting part of a larger whole; constituent. 즉, 컴포넌트란 전체의 일부가 되는 구성요소이자 부분집합이다. 그렇다면 컴포넌트가 모여서 이뤄지는 그 전체란 무엇일까? 컴포넌트로 이뤄지는 완성된 전체가 무엇이냐에 따라 컴포넌트가 무엇인지도 정의될 수 있다. 컴포넌트들이 모여 만들어지는 결과물을 Application으로 정의했다면, Application의 구성요소이자 부분집합으로써의 컴포넌트는 그 자체로 작은 Application의 역할을 하게 될 것이다. 작은 Ap..
근황
1. rust의 맛에 빠져서 천천히 공부중... 너무 재밌다 2. 한 동안 안 풀던 알고리즘 푸는 중 leetcode에서 algorithm easy 순으로 정렬해서 풀고 있다 rust로 푸는 중 3. React + RTL + MSW 조합으로 컴포넌트 단위의 유닛 테스트를 하면서 겪은 이슈를 정리해서 기록하려고 한다 나름대로 시행착오를 많이 겪고 노하우도 쌓았는데 잊어버리기도 아깝고 공유하면 좋을 것 같아서리... 4. 크롬 익스텐션 보일러 플레이트는 HMR 어떻게 구현해야 하는지 감도 잡았고 방법도 알았고 레퍼런스도 다 체크했는데 선뜻 손이 안 간다 작업량이 많기도 하고 내가 요즘 익스텐션 개발을 안 하다 보니 우선순위에서 밀리고 있다 (rust에 빠져있음) 5. 주말에 IDE를 열지 않으면 불안했는데 ..
개발자의 브랜딩
최근 주변을 통해 셀프 브랜딩을 통해 인지도를 높인 개발자들의 구설수를 듣게 되었다. 사실 예전부터 그런 생각은 있었다. '저 정도로 인지도를 높일만큼 대외 활동에 진심인 사람이 회사에서도 높은 평가를 받으며 퍼포먼스를 낼 수 있을까? 물리적으로? 너무 힘들지 않나?' 솔직히 '회사에서의 퍼포먼스도 못 내면서 셀프 브랜딩을 하는 게 문제'라는 생각은 결코 아니다. 이 부분은 스스로의 가치 판단과 선택과 집중의 영역이라고 생각한다. 브랜딩, 마케팅도 능력이고 그것을 통해서 몸값을 높이는 방법도 하나의 길이라고 생각한다. 다만 함께 일하는 동료들의 시선에서는 그러한 행동들이 썩 곱게 보이지 않을 것 같다는 생각이 들었다. 일반적으로 셀프 브랜딩을 하는 대외 활동들을 주변에서는 '잘난 척'이라고 생각하기 쉬운..
[React] v17 vs v18 update state batch
동일한 코드 사용 import { useEffect, useLayoutEffect, useState } from "react"; export default function App() { const [a, setA] = useState(0); useEffect(() => { setA((a) => { console.log("first useEffect = " + a + "->" + 1); return 1; }); }, []); useEffect(() => { if (a === 2) { setA((a) => { console.log("secont useEffect = " + a + "->" + 3); return 3; }); } }, [a]); useLayoutEffect(() => { setA((a) => ..
[React] 레이아웃 훅 수정이 결제버튼 테스트에 영향을 미치는 이유
얼마 전, 회사에서 흥미로운 디버깅 이슈가 있었다. 우리 팀에서는 프로젝트 내부에서 사용하기 위해 여러 커스텀 훅을 만들어 재사용하고 있는데, 그중 레이아웃을 감지해서 특정 로직을 실행시킬 수 있는 훅이 존재한다. 이 훅은 useEffect훅을 사용하여 유사한 인터페이스를 확장한 커스텀 훅으로, window.innerWidth 감지를 통해 레이아웃을 알려주는 역할을 한다. 간소화해서 윤곽만 나타내면 대충 아래와 같은 형태로 구현되어 있다. (throttle 등은 생략) const useDisplayDetectEffect = (effect: Effect, deps: Deps) => { const callback = useCallback(effect, deps); useEffect(() => { const ..
[JS] Maximum call stack size
뜬금없이 궁금해졌다 자바스크립트에서 종료 조건이 없는 재귀 함수를 호출하면 Maximum call stack size exceeded 에러가 발생한다. 그렇다면 호출 가능한 최대 콜스택은 얼마나 될까? 간단한 코드로 확인이 가능하다. 참고로 꼬리물기 최적화를 적용하면 무한루프가 돌아버리기 때문에 아래와 같은 형태로 호출해야만 한다. function getMaxCallStackSize() { try { return 1 + getMaxCallStackSize(); } catch (e) { // Maximum call stack size exceeded return 1; } } getMaxCallStackSize(); 간단한 js 런타임을 제공하는 runJS 내에서는 9078 크롬 브라우저 콘솔에서는 9157..
[React] Container Component 그리고 HOC
2015년. 리액트의 아부지 Dan Abramov는 Container / Presentational 두 가지의 구분을 통해 컴포넌트를 작성하는 패턴에 대해 글을 작성했다. 4년 후인 2019년. 그는 사람들이 자신이 소개한 패턴에 얽매여 맹목적으로 사용하는 것을 보며 깊은 현타가 왔고, hooks를 사용하면 렌더링과 상태 관리에 대한 분리가 가능하기 때문에 더 이상 이 패턴을 권장하지 않는다는 글을 남겼다. 그가 이야기한 컨테이너와 프레젠테이션 컴포넌트의 구분은 사실 세부 구현보다도 목적성에 의해 잘 드러난다. 프레젠테이션 컴포넌트 UI를 표현하는 것을 목적으로 함 상태가 없거나 극히 제한적 순수 컴포넌트(사이드 이펙트가 없는 순수 함수)를 지향 컨테이너 컴포넌트 로직을 관리하는 것을 목적으로 함 상..
쏙쏙 들어오는 함수형 코딩
파트 리더분이 읽고 내용이 좋다고 공유해주신 책이다. 읽은지는 좀 되었는데, 정말 재미있고 유익하게 읽었다. 1. 왜 내 코드가 유지보수하기 어려워지는 것인지 2. 함수형 함수형 하면서 Pipe 쓰고 map 돌리는게 함수형이 아니라는 것 3. 코드에서 사이드 이펙트를 일으키는 액션을 제거하지 못했기 때문에 테스트 코드를 쓰는게 이렇게 어렵구나 라는 것 위 3가지 외에도 많은 깨달음을 준 책이다. 사실 [액션, 계산, 데이터] 3개의 개념만 숙지하면 이 책은 돈값을 10배 정도 한다. 이해하기도 쉽고, 코드 예시도 너무 어렵지 않게 나와있어서 좋았다. 개인적으로 책에 있는 코드 읽는게 너무너무너무 힘들어서(문법 하이라이트 기능좀...) 거의 안 읽는 편인데 예제들이 다 짧으면서도 중요한 내용이 있어 그나마..
고침안면(高枕安眠)
문득 고사성어를 구경하다가 재미있어 보여서 가져왔다 ㅋㅋㅋ 베개를 높이 하여 편히 잘 잔다는 뜻으로, 얼굴 성형과는 무관하다. 근심 없이 편히 잘 수 있을 정도로 안심할 수 있는 상태를 일컫는다고 한다. 나도 얼른 얼굴을 고쳐야.... 가 아니라 근심이 없는 고침안면 상태가 되어야 할 텐데... 요즘 내 고민은 블로그 글이 안 써진다는 점이다. 용기 내서 글 작성을 시작하면 끄적끄적 적어보다가 '이거 내가 설명할 수 있을 정도로 깊게 잘 알고 있나?'라는 생각에 빠져 공부를 시작하곤 한다. 자연스레 글은 임시저장으로 한 달... 두 달이 지나도록 마무리되지 않는다. 내가 언제부터 밀도 있게 빽빽한 글을 썼다고. 자신감 하나로 그때그때 내가 생각하는 최선의 글을 적은 것뿐인데 최근 자의식 과잉에 빠져 스스..