Land of Joe

(시작하기에 코드의 흐름이 아닌, useContext 원리의 흐름임을 명시한다.)예시는 웹에서 기본이 되는 로그인 정보를 담는 session에 대한 전역상태이다.  1. session-context 만들기context를 만드는 뼈대는 다음과 같다.// session-context.tsxconst SessionContext = createContext(); // [1]export const SessionProvider = ({ children }: PropsWithChildren) => { return ()}; // [2]export const useSession = () => useContext(SessionContext); // [3] [1] 일단 session을 담을 context를 create할 ..

React를 사용하다 보면 성능 최적화와 효율적인 상태 관리가 중요하다는 것을 알게 된다.메모이제이션과 관련된 다양한 Hook과 Context API, 그리고 useReducer에 대해 알아보고자 한다. 1. 메모이제이션 (Memoization)동일한 계산을 반복하지 않도록, 함수 호출의 결과를 저장하여 성능을 최적화하는 기법을 의미한다. 메모이제이션을 하기 위한 방법으로는 세 가지가 있다.콜백 함수를 메모이제이션 하는 useCallback 훅데이터 값을 메모이제이션 하는 useMemo 훅컴포넌트를 메모이제이션 하는 React.memo 함수💡 useCallback, useMemo 훅이 사용된 경우,의존성 배열(Dependency Array)에 의해서만 각각 함수와 값의 리랜더링을 진행하는데이때 의미 없..

일단 왜 form태그를 사용하는지부터 이해해야 한다.웹 표준 때문! 입력 요소들을 폼태그 안에 넣으라고 권고하고 있다. submit을 통해 전송하도록 권고하고 있다.   폼태그에 포함된 버튼태그는 타입 설정을 따로 하지 않으면 기본 타입이 submit이다.submit을 클릭하면 form action에 명시된 주소값으로 전송된다action값에 아무것도 전송하지 않으면 현재 페이지에 전송해서 새로고침 됨 → 1번 방법: button 태그의 button 타입을 활용한 클릭이벤트→ 2번 방법: 폼태그를 활용해서 처리해주는 게 더 웹표준에 맞고 이득임const login = (e: React.FormEvent) => { e.preventDefault(); // 이메일 입력한 값 가져오고 // 비밀..

[ 내가 원하는 작동 방식 ]회색 알람 아이템을 하나 누르면 그 아이템의 type에 해당하는 url로 이동한다. 그러나 알람 아이템 안의 DELETE 버튼을 누르면 url 이동이 아닌, deleteAlarmEvent 이벤트가 작동해야한다! import React from "react";import styled from "styled-components";import { Span } from "../style/TextStyle";import { Div, Article } from "../style/LayoutStyle";import ImgTextBtnItem from "./ImgTextBtnItem";import DeleteIcon from "../img/deleteIcon.svg"..

Unknown command: "create-react-app" 계속 이런 오류가 나오고 npm ERR! Your cache folder contains root-owned files, due to a bug in npm ERR! previous versions of npm which has since been addressed. npm ERR! npm ERR! To permanently fix this problem, please run: npm ERR! sudo chown -R 501:20 "/Users/jke/.npm" 이런 오류가 나오고... 개발 진행하는 것도 두려운데 왜 시작부터 날 어렵게 하는지.....ㅠㅠㅠㅠ 오류를 읽고도 캐쉬 폴터 권한에 문제가 있구나까진 파악을 했는데 아래 떡하니 su..

Actions must be plain objects. Instead, the actual type was: 'function'. You may need to add middleware to your store setup to handle dispatching other values, such as 'redux-thunk' to handle dispatching functions. See https://redux.js.org/tutorials/fundamentals/part-4-store#middleware and https://redux.js.org/tutorials/fundamentals/part-6-async-logic#using-the-redux-thunk-middleware for example..

[ CRA가 기본으로 제공하는 초기 구성 ] => 폴더: node_modules, public, src => 파일: .gitgnore, package-lock.json, package.json, README.md public 폴더엔 정적 파일들을, src 폴더엔 동적 파일들을 넣는다고 한다. 그래서 public 폴더에 index.html 파일을 넣고, src 폴더에 App.js와 index.js 파일을 넣는 것으로 보통 CRA를 시작한다. 내가 고민한 부분은 위 세 파일을 제외한 프로젝트 설계를 하는 과정에서 발생하는 파일들을 어떻게 구조화할 것이냐에 대한 것이다. (public / src 폴더에 넣을 것이냐, 폴더 내부에서 하위 폴더 구조화는 어떻게 할 것이냐 등..) 이 것엔 정답은 물론 없거니와, ..

align-items와 justify-content는 이제 완벽히 이해한 듯하다. 그러나 그 개념만으로는 해소되지 않는 것을 만들 일이 있었다. 한 달짜리 달력을 만드는데 div 한 칸에 '날짜'와 '스케줄 개수'를 넣어주어야 했다. 두 요소를 감싸는 div에 align-items와 justify-content 속성을 지정해주는 것만으로는 두 위치를 모두 충족할 수 없었다. 이를 위해 서칭을 하다가 display: grid, justify-items, align-content 라는 처음 보는 속성들이 있다는 것을 알게되었다. 그중에서도 먼저 align-content에 대해 알아보고자 한다. align-content 우선 align-content는 flex-wrap: wrap과 함께 아이템들을 묶은 컨테이..