미새문지

코드를 짜다보면 같은 UI를 가진 컴포넌트를 만들 때가 정말 많은 것 같다.  UI가 같지만 쓰는 페이지도 다르고 해서 처음에는 각 코드에 같은 css와 태그를 쑤셔넣었지만, 컴포넌트를 나누는 걸 익숙하게 느낄 때쯤 같은 코드를 반복하는게 뭔가 효율이 안 좋은 것 같아 공용 컴포넌트를 연습하게 되었다. 주로 UI가 겹치는 부분은 어느 페이지든 보이는 header와 footer, 그리고 로그인이나 회원가입같은 정보를 작성하는 input 태그, 해당 사이트의 컨셉을 가진 색상 div 등이 있는 것 같다.input 태그를 예시로 들어보자import styled from "styled-components";interface CommonInputProps { typeValue: string; placehold..

처음에 소셜로그인과 이메일 로그인 router를 같은 걸로 지정해서 해당 버튼을 클릭 시 이동 시키려고 했는데 모션비트 프로젝트를 진행했을 때 경로가 같을 시 뒤로가기를 적용하기가 좀 까다로웠어서 코드를 좀 수정한 기억이 있었다. 그래서 경로를 각각 소셜, 이메일 로그인으로 나눴다.import { BrowserRouter, Routes, Route } from "react-router-dom";import styled from "styled-components";import Main from "./pages/main";import AboutRoutine from "./pages/aboutRoutine";import SocialLogin from "./pages/socialLogin";import Emai..

HTML 작성 규칙HTML은 웹 페이지를 작성하는 데 사용하는 표준 언어이다. HTML 코드를 작성할 때는 몇 가지 기본적인 규칙을 따르는 것이 중요한데, 이러한 규칙은 HTML 문서를 올바르게 구성하고, 웹 브라우저가 이를 정확하게 해석하도록 돕는다.HTML 코드 작성 기본 규칙문서 구조HTML 문서는 기본적으로 다음과 같은 구조를 가진다. Hello, World! : 문서 유형을 선언한다. HTML5의 경우 을 사용하여 문서가 HTML5 표준을 따름을 명시함: 문서 전체를 감싸는 루트 요소: 메타데이터와 관련된 정보를 담는다. 예를 들어, 페이지 제목(title), 문자 인코딩(meta), 외부 CSS 파일 링크 등이 들어감: 실제 콘텐츠가 포함되는 영역이며, 텍스트, 이미지, 링크, ..

자바스크립트는 객체나 배열에 대한 값을 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를..