들어가기 앞서
이 포스팅은 DOKBARO를 개발하면서 경험한 것을 기반으로 제작하였습니다.
DOKBARO란 ?
자기계발과 성장을 위해 독서와 스터디를 활용하는 개발자들을 위한 퀴즈 학습 플랫폼, DOKBARO입니다.
개발 서적을 즐겨 읽지만, 매번 내용을 제대로 이해했는지 확인하기 어렵지 않으셨나요? 혹은 이해 부족으로 인해 독서 스터디가 소수만 적극적으로 참여하는 형태로 변질되는 경험을 하셨을지도 모릅니다.
그래서, DOKBARO는
📚 퀴즈 출제 및 풀이 기능으로 도서 내용을 재미있고 효과적으로 이해하도록 도와드려요.
💡 스터디 리포트 기능으로 스터디원들이 책에 대해 자유롭게 의견을 나누고, 서로의 학습 현황을 확인할 수 있어요.
DOKBARO와 함께라면 도서 이해도를 높이고, 스터디 활동을 보다 풍성하고 활발하게 만들어 이상적인 독서 환경을 경험하실 수 있습니다. ✌️
현재 베타 오픈중이니 아래 링크를 통해 이용해보실 수 있어요!
https://dokbaro.com
왜 바꾸는거지?
Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
@import가 곧 deprecated되고, 우리는 scss를 module방식으로 쓰고 있어서 사용한 만큼 콘솔워닝이 뜨고있다. 알파테스트와 모바일버전 개발 진행되기 전에 싹 제거하려고 하려고 한다. ^^
기존에는
styles/abstract폴더밑에 mixin, variables, markdown이 정의되어있고 아래와같이
@import at rule을 사용하여 가져왔다.
@import "../../styles/abstracts/mixins";
@import "../../styles/abstracts/variables";
@import "../../styles/abstracts/markdown";
// 이하 생략...
...어떻게 개선할거냐면
일단 import를 제거하고 use를 사용하여 가져올것이다. 이때 추가적으로, styles의 각 디렉터리 밑에 index.scss를 만들어 @forward 사용하여 여러 scss파일을 모아 한번에 내보내기 하려고한다.
무슨말이냐면! index.scss같은 파일을 만들어 중앙 허브역할을 하게 하고, @use로 가져와 사용 할때 각각의 파일을 가져오는것이 아닌 아래와같이 한번에 가져오려는 것이다.
@use "../../styles/abstracts" as *;코드로 보자
아래와 같이 _index.scss를 추가하여 중간 export 허브를 만들었다. 그걸 @use 하기만 하면 끝!
우리는 module방식을 사용하고있어서, scss개발팀에서 권장하는 구조에서 page와 layout은 따로 없는점 참고해주세요~
선언 할 때는?
아래 코드와 같이 abstracts아래 _index.scss를 만들고, 이 파일안에서 각 하위 코드들을 forward해준다.
// abstracts/_index.scss
@forward "./markdown";
@forward "./mixins";
@forward "./reset";
@forward "./variables";
사용할 때는?
기존 scss파일에서는 import를 이런식으로 했으나
@import "../../styles/abstracts/mixins";
@import "../../styles/abstracts/variables";
@import "../../styles/abstracts/markdown";
// 이하 생략...
...
아래와 같이 한 줄로 가능하다.
@use "../../../styles/abstracts/" as *;
// 이하 생략...
...
추가적인 처리를 해볼까..
마지막으로 @use 편의를 위해 상대경로에서 절대경로로 변경해주었다.
또 다른 콘솔 워닝 2
Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
워닝과 함께 알려주는 문서로 들어가봤다.
번들러 사용 시 주의 사항
번들러나 기타 도구에서 Sass API를 직접 사용하지 않고 호출하는 경우, 최신 API를 사용하도록 설정을 변경해야 할 수도 있습니다.
Webpack은 기본적으로 최신 API를 사용하지만, 경고가 발생하면 api를 "modern" 또는 "modern-compiler"로 설정하세요. 자세한 내용은 Webpack 문서를 참고하세요.
Vite 6은 기본적으로 최신 API를 사용합니다. 하지만 이전 버전의 Vite는 여전히 기존 API를 사용하며, Vite 5.4부터는 api를 "modern" 또는 "modern-compiler"로 설정하여 변경할 수 있습니다. 자세한 내용은 Vite 문서를 참고하세요.
기타 도구의 경우, 해당 도구의 공식 문서나 이슈 트래커를 확인하여 최신 Sass API 지원 여부를 확인하세요.
라고하여 아래와같이 시키는대로 config파일에 작성했다.
// vite.config.ts
export default defineConfig({
css: { preprocessorOptions: { scss: { api: "modern" } } },
} as VitestConfigExport);
또 다른 콘솔 워닝 3
Sass's behavior for declarations that appear after nested rules will be changing to match the behavior specified by CSS in an upcoming version. To keep the existing behavior, move the declaration above the nested rule. To opt into the new behavior, wrap the declaration in & {}.
이 워닝이 뜬 위치는 나타났다 사라지는 애니메이션을 mixin으로 작성한 부분이다.
.answer-description-area {
@include flex(column);
@include fadeIn;
width: 100%;
...
}뭐가 문제일까?
현재 Sass에서는 중첩된 규칙 이후에 선언을 사용하는 방식이 더 이상 권장되지 않습니다. 이는 앞으로 변경될 스타일 적용 순서에 대비해, 사용자들에게 미리 알리고 스타일시트를 새로운 방식에 맞게 수정할 시간을 주기 위한 조치입니다. 향후 Dart Sass에서는 CSS의 기본 중첩 규칙과 동일한 순서를 따르도록 변경될 예정입니다.
해석해보니,아래와같이 animation이 중첩되어 선언된 이후 width~부터 .answer-area 에 대해 다시 선언하고 있는데, 이렇게 하지말라는 뜻이다.
.answer-area {
@include flex(column);
animation: fadeIn 1s ease-in-out;
@keyframes fadeIn { // 중첩되어 선언됨
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
width: 100%;
...
개선해보자
중첩하여 선언한 코드를 맨 아래로 내리고, .answer-area에 대한 선언을 이어서 작성해주었다.
.answer-area {
@include flex(column);
width: 100%;
...
@include fadeIn;
}이로서 모든 터미널 워닝을 해결해서 깔끔한 dx 완성~
총 Deprecation 40개의 워닝중 1개남기고 모두 해결하였다. 1개는 로직을 이해할 필요가 있어 추후에 하기로 결정.
참고문서
https://sass-lang.com/d/legacy-js-api
https://vite.dev/config/shared-options.html#css-preprocessoroptions
