느릿늘있

Q1. 과제  클린 코드 2주차도 무사히(?) 마쳤습니다! 과제를 완성하는 것에 너무 스트레스를 받기 보다는 공부를 꾸준히 하고 있는 과정 자체에 집중을 하려고 노력하고 있답니다. 이번 주에는 또 어떤 것들을 시도하고 배웠는 지 기록을 남겨보겠습니다!!Q2. 시도  이번 주 코드는 저번 주만큼 더티하지는 않았던 것 같습니다. 클린 코드 중에서도 이번 주는 순수함수를 주요 주제로 삼고 있었습니다. 함수라는 카테고리 안에서 액션과 계산을 구분한다는 생각 자체를 해본 적이 없었고 그냥 느낌적인 느낌으로 구분하고 쪼개고 했었던 것 같습니다. 이번 과제에는 액션 함수가 덩어리로 묶여 있었고 이를 순수함수인 계산의 단위로 추출해내고 정리하는 것이 미션이었습니다. 확실히 액션과 계산을 분리한다라는 개념을 가지고 접근..

Q1. 과제  이번주 과제의 주제는 Clean Code였습니다. 테오 코치님이 클린 코드는 집정리와 같다고 말씀해주시는데 자취 5년차로서 아주 아주 공감이 갔습니다. 청소광이 보는 클린 코드와 무던한 사람이 보는 클린 코드의 기준은 다를 수 있겠지만 보편적인 관점에서 클린하다는 것은 어느 정도의 기준이 있는 것 같습니다. 이번 시간에는 테오가 말아주는 깨끗한 프론트엔드 코드에 대해서 학습할 수 있었고 너무 좋은 시간이었습니다.Q2. 시도  매우매우 더티한 코드가 주어졌고 이를 클린하게 개선하는 미션이 주어졌습니다. 함수와 변수의 명칭을 개선하고 로직을 분리 및 구조화하고 더 가독성 있게 만들려고 노력했습니다.Q3. 문제점  처음부터 MVC와 같은 패턴 혹은 아키텍쳐에 대해서 고민하려는 시도를 하지 않았습..

React에서는 다양한 Hooks를 사용해서 컴포넌트의 상태를 관리하는 패러다임을 제시합니다. 그 중 하나로 useContext라는 훅이 있는데요. 실무에서 자주 써본 것이 아니라면 그냥 전역 상태 관리를 할 수 있게 해주는 훅이다 정도로 알고 있을 겁니다. 저 또한 그랬기에 이번 기회에 useContext에 대해 공식 문서를 보면서 꼼꼼하게 정리해보려고 합니다!https://ko.react.dev/reference/react/useContext useContext – ReactThe library for web and native user interfacesko.react.dev  React의 공식 문서에는 useContext를 컴포넌트에서 Context를 읽고 구독할 수 있는 React Hook이라고..

우선 이 글은 클로저에 대해 자세하게 설명하는 글은 아니기 때문에 클로저에 대한 설명은 아래 링크로 대체합니다. :0https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures 클로저 - JavaScript | MDN클로저는 주변 상태(어휘적 환경)에 대한 참조와 함께 묶인(포함된) 함수의 조합입니다. 즉, 클로저는 내부 함수에서 외부 함수의 범위에 대한 접근을 제공합니다. JavaScript에서 클로저는 함수 생developer.mozilla.org  회사에서 grid로 데이터를 그려야하는 경우가 정말 많습니다. 이번에 grid 관련해서 발생한 결함을 클로저를 활용해서 해결했는데 해당 내용을 간략하게 기록하고자 합니다. 우선, 문제 상황을 설명하자면 다..

항해 플러스를 진행하면서 메모이제이션을 구현해보는 미션을 받았습니다. 객체를 비교함에 있어서도 얕은 복사(Shallow Copy), 깊은 복사(Deep Copy)와 마찬가지로 얕은 비교(Sallow Equals), 깊은 비교(Deep Equals)라는 용어를 사용한다는 것도 이번 과제을 진행하면서 처음 알게 되었는데요. 그런데 두 개념을 이해함에 있어서 깊이(Depth)라는 키워드가 약간 다르게 쓰이는 것 같아서 이번 기회에 깔끔하게 정리해보겠습니다.  보통 개발을 바닥부터 시작하게 되면 저처럼 얕은 복사와 깊은 복사에 대해서 먼저 접하게 되는데요. 제 기준으로는 비교에 대해서 먼저 짚고 넘어가는 게 이해하기가 더 수월하다고 생각이 듭니다! 그래서 비교에 대해서 먼저 정의를 해보겠습니다. 정말 간단한데요..

Q1. 과제  이번주 과제의 주제는 React Hooks 였습니다. 회사에서 class 기반으로 개발을 하다보니(Angular) hook을 쓸 일이 없었는데 이번에 확실하게 개념을 잡을 수 있었습니다. hook도 그 근본은 class이다보니 이해하는 데 큰 어려움은 없었습니다. 그래서인지 심화 과제도 hook 그 자체보다는 메모이제이션과 관심사 분리가 주된 내용이었습니다.Q2. 시도  가장 기억에 남는 시도는 useRef를 useState로 구현하는 부분이었습니다.Q3. 문제점  머리 속에 useRef는 리랜더링 되지 않는 값, useState는 리랜더링이 필요한 값이라고 주입식으로 외우다 보니 useRef를 useState를 써서 구현하라는 요구 사항이 처음에는 이해가 되지를 않았습니다. 그러나 잘 생..