클린 코드 (Clean code) 클린 코드는 가독성, 단순성 및 유지 관리 용이성을 강조하는 프로그래밍 스타일이다. 클린 코드의 원칙은 널리 받아들여지고 있지만 클린 코드의 개념은 다소 모호하고 해석의 여지가 있다. 프로그래머마다 무엇이 클린 코드를 구성하는지에 대해 서로 다른 의견을 가질 수 있으며 한 컨텍스트에서 클린 코드로 간주되는 것이 다른 컨텍스트에서는 클린 코드로 간주되지 않을 수 있다. 종종 논의되는 클린 코드의 한 측면으로 주석 사용이 있다. 어떤 프로그래머는 클린 코드가 자명해야 하고 최소한의 주석이 필요하다고 믿는 반면, 다른 프로그래머는 주석이 코드를 문서화하고 다른 프로그래머가 더 쉽게 이해할 수 있도록 만드는 중요한 부분이라고 주장한다. 논쟁의 또 다른 영역은 약어와 두문자어의 ..

JavaScript의 자료형에는 기본(Primitive) 자료형과 기본이 아닌(Non-primitive) 자료형으로 두 가지 유형의 자료형이 있다. 기본 자료형 JavaScript 언어에서 제공하는 미리 정의된 데이터 유형을 기본 자료형이라고 한다. JavaScript는 Number, String, Boolean, Undefined, Symbol 및 BigInt를 포함하는 여섯 가지 유형의 기본 자료형을 제공한다. 기본 자료형의 크기는 고정되어 있으므로 JavaScript는 콜 스택(실행 컨텍스트)에 기본 자료형을 저장한다. 기본 자료형에 액세스하면 해당 변수에 저장된 실제 값을 조작한다. 따라서 기본 변수는 값에 의해 액세스됩니다. 기본 값을 저장하는 변수를 다른 변수에 할당하면 변수에 저장된 값이 생..

컴퓨터 프로그래밍에서 깊은 복사는 새 메모리 주소로 새 객체를 만들고 원래 객체의 속성 값을 새 객체에 복사하는 객체의 복사본이다. 반면 얕은 복사는 새 메모리 주소로 새 객체를 생성하지만 해당 속성에 대해 원본 객체와 동일한 객체(주소)를 참조하는 객체의 복사본이다. 다음은 자바스크립트를 사용하여 깊은 복사와 얕은 복사를 구현한 예제다. const original = { a: 1, b: { c: 2 } }; // original 객체의 얕은 복사본 const shallowCopy = { ...original }; // original 객체의 깊은 복사본 const deepCopy = JSON.parse(JSON.stringify(original)); // original 객체의 속성 수정 origina..

Next.js는 React를 기반으로 구축되고 서버에서 렌더링되는 React 애플리케이션용으로 설계된 인기 있는 오픈 소스 JavaScript 프레임워크이다. 간단하고 직관적인 개발자 경험을 제공하여 빠르고 확장 가능한 웹 애플리케이션을 쉽게 만들 수 있다. 이 글에서는 Next.js가 서버에서 렌더링되는 React 애플리케이션의 미래인 5가지 이유를 정리해보았다. 자동 코드 분할 (Automatic Code Splitting) Next.js는 요청 시 로드할 수 있는 작은 청크로 코드를 자동으로 분할하므로 로드 시간이 단축되고 사용자 경험이 향상된다. 서버 사이드 렌더링 (Server-Rendering) Next.js를 사용하면 서버에서 React 컴포넌트를 렌더링할 수 있으므로 웹 애플리케이션의 성능..

의존성 역전 원칙(DIP) 의존성이란 특정한 모듈이 동작하기 위해서 다른 모듈을 필요로 하는 것을 의미한다. 의존성 역전 원칙은 유연성이 극대화된 시스템을 만들기 위한 원칙이다. 이 말은 곧 소스 코드 의존성이 추상에 의존하며 구체에는 의존하지 않는 것을 의미한다. 여기서 추상과 구체라는 말이 나오는데, 추상이란 구체적인 구현 방법이 포함되어 있지 않은 형태를 의미한다. 추상이란 말이 어려울 수 있지만, 결국 그 내부가 어떻게 구현되어있는지 신경 쓰지 않고 해줘야 하는 일과 결과만 신경 쓸 수 있게 된다는 말이다. 구체는 반대로 실질적으로 해당 동작을 하기 위해서 수행해야 하는 구체적인 일련의 동작과 흐름을 의미한다. 이런 구체적인 동작들은 빈번하게 변경될 여지가 많다. 따라서 이러한 구체에 애플리케이션..

횡단 관심사란 여러 서비스에 걸쳐서 동작해야 하는 코드를 의미한다. 관심사란 코드가 하고자 하는 목적, 동작을 의미하고 횡단 관심사란 애플리케이션 내 여러 핵심 비즈니스 로직들에 걸쳐서 실행되어야 하는 동작들을 의미한다. 횡단 관심사의 대표적인 예시로는 인증, 인가 처리나 로깅, 트랜잭션 처리, 에러 처리 정도가 있다. 횡단 관심사를 잘 처리하는 것은 애플리케이션의 유지보수에서 중요하다. 왜냐하면 횡단 관심사는 여러 비즈니스 로직들에 걸쳐서 실행되어야 하기 때문이다. 핵심 비즈니스 로직과 횡단 관심사가 혼재되어 버리면 추후 비즈니스 로직, 횡단 관심사 모두를 수정하기 힘들어지는 상황이 발생한다. 예를 들어 내가 인증 로직이 핵심 비즈니스 로직 안에 혼재된다면 일단 해당 코드의 관심사가 여러 개가 된다는 ..

React 16.8 버전에서 Hook이 발표되고 난 후 React에서 컴포넌트를 선언하는 방법의 대세는 클래스 컴포넌트에서 함수 컴포넌트로 옮겨왔다. 많은 사람들이 익숙하고 이미 기존에 많은 코드들이 작성된 방법인 클래스 컴포넌트에서 함수 컴포넌트로 옮겨온 이유 중에는 함수 컴포넌트의 문법이 더 단순하고 교착상태로 인한 버그가 발생하지 않는다는 장점도 있지만, Custom Hook의 편리함과 유용성도 큰 비중을 차지하고 있다. 리액트는 UI를 구축하기 위한 라이브러리로 리액트가 가진 핵심적인 관심사는 UI와 UI를 변경시키는 로직이다. 이 중 UI는 실제 코드상에서는 JSX라는 형태로 표현되고, UI 변경 로직은 유저의 입력에 반응하거나 API를 호출하고 스크린의 변화에 반응하는 등 여러 동작들을 통해서..