본문 바로가기
반응형

분류 전체보기706

[SCSS] 불러오기는 @use를 사용하도록 하자 (@import vs @use) 불러오기 (@import, @use)SCSS는 스타일시트를 더 효과적으로 관리하고 모듈화 하기 위해 두 가지 주요 지시어를 제공하는데, 그게 바로 @import와 @use 지시어이다.이 두 지시어는 비슷한 목적을 가지고 있지만 @import는 @use와 비교하여 아주 오래전부터 사용되어온 방식이다.물론 @import가 오래된 기술이라고 해서 @import말고 @use를 사용해야 한다는 이유는 아니다.(둘의 차이를 어느정도 알고 싶다면 공식문서를 살펴보거나 내가 작성한 글을 읽어봐도 좋다. @import / @use) 공식문서를 본 사람은 알겠지만 애초에 공식문서에서 @import 대신에 @use를 사용하는 것을 권장한다.⚠️ Heads up!The Sass team discourages the conti.. 2024. 6. 19.
[SCSS] 불러오기 (@use / @forward) 불러오기 (@use)scss에서의 '@use'지시어는 다른 scss파일을 현재 파일로 가져와서 사용할 수 있다./* @use "layout.scss" */@use "layout"; '@use'는 가져온 파일의 모든 내용을 로컬 스코프로 가져오며, 사용할 때 네임스페이스를 통해 접근해야 한다.이를 통해 충돌을 방지하고, 코드의 가독성을 높일 수 있다./* src/_corners.scss */ $radius: 3px;@mixin rounded { border-radius: $radius;}/* style.scss */ @use "src/corners";.button { @include corners.rounded; padding: 5px + corners.$radius;}별칭 (Alias)네임스페이스를.. 2024. 6. 19.
[JavaScript] startsWith/endsWith - 대상 문자열이 특정 문자/문자열로 시작하는지 끝나는지 체크 String.prototype.startsWith()startsWith() 메서드는 대상 문자열이 특정 문자로 시작하는지 체크하는 메서드이다. ▷ 구문str.startsWith(searchString)str.startsWith(searchString, position)searchString : 문자열의 시작 지점에서 탐색한 문자열position : 탐색을 시작할 위치 (default 0) ▷ 예제 1 ) String.prototype.startsWith() 메서드 기본 사용법const str = '동해물과 백두산이 마르고 닳도록';console.log(str.startsWith('동'));// trueconsole.log(str.startsWith('동', 3));// falseconsole.log(st.. 2024. 5. 16.
[Zustand] 상태 값 초기화 하기 "react": "^18.2.0", "zustand": "^4.5.2" "typescript": "^5.2.2" How to reset state zustand에서는 상태값을 초기화시켜주는 내장 함수를 제공해주고 있을까? 찾아보니 따로 제공해주고 있는게 없어 별도로 정의해 사용해야만 한다. 그래도 공식문서에서 이러한 방식들이 있다고 안내해주고 있어 참고하여 만들어두면 좋다. 공식문서의 코드를 그대로 가져와보자. import { create } from 'zustand' // define types for state values and actions separately type State = { salmon: number tuna: number } type Actions = { addSalmon: (qty.. 2024. 4. 4.
[Zustand] get()을 사용하여 최신값 가져오기 "react": "^18.2.0", "zustand": "^4.5.2" "typescript": "^5.2.2" get은 도대체 언제 쓰는 걸까? 얼핏 zustand를 살펴보면 set/get을 제공해주고 있는데 get이라는 녀석을 언제 쓰라고 제공해 주는 건지 의아하다. Read from state in actions 혹시나 공식문서에 나와있나 살펴보면 Read from state in actions라는 세션으로 설명을 해주고 있다. const useSoundStore = create((set, get) => ({ sound: 'grunt', action: () => { const sound = get().sound ... 이러한 사용 방식은 store의 action 함수를 선언할 때 현재 store s.. 2024. 4. 3.
[Zustand] Auto Generating Selectors 설정으로 더 간단하게 state값 가져오기 "react": "^18.2.0", "zustand": "^4.5.2" "typescript": "^5.2.2", Auto Generating Selectors 공식문서에서 제공하는 선택기 자동 생성 패턴이다. const count = useCountStore((state) => state.count) 보통 이런 식으로 state값을 가져오기는 하는데 state => state.count 이런 방식조차 너무 자주쓰면 귀찮긴 하다. 훌륭하게도 zustand쪽에서 자동으로 실렉터를 생성해 주는 방식을 제공해 주어 그대로 적용해 보자. store/index.ts import { StoreApi, UseBoundStore } from 'zustand' type WithSelectors = S extends { .. 2024. 4. 3.
[Zustand] 스토어 값 한 번에 여러개 가져오기 (ft. useShallow) "react": "^18.2.0", "zustand": "^4.5.2" "typescript": "^5.2.2", 스토어 값 여러 개가 필요한 경우 이전 게시글 "[Zustand] Zustand 상태 관리 라이브러리 설치 및 기본 사용법"에서 스토어 값을 가져올 때 이런 식으로 사용했었다. import { useCountStore } from '../store/countStore' const CountButton = () => { const increase = useCountStore((state) => state.increase) const decrease = useCountStore((state) => state.decrease) return ( 증가 감소 ) } 하지만 한 컴포넌트에서 하나의 스토어.. 2024. 4. 3.
[Zustand] Zustand 상태 관리 라이브러리 설치 및 기본 사용법 "react": "^18.2.0", "zustand": "^4.5.2" "typescript": "^5.2.2", Zustand란? zustand는 수많은 상태 관리 라이브러리 중 하나로, 작은 패키지 크기와 직관적이며, 단순한 방식의 사용법을 제공하여 최근에 굉장히 각광받는 라이브러리이다. 개인적으로는 러닝커브가 높지 않다는 게 아주 큰 장점이 아닐까 싶다. Zustand 설치 및 적용 Zustand 설치 # NPM npm install zustand # Yarn yarn add zustand 여느 라이브러리와 같이 동일하게 추가를 해주고 별다른 설정은 필요 없다. Zustand 사용 아주 간단하게 설치를 마쳤으니 사용도 아주 손쉽게 해 보도록 하자. 공식문서에서도 아주 간단하게 설명이 되어있는데, 공.. 2024. 4. 1.
[NextJS] framer-motion을 활용한 모달(Modal) 구현 framer-motion을 굳이 사용한 이유는? React에서 제공하고 있는 Portal기능만을 사용하여 모달창을 구현할 수는 있으나 "Exit Animation"을 주기가 어려웠다. React환경에서는 show/hide의 상태값을 변경하여 리렌더링 되면, 모달 컴포넌트가 보이거나 사라진다. 하지만 "리렌더링"이 되면서 보이거나 사라지기 때문에 사라질 때는 애니메이션 없이 바로 사라지는 현상이 발생한다. 라이브러리도 있는 마당에 어떻게든 구현할 방법은 있겠지만 이미 훌륭하게 제공하고 있는 라이브러리를 굳이 쓰지 않을 이유가 없었다. 그리고 라이브러리 종류 역시 많았는데 그 중에 framer-motion을 선택한 이유는, 어차피 이왕 선택해서 사용하는 거 가장 인기가 많고, 호환성이 좋다고 알려진 라이브러.. 2024. 3. 22.
반응형
TOP

티스토리툴바