전체 글

[Javascript] Throttle 과 Debounce

Throttle과 Debounce의 등장 배경 Throttle 과 Debounce 는 DOM 이벤트를 제어하는 방법으로 자주 호출되는 이벤트의 실행 빈도를 줄여 성능상의 이점을 얻기 위해 사용한다. Throttle과 debounce를 사용할 수 있는 대표적인 상황은 아래와 같다. 스크롤링을 통한 데이터 노출 검색어 입력시 자동완성 예를 들어 스크롤 이벤트를 감지하여 API를 호출해 데이터를 가져오고자 하는 상황이라고 가정해보자. 이때, 사용자가 스크롤을 움직일 때마다 수많은 스크롤 이벤트가 발생할 것이고 이는 수많은 API 호출로 이어질 것이다. 매번 스크롤 이벤트에 대한 콜백이 발생하고 해당 콜백의 수행은 매우 큰 리소스를 차지하게 된다. 이는 결국 서비스의 성능과 사용자의 경험 저하를 야기하게 된다...

AWS EC2에 Vite 애플리케이션 Docker로 배포하기

🔎 Vite 애플리케이션 설정 vite의 이미지 폴더 경로: /public/assets/img vite.config.ts base: dist 폴더에 생성된 index.html 에서 참조하는 파일 경로 ./ 로 세팅 https://vitejs.dev/config/#base assetsInclude: dist 폴더 생성시 .jpg 포함되도록 추가 import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; // https://vitejs.dev/config/ export default defineConfig({ base: './', plugins: [react()], assetsInclude: ['**/*.jpg'], }); v..

[Redux] 간단한 예제로 살펴보는 리덕스의 동작 원리

React는 상태를 기반으로 사용자 인터페이스(UI)를 제어하기 위한 자바스크립트 라이브러리이다. 웹 애플리케이션은 사용자와의 활발한 인터렉션을 처리하고, 실시간 통신을 통해 데이터를 받아오며 이를 기반으로 렌더링을 하는 등 다양한 기능을 가지고 있다. 이때, 상태(state)를 관리하는 것은 필수적으로 요구되는 사항이다. 즉, 상태 관리란 React 앱 구축에 있어 핵심이 되는 부분 중 하나라 할 수 있다. 따라서 상태 관리를 위한 많은 기술이 다양한 라이브러리의 등장으로 이어지게 되었다. 그 중에서도 리덕스(Redux)는 리액트와 가장 오랜 기간을 함께했으며 가장 널리 알려진 상태관리 라이브러리 중 하나이다. 이번 포스팅에서는 리덕스의 동작 원리를 간단한 예제와 함께 살펴볼 것이다. 👉 리덕스의 코어..

[React] ContextAPI & useContext Hook을 통한 Global State 값 관리하기

✨ Context API란? 전역 상태(global state) 값을 공유할 수 있도록 React에서 고안된 방법 주로 로그인한 유저 정보, 테마, 언어 등을 저장한다. Prop Drilling을 개선할 수 있다. Prop Drilling Prop Drilling은 컴포넌트 트리에서 컴포넌트에 직접적으로 필요한 데이터를 props로 전달받는 것이 아니라, 단순히 컴포넌트 트리의 하위 컴포넌트로의 props 전달을 위하여 데이터를 전달하는 과정이다. ✨ Context API 사용법 Context의 사용법은 다음과 같다. React.createContext(defaultValue) Context 객체를 생성한다. createContext 함수를 호출하면 Provider와 Consumer 컴포넌트를 반환한다...

[Javascript] 변수, 호이스팅, TDZ

✨ 변수의 종류 let const var var는 한번 선언된 변수를 다시 선언할 수 있다. // ✅ var name = 'Mike'; console.log(name); // Mike var name = 'Jane'; console.log(name); // Jane // ❌ let name = 'Mike'; console.log(name); // Mike let name = 'Jane'; // error! (동일한 이름으로 재선언 불가) console.log(name); var는 선언하기 전에 사용할 수 있다. console.log(name); // undefined var name = 'Mike'; 위의 예제에서 에러가 발생하지 않는다. var는 아래처럼 동작하기 때문이다. var name; conso..

