creamymood의 개발 공부 발자취 💭

1. 리액트 라우터란?2. 리액트 라우터 사용하는 법3. 궁금증 두가지. (왜 설치를 따로해야하는가? 주소를 이동하는건데 새로고침이 안된다고 ?!)4. 리액트 라우터 주요 컴포넌트5. 리액트 라우터 주요 함수1. 리액트 라우터(React Router)란?웹사이트에서 페이지를 이동할 수 있게 해주는 도구야.예를 들어:/home을 누르면 홈 화면,/about을 누르면 소개 화면,이렇게 주소(URL)에 따라 다른 컴포넌트를 보여주고 싶을 때 사용하는 거야.리액트는 기본적으로 "한 페이지 앱(SPA)"이기 때문에 페이지를 이동해도 새로고침 없이 부드럽게 화면이 바뀌는 게 특징인데, 그걸 라우팅이라고 하고 그걸 도와주는 게 React Router야! 2. 리액트 라우터 사용하는 법- 라이브러리 설치 npm in..

후.. 여행 후, 현생 복귀란 쉽지 않네요하지만,, 다시 제 자리에서 집중 ! 상태관리에서 createContext, Provider, useContext 이런 것들은 React에서 컴포넌트끼리 데이터를 공유하기 위해 사용하는 도구🐰 먼저 큰 그림 (상위 개념)상태 관리(State Management)란?컴포넌트들이 "공통된 정보"를 공유할 때 그 정보를 어디에 저장하고, 어떻게 전달하냐는 문제야.예: 로그인된 유저 정보, 언어 설정, 테마 같은 것들상태 관리의 종류로컬 상태 (useState) → 한 컴포넌트 안에서만 사용전역 상태 → 여러 컴포넌트에서 공유해야 할 때 필요이 전역 상태를 도와주는 게 Context API야.📦 Context API란?전역 상태를 쉽게 관리할 수 있게 도와주는 도구..

스타일링 파트에도 정말 다양한 것들이 많아서 .. 뭘 어떻게 써야할지 아직 감이 안온다 ... 각각 장단점들이 확실하고..예를 들어, scss는 변수나 계층 나누기도 쉽고, 편리한 반면 어떠한 단점도 분명히 존재할거고테일윈드는 빠르고 구성이 가능하다면.. 반복적인 코드를 작성하기 어렵고 (-> 가능하다고 한다.) 간단히 나 혼자 만들 땐, 빠른 테일윈드를 쓴다던가 협업을 해야한다면 스타일 컴포넌트를 쓴다던가.그 안에서도 또 나뉘겠지만 ? 이렇기 때문에, 역시 뭐든 상황에 따라 달리 써야하는 것 같다. (= 결국 다 배워놔야 한다 라는 결론에..) 또한 이러한 라이브러리들도 변화하는 속도나 대체되는 속도도 빠르기 때문에아무튼 이렇게 새로운 과목을 공부하고 익숙해지는 것에 또 익숙해져야겠지 ! ✎ ..

테일윈드 CSS란?클래스 이름으로 스타일을 바로 적용하는 유틸리티 퍼스트(Utility-first) CSS 프레임워크야. 쉽게 말하면,css 파일 따로 안 쓰고, html(또는 리액트 컴포넌트) 안에 바로 클래스 이름만 써서 스타일링 하는 방식이야.예를 들어 버튼이렇게 쓰면bg-blue-500 → 배경 파란색text-white → 글자 흰색px-4 py-2 → 좌우 패딩 4, 위아래 패딩 2rounded → 둥근 테두리이걸 CSS 없이 바로 적용해주는 거지.👩🏻‍💻설치 방법초기 설정할 게 다소 많다.공식 사이트에서 보고 따라서 설치 하면 됨. 🧚‍♀️ Vite + React + Tailwind CSS 설치 & 적용 가이드📖 프로젝트 생성터미널에서 아래 명령어로 Vite + React 프..

Styled Components란?React에서 CSS 파일을 따로 안 만들고, JSX 안에서 스타일을 컴포넌트처럼 선언해서 쓰는 방식이야.말 그대로 스타일도 컴포넌트화해서 쓴다는 거지. 설치방법 사용 방법백틱! 재사용 할 수 있다. 다른 추가 내용을 적어서 ! 또 다른 하나의 특징. 리액트가 클래스명을 알아서 정해준다. 프롭스 기능 ✨✨ 백틱을 쓴다는 건 템플릿 리터럴을 쓴다는 거니까, ${} 이걸로 자스 코드 사용 가능템플릿 리터럴 사용한다는 것의 의미가, 이러한 css를 자스를 이용해서 동적으로 변경할 수 있게 된다는 뜻 스타일 컴포넌트도 컴포넌트로써, 다른 리액트 컴포넌트처럼 프롭스 받아서 사용 가능-> 조건부 렌더링, 받아온 값도 그대로 받는 등 여러가지 활용 전역 스타일 설정css파일 ..