프론트엔드

스플리팅 등장 배경리액트 애플리케이션의 경우 빌드를 통해서 배포를 한다. 이 과정에서 파일 크기를 가능하면 최소화 하는 것이 좋다.왜냐하면 파일 크기가 성능을 결정하고 결과적으로 사용자 경험(UX)에까지 영향을 미치기 때문이다.또한, 브라우저에서 JSX나 최신 자바스크립트 문법 등이 문제없이 잘 실행될 수 있도록 트랜스파일링하는 작업도 필요하다.일반적으로 이러한 작업은 빌드 도구인 Webpack, Parcel, Vite 등이 담당한다.Webpack, Parcel과 같은 경우에는 모든 자바스크립트 파일을 하나의 파일로 합치고, CSS 역시 하나의 파일로 합친다.하나의 파일로 모든 자바스크립트의 파일로 묶어서 빌드하면 파일의 크기가 매우 크고, 일부만 수정해도 다시 모든 자바스크립트 코드들을 새로 빌드해야 ..

▶ES Module이란?ES Module은 ES6부터 도입된 모듈 시스템export 및 import문을 사용해 분리되어 있는 자바스크립트 파일 간의 접근을 가능하게 만들어줌▶ ES Module 등장배경1. 기존의 웹은 자바스크립트 비중이 크지 않았기 때문에 큰 스크립트가 필요하지 않았다.2. 웹의 발전에 따라 점점 자바스크립트의 중요도가 커지고, 여러 개의 스크립트 파일을 쓰면서 상호작용을 해야 했다.3. 이를 처리하기 위해 jQuery등으로 해결(각각의 script 파일을 전역 스코프처럼 사용)했지만 여러 문제점이 발생했다.script 파일들을 올바른 순서대로 정렬해야 하기 때문에 순서가 뒤틀리면 에러를 발생시킴하위에 있는 script가 상위 script의 상태를 쉽게 변경시키는 '전역 오염'이 발생하..

변수랑 무엇인가? 왜 필요한가?변수(Variable) : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름var result = 10 + 20;10 + 20이라는 연산을 할 때 컴퓨터는 10과 20을 각각 메모리 임의의 위치에 저장하고, 연산된 결과인 30을 임의의 위치에 저장한다.연산된 결과인 30이 저장된 메모리에 직접 접근해서 사용할 수 없기 때문에, 변수인 'result'를 통해 메모리 주소값을 참조해 값을 읽어들여 사용할 수 있다.변수명 : 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름변수값 : 변수에 저장된 값할당(대입, 저장) : 변수에 값을 저장하는것참조 : 변수에 저장된 값을 읽어 들이는 것자바스크립트 엔진은 변수 이름과 매핑된 ..

1. Vite를 사용해야 하는 이유브라우저에서 ESM(ES Modules)을 지원하기 전까지, JavaScript 모듈화를 네이티브 레벨에서 진행할 수 없었다.그래서 소스 모듈을 브라우저에서 실행할 수 있는 파일로 크롤링, 처리 및 연결하는 "번들링(Bundling)" 이라는 방법을 사용해야 했다.하지만 처리해야하는 JavaScript 모듈의 개수가 증가하면서 성능 병목 현상이나 서버를 가동하는데 오랜 시간을 기다려야 하는 등 문제가 발생했다.vite는 애플리케이션 모듈을 dependencies와 source code 두 가지 카테고리로 나누어 개선했다. Dependencies개발 시 그 내용이 바뀌지 않을 일반적인 JavaScript 소스 코드이다.보통 애플리케이션에서 사용하는 라이브러리나 패키지를 의..

프로젝트를 진행하면서 계속 변경할 예정 프로젝트 생성(Vite)npm create vite@latest를 실행(Vite 사용하기 위해서는 node.js 설치 필요)프로젝트 이름 설정프레임워크 설정(Vanilla, Vue, React 등)variant 설정(Typescript를 선택할 것인지)cd 프로젝트 이름npm installnpm run dev위와 같이 진행하면 http://localhost:5173/ 주소로 React에 Vite 빌드 도구를 활용한 페이지를 확인할 수 있다. 궁금증이전에는 CRA(create-react-app)을 통해 프로젝트를 생성했었는데, Vite를 사용하는 이유는 뭘까?CRA는 JavaScript로 구성된 Webpack(웹팩)을 사용하는데 속도가 느린 편이다. 코드의 양이 많아..

콘텐츠 보안 정책(Content Security Policy)신뢰할 수 있는 웹 페이지 컨텍스트에서 악의적인 콘텐츠 실행으로 크로스 사이트 스크립팅(XSS), 클릭 재킹 및 기타 코드 삽입 공격을 방지하기 위해 도입된 컴퓨터 보안 계층이다.웹에서 사용하는 컨텐츠(이미지, 스크립트 등)에 대한 규칙으로 생각하면 될 것 같다.CSP의 경우 웹 사이트가 직접 룰을 적용해서 사용하게 된다. CSP 대표 헤더Content-Security-Policy : W3C에서 지정한 표준 헤더(주로 사용함)X-Content-Security-Policy : Firefox/IE 구형 브라우저에서 사용되는 헤더X-WebKit-CSP : Chrome 기반의 구형 브라우저에서 사용되는 헤더  설정 방법1. 태그를 이용한 방법페이지별..

정리 React-Doc-Study/1주차 at main · tjddnr9553/React-Doc-StudyContribute to tjddnr9553/React-Doc-Study development by creating an account on GitHub.github.com컴포넌트 생성 및 중첩하기컴포넌트(Component)란?고유한 로직과 모양을 가진 UI(사용자 인터페이스)의 일부입니다. 마크업을 반환하는 자바스크립트 함수로, 마크업이란 태그로 둘러싸인 코드를 의미합니다. 컴포넌트의 이름은 항상 대문자로 시작하고, HTML 태그는 소문자로 시작합니다. export default 키워드는 파일의 기본 컴포넌트를 지정합니다.function MyButton() { return ( I'm a bu..