미미 공부/취미방

useContext가 여러개 필요할 것 같다. modal 열리고 닫는 것도 부모, 자식 사이에 상태를 전달해야 돼서 복잡해 지면 그냥 useContext 사용하고, 돈, 쇼핑 정보 등은 복잡한 useContext가 예상된다... 화이팅...💪

[기획 및 디자인] 돈의 씀씀이를 추적하기 보다,생활비로 자주사는 상품들의 가격 비교를 위한가계부 싱글페이지앱 만들기!  그런 이유로 가게 이름과 제품 가격, 크기가 필요하고 필터에 꼭 있어야함!Adobe XD로 우선 작업한 디자인!구조는 특별한 것 없이 우선 작업했지만,비교기능 강조는 기본 작동을 끝내고 작업해야겠다.(퀄리티 욕심보다는 버그 없이 만들기가 목표!) 아이템 추가랑 돈 넣는 페이지 디자인 작업은 아직 안돼서우선 위에 두 페이지 스타일 까지 잡아놨고디자인 완료되면 스타일 작업하고 기능 추가해야겠다!   2탄. 아이템 추가 / 지갑 페이지 디자인 작업   https://github.com/mimi-miyeon/household-app/tree/main GitHub - mimi-miyeon/ho..

Function return을 할 때, 항상 로 감싸서 한 개의 태그만 리턴하는 이유는, JSX를 사용하지 않은 React의 문법 때문이다. return ( Hello ); [JSX를 사용한 코드] return React.createElement( "div", //만드는 태그 {}, //속성 React.createElement("h2", {}, "Hello"), // 자식요소 React.createElement(NewExpenseItem, { expenses: expenses }) ); [JSX를 사용 안 한 코드] React.createElement(만들 태그, 속성, 자식요소) 해당 문법에서 '만들 태그'는 1개만 들어가기 때문에, JSX 문법을 사용할 때, 1개의 태그만 리턴 가능하다.

1. Javascript의 '모듈' Javascript의 작업 크기가 커지면 유지 보수를 위해 파일을 분리해서 관리하는데, 이런 분리된 파일들을 '모듈'이라고 한다. export와 import로 모듈을 불러와서 작업한다. (script 태그로 모듈을 불러오는 경우, type="modul" 속성을 필수로 넣는다.) 2. Destructuring syntax (구조분해) 객체, 배열 데이터의 각 값을 분해, 변수에 저장하는 문법이다. 배열 데이터는 위치로 판단해 변수에 값이 담기고, 객체 데이터는 key 이름으로 담긴다. const [array, example] = ["hello", "world"]; console.log(array, example); const { apple, lemon: yellow } ..

export vs export default export와 export default 모두 공통적으로 한 파일에 있는 변수, 함수를 다른 파일에서 가져다 쓰기 위해 "내보내기"를 해 준다. export 한 파일에서 여러번 사용해서 여러 개를 내보낼 수 있다. export const todo = '할일'; export const finished = '끝'; export function TodoList () { return todo; }; export default 한 파일에서 한 번만 사용하고 한 개만 내보낼 수 있다. export default function TodoList () { return todo; } export const todo = '할일'; export const finished = '끝..

Redux의 combineReducers() 여러 파일에 나눠서 작성한 리듀서즈(reducers)를 합치는 역할을 한다. export const ADD_TODO = 'ADD_TODO'; export const COMPLETE_TODO = 'COMPLETE_TODO'; export function addTodo (text) { return { type : ADD_TODO, // action에 type이 필요한 이유는, // type에 따라 Reducer에서 상태를 어떻게 변경할지, 어떤 작업을 처리할지 판단하기 위함 text, }; } // export와 export default의 차이점? export function completeTodo (index) { return { type: COMPLETE_T..