[JavaScript] 배열 비교하기

JavaScript에서 배열 비교JavaScript에서 배열과 객체는 참조형 데이터이다.이는 변수에 배열 자체가 아닌 배열을 가리키는 참조(주소)가 저장된다는 의미이다.따라서 두 배열이 같은 요소를 가지고 있어도 다른 메모리 주소에 저장되어 있다면 엄격 비교(===)나 동등 비교(==) 연산자를 사용할 때 동등하지 않다고 판단된다.let arr1 = [1, 2, 3];let arr2 = [1, 2, 3];console.log(arr1 === arr2); // false 1. JSON 문자열 변환으로 비교배열을 JSON 문자열로 변환하여 비교하는 방법이다. 배열의 요소와 순서가 같아야 동등하다고 판단되며 중첩 배열도 비교할 수 있다.let arr1 = [1, 2, 3];let arr2 = [1, 2, 3]..

• format_list_bulleted Frontend/JavaScript
• · 2024. 11. 8.
• textsms

[JavaScript] 문자열 역순으로 뒤집기

JavaScript에서 문자열을 역순으로 뒤집기알고리즘에서 자주 등장하는 문자열을 뒤집는 방법에 대해 알아보자.JS에서는 문자열 자체를 뒤집는 메서드는 존재하지 않는다.대신 여러가지 방법으로 문자열을 뒤집을 수 있는데 각 방식을 알아보고 적용해보자. 1. Array로 변환해서 reverse()JavaScript에서는 문자열을 배열로 변환한 후 배열의 메서드를 사용해 뒤집을 수 있다.문자열을 배열로 바꾸는 과정에서 split(), reverse(), join() 메서드를 사용하면 간단하게 문자열을 뒤집을 수 있다.아래 코드는 배열로 나누고 뒤집고 스트링으로 합치는 코드이다. split('')로 문자열을 문자 하나하나로 쪼개 배열로 변환한다.reverse()로 배열을 뒤집다.join('')으로 다시 문자열..

• format_list_bulleted Frontend/JavaScript
• · 2024. 11. 8.
• textsms

[React] Context API를 이용한 합성 컴포넌트 만들기 - 컴파운드 패턴

컴파운드 패턴이란? Compound PatternCreate multiple components that work together to perform a single taskwww.patterns.dev컴파운드 컴포넌트(Compound Component) 패턴은 서로 관계가 있는 여러 개의 컴포넌트가 하나의 상위 컴포넌트를 통해 연결되고 이 상위 컴포넌트가 공통된 상태나 메서드를 제공한다. 사용자는 상위 컴포넌트만 사용하면서도 하위 컴포넌트들이 자연스럽게 상호작용하도록 할 수 있다. 보통 셀렉트 박스나 드롭다운 컴포넌트, 메뉴 항목과 같은 곳에서 이런 패턴을 볼 수 있다. 컴파운드 컴포넌트 패턴은 이러한 컴포넌트들이 함께 작동하여 특정 작업을 수행할 수 있게 해준다. 컴파운드 패턴 구현 예시컴파운드 패턴..

• format_list_bulleted Frontend/React
• · 2024. 11. 1.
• textsms

[React] Hooks - useForm을 사용한 로그인 폼 예제

useForm이란?useForm은 react-hook-form 라이브러리에서 제공하는 커스텀 훅으로 폼의 상태와 유효성 검사를 간편하게 관리할 수 있게 해준다. 이 훅은 form 데이터를 처리하는 데 필요한 다양한 기능을 제공하며 기존의 React 상태 관리 방식보다 가볍고 효율적으로 폼을 관리할 수 있도록 도와준다. 설치 방법npm install react-hook-form useForm의 장점성능 최적화: react-hook-form은 DOM 렌더링을 최소화하여 폼의 성능을 높인다.간결한 코드: register와 handleSubmit을 통해 필요한 코드량을 줄여주고 직관적으로 작성할 수 있다.유연한 유효성 검사: 필수 항목부터 비동기 검증까지 다양한 유효성 검사 옵션을 지원힌다.훅 기반 구조: us..

• format_list_bulleted Frontend/React
• · 2024. 11. 1.
• textsms

JS 1급 함수 - 특징과 예시

1급 함수란 무엇일까?JavaScript에서 1급 함수(First-Class Function)란 함수가 다른 데이터 타입(변수, 객체)처럼 다뤄질 수 있음을 의미힌다.프로그래밍 언어에서 1급 함수는 함수가 아래와 같은 특성을 가질 때 성립한다. 1급 함수는 코드 재사용성과 유연성을 크게 높여준다. 함수를 매개변수로 받거나 반환값으로 사용할 수 있어 동작을 분리하고 조합할 수 있다. 함수를 변수에 할당할 수 있다.함수를 다른 함수의 인자로 전달할 수 있다.함수가 다른 함수의 반환값이 될 수 있다.함수 안에서 다른 함수를 정의할 수 있다. 1급 함수의 특징 함수를 변수에 할당// 함수 선언function greet() { console.log("Hello, world!");}// 함수 표현식으로 변수에..

• format_list_bulleted Frontend/JavaScript
• · 2024. 10. 30.
• textsms

Github Actions로 간단하게 CI 구축하고 Docker로 배포하기

깃허브 액션으로 CI 자동화하기 + 도커로 배포 알아보기일반적인 CI/CD의 절차로 아래 방식대로 진행할 예정이다. CI 절차 : Develope -> Test -> Build -> Build Docker Image -> Push CD 절차 : Pull -> Run파란색 영역 : Docker 관련 영역 CI/CD 전략아래 예시에는 깃허브 액션과 젠킨스가 있지만 이번에는 깃허브 액션을 이용하여 CI/CD 전략을 구성하려고 한다.1. Develope: Local 에서 수행2. Test : Local 또는 Gihub Actions / Jenkins 에서 수행3. Build : Local 또는 Gihub Actions / Jenkins 에서 수행4. Build Docker Image : Local 또는 Gih..

• format_list_bulleted DevOps
• · 2024. 10. 18.
• textsms