짧은코딩

LRU 해결 방법 해결 방법으로는 내장 함수를 사용하지 않는 방법과 내장 함수를 사용하는 방법 2가지가 있다. 나는 이 문제를 처음 풀 때 꼼수를 사용하여 맨 뒤부터 불러오는 방식으로 풀려고 했지만 이 방식은 옳은 방법이 아니였다. 방법1) 내장 함수를 사용하지 않는 방법 1. pos는 히트가 되었는지 안되었는지 확인할 수 있는 변수이다. 만약 pos가 -1이면 히트가 되지 않은 것, pos가 -1이 아니면 히트가 된 것이고 pos에 히트 된 위치를 저장한다. 2. pos가 -1이면 히트가 되지 않았기 때문에 answer에 들어간 모든 값들을 뒤로 한 칸씩 밀어주고 맨 앞에 현재 값을 넣는다. 3. pos가 -1이 아니면 히트가 되었기 때문에 히트 된 앞 부분부터 뒤로 한 칸씩 밀어주고 맨 앞에 현재 값..

CRA로 RTK도 같이 설치하기 npx create-react-app my-app --template redux-typescript 이 명령어를 입력하면 리액트 폴더를 만들 때 Redux-ToolKit도 같이 설치하게 된다. 설치된 초기 코드 https://github.com/5hyun/redux_study/tree/main/RTK GitHub - 5hyun/redux_study Contribute to 5hyun/redux_study development by creating an account on GitHub. github.com 코드를 보기 위해서는 위 깃허브를 참고하면 된다. 중요하게 볼 폴더 app과 features 폴더를 참고하면 리덕스 툴킷 공부에 도움이 될것이다. -app app에는 da..

리렌더링 리엑트에서 리렌더링이 되면 return 밑 부분을 처음부터 실행하지만 바뀐 부분만 다시 그리게 된다.(return 부분이 virtual dom이다.) 만약 리렌더링 되었을 때, 모든 화면을 다시 그려준다면 개발자들이 리엑트를 사용하지 않을 것이다. 번외로 useCallback은 함수를 캐싱하는 것이고 useMemo는 결과를 캐싱하는 것이다. 인라인 스타일 코딩을 하다보면 인라인 스타일을 많이 쓰게 된다. 이런 방식은 지양하는 것이 좋다. 왜냐하면 객체는 "{} === {}"을 하면 false가 나온다. 그렇기 때문에 리렌더링하면 인라인 스타일 부분을 사용한 곳을 다시 그리게 된다. 해결법으로는 styled-components, emotion.js 등 같은 js-in-css를 사용하면 된다. an..

ant Design -공식 사이트 https://ant.design/ Ant Design - The world's second most popular React UI framework Ant Design 5.0 Ant Design 5.0 use CSS-in-JS technology to provide dynamic & mix theme ability. And which use component level CSS-in-JS solution get your application a better performance. ant.design 이 사이트에는 버튼, 메뉴 스타일 등의 css가 있다. 장점으로는 디자이너가 없을 때, 디자인 고민 할 시간을 덜어줄 수 있다. 단점으로는 페이지가 다른 사이트와 겹치는 스타..

redux-toolkit redux-toolkit에는 immer, thunk, redux 등 개발자들이 많이 사용하는 라이브러리가 기본적으로 내장되어있다. -공식 사이트 https://redux-toolkit.js.org/introduction/getting-started Getting Started | Redux Toolkit redux-toolkit.js.org 제로초님은 공식 사이트에서 createSlice, createAsyncThunk를 읽어보는 것을 강력 추천한다고 한다. 왜냐하면 저 2개가 실무에서 가장 많이 사용되기 때문이다. 사용하기 -store.js const { configureStore } = require("@reduxjs/toolkit"); const reducer = requi..

불변성 유지 리덕스에서는 불변성을 유지하기 위해서 initialState.data = null; initialState.deep.deeper.deepest.a = 'b'; 이렇게만 바꿔도 되는 코드를 return { ...prevState, data: null, deep: { ...prevState.deep, deeper: { ...prevState.deeper, deepest: { ...prevState.deepest, a: 'b', } } } } 이렇게 복잡하게 바꿔줘야한다. 코딩하는 양도 많아지고 직관적이지 못하다. 이것을 편안하게 해주는 것이 immer라는 라이브러리이다. immer reducer는 action을 바탕으로 다음 state를 만들어내는 것이다. 그렇기에 reducer는 (이전 sta..

폴더 구조 https://shortcoding.tistory.com/396 redux-thunk 간단한 것은 thunk로 구현할 수 있지만 복잡한 것은 saga로 구현하는 것이 좋다. thunkMiddleware // thunkMiddleware는 아래 코드가 끝이라서 불러올 가치가 없다 // 기본적으로 action은 객체 const thunkMiddleware shortcoding.tistory.com 이 글에서 만들었던 actions와 reducers를 가져와서 사용했다. 다른 점이 있다면 index.js 파일은 store.js로 바꾸고 module로 바꿨다. client.jsx import React from 'react'; import ReactDOM from 'react-dom'; import ..

간단한 것은 thunk로 구현할 수 있지만 복잡한 것은 saga로 구현하는 것이 좋다. thunkMiddleware // thunkMiddleware는 아래 코드가 끝이라서 불러올 가치가 없다 // 기본적으로 action은 객체 const thunkMiddleware = (store) => (next) => (action) => { //비동기는 함수로 넣어주겠다는 약속 if (typeof action === "function") { return action(store.dispatch, store.getStats); } // 동기 return next(action); }; thunkMiddleware을 만들고 enhancer에 넣어준다. 동기는 기본적으로 객체로 받고, 비동기는 함수로 받는 것이 약속이다...

객체의 특징 객체는 복사할 때 원시 타입(문자열, 숫자, 불린값)가 다른 방식을 사용한다. 객체를 아래 코드처럼 복사하게 되면 let user = { name: "John" }; let admin = user; // 참조값을 복사함 참조 값을 복사하게 된다. 이는 user에서 객체를 저장하고 있는 위치를 admin에게 알려줘서 참조값을 복사하는 것이다. 이렇게 된다면 admin을 수정했을 때, user의 값도 바뀌게 된다. 그리고 user와 admin을 '==', '===' 연산자로 비교하면 true가 나오게 된다. (객체는 '=='도 '==='와 동일하게 동작) 얕은 복사 얕은 복사는 객체를 복사할 때 기존 값과 복사된 값이 같은 참조를 가리키는 것을 말한다. 객체 안의 한 객체라도 기존 변수의 객체를..

문제점 const onClickLenUp: any = useCallback((e: any, idx: number) => { console.log("누름", idx); }, []); 이렇게해서 html에 바로 주게되면 버튼을 클릭하지도 않았는데 실행이되어있다. 해결법 해결방법은 익명 함수를 사용하는 것이다. onClickLenUp(item[index]?.id)}> 이렇게 익명 함수를 사용하게 되면 onClick 이벤트에 인자를 줄 수 있다!