전체 글31 코드 스플리팅이란 무엇인가 코드 스플리팅이란? 코드 스플리팅(Code Splitting)은 큰 규모의 애플리케이션을 여러 개의 작은 청크(chunks)로 나누는 프로그래밍 패턴을 말합니다. 이를 통해 웹 페이지의 초기 로딩 속도를 향상하고, 사용자 경험을 개선하며, 특정 코드가 필요할 때만 로드하여 성능을 향상할 수 있습니다. 코드 스플리팅 적용 방법 코드 스플리팅은 웹팩(Webpack), 롤업(Rollup), 브라우저리파이(Browserify)와 같은 모듈 번들러를 사용하여 적용할 수 있습니다. 이 중 웹팩을 예시로 들면, import() 함수를 사용하여 비동기적으로 모듈을 로드하는 방식으로 코드 스플리팅을 적용할 수 있습니다. import()를 사용한 코드 스플리팅 import() 함수를 사용하여 비동기적으로 모듈을 로드하는 .. 2024. 2. 27. 커밋 컨벤션 설정하기 커밋 컨벤션 설정하기 커밋 컨벤션이란? 프로젝트 참여자들이 일관된 형식의 커밋 메시지를 작성하기 위한 규칙을 말한다. 커밋 컨벤션의 중요성 일관된 커밋 메시지의 형태를 유지하면 가독성을 높일 수 있고, 소스 변경 이력을 효율적으로 추적할 수 있다. 또한 코드 리뷰 및 버그 수정 과정에서 불필요한 의사소통 과정을 간소화해 프로젝트 관리에 들어가는 시간을 줄일 수 있다. 기본 포맷 타입 : 태그 + 제목 타입 영어로 쓰되 첫 문자는 대문자로 하며 종류는 다음과 같다. Feat(페이지 경로 또는 컴포넌트): 새로운 기능 추가 또는 기능 업데이트 Fix (페이지 경로 또는 컴포넌트) : 버그 또는 에러 수정 Style: 코드 스타일 수정( 포맷, 공백, 빼먹은 세미콜론, 함수 이름 변경, 줄간격 수정) Desi.. 2024. 2. 26. <a> 태그의 target="_blank" 사용 시 무조건 noopener, noreferrer 추가해야 하는 이유! 태그의 target=”_blank” 사용 시 rel 속성값인 noopener, noreferrer을 사용하지 않으면 보안상 취약점이 생기고 퍼포먼스가 떨어질 우려가 있다. 그렇다면 왜 이 두 개의 속성값을 사용해야 하는지 자세히 알아보자! target="_blank"는 연결한 웹 페이지를 새로운 탭에서 연다. 사용법은 아래와 같다. 새 탭에서 보기 여기서, target="_blank" 사용 시 문제점은? 보안상 취약점이 생긴다 target="_blank”를 사용하여 새탭으로 페이지가 열리는데, 이 페이지의 JavaScript에서 window.opener로 부모 윈도우(링크를 건 페이지)의 오브젝트에 접근해서 'window.opener.location = 새로운 URL'로 부모 윈도우의 URL을 바꿔 쳐 .. 2024. 2. 22. React에서 inline style을 쓰지 말아야하는 이유 React에서 인라인 스타일을 쓰게 되면 아래와 같이 style 객체를 추가해야 하는데 로그인 객체는 검사를 할 때마다 무조건 다름으로 인식한다. //console {} === {} false 즉, 리액트에서 vertual Dom으로 검사하면서 어디가 달라졌나 찾다가 달라진 부분이 있으면 그 영역을 리랜더링 시키는데 inline style 객체를 추가하면 매번 다름으로 인식해서 해당 부분을 계속 리랜더링 시킨다. 그럼 inline style 말고 스타일을 어떻게 적용하면 좋을까? 바로 styled-component 사용하기!! import styled from 'styled-components'; const Wrap = styled.div` padding: 10px; `; const Page = () =.. 2024. 2. 21. 이전 1 2 3 4 다음
