본문 바로가기

javascript
24

📌 Tailwind CSS 진짜 편한가? CSS 프레임워크 중 하나가 바로 Tailwind CSS이다.처음 접했을 땐 생소 했지만 기존의 CSS 방식보다 훨씬 빠르게 스타일을 잡을 수 있다는 걸 체감했다.Tailwind CSS가 무엇인지, 어떻게 설치하고 사용하는지, 장단점까지 정리해보려 한다.1️⃣ Tailwind CSS란?Tailwind CSS는 유틸리티 퍼스트(Utility-First) 방식의 CSS 프레임워크이다.기존의 CSS처럼 클래스를 따로 정의하는 방식이 아니라 HTML 혹은 JSX에 바로 유틸리티 클래스들을 작성하여 스타일링하는 방식이다.이러한 방식 덕분에 빠르게 화면을 만들 수 있으며 디자인 시스템을 일관되게 유지할 수 있다는 특징이 있음. 2️⃣ 설치 방법 (Vite + React 기준)Tailwind CSS는 프레임워크와 환.. 2025. 4. 17.
📌 styled-components 정리! React에서 컴포넌트를 만들다 보면 스타일을 따로 .css 파일에 작성하고, 클래스 이름을 주고, 관리하고... 생각보다 귀찮고 헷갈릴 때가 많다.이럴 때 styled-components를 사용하면, CSS도 컴포넌트처럼 만들어서 코드 안에서 바로 스타일을 줄 수 있어서 훨씬 편하고 직관적이다. styled-components를 처음 설치하는 방법부터, 실제로 사용하는 방식, props를 통한 커스터마이징, 전역 스타일 설정, 재사용까지 전부 정리해보았다.1️⃣ styled-components 설치 방법styled-components는 React에서 스타일을 편하게 줄 수 있는 라이브러리임. CSS를 컴포넌트처럼 만들 수 있어서 유지보수가 쉬움.npm install styled-components 만약.. 2025. 4. 16.
📌 getElement부터 querySelector까지 정리해봄 엘리먼트 셀렉터란 HTML 요소를 선택하고 조작하기 위한 메서드다.이 메서드들은 모두 DOM(Document Object Model)의 일부로, HTML 요소를 ID, 클래스명, 태그명 등을 이용해 선택할 수 있다.또한 querySelector, querySelectorAll이라는 유용한 메서드도 있으며, 각각 단일 요소 또는 여러 요소를 선택할 수 있다.이 셀렉터들은 선택된 결과로 엘리먼트, HTML 컬렉션, 혹은 노드 리스트를 반환한다.📌 1. getElementById가장 기본적인 셀렉터다.HTML에 Food R Us 라는 요소가 있다고 하자.const myHeading = document.getElementById("my-heading");이렇게 선택한 후, 자바스크립트에서 CSS 스타일도 바꿀.. 2025. 4. 11.
📌 React의 useEffect와 생명주기 비교 정리 React를 학습하면서 가장 혼란스러운 개념 중 하나는 바로useEffect와 클래스형 컴포넌트의 생명주기 함수들이다.useEffect의 다양한 사용 패턴을 알아보고,클래스형 컴포넌트의 생명주기 함수와 어떻게 대응되는지 정리해보고자 한다.🧩 사전지식: React 컴포넌트는 언제 렌더링되는가?React는 상태(state)가 바뀔 때마다 다시 렌더링된다. 다시 말해, setState나 useState의 set함수가 호출되면 해당 컴포넌트는 다시 실행된다.즉, 다음과 같은 흐름을 가진다:컴포넌트가 처음 화면에 나타날 때 → 마운트(Mount)상태가 바뀌어 다시 렌더링될 때 → 업데이트(Update)컴포넌트가 사라질 때 → 언마운트(Unmount)이러한 흐름은 함수형 컴포넌트든, 클래스형 컴포넌트든 동일하다... 2025. 4. 10.

최근댓글

최근글

skin by © 2024 ttuttak

티스토리툴바