본문 바로가기

분류 전체보기

 (57)
[내배캠] 미니 프로젝트 1조 KPT 회고
CORS란? CORS란 Cross-Origin Resource Sharing의 약자 웹 페이지가 다른 도메인의 자원에 접근할 수 있게 하는 보안 메커니즘. 기본적으로 웹 브라우저는 같은 출처 정책(Same-Origin Policy)을 사용하여, 스크립트가 다른 출처(도메인, 프로토콜, 포트)의 리소스와 상호 작용하는 것을 제한한다. (프로젝트를 할 때 CORS에러가 뜨면 컴퓨터 부셔버리고 싶었다.) CORS를 구현하는 방법은 아래와 같다. 서버 측 설정: 서버는 Access-Control-Allow-Origin 헤더를 사용하여 특정 출처(또는 모든 출처)의 접근을 허용할 수 있습니다. 예를 들어, 서버가 `Access-Control-Allow-Origin: *`를 응답 헤더에 포함시키면 모든 출처의 요청을 허용하게 ..
HTML 의 inline 요소와 block 요소 1. Block 요소 블록 요소는 화면의 가용 너비 전체를 차지하며, 항상 새로운 라인에서 시작하고 이전 요소와 다음 요소를 새로운 라인으로 밀어낸다. 즉, 블록 요소가 들어가면 자동으로 줄 바꿈이 일어난다. 너비와 높이, 마진, 패딩 등의 속성을 변경할 수 있다. 블록 레벨 요소는 다른 블록 레벨 요소나 인라인 요소를 포함할 수 있다. 예시로는 , , ~ , , , , , , 등이 있다. 블록 요소 블록 요소는 새로운 라인에서 시작하며, 항상 전체 너비를 차지한다. , , 그리고 요소는 모두 블록 레벨 요소. 2. Inline 요소 인라인 요소는 새로운 라인에서 시작하지 않고, 문서 흐름 중에 나타나며 해당 요소의 내용만큼만 공간을 차지한다. 인라인 요소는 줄 바꿈 없이 요소들이 나란히 배치된다. 너비..
Redux 상태관리 Redux 상태관리의 주요 개념 Store: Redux에서 어플리케이션의 전체 상태를 저장하는 객체. 어플리케이션에는 하나의 스토어만 존재해야 한다. Action: 애플리케이션에서 스토어에 보내는 정보 패키지. 모든 액션은 type 속성을 가져야 하며, 그 외에 필요한 추가 정보를 담을 수 있다. Reducer: 액션에 의해 애플리케이션 상태가 어떻게 변경될지를 결정하는 함수. 리듀서는 이전 상태와 액션을 받아서 새로운 상태를 반환한다. Redux의 흐름은 다음과 같다. 액션을 통해 어떤 변화가 필요한지 시스템에게 알린다. 액션이 스토어로 전달되면, Redux는 해당 액션을 처리할 리듀서를 찾는다. 리듀서는 액션을 받고, 이전 상태와 함께 호출되어 새로운 상태를 생성한다. 새로운 상태는 스토어에 저장되며..
Cookie의 MaxAge, Expires 옵션 쿠키에 설정할 수 있는 Max-Age와 Expires는 쿠키의 생명 주기를 결정하는 옵션이다. Max-Age: 이 옵션은 쿠키가 얼마나 오래 지속될지를 초 단위로 설정한다. 예를 들어, Max-Age=3600은 쿠키가 생성된 시점부터 1시간 후에 만료되도록 설정하는 것. 쿠키를 설정할 때 Max-Age 값을 명시적으로 주지 않으면, 브라우저가 종료되는 시점에 쿠키가 자동으로 만료되어 삭제된다. 이를 세션 쿠키라고 부른다. Expires: 이 옵션은 쿠키의 만료일을 명확하게 설정한다. Expires 값은 HTTP 날짜 형식(GMT/UTC 포맷)으로 되어 있다. 예를 들어, Expires=Wed, 21 Oct 2023 07:28:00 GMT는 쿠키가 2023년 10월 21일 07:28에 만료되도록 설정하는 ..
useRef가 필요한 상황? useRef는 React에서 참조(reference)를 생성하고 관리하는 데 사용되는 Hook이다. 주로 두 가지 목적으로 사용되는데 DOM 요소에 직접 접근하는 목적과 변경 가능한 값을 컴포넌트 생명주기 동안 저장하는 목적이 있다. DOM 요소에 직접 접근하는 목적 : useRef는 React에서 생성한 DOM 노드나 React 요소에 접근할 때 사용된다. React에서는 데이터 흐름을 위해 주로 "props"를 사용하지만, 가끔 직접적으로 DOM 요소에 접근해야 할 때가 있다. 예를 들어, 텍스트 입력을 위한 포커스 설정, 특정 사용자 액션에 대한 응답으로 애니메이션 실행, 외부 라이브러리에 DOM 요소를 전달할 때 등이다. 아래는 간단한 예시이다. import React, { useRef, useE..
배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유 const 키워드를 사용하여 선언된 변수는 재할당 할 수 없다. 즉, 변수에 새로운 값을 할당할 수 없다. 그러나 const로 선언된 객체나 배열은 수정 가능(mutate)하다. 그 이유는 const가 변수의 값 자체가 아니라, 변수가 참조하는 메모리 위치를 고정하기 때문이다. 아래의 예를 보자 const obj = { a: 1, b: 2 }; // 다음의 연산은 허용. // 'obj'는 여전히 동일한 객체를 참조하고 있지만, 객체의 속성은 변경할 수 있다. obj.a = 3; console.log(obj); // { a: 3, b: 2 } // 그러나 다음의 연산은 허용되지 않는다. // 'obj'를 완전히 다른 객체로 재할당하려는 시도. obj = { a: 4 }; // TypeError: Assig..
require와 import차이점 require require는 Node.js에서 주로 사용되는 CommonJS 모듈 로딩 방식. 런타임에 모듈을 로드하므로, 동적으로 모듈을 불러올 수 있다. require는 모듈 전체를 반환하므로, 필요한 속성만 가져올 수 있다. require를 사용하면, 순환 종속성을 처리할 수 있다. React 개발에서는 require가 보다 적게 사용되지만, 몇몇 상황에서 필요할 수 있다. 예를 들어, Node.js 환경에서 서버사이드 렌더링을 하는 경우나, Babel 등의 도구를 사용하지 않는 상황에서 ES6 모듈을 사용할 수 없는 경우에 require를 사용할 수 있다. import import는 ES6에서 도입된 모듈 로딩 방식으로, React 개발에서 주로 사용된다. 컴파일 타임에 모듈을 로드하므로, 정적..

티스토리툴바