미새문지

자바스크립트는 객체나 배열에 대한 값을 import로 가져올 수 있다.export const options = [ "여드름", "아토피", "민감성", "저항성", "10대", "20대", "30대", "40대+", "모닝", "나이트", "남성", "여성",];이러한 배열을 외부에서 가져올 수 있게 export하여 사용할 코드로 가져온다.import styled from "styled-components";import React, { useState } from "react";import { options } from "./Data";const OtherFilter = () => { const [checkedItems, setCheckedItems] = useState([]); ..

리액트에서 CSS를 적용하는 방식에는 여러 가지가 있으며, 각 방식들은 프로젝트의 필요에 따라 선택할 수 있고 스타일을 관리하는 방식에 따라 다를 수 있다. 주요 방식기본 CSS 파일 사용리액트에서 가장 기본적인 방법은 일반적인 HTML과 마찬가지로 외부 CSS 파일을 사용하는 것이다. 이 방법은 모든 컴포넌트에서 동일한 CSS 파일을 공유할 수 있다.// App.jsimport React from "react";import "./App.css"; // CSS 파일을 임포트function App() { return ( Hello, React! );}export default App;==================/* App.css */.App { text-align: cen..

타입스크립트 파일인 tsx로 작성을 하다보면 파일 url이나 이미지 url등이 인식을 못할 때가 있다.타입스크립트는 자체적으로 파일 시스템이나 파일 경로에 직접 접근하는 기능을 제공하지 않기 때문에 생기는 에러인데, 코드의 문법과 타입을 검사하지만, 실제 파일이나 리소스를 로드하거나 접근하는 역할은 하지 않아서 이 부분을 직접 작성해 줘야 한다. 해결법은 이미지파일을 인식할 수 있게 타입을 지정해줘야 한다.src폴더 내에 images.d.ts 파일을 작성해주면 해결된다.declare module "*.png" { const value: string; export default value;}declare module "*.jpg" { const value: string; export default ..

ESLintESLint는 JavaScript 및 TypeScript 코드에서 발견될 수 있는 문제를 식별하고 수정하기 위해 사용되는 정적 코드 분석 도구이며, 개발자가 더 깨끗하고 일관된 코드베이스를 유지하는 데 도움이 된다.개념Linting: 코드에서 잠재적인 문제나 스타일 위반 사항을 찾아내는 과정이며, Lint라는 용어는 원래 프로그램에서 남아 있는 작은 오류나 버그를 지칭하는 데 사용되었다.ESLint는 이러한 linting을 자동화하는 도구로, 코드의 품질을 높이고, 버그를 줄이며, 코드 스타일을 일관되게 유지하는 데 도움을 준다.주요 기능코드 분석ESLint는 소스 코드를 읽고, 규칙을 기반으로 분석하여 문제를 식별한다.예를 들어, 변수 선언 후 사용하지 않는 변수, 예상하지 못한 전역 변수 ..

Mashup웹 애플리케이션에서의 Mashup은 서로 다른 소스의 데이터를 결합하여 새로운 서비스를 제공하는 웹 애플리케이션을 만드는 것을 의미하는데, 이는 여러 개의 API나 데이터 소스를 결합하여 하나의 통합된 사용자 경험을 제공하는 방식으로 이루어진다.Mashup의 주요 특징다양한 데이터 소스 통합Mashup은 여러 출처에서 데이터를 가져와 이를 결합하여 새로운 서비스를 제공하며, 이 데이터는 서로 다른 웹사이트, 데이터베이스, 또는 공공 데이터 소스에서 가져올 수 있다.API 활용웹 애플리케이션 Mashup에서 가장 중요한 요소는 API이며, API를 통해 다른 웹 애플리케이션이나 서비스의 기능을 손쉽게 가져올 수 있다.예를 들어, 구글 맵 API를 사용해 위치 정보를 제공하거나, 커뮤니티 API를..

결합도(Coupling) 와 응집도(Cohesion) 결합도(Coupling)와 응집도(Cohesion)는 소프트웨어 설계의 품질을 평가하는 중요한 개념이다.이 두 개념은 모듈 간의 관계와 모듈 내부의 요소들이 얼마나 잘 통합되어 있는지를 나타내며, 소프트웨어의 유지보수성, 재사용성, 확장성에 큰 영향을 미칠 수 있기 때문에 매우 중요하다.결합도(Coupling)결합도는 한 모듈이 다른 모듈과 얼마나 밀접하게 연결되어 있는지를 나타내며, 모듈 간의 의존성이 높을수록 결합도가 높고, 의존성이 낮을수록 결합도가 낮다.낮은 결합도(Low Coupling)모듈 간의 상호 의존성이 적다.모듈이 독립적으로 동작할 수 있어 변경의 영향이 최소화된다.유지보수와 재사용이 용이해진다.높은 결합도(High Coupling)..

HOC(Higher-Order Components)HOC는 React에서 컴포넌트를 인수로 받아 새로운 컴포넌트를 반환하는 함수이며, 컴포넌트를 재사용하고 확장하기 위한 고급 기술이다.HOC는 React의 컴포넌트 재사용을 통해 코드의 중복을 줄이고, 컴포넌트의 기능을 쉽게 확장할 수 있게 한다.HOC 특징컴포넌트를 인수로 받음HOC는 보통 하나 이상의 컴포넌트를 인수로 받아 새로운 컴포넌트를 반환하며, 이 과정에서 원본 컴포넌트는 수정되지 않고, 확장된 기능을 갖춘 새로운 컴포넌트가 생성된다.원본 컴포넌트를 래핑함HOC는 원본 컴포넌트를 래핑하여 필요한 추가 기능을 부여한다. 예를 들어, 데이터 페칭, 상태 관리, 로깅 등의 기능을 HOC로 분리할 수 있다.함수형 또는 클래스형 컴포넌트에 사용 가능HO..

즉시 실행 함수(IIFE, Immediately Invoked Function Expression)IIFE는 정의되자마자 실행되는 자바스크립트 함수이며, 이는 자바스크립트에서 흔히 사용되는 패턴으로, 함수의 스코프를 이용해 변수를 캡슐화하거나 초기화 코드를 즉시 실행할 때 유용하다.(function() {  }) (); 또는 (function() {  } ());이 기본 형태이다.IIFE의 장점스코프 캡슐화: IIFE 내부에서 정의된 변수는 외부에서 접근할 수 없으므로 전역 스코프를 오염시키지 않는다.모듈화: IIFE를 사용하면 모듈 단위로 코드를 분리하여 관리할 수 있다.익명 함수: IIFE는 이름이 없는 익명 함수로 정의되므로 함수 이름을 정의하지 않아도 된다.초기화 코드: 페이지 로드 시점에서 실행..