[Typescript] Advanced-Types & Utility-Types 정리

infer 타입변수를 참조하기 위해 사용 조건부 타입의 extends 절에서 infer 키워드 사용 가능 example type First = T extends [infer U, ...unknown[]] ? U : never; type SomeTupleType = [string, number, boolean]; type FirstElementType = First; // string example: infer 키워드 여러개 사용 type Unpacked = T extends (infer U)[] ? U : T extends (...args: any[]) => infer U ? U : T extends Promise ? U : T; type T0 = Unpacked; // string type T1 = U..

[Spring] 다양한 의존관계 주입 방법

의존관계 주입 4가지 생성자 주입 수정자 주입(setter 주입) 필드 주입 일반 메서드 주입 의존관계 자동 주입은 스프링 컨테이너가 관리하는 스프링 빈이어야 동작함 생성자 주입 생성자를 통해서 의존관계를 주입하는 방법 생성자 호출시점에 딱 1번만 호출되는 것이 보장됨 불변, 필수 의존관계에 사용 생성자가 1개만 존재할 경우, @Autowired를 생략해도 자동 주입됨 (스프링 빈에만 해당) @Component public class OrderServiceImpl implements OrderService { private final MemberRepository memberRepository; private final DiscountPolicy discountPolicy; @Autowired // 생략..

[Spring] 스프링 컨테이너와 스프링 빈

스프링 컨테이너 ApplicationContext를 스프링 컨테이너라 함 ApplicationContext는 인터페이스 -> 스프링 컨테이너는 XML 기반으로 만들 수 있고 어노테이션 기반의 자바 설정 클래스로 만들 수 있음 AppConfig가 어노테이션 기반의 자바 설정 클래스로 스프링 컨테이너를 만든 것 @Configuration 어노테이션이 붙은 클래스를 설정 정보로 사용함 이때 @Bean 어노테이션을 적용한 메서드를 모두 호출해서 반환된 객체를 스프링 컨테이너에 등록함 스프링 빈은 @Bean이 붙은 메서드의 명을 스프링 빈의 이름으로 사용 위의 예제에서 MemberService 빈을 찾을 때 메서드 명 memberService를 통해서 찾음 메서드 명으로 빈 이름을 사용하지만 @Bean(name=..

[Spring] HTTP 요청 파라미터 사용 - @RequestParam과 @ModelAttribue

로그 레벨 설정 application.properties # 전체 로그 레벨 설정(기본 info) logging.level.root=info #hello.springmvc 패키지와 그 하위 로그 레벨 설정 logging.level.hello.springmvc=debug @RequestParam @RequestParam: 파라미터 이름으로 바인딩 @RequestParam의 name(value) 속성이 파라미터 이름으로 사용 @RequestParam("username") String memberName String memberName = request.getParameter("username") 파라미터 이름이 변수 이름과 같으면 name 속성 생략 가능 String, int, Integer 등의 단순 타입..

[Spring] MVC 패턴

MVC 패턴의 등장 역할 하나의 서블릿이나 JSP만으로 비즈니스 로직 + 뷰 렌더링까지 처리 -> 너무 많은 역할을 담당함 -> 유지보수가 어려워짐 변경의 라이프 사이클 UI 수정과 비즈니스 로직의 변경의 라이프 사이클이 다름 기능 특화 JSP와 같은 뷰 템플릿은 화면을 렌더링하는데 최적화 -> 해당 부분의 업무만 담당하는 것이 효과적 Model View Controller 하나의 서블릿이나 JSP로 처리 -> 컨트롤러(Controller) + 뷰(View)의 영역으로 서로 역할을 나눔 컨트롤러: HTTP 요청을 받아서 파라미터 검증, 비즈니스 로직 실행, 뷰에 전달할 결과 데이터 조회 후 모델에 세팅 모델: 뷰에 출력할 데이터를 담아둠 뷰: 모델에 담겨있는 데이터를 사용해 화면을 그림 SpringMVC..