시작하며 요즘 더 좋은 코드를 작성하기 위해서 많은 고민을 하던중이다. 최근에는 커스텀 훅을 사용하여 코드의 반복성을 줄이고, 페이지 내에서 코드를 좀 더 간편히 볼 수 있도록 만들어 보았다. 하지만 이것은 전체 집을 설계할 때, 아주 마이너한 부분인것 같다. 블럭 단위로 코드를 잘 작성하는 법이라고 할 수 있겠다. 나는 좀 더 큰 부분에서, 개발하...

논리연산자 자바스크립트에는 3종류의 논리연산자   (OR), &&(AND), !(NOT) 이 있다. 연산자에는 ‘논리’라는 수식어가 붙긴 하지만, 논리 연산자는 피연산자로 Boolean 형뿐만 아니라 모든 타입의 값을 받을 수 있다. 연산 결과 역시 모든 타입이 될 수 ...

프론트엔드 성능 측정 왜 해야하나? 유저 이탈방지가 목적. 좋은 유저경험. 등등~ 당연한 이유! 프론트엔드에서 측정해야 하는 성능은 무엇일까? 로딩시간 렌더 시간 메모리 누수 확인 로딩 속도 로딩 속도를 측정하는 기준은 크게 세가지가 있다. FCP (First Contentful Paint) : 첫 요소가 로드될 때까지 ...

시작하면서.. Hook 이란 개념은 사실 React 16.8v 에도 있던 기능이다. 그리고 이런 훅은 예전부터 사용해왔다. 예를 들어, 컴포넌트의 state 를 관리하는 useState 나, 콜백함수를 전달하는 useEffect 같은 훅 말이다. 하지만 최근들어 custom hook 을 사용하여 로직을 재사용하는 방법을 선호한다는 얘기를 들었다. ...

1. 이터레이션 프로토콜 ES6에서 도입된 이터레이션 프로토콜(iteration protocol) 은 데이터 컬렉션을 순회하기 위한 프로토콜(미리 약속된 규칙) 이다. 이터레이션 프로토콜을 준수한 객체는 for…of 문으로 순회할 수 있고, Spread 문법의 피연산자가 될 수 있다. 이터레이션 프로토콜에는 이터러블 프로토콜(iterable pr...

시작하기에 앞서서.. 왜 공부했나? 나는 회사 프로젝트에서 data fetching 라이브러리로 RTK - query 를 사용하였었다. 그런데 최근 React-query(tanStack Query c4) 라는 강력한 asynchronous state management 를 사용하는 곳이 많다고 느꼈다. rtk-query 자체로도 매우 편리하고 성능이...

Map이란 ? Map 객체는 키-값 쌍과 키의 원래 삽입 순서를 기억한다. 모든 값(객체 및 원시값 모두)은 키 또는 값으로 사용될 수 있다. 설명 한 Map 에서의 키는 오직 단 하나만 존재한다. 이는 Map 집합의 유일성이다. for ... of 루프는 각 반복에 대해 [key, value] 로 이루어진 멤버가 2개인 배열...

소프트웨어 테스트란..? TDD 같은 소프트웨어 개발론을 통해 테스트 라는 것을 알고는 있다. 부트캠프에서 시험 같은 경우도 테스트를 통해 채점 되는 형식이어서, 어떻게 검사하는지는 대략적으로 알고있다. 이번 기회에 좀 더 구체적으로 블로깅하면서 공부할까 한다. 소프트웨어가 의도한대로 동작하는지를 테스트 가장 큰 이점 = “피드백을...

의존성 목차 의존성 역전 원칙 의존성 주입 1. 의존성 역전 원칙(DIP) - 객체지향 패러다임 의존성이란? 특정한 모듈이 동작하기 위해서 다른 모듈을 필요로 하는 것을 의미 의존성 역전 원칙이란..? 유연성이 극대화된 시스템을 만들기 위한 원칙 소스 코드 의존성이 추상에 의존하며 구체에는 의존하지 않는 것을 의...

횡단 관심사(Cross-cutting concerns) 여러 서비스에 걸쳐서 동작해야 하는 코드를 의미 관심사란 ? 코드가 하고자 하는 목적, 동작을 의미 여기서 확장해서, 애플리케이션 내 여러 핵심 비즈니스 로직들에 걸쳐서 실행되어야 하는 동작들. 횡단 관심사의 대표적인 예시는 다음과 같다. 인증 & 인가 로깅...