Electronic Jeremy Record

면접을 볼 때 자주 하는 질문이 있다. "좋은 코드란 어떤 코드라고 생각하시나요?" 지원자의 90% 정도는 가독성이 좋은 코드를 말하고 그 가독성에 대해 재차 물으면 클린코드를 말하면서 사실 추상적이게만 대답한다. 개발자들이 클린코드, 클린코드 하면서 왜 가독성이 중요한지, 또 정확히 어떻게 해야 가독성이 좋아지는지에 대해 잘 모르는 경향이 있다. 이 포스팅에서는 클린코드의 기술적,이론적인 것을 말하는 것이 아님을 먼저 말한다. 이런 부분은 다른 블로그나 문서나 책을 보면 어렵지 않게 접근할 수 있다. 1. 클린코드는 정답이 없다. 아니 다르게 말해서 개인 또는 조직의 기준과 성향에 따라 클린코드는 달라진다고 생각한다. 코드 스타일도 airbnb나 google이나 각 조직마다의 방식이 있는 것이고, 조직..

Component는 의존적이지 않고(independent), 재사용이 가능한(reusable) 고립(isolation)된 단위를 말한다. 이 정의에 맞춰서 Component를 개발하는 것이 가장 지속 가능한 Component가 나온다. 이 정의에 맞추기 위한 글들이 여러가지가 있지만 여기서도 한번 살펴보겠다. 독립성 다른 Component에 의존되지 않는 것을 말한다. 개발자는 최대한으로 의존적이지 않게 해야 하지만 개발하다 보면 항상 독립적으로 만들기가 쉽지 않다(언젠간 의존성을 가진 Component를 만들게 될 것이다) 이런 경우엔 아예 코드 자체에서 최대한으로 의존성을 노출해줘야 한다. 독립적인 Component를 만든다는 것이 결국 재사용을 위함인데 재사용 시 개발자에게 '나 여기에 종속돼요!'..

프로젝트를 세팅하고 센트리를 연결하였더니 발생되는 이슈를 확인할 수 있었다. 구글링해보니 Hydration failed은 DOM이 생성되기 전에 window로 접근하는 이슈였다. 근데 나는 window로 접근하는 코드가 없었고 라이브러리에서 발생되는 문제라고 예상했다. 그 라이브러리가 무엇인지는 쉽게 알 수 있었다. 그런데 React-dom을 따로 사용하지 않았고, CNA에서 dependency한 react-dom 뿐이라 next의 문제라고 확신하고 검색했고 어렵지 않게 찾을 수 있었다. https://github.com/vercel/next.js/pull/32619 Upgrade react 18 to rc, drop prerelease warning by huozhi · Pull Request #326..

커스텀 타입을 선언할 때 일반적으로 type을 사용한다. 다만 object의 타입을 선언할 땐 하나의 선택지가 더 있다. 바로 interface 다. type과 interface는 표면적으로는 같은 역할을 한다. 이들의 사용 방법은 다음과 같다. 샘플의 객체를 생성했다. const student = { name : 'kevin', age: 15, hasCar : false } 이 객체의 타입을 위의 두 가지 방식으로 선언해보겠다. type 방식 type StudentTypeCase = { name: string; age: number; hasCar: boolean; } const student:StudentTypeCase = { name : 'kevin', age: 15, hasCar : false } ..