FE

Programming Language/React

[React] Zustand: 여러 상태를 사용할 때 하지말아야 할 것

이 글을 쓰게 된 배경은zustand의 z자도 모르고 썼던게 분명한 내가 잘못 사용해왔던 코드에 대한 깨달음과 부끄러움을 담은 글이다.(위 글은 Zustand의 최신 버전인 v5로 작성되었다)여러 상태를 사용할 때 하지말아야 할 것Not To Do: 구조 분해 할당으로 가져오기import { create } from 'zustand'const useEqpStore = create((set) => ({ type: 'printer', state: 'idle', process: 'none', subprocess: 'none', updateType: (newType) => set({ type: newType }), updateState: (newState) => set({ state: newState..

Programming Language/CSS

[CSS] 텍스트 줄바꿈 / 말줄임 방법 정리

최근 토스에서 Frontend Accelerator 1기를 모집하여, 신청하여 객관식 시험을 볼 수 있었는데,모두 골라야한다는 점이 확실히 알고 있어야하는 것인데, 100% 확신하는가라고 생각했던 문제가 거의 없었던 것 같다.그 중 텍스트 줄바꿈 속성에 관한 문제도 있었어서, 적어보려고 한다.텍스트 줄바꿈 방법 1. white-space  <div class="text-container"> This is a long text that we want to wrap naturally to the next line without breaking words.</div> .text-container { width: 200px; white-space: normal; /* 기본값 */}..

Programming Language/CSS

[CSS] 요소 수평, 수직 정렬 정리

요소 수평 / 수직 정렬 방법1. 수평 정렬a) Flexbox 사용: Centered Element.flex-center { display: flex; justify-content: center;}b) Grid 사용: Centered Element.grid-center { display: grid; justify-content: center;}c) Position 사용: Centered Element.position-center { position: relative;}.position-center .element { position: absolute; left: 50%; transform: translateX(-50%);}d) Table 레이아웃 사용: Centered Element..

Programming Language/React

[React] pdf파일을 뷰어로 띄우기

저는 public 폴더 내에 UserGuide.pdf라는 파일을 넣었고 참고바랍니다.아래와 같이 작성하면, /guide로 진입시 웹뷰어로 pdf를 볼 수 있습니다.App.tsxconst App: React.FC = () => { return ( ... } /> ... )}Guide.tsxconst Guide: React.FC = () => { return ( )}Intro.tsxconst Intro: React:FC = () => { return ( ... User Guide ... )}