Juun의 개발 기록

component 란?? component 리액트는 컴포넌트 기반 아키텍처를 사용하여 UI를 구성합니다. 컴포넌트는 UI의 작은 조각을 나타내며, 다른 컴포넌트와 조합하여 복잡한 UI를 만들 수 있습니다. 이러한 컴포넌트 기반 아키텍처는 코드의 재사용성과 유지 보수성을 높여주는 장점을 가지고 있습니다. 리액트 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 나눌 수 있습니다. 함수형 컴포넌트 function App() { const name = "리액트"; return {name} } export default App; 함수형 컴포넌트는 코드가 간결하고 읽기 쉽다는 장점이 있습니다. 또한, 클래스형 컴포넌트에 비해 메모리 사용량이 적고 성능이 더 우수합니다. 함수형 컴포넌트는 상태(state)를 가질 수..

화살표 함수(Arrow function)란 ?? 자바스크립트의 화살표 함수(arrow function)는 함수를 선언하는 다른 방법 중 하나입니다. ES6(2015)에서 소개되었으며, 일반 함수보다 간결하고 가독성이 높으며, this 바인딩에 대한 동작 방식이 다릅니다. 화살표 함수는 다음과 같은 구문으로 선언됩니다. (parameter1, parameter2, ..., parameterN) => { // function body }; 여기서 parameter1, parameter2, ..., parameterN는 함수에 전달할 매개변수이고, {} 안에 있는 function body는 함수가 실행될 때 수행할 코드입니다. 화살표 함수는 다음과 같은 특징을 가집니다. 함수의 매개변수가 하나뿐이면 괄호를 생..

자바스크립트에서 blocking과 non-blocking, 동기와 비동기는 프로그램의 실행과 관련된 중요한 개념입니다. 1. Blocking vs Non-blocking Blocking은 특정 코드의 실행이 완료될 때까지 다음 코드의 실행을 중지시키는 것을 의미합니다. 이러한 코드 실행 방식은 호출된 함수가 작업을 수행할 때까지 스크립트의 실행을 차단(block)시키기 때문에, 다른 작업이나 이벤트를 처리하는 것을 방해할 수 있습니다. Blocking이 발생하는 경우에는 대개 시스템 리소스를 많이 사용하거나 시간이 오래 걸리는 작업을 수행하는 경우입니다. 반면, Non-blocking은 호출된 함수가 작업을 수행하는 동안에도 다음 코드의 실행을 계속할 수 있습니다. 이렇게 하면 스크립트의 실행이 차단되지..

async / await 와 promise란?? 자바스크립트는 대표적인 싱글 스레드 언어입니다. 그래서 비동기 프로그래밍이 굉장히 중요합니다! 이러한 비동기 프로그래밍을 사용하게 되면 더 나은 성능과 사용자 경험을 제공할 수 있습니다. ※ 비동기 프로그래밍 : 특정 작업이 완료될 때까지 코드 실행을 멈추지 않고, 다른 작업을 동시에 수행할 수 있는 방식을 의미 자바스크립트에서 비동기 프로그래밍을 구현하는 대표적인 방법으로 콜백(callback), 프로미스(promise), 비동기 함수(async/await)가 있습니다. 이전 포스팅에 콜백에 대한 설명이 있으므로 짧게 설명하자면 이렇습니다. 콜백은 함수의 인자로 다른 함수를 전달하여, 작업이 완료될 때 해당 함수를 호출하는 방식입니다. 예를 들어, set..

클로저(Closure)란??? 함수 내부에서 외부 스코프에 선언된 변수를 참조하는 것을 클로저(Closure)라고 합니다. 클로저는 함수와 함수가 선언된 어휘적 환경(Lexical Environment)의 조합입니다. 클로저는 함수가 선언될 당시의 환경을 기억하고, 함수가 호출될 때 그 환경을 다시 만들어내는 기능을 합니다. 이를 통해 함수 안에서 선언한 변수를 함수 외부에서도 사용할 수 있게 됩니다. 클로저는 자바스크립트에서 매우 중요한 개념으로, 다른 함수에 인자로 함수를 전달하거나, 객체의 메서드로 함수를 정의할 때 클로저를 사용하여 특정한 상태를 유지할 수 있습니다. 클로저를 사용하면 상태를 보존하고, 함수를 더 유연하고 재사용 가능하게 만들 수 있습니다. 또한, 클로저는 자바스크립트에서 비동기 ..

this란?? JavaScript에서 this는 현재 실행 중인 함수 내에서 참조하는 객체를 나타냅니다. this는 호출되는 방법에 따라 달라지며, 함수가 호출되는 방법에 따라 다른 객체가 this를 가리킵니다. this는 자바스크립트의 중요한 개념 중 하나이며, 오해하거나 이해하지 못하면 코드에서 버그를 일으킬 수 있습니다. this 바인딩 함수를 호출하는 방법에는 네 가지가 있습니다. 일반 함수로 호출하는 경우 메소드로 호출하는 경우 apply() 또는 call() 메소드를 사용하여 호출하는 경우 생성자 함수로 객체를 생성하는 경우 이제 각각의 경우를 자세히 살펴보겠습니다. 1. 일반 함수로 호출하는 경우 함수를 일반적인 방법으로 호출하는 경우, this는 전역 객체를 가리킵니다. 브라우저에서는 wi..

call by value(값에 의한 호출) vs call by reference(참조에 의한 호출) 차이 자바스크립트에서는 원시 타입(primitive type)의 값은 call by value(값에 의한 호출)로 전달되고, 객체 타입(object type)은 call by reference(참조에 의한 호출)로 전달됩니다. call by value(값에 의한 호출)은 변수에 저장된 값을 복사해서 전달하는 방식입니다. 예를 들어, 다음과 같이 숫자를 전달하는 경우를 생각해봅시다. ※ 원시타입 : 숫자(number), 문자열(string), 불리언(boolean), null, undefined, 심볼(symbol) - 각각의 원시 타입은 값(value)을 갖고 있으며, 이 값은 변경될 수 없습니다(immu..

var, let, const의 차이를 알기 전에.. 먼저 var, let, const 차이를 알기 전에 스코프에 대해서 알아야 합니다. 스코프란 간단하게 변수를 사용할 수 있는 위치를 의미합니다. 스코프란?? JavaScript에서는 전역 스코프(Global Scope)와 지역 스코프(Local Scope) 두 가지 유형의 스코프가 있습니다. 전역 스코프는 코드의 어느 곳에서나 접근할 수 있는 변수를 말합니다. 전역 스코프에서 선언된 변수는 어디서든 참조할 수 있습니다. 지역 스코프는 함수 내에서 선언된 변수를 말합니다. 함수 내에서 선언된 변수는 함수 외부에서는 접근할 수 없습니다. 또한, 함수 내부에서는 외부 스코프에서 선언된 변수를 참조할 수 있습니다. var, let, const의 차이 자바스크립..

Lombok이란?? 반복되는 메서드를 Annotation을 사용하여 자동으로 작성해주는 라이브러리입니다 일반적으로 DTO, VO, Model, Entity 등의 데이터 클래스에서 많이 사용됩니다. 대표적으로 많이 사용되는 Annotation @Getter @Setter @NoArgConstructor @AllArgConstructor @Data @ToString @Builder Lombok의 사용이유 Annotation 기반의 코드 자동생성으로 인한 생산성이 증가합니다. 반복코드를 줄일 수 있어 유지보수와 가독성을 향상시킬 수 있습니다. Getter / Setter 외 Builder 패턴이나 Log 생성 등의 다양한 방면으로 활용이 가능합니다. Lombok의 단점 Lombok을 지원하는 IDE는 Inte..

AOP(Aspect Oriented Programming) AOP(Aspect Oriented Programming) → 여러 오브젝트에 나타나는 공통적인 부가 기능을 모듈화하여 재사용하는 기법 또한 관심사의 분리(기능의 분리), 핵심적인 기능에서 부가적인 기능을 분리하므로 핵심기능을 설계하고 구현할 때 객체지향적인 가치를 지킬수 있도록 도와주는 개념입니다 → OOP를 보완한다 AOP를 사용하는 이유 공통 관심 사항을 핵심 관심사항으로부터 분리 그에 따라 코드의 가독성, 유지보수성 및 생산성 증가 각 모듈에 수정이 필요하면 다른 모듈의 수정 없이 해당 로직만 변경 공통 로직을 적용할 대상을 선택 가능 부가기능(인프라 로직) 부가기능을 Aspect 또는 advice로 정의함 중복코드를 만들어낼 가능성 때문..