느릿늘있

1. 문제 코드 it('검색어에 맞는 이벤트만 필터링해야 한다', async () => { const { result: searchResult } = renderHook(() => useSearch(events, new Date(), 'month')); const { filteredEvents, setSearchTerm } = result.current; act(() => { searchResult.current.setSearchTerm('헬스장'); }); filteredEvents.forEach((event: Event) => { const searchTargets: EventKeys[] = ['title', 'description', 'location..

Q1. 과제  테오가 말아주는 클린 코드!! 항해 플러스에서 경험할 수 있는 특별한 시간이었습니다! 그 마지막 챕터가 마무리되었는데요. 마지막 주제는 FSD(Feature Sliced Design)이었습니다! FSD는 FE 진영에서 아주 핫한 디자인 패턴이라고 볼 수 있습니다. 공식 문서가 있는 Design Pattern이 있다..? 조만간 프론트엔드 개발의 표준이 될 수도 있는 패턴이고 FSD가 제안하는 철학을 이해하는 것만으로도 좋은 개발자가 되기에 충분히 필요한 부분이라고 느꼈습니다.  디자인 패턴이 백엔드에 비해 프론트엔드에서는 크게 중요성을 인정받지 못하는 느낌인데요. 공부를 하면서 React와 FSD 조합이 큰 규모의 개발에 있어서 앞으로의 시장을 이끌어 갈 것 같다는 느낌을 받았습니다! FS..

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 관련해서 발생한 결함을 클로저를 활용해서 해결했는데 해당 내용을 간략하게 기록하고자 합니다. 우선, 문제 상황을 설명하자면 다..