728x90 반응형 ROLLUP5 [Svelte] Production에서 콘솔 출력 방지 안녕하세요. J4J입니다. 이번 포스팅은 production 모드일 때 콘솔 출력 방지하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 프론트 개발을 하면서 데이터들을 확인하기 위해 콘솔 창에 관련 값들을 출력하는 것은 자주 하는 행동입니다. 하지만 이런 데이터들 중 사용자들에게 노출되면 안되는 데이터들도 들어있기 마련입니다. 노출되면 안된다는 생각을 가지고 있기에 배포할 때는 관련 코드들을 제거하기는 하지만 항상 완벽하게 할 수는 없는 일이고 매번 배포할 때마다 콘솔 창에 출력시켜주는 코드들을 찾아 제거하거나 주석처리하는 것도 번거로운 작업 중에 하나가 됩니다. 이런 문제를 해결하기 위해 development 모드일 때만 콘솔 창에 데이터를 출력하는 코드가 정상적으로 동작하고 production 모.. 2021. 10. 12. [Svelte] 경로 Alias 설정 안녕하세요. J4J입니다. 이번 포스팅은 경로 alias 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다. svelte에 한정된 것은 아니지만 개발을 하다 보면 모듈화 되어 있는 다른 컴포넌트 또는 이미지 등의 파일들을 로드해올 때 보통 상대 경로로 로드합니다. 예를 들면 이런식으로 표현이 되죠. import MyComponent from '../components/MyComponent.svelte'; 하지만 이런 표현들은 만약 파일의 위치를 옮기는 상황이 발생되면 경로들을 다시 수정해줘야 합니다. 이런 상황들을 방지할 수 있는 것이 경로 alias 설정을 하는 것입니다. 경로 alias에 대한 예를 간단히 들면 보통 소스 파일들이 저장되는 src에 해당하는 경로의 alias를 ~로 지정하면 모듈.. 2021. 10. 9. [Svelte] 공급업체 접두사 설정 안녕하세요. J4J입니다. 이번 포스팅은 공급업체 접두사 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 공급업체 접두사란? 공급업체 접두사는 여러 브라우저들 중 자신의 브라우저가 아직 다른 브라우저에서 지원하지 않는 CSS기능을 테스트하거나 또는 사용하는 것을 도와줍니다. 또는 동일한 기능을 수행하지만 각 브라우저마다 사용되는 속성명이 다른 경우에도 사용될 수 있습니다. 알고 있는 가장 대표적인 케이스는 transition이 있습니다. 현재는 transition만 명시하여 CSS를 작성해도 어느 브라우저에서든 문제가 되지 않지만 예전에는 각 브라우저마다 사용되는 접두사를 붙여서 작성해줘야만 했다고 합니다. 사용되고 있는 브라우저 접두어의 대표 케이스들은 다음과 같습니다. Chrom → -web.. 2021. 10. 6. [Svelte] SCSS 환경 설정 안녕하세요. J4J입니다. 이번 포스팅은 SCSS사용을 위한 환경 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다. SCSS 환경 설정 [ 1. 패키지 설치 ] $ npm install -D svelte-preprocess node-sass [ 2. rollup 설정 파일 수정 ] import sveltePreprocess from 'svelte-preprocess'; ... export default { ... plugins: [ svelte({ preprocess: sveltePreprocess(), // preprocess 등록 ... }), ], ... }; [ 3. style태그에 lang="scss" or type="text/scss" 추가하여 사용 ] or 에러 발생할 경우 위와 같이.. 2021. 10. 4. [Svelte] 초기 환경 세팅하기 안녕하세요. J4J입니다. 이번 포스팅은 Svelte 사용을 위한 초기 환경 세팅에 대해 적어보는 시간을 가져보려고 합니다. Svelte에서도 React에서 기본 환경 세팅이 되어 있는 템플릿인 CRA와 같은 기능들이 존재합니다. 다만 어떤 번들러를 사용하냐에 따라 사용되는 명령어가 구분되어집니다. SPA기술들을 사용할 때 일반적으로 많이 사용되는 번들러는 Webpack이 있습니다. 그리고 최근에 관심도가 높아지고 있는 번들러 중에 Rollup이라는 것이 있습니다. Svelte에서 제공해주는 CRA기능에선 Webpack을 사용하냐 또는 Rollup을 사용하냐에 따라 명령어가 구분되고 그에 따라 사용하기 원하는 번들러에 맞게 명령어를 입력해주시면 됩니다. 번들러 사용에 있어 부가적인 정보를 더 드리자면 S.. 2021. 10. 4. 이전 1 다음 728x90 반응형
