728x90 반응형 SPA/Svelte12 [Svelte] Style Class 지시어 바인딩 안녕하세요. J4J입니다. 이번 포스팅은 style을 적용시킬 수 있는 class 지시어 바인딩에 대해 적어보는 시간을 가져보려고 합니다. Style Class 지시어 바인딩 화면을 개발하다 보면 요소마다 스타일을 적용하기 위해 html 태그들에 class를 사용하는 경우가 있습니다. 일반적으로 class가 사용될 경우 적용될 style을 정의하고 다음과 같이 사용하고는 합니다. 또한 개발하다 보면 특정 경우에만 style이 적용되게 해야 하는 상황도 발생됩니다. react로 개발할 때는 보통 3항 연산자를 이용하여 다음과 같이 코드를 작성하고는 했습니다. 하지만 svelte에서는 3항 연산자를 사용하지 않고 class 지시어 바인딩을 이용하여 보다 깔끔하게 코드를 작성할 수 있습니다. 관련된 예시 코드.. 2021. 10. 30. [Svelte] 조건문과 반복문 안녕하세요. J4J입니다. 이번 포스팅은 조건문과 반복문에 대해 적어보는 시간을 가져보려고 합니다. 조건문과 반복문 react, vue 등에도 각자 조건문과 반복문을 사용하는 방법이 있듯이 svelte에서도 svelte만의 조건문과 반복문 사용 방법이 있습니다. 조건문은 if-else문, 반복문은 each-else문을 활용하여 만들어줄 수 있습니다. 조건문과 반복문은 개발을 하기 위해 어떤 곳에서든 사용되는 것이기 때문에 설명 필요 없이 svelte에서 사용되는 예시 코드를 보여드리겠습니다. toggle1 = !toggle1}>Toggle1 toggle2 = !toggle2}>Toggle2 {#if toggle1 === true} toggle1 is true {:else if toggle2} toggle.. 2021. 10. 25. [Svelte] 반응성 안녕하세요. J4J입니다. 이번 포스팅은 반응성에 대해 적어보는 시간을 가져보려고 합니다. 반응성 반응성은 값을 탐지하고 있다가 데이터가 변화되는 상황이 생기면 특정 기능이 수행될 수 있도록 하는 것으로 FE 개발을 할 때 효율적으로 개발할 수 있도록 도와줍니다. react를 이용하여 개발할 때는 useEffect 등에 deps를 지정하여 반응성을 만들어줄 수 있었고 svelte 또한 동일하게 반응성을 만들 수 있는 기능이 있습니다. svelte에서 반응성을 만들어주는 방법은 간단하게 표현하면 다음과 같습니다. $: [...deps], {함수} 설명을 추가적으로 해드리면 deps에는 반응성을 위해 탐지될 변수를 넣어주면 되고 함수에는 deps에 해당하는 값이 변경될 때 실행될 함수를 넣어주면 됩니다. 또.. 2021. 10. 22. [Svelte] props 사용하는 방법 안녕하세요. J4J입니다. 이번 포스팅은 props 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 부모 → 자식 props 전달 부모 컴포넌트에서 자식 컴포넌트로 props를 전달하는 방법은 다른 SPA 기술들과 유사하게 사용됩니다. 다만 제가 공부해왔던 react랑 비교해 봤을 때 차이점을 가지는 것은 다음과 같습니다. 부모와 자식에서 사용되는 변수 이름이 동일할 경우 일부 생략하여 작성 가능 자식이 props를 전달받는 방법은 export를 사용 위의 차이점을 생각하며 다음 예시 코드를 확인해보겠습니다. 우선 App.svelte파일에 다음과 같이 코드를 작성하겠습니다. 그리고 App.svelte와 동일한 경로에 Child.svelte를 생성하여 다음과 같이 코드를 작성해보겠습니다. name.. 2021. 10. 20. [Svelte] 데이터 바인딩과 요소 바인딩 안녕하세요. J4J입니다. 이번 포스팅은 데이터 바인딩과 요소 바인딩에 대해 적어보는 시간을 가져보려고 합니다. 데이터 바인딩 데이터 바인딩은 크게 두 가지로 단방향 바인딩과 양방향 바인딩이 있습니다. 단방향 바인딩은 말 그대로 한 방향으로만 데이터가 바인딩되는 것을 의미합니다. input태그를 예시로 들면 컴포넌트가 마운트 되었을 때 가지고 있던 데이터가 input 태그에 표시되고 input 태그에 값을 입력해도 기존의 데이터는 변경이 되지 않습니다. 양방향 바인딩도 말 그대로 양방향으로 데이터가 바인딩 되는 것을 의미합니다. 이 또한 input태그로 예시를 들면 컴포넌트가 마운트 되었을 때 가지고 있던 데이터가 input 태그에 표시가 동일하게 되고 단방향과 달리 input 태그에 값을 입력하면 입력.. 2021. 10. 18. [Svelte] 전역 SCSS 등록하기 안녕하세요. J4J입니다. 이번 포스팅은 전역적으로 사용될 scss 등록하는 방법에 대해 적어보는 시간을 가져보려고 합니다. scss를 이용하여 개발하다 보면 @import를 이용하여 다른 scss 파일에 정의된 내용들을 가져다 사용하는 경우가 있습니다. 하지만 이런 scss파일들 중 전역적으로 사용되는 파일들이 존재하기 마련인데 이런 상황이 생기게 되면 scss가 사용되는 모든 파일에 @import를 이용하여 로드를 해줘야 됩니다. 이것은 만약 사용되는 파일명이 변경하게 되면 모든 파일들을 수정해줘야 되는 불상사가 발생할 수가 있는데 이런 일들을 간단하게 해결하고자 전역적으로 등록해주는 방법이 존재합니다. 전역으로 등록하게 되면 다음과 같은 이점이 생길 것이라고 생각합니다. @import를 모든 파일에.. 2021. 10. 17. [Svelte] Emmet(에밋) 적용되지 않을 경우 안녕하세요. J4J입니다. 이번 포스팅은 svelte파일에서 emmet이 적용되지 않을 경우 해결하는 방법에 대해 적어보는 시간을 가져보려고 합니다. emmet은 프론트 개발을 할 때 html태그들을 간편하게 적을 수 있도록 도와주는 플러그인입니다. 이번에 설정해 볼 IDE이기도 하면서 대부분의 프론트 개발자분들이 많이 사용하는 것이 vscode인데 vscode에서는 자체적으로 emmet을 지원해주기 때문에 다른 특정 행동들을 하지 않아도 사용할 수 있습니다. 또한 svelte로 개발할 때도 당연히 html태그들을 작성하기 때문에 emmet을 사용할 수 있습니다. 하지만 emmet이 적용되지 않는 분들이 계실수도 있어서 해당 글을 적어봅니다. 참고적으로 저 같은 경우는 아무런 설정없이도 svelte파일에.. 2021. 10. 13. [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 반응형
