본문 바로가기

전체 글22

[Error] CORS(Cross-Origin Resource Sharing) 사전지식 - SOP(Same-Origin Policy)이란? - mdn 설명 - 동일 출처 정책은 어떤 출처(프로토콜, 호스트, 포트)에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호 작용할 수 있는 방법을 제한하는 중요한 보안 메커니즘입니다. 동일 출처 정책(Same-Origin Policy, SOP)은 웹 보안에 있어 중요한 원칙이지만, 모든 HTTP 요청에 적용되는 것은 아니다. SOP는 웹 페이지가 다른 도메인의 리소스에 접근하는 것을 제한하나, , , 와 같은 태그를 이용하여 다른 도메인의 이미지, CSS, JS 파일을 요청하는 것은 허용한다. 동일 출처 정책의 정확한 구현 명세는 없지만 최신의 브라우저들은 일정 규칙을 따르고 있다. ( RFC6454 ) CORS란? - mdn .. 2024. 2. 18.
[JavaScript] 호이스팅(Hoisting)이란? 호이스팅(hoisting) 호이스팅은 자바스크립트에서 특별한 동작 원리를 지칭한다. 많이 오해하는 바와 달리, 호이스팅은 변수나 함수의 선언을 물리적으로 코드의 최상단으로 이동시키는 것이 아니라, 선언을 스코프의 최상단에 위치한 것처럼 자바스크립트 엔진이 해석하는 현상을 말한다. 호이스팅 정의: 자바스크립트에서 선언(변수, 함수 등)을 코드 상단에 위치한 것처럼 엔진이 처리하는 현상. 물리적 이동 없음: 실제로 코드의 위치가 변경되는 것이 아니라, 자바스크립트 엔진이 선언을 코드 실행 전에 먼저 인식함. 실행 컨텍스트 생성: 코드 실행 전, 스코프 내의 모든 선언을 스코프 최상위에 있는 것처럼 처리하는 과정의 일부. var와 함수 선언의 호이스팅: var로 선언된 변수와 함수 선언문은 선언 전 참조/호출.. 2024. 2. 12.
[React] image 파일 불러오기 들어가며 프로젝트 초기 설정에서 React와 함께 이미지를 불러오는 데 문제가 발생하는 것은 종종 겪게 되는데, 이러한 문제를 해결하기 위해 몇 가지 주요 원인과 해결 방법을 정리해 보려고한다. 이슈 발생 배경 React 프로젝트를 CRA(create-react-app) 없이 npm init으로 시작하고, webpack과 babel 등을 직접 설정하는 과정에서 이미지를 제대로 불러오지 못하는 문제가 발생. 주요 문제 원인 환경 변수 설정: public 폴더가 webpack에 의해 직접 관리되지 않음으로 인해, 이 폴더에 접근하기 위해서는 PUBLIC_URL 환경변수의 사용이 필요. loader 미설치: 이미지와 같은 정적 자원을 처리하기 위해 file-loader 또는 url-loader 같은 webpa.. 2024. 2. 7.
[MFA]Front-End 모노레포-Turborepo 개발환경 구축 터보레포(Turborepo)란? Turborepo는 JavaScript와 TypeScript 프로젝트를 위한 고성능 빌드 시스템이다. 모노레포를 지원하여, 여러 패키지와 애플리케이션을 하나의 저장소(repository)에서 관리할 수 있게 해준다. 이는 코드 공유, 의존성 관리, 그리고 프로젝트 간 협업을 용이하게 만든다. 터보레포의 장점 효율적인 빌드 시스템: 터보레포는 캐싱과 병렬 처리를 통해 빌드 및 테스트 시간을 단축. 의존성 관리: 공통 의존성을 중앙에서 관리하여 각 패키지의 의존성 충돌을 방지. 코드 재사용성 향상: 공통 코드를 모듈로 분리하여 여러 프로젝트에서 재사용할 수 있다. 협업의 용이성: 한 저장소에서 여러 프로젝트를 관리함으로써 팀 간 협업이 향상. 터보레포 도입이유 이번 토이 프로.. 2024. 2. 6.

티스토리툴바