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..

윈도우에서 윈도우 창 끝에 두면 커서가 화살표로 바뀐다. 화살표를 드래그하면 해당 윈도우 창을 늘이거나 줄일 수 있다 . 이런 기능을 브라우저에서 구현해보려고 한다. 1. 사용할 윈도우 창 만들기 메모장을 만드는 걸로 해보려 한다. 윈도우 창의 우측하단 대각선 드래그 커서를 만드려고 한다. HTML을 이렇게 만들고 .memoDiv { width: 100px; height: 100px; background-color: gold; position: relative; } .sizeBtn { position : absolute; cursor:move; right:0; bottom:0; padding : 5px; background-color: transparent; border : none; } CSS는 이렇게..