본문 바로가기

프론트엔드24

BEM CSS BEM (Block-Element-Modifier)은 CSS를 보다 예측 가능하고 유지 보수하기 쉬운 코드로 작성하기 위한 방법론 중 하나입니다. BEM은 CSS 작성 방식에 대한 공식적인 표준은 아니지만, 많은 개발자들이 사용하고 있는 인기있는 방법론 중 하나입니다. BEM은 HTML 요소의 구조를 기반으로 CSS 클래스를 작성하는 방법입니다. BEM의 핵심 개념은 블록(Block), 요소(Element), 수정자(Modifier)입니다. 블록(Block): 웹 페이지의 모듈 또는 컴포넌트와 같이 화면에서 독립적으로 존재할 수 있는 대상을 나타냅니다. 블록은 보통 하나 이상의 요소로 구성되며, 하나 이상의 수정자를 가질 수 있습니다. 블록 클래스의 이름은 단순하고 명확해야하며, 스타일시트 전체에.. 2023. 3. 12.
CRA없이 리액트(타입스크립트) 프로젝트 생성하기 웹팩이란? 모듈 번들러 중 하나이다. 그럼 번들러는 또 뭔데 번들러는 여러 개의 모듈을 하나의 파일로 묶어주는 도구이다. 이걸 사용하는 이유는 모듈 시스템 사용: 모듈 시스템의 필요성 즉 변수를 파일 단위로 관리 가능 파일 크기 최적화: 여러 개의 파일을 하나로 묶으면, 네트워크 비용 감소. 번들러는 여러 파일을 하나의 파일로 묶어서 요청 횟수를 줄이고, 파일 크기를 최적화해줌 코드 최적화: 번들러는 불필요한 코드를 제거하거나, 코드를 압축하여 파일 크기를 최소화해줌 다양한 형식의 파일 로드: 번들러는 자바스크립트 파일뿐만 아니라 CSS, 이미지, 폰트 등 다양한 혁신의 파일도 로드할 수 있음. 근데 왜 웹팩 써야 함? 웹팩이 선호되는 이유 중 몇 가지는 다양한 플러그인 시스템과 로더를 통해서 훨씬 많은.. 2023. 3. 12.
Portals 언제 까지 부모 컨포넌트 아래에 jsx, tsx를 렌더링 할 것인가 이 지겨운 일상에서 탈출 시켜줄 portals를 소개해 드리겠습니다. Portals란? 리액트 16 버전 이상에서 도입된 기능으로 React 컴포넌트를 다른 DOM 노드에 렌더링할 수 있게 해주는 기능. 이것을 사용하면 현재 컴포넌트 트리 외부의 DOM 요소에 렌더링 해줄 수 있음 아래 코드펜에서 확인해 보자 See the Pen portals by SeungYn (@SeungYn) on CodePen. 사용법은 아래 코드처럼 ReactDOM.createPortal()인자에 첫번 째로는 jsx를 두번 째로는 렌더링할 부모 노드를 넣어주면 된다. function Portal(){ return ReactDOM.createPortal(포탈생성.. 2023. 3. 11.
연속된 커스텀 훅(훅인마) 어떻게 보면 당연한 건데 나 혼자 오해한 듯. 사건의 발단은 두 개의 커스텀 훅이 있다. 하나는 state값을 1초마다 증가해서 return 하는 훅 export default function useTest2() { const [state, setState] = useState(1); setTimeout(() => setState((f) => f + 1), 1000); return state; } 하나는 받은 값으로 다시 스테이트에 넣는 모습 export default function useTest1() { const data = useTest2(); const [test, setTest] = useState(data); console.log(data); console.log(test); return d.. 2023. 3. 9.

티스토리툴바