heyday2024 님의 블로그

CORS란 무엇인가?CORS(Cross-Origin Resource Sharing)는 웹 브라우저에서 보안상의 이유로 도메인이 다른 서버에 요청을 보낼 때 적용되는 정책입니다. 즉, CORS는 클라이언트 웹 애플리케이션이 다른 도메인에 있는 리소스와 전하게 상호작용할 수 있도록 합니다.(특히, 서드 파티 API나 리소스를 참조하는 경우 유용합니다!!)동일 출처(Same-Origin) 정책으로 인해, 기본적으로 웹 페이지가 자신과 동일한 출처(origin)에 있는 리소스만 요청할 수 있으며, 다른 출처의 리소스를 요청하려면 그 서버가 CORS 헤더를 통해 이를 허용해야 합니다.왜 CORS가 만들어졌을까??과거에 크로스 사이트 요청 위조(CSRF) 문제 발생.악의적인 웹사이트가 사용자를 속여서 사용자의 권한..

- img 태그를 사용해 이미지를 추가했을 때 기본적으로 브라우저나 특정 CSS로 인해 이미지에 테두리가 생길 수 있음.==> 해결 방법: styled-components에서 img 요소에 background-image 속성을 직접 적용하는 대신, div 요소로 이미지를 감싸서 배경 이미지를 추가하는 방식이 더 적합함. keyframes를 사용한 애니메이션 적용keyframes 정의: keyframes는 CSS 애니메이션의 시작, 중간, 끝 단계들을 정의하는 규칙. 이 규칙을 사용해 요소에 특정 시점에서 다양한 애니메이션을 적용 가능.예시: const bounceAnimation = keyframes` 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40%..

API란 무엇인가?API(애플리케이션 프로그래밍 인터페이스): 애플리케이션이 서로 정보를 교환할 수 있도록 돕는 규칙입니다. API를 통해 소프트웨어 간의 통신이 이루어지며, 웹 API는 클라이언트와 웹 리소스 간의 연결을 돕습니다.REST란 무엇인가?REST(Representational State Transfer): API가 동작하는 방식에 대한 일종의 아키텍처입니다. 원래 복잡한 네트워크 상의 통신을 효율적으로 관리하기 위해 설계되었고, 서버와 클라이언트 간의 통신을 안정적이고 유연하게 만들 수 있습니다.RESTful API의 기본 규칙: 균일한 인터페이스(Uniform Interface)리소스 식별: 요청은 고유한 리소스를 식별해야 합니다. URL을 통해 리소스의 위치를 지정합니다.리소스 표현: ..

JavaScript의 History API는 클라이언트 단에서의 라우팅을 구현할 때 브라우저의 URL을 조작하며 페이지 이동을 관리하는 데 사용됩니다. 특히 싱글 페이지 애플리케이션(SPA)에서 서버 요청 없이도 URL을 변경하고, 현재 페이지를 새로 고침하지 않으면서 페이지 전환이 이루어지도록 만듭니다.클라이언트 단 라우팅에서 주요하게 사용하는 History API 메서드는 pushState(), replaceState(), 그리고 popstate 이벤트입니다.History API 주요 메서드와 이벤트history.pushState(state, title, url)설명: 현재 페이지를 새로고침하지 않고도 새로운 URL을 기록해 히스토리 스택에 추가합니다.사용 용도: 사용자가 다른 페이지로 이동한 것처럼..

BaaSBaaS(Backend as a Service)란?웹과 모바일 앱 개발을 쉽고 빠르게 할 수 있도록 도와주는 클라우드 기반의 백엔드 서비스===> BaaS를 이용하면 복잡한 백엔드 시스템을 직접 관리하지 않아도 되니, 개발자들이 프론트엔드에 더 집중 가능!구성 요소프론트엔드: 사용자가 보고 상호작용 부분(시각적인 부분 담당)백엔드: 서버 측에서 데이터 처리, 사용자 관리, 로직 처리 담당.데이터베이스: 사용자 정보, 게시글 등 모든 데이터를 저장하고 필요할 때 불러오는 저장소==> BaaS는 서버나 보안 문제를 신경쓰지 않고, 프로트 엔드 개발만 할 수 있도록 도움.(  서버 걱정 없이, 개발에 필요한 기능들을 클라우드에서 바로 이용 가능!! ) Firebase: Google이 운영하는 플랫폼으로..

react-router-dom이란?리액트 프로젝트에서 라우팅을 가능하게 하는 라이브러리. 싱글 페이지 애플리케이션(SPA)에서도 여러 페이지 간 이동하는 것처럼 보이게 해줌. yarn add react-router-dom설치 위한 코드 > import React from "react";import { BrowserRouter, Route, Routes } from "react-router-dom";import Home from "../pages/Home";import About from "../pages/About";import Contact from "../pages/Contact";import Works from "../pages/Works";const Router = () => { return (..

// Action valueconst ADD_TODO = "ADD_TODO";const DELETE_TODO = "DELETE_TODO";const TOGGLE_TODO = "TOGGLE_TODO";// Action Creatorexport const addTodo = (payload) => { return { type: ADD_TODO, payload };};export const deleteTodo = (payload) => { return { type: DELETE_TODO, payload };};export const toggleTodo = (payload) => { return { type: TOGGLE_TODO, payload };};// initial Stateconst initialS..

useState 사용 시, 어떤 컴포넌트에서 생성한 state를 다른 컴포넌트로 보고자 할 때, Props를 통해서 부모 컴포넌트에서 자식 컴포넌트로 그 값을 보내주었음. 이 과정에서 크게 3가지 불편한점이 발견됨: 1. 컴포넌트에서 컴포넌트로 State를 보내기위해서는 반드시 부-모 관계가 되어야함! 2. 조부모 컴포넌트에서 손자 컴포넌트로 값을 보내고자 할때도 반드시 부모 컴포넌트를 거쳐야함.  즉, 정작 부모컴포넌트에서는 그 값이 필요가 없어도 단순히 손자 컴포넌트에게 전달하기 위해 불필요하게 거쳐야만 하는 것을 의미. (조부모 → 부모 → 손자) 3. 자식 컴포넌트에서 부모 컴포넌트로 값을 보낼 수 없음. ==> 이러한 useState의 불편함 때문에 만들어진 도구가 Redux리덕스는 상태 관리를..

리-렌더링의 발생 조건컴포넌트에서 state가 바뀌었을 때컴포넌트가 내려받은 props가 변경되었을 때부모 컴포넌트가 리-렌더링 된 경우 자식 컴포넌트는 모두==> 리액트에서 리렌더링이 자주 발생한다?? 그것은 비효율적인 코드!! ==> 여기서 발생하는 cost를 최대한 줄여야 그 성능이 향상됨.  최적화(Optimization) 필요!! ==> 어떻게하면 불필요한 렌더링을 줄일 수있을까??memoization을 이용하자!!!1. memo(React.memo) : 컴포넌트를 캐싱 ( 고차 컴포넌트(Higher-Order Component, HOC) : 다른 컴포넌트를 받아서 새로운 컴포넌트를 반환하는 함수 )2. useCallback : 함수를 캐싱 (react hook) 3. useMemo : 값을 캐..

1. useStateuseState는 가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 가지게 해줌.  const [state, setState] = useState(initialState);- useState 라는 함수가 배열을 반환하고, 이것을 구조 분해 문법으로 꺼내놓은 모습.- 위 코드에서는 state를 변수로 사용했고, setState를 이용해서 state 값을 수정할 수 있었음.- 만약 state가 원시 데이터타입이 아닌 객체 데이터 타입인 경우에는 불변성을 유지해줘야함.(spread operator 사용.)   1. 직접 새로운 값을 전달하기setState 함수에 직접 새로운 값을 전달하여 상태를 업데이트.이 경우, 이전 상태를 참조하지 않으므로 단순히 새로운 값을 설정하는 상황..