creamymood의 개발 공부 발자취 💭

리덕스 툴킷(전역 상태관리) 공부하기 - 기본적인 예제 코드와 함께 (basic 단계)

🎬 현재 선택된 영화 제목을 저장하고, 변경할 수 있는 앱기본 영화 제목은 'Inception'버튼을 누르면 'Interstellar'로 바뀜큰 흐름 : [ 상태 정의 ] → [ 저장소 만들기 ] → [ 앱에 연결 ] → [ 상태 보여주기 & 바꾸기 ] movieSlice store.js index.js App.js1. movieSlice.js : 상태를 어떻게 바꿀지 설정하는 그 컴포넌트 코드인 (movieSlice.js)를 먼저 작성해주고// src/features/movie/movieSlice.jsimport { createSlice } from '@reduxjs/toolkit';// slice를 정의할 때 'movie'라는 이름으로 상태와 액션을 정의con..

리액트 공부하기 - 상태 관리 라이브러리 총정리: 장단점 비교

공부하다보니, useState는 거의 이제 이해한 것 같아서 편리한데, 전역으로 상태관리 하려면.. context API가 제일 간단하고 쉬워보여서, 이것만 쓰고 싶은데... (리덕스 싫어..) 그런데 역시나 장단점이 있다. 전부 공부하고 적재적소에 써야 할 듯. ~ .. 야호 ~우선 제일 좋아하는 context API를 자세히 알아보자.더보기리액트에서 전역 상태 관리를 할 때 Context API는 가장 기본적이고 간단한 방법 중 하나예요. 특히 앱이 작거나 중간 규모일 때는 굳이 Redux나 Zustand 같은 외부 라이브러리를 쓰지 않아도 되고, Context + useReducer 조합만으로도 충분히 효율적인 구조를 만들 수 있어요.✓Context API의 장점간단하고 가볍다: 외부 라이브러리 설..

리액트, 자바스크립트 공부하기 - JSON, fetch, 비동기 함수(axios)

JSON을 개념적으로 강의를 들을 땐 그렇구나. 그냥 이런 개념이구나 하고 이해는 하고 넘어갔는데..막상 프로젝트에서 직접 사용하려고 해보니, 그냥 대충 알아서는 도저히 써먹을 수 없겠더라. 다행인건 대략적으로 개념을 공부했었던 기억이 있으니, 다른 강의나 교재를 보니아~ 이게 이거구나. 이래서 이걸 쓴 거구나 했다. 그 땐 왜, parse를 쓰고 stringipy? 이런건 대체 왜 쓰고 했나 했는데 그 때 메모해둔 것들이 지금 보니 다시 새롭고, 이유가 있었네 ~ 싶다. 이렇게 하나 하나 익숙해져가고 쓸 줄 아는 느리지만 천천히 잘 되어 가고 있단 증거 ! 이미 알았지만(?) 정말 머리에 이제 박힌 개념으로는우선 JSON이란건 문자열.. 이지만, 보이는 건 객체처럼 보인다는 것. 따라서..비동기 함수..

자바스크립트, 리액트 공부하기 - Falsy 그리고 Truthy ? / 리액트에서 언제 주로?

1. 리액트에서도 여전히 자주 등장하는, falsy 그리고 truthy한 값React에서 조건부 렌더링, 초기값 확인, API 응답 처리 등에 자주 등장 2. Falsy란? 정의: 조건문에서 false처럼 작동하는 값예시: false, 0, '' (빈 문자열), null, undefined, NaN 3. Truthy란?정의: 조건문에서 true처럼 작동하는 값예시: "hello", 1, [], {}, true, "0" 등 4. Falsy/Truthy의 실제 활용 예💬 조건문if (!user) { console.log("사용자 정보 없음");}→ 여기서 user가 falsy일 수 있는 대표적 값: null, undefined→ 이 경우 조건문은 실행되고 "사용자 정보 없음"이 출력됨. 💬 React..

리액트 공부하기 - 오류는 없는데, 화면에는 렌더링이 안될때?

프로젝트를 경험하다가, 분명 vs code나, 화면에는 오류가 안뜨는데..렌더링이 안된적이 있었다.아마, 패치 받아오는 과정에서.. 받아오기 전에, 먼저 그 값을 사용하는 걸 적어놔서 그런것 같다.패치 쓸 때는 조건부 렌더링 꼭 적어주기.... 💥 오류는 없는데 화면이 안 나오는 이유?조건부 렌더링이 없어서 "silent fail"이 발생하는 것! 예시: movie가 아직 API 로딩 중이면 undefined.title이 돼서 아무것도 안 보이고, 콘솔에만 warning 날 수도 있고, 심지어 warning도 안 뜨는 경우가 많아.특히 VS Code가 잡아주지 않는 이유는, 타입이 any나 undefined까지 허용되기 때문 (JS는 느슨해서)해결 방법: 조건 넣기예시 1: movie 존재 여부 먼저 ..