creamymood의 개발 공부 발자취 💭

엉엉엉엉 천천히 화이팅리덕스 툴킷은 리덕스를 조금 더 쉽게 사용할 수 있게 만들어진 라이브러리.최근 공식문서에서도 툴킷을 권장한다.1. 리덕스 툴킷 설치 2. 리덕스 툴킷 구성 요소리덕스 툴킷에서는 createSlice를 통해서 액션, 액션 생성자, 리듀서 같이 만들 수 있고store 생성은 configureStore()로 ! 나머지는 동일하다.리덕스 툴킷에서의 새로운 기능, 3-1. createSlice() createSlice() 의 인자로는 "객체" 전달 이 객체 안에는 어떤 상태로 만들지의 상태의 "이름", 상태의 초기값은 어떤것인지, "initial state", 이 상태의 리듀서는 어떤것인지 "reducer"를 객체 형체로 전달. → 이 리듀서 객체 안에는 리덕스의 리듀서에서 스위치문의 비슷..

또 한번 멘붕.같이 공부하시는 동기님이 뒤에 나올 쓰로틀은 더 어렵다고 하셔서우선 리덕스.. 행복해하며 공부해볼게요 ~ 1. 비동기 파트 들어가기 앞서서2. thunk 설명3. thunk 간단 예제Thunk를 사용한 비동기 논리 작성지금까지 우리 애플리케이션의 모든 로직은 동기식이었습니다.액션이 전달되고, 스토어가 리듀서를 실행하고 새 상태를 계산한 후, 디스패치 함수가 종료됩니다. 하지만 JavaScript 언어는 비동기 코드를 작성하는 여러 가지 방법을 제공하며,우리 앱은 일반적으로 API에서 데이터를 가져오는 것과 같은 비동기 로직을 ​​사용합니다.Redux 앱에 이러한 비동기 로직을 ​​넣을 공간이 필요합니다. 썽크는 비동기 로직을 ​​포함할 수 있는 특정 종류의 Redux 함수입니다. 썽크는 다..

진짜.. 리덕스 공부하다가.. 개발자.. 못하겠는데 .. 처음 벽을 느꼈다..... ㅠ (물론 다 어렵지만, 내 기준.. 너모 어려운 상태관리) 할건 너무 많은데.. 진전이 안나가서 더 조급하고.... 힘든 상태 ....... 상태.. (상태 단어 싫어..)하지만.... 또 익숙해지겠지요 ... ?1. 리덕스 설명 및 기본 문법2. 리덕스 데이터 흐름 & 구성 요소 자세한 설명3. 리덕스 쉽게 이해하기4. 리덕스 쉬운 예제 1. 리덕스 설명 및 기본 문법 리덕스란? 리액트에서 **리덕스(Redux)**는 상태 관리 라이브러리로, 애플리케이션의 상태(state)를 효율적으로 관리하기 위해 사용됩니다.리액트 애플리케이션에서 여러 컴포넌트들이 서로 상태를 공유하고,그 상태를 업데이트하거나 사용하는 과정이 복잡..

리액트를 공부하면 할수록 “아.. 자바스크립트를 더 탄탄히 알아야겠구나” 이런 생각의 무한 굴레..React는 JS 기반인데,JS 역시 깊게 공부하진 않았으니까,, 아무리 쌓아도 금방 무너지고, 또 얕게 쌓고 하는 느낌.. 지피티가 정리해준 React를 제대로 이해하려면 꼭 알아야 할 자바스크립트 기초 개념들 ✨ 1. 변수 선언 (let, const, var)const는 상수 (값 재할당 ❌)let은 변수 (값 재할당 ⭕️)var는 거의 안 씀 (호이스팅 문제 등)const name = 'Jane';let age = 30;✨ 2. 함수 선언 방식선언식 / 표현식 / 화살표 함수function sayHi() {} // 선언식const sayHi = function() {}; // 표현식const sayHi..

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파일 ..

1. new Date()2. Date 객체 메소드3. 리액트 시간 관련 상태 관리4. 날짜 라이브러리5. 시간 비교new Date()는 JavaScript의 기본 내장 메서드. Date 객체를 생성하는 방법으로, 날짜와 시간을 다룰 때 자주 사용됩니다. 이 메서드는 JavaScript의 표준 내장 객체인 Date를 사용하여 현재 날짜와 시간 또는 특정 날짜와 시간을 생성할 수 있습니다.사용 예시:현재 날짜와 시간 생성:const currentDate = new Date();console.log(currentDate); // 예: Mon Apr 15 2025 12:34:56 GMT+0000 (Coordinated Universal Time)특정 날짜와 시간 생성:const specificDate = new..