전체 글84 Next.js + TypeScript + @reduxjs/toolkit 사용하기 < 2 / 2 > 개인기록 reduxToolKit 사용해보기아래 사진은 src/libs폴더입니다. 이중 예제에 사용하기좋은 counter를 이용해서 redux 를 사용해보려고합니다.counter.actions.ts// baseimport { createAction } from "@reduxjs/toolkit";// defaultexport const COUNTER = "counter";export const COUNTER_SLICE_NAME = `${COUNTER}Slice`;// actionconst INCREMENT = `${COUNTER}/increment`;const DECREMENT = `${COUNTER}/decrement`;const INCREMENT_BY_AMOUNT = `${COUNTER}/incrementByAm.. 2024. 5. 22. Next.js + TypeScript + @reduxjs/toolkit 사용하기 < 1 / 2 > 개인기록 목차 상태라이브러리인 redux를 Next.js + TypeScript에서 써보자 진행과정store.ts 생성 src/libs 위치에 store.ts파일을 생성해준다. 그리고 아래 코드처럼 작성을해준다.import { Action, configureStore, ThunkAction } from "@reduxjs/toolkit";import { counterReducer } from "./features/counter";import { authReducer } from "./features/auth/slices/auth.slice";export const makeStore = () => { return configureStore({ reducer: { counter.. 2024. 5. 22. [node.js, 백준]9663 - N-Queen 목차 문제링크https://www.acmicpc.net/problem/9663문제N-Queen 문제는 크기가 N × N인 체스판 위에 퀸 N개를 서로 공격할 수 없게 놓는 문제이다.N이 주어졌을 때, 퀸을 놓는 방법의 수를 구하는 프로그램을 작성하시오.입력첫째 줄에 N이 주어진다. (1 ≤ N 출력첫째 줄에 퀸 N개를 서로 공격할 수 없게 놓는 경우의 수를 출력한다. 주저리로직은 이해했으나 시간 초과가 일어나서 최적화하는데 애를먹었고 결국 최적화코드는 답을봐서 한번더 풀어야할 것같다. Queen을 N x N칸에 N개 배치할때 핵심은 한 줄에 하나씩 퀸이 꼭들어가야하는점을 생각해야했다.(경우의 수 줄이기) 그리고 반복문으로 해결하였는데 하나의 퀸을 배치하면 그 공격 대상에 다른 퀸이있는지 체크를 해줘서 .. 2024. 5. 21. [node.js,백준]2580 - 스도쿠 목차 문제링크https://www.acmicpc.net/problem/2580문제스도쿠는 18세기 스위스 수학자가 만든 '라틴 사각형'이랑 퍼즐에서 유래한 것으로 현재 많은 인기를 누리고 있다. 이 게임은 아래 그림과 같이 가로, 세로 각각 9개씩 총 81개의 작은 칸으로 이루어진 정사각형 판 위에서 이뤄지는데, 게임 시작 전 일부 칸에는 1부터 9까지의 숫자 중 하나가 쓰여 있다. 나머지 빈 칸을 채우는 방식은 다음과 같다.각각의 가로줄과 세로줄에는 1부터 9까지의 숫자가 한 번씩만 나타나야 한다.굵은 선으로 구분되어 있는 3x3 정사각형 안에도 1부터 9까지의 숫자가 한 번씩만 나타나야 한다.위의 예의 경우, 첫째 줄에는 1을 제외한 나머지 2부터 9까지의 숫자들이 이미 나타나 있으므로 첫째 줄 빈칸.. 2024. 5. 21. [React] useCallback 이란? 목차 useCallback 이란? useCallback은 리렌더링 사이에 함수 정의를 캐시할 수 있게 해주는 React 훅이다. 코드import { useCallback } from 'react';export default function ProductPage({ productId, referrer, theme }) { const handleSubmit = useCallback((orderDetails) => { post('/product/' + productId + '/buy', { referrer, orderDetails, }); }, [productId, referrer]); 매개변수와 반환값 매개변수 fn캐시하려는 함수 값. 어떤 인자도 받을 수 있고 어떤 .. 2024. 5. 20. [React] useMemo란? 목차 useMemo란 무엇인가?useMemo는 리렌더링 사이의 계산 결과를 캐시할 수 있는 React 훅이다. const cachedValue = useMemo(calculateValue, dependencies)컴포넌트 최상단에서 useMemo를 호출하여 리렌더링 사이의 계산 결과를 캐시한다.import { useMemo } from 'react';function TodoList({ todos, tab }) { const visibleTodos = useMemo( () => filterTodos(todos, tab), [todos, tab] ); // ...} 매개변수calculateValue캐시하려는 값을 계산하는 함수이다. 이때 함수는 순수함수 여야하며, 인자를 받지 않고, 반.. 2024. 5. 20. [node.js,백준]1987 - 알파벳 목차 문제링크https://www.acmicpc.net/problem/1987문제세로 𝑅$R$칸, 가로 𝐶$C$칸으로 된 표 모양의 보드가 있다. 보드의 각 칸에는 대문자 알파벳이 하나씩 적혀 있고, 좌측 상단 칸 (1$1$행 1$1$열) 에는 말이 놓여 있다.말은 상하좌우로 인접한 네 칸 중의 한 칸으로 이동할 수 있는데, 새로 이동한 칸에 적혀 있는 알파벳은 지금까지 지나온 모든 칸에 적혀 있는 알파벳과는 달라야 한다. 즉, 같은 알파벳이 적힌 칸을 두 번 지날 수 없다.좌측 상단에서 시작해서, 말이 최대한 몇 칸을 지날 수 있는지를 구하는 프로그램을 작성하시오. 말이 지나는 칸은 좌측 상단의 칸도 포함된다.입력첫째 줄에 𝑅$R$과 𝐶$C$가 빈칸을 사이에 두고 주어진다. (1≤𝑅,𝐶≤.. 2024. 5. 16. Next.js 프로젝트를 bat파일로 실행하기(개인기록) 목차 왜 bat파일로 Next.js를 실행하려고 하나요?사용자는 웹이라는 형태에 익숙합니다. 하지만 웹에선 행동할수 있는 것에 제약이있습니다 어떠한 폴더에 내용을 저장하거나 자동화 브라우저를 열거나 등등 웹으로는 해당 행동들을 제어할 수가 없습니다. bat파일 구성@echo off:: 스크립트 위치를 기반으로 Node.js와 npm 경로 설정set NODE_PATH=%~dp0node\node.exeset NPM_PATH=%~dp0node\node_modules\npm\bin\npm-cli.js:: Next.js 애플리케이션 디렉토리로 이동 (현재 위치)cd %~dp0:: 필요한 패키지 설치echo Installing dependencies...%NODE_PATH% %NPM_PATH% install::.. 2024. 5. 15. 2024-05-14일자 게임이슈 간략정리! 목차안녕하세요! goodchuck 입니다!오늘의 게임뉴스들 모아 일부 내용을 간단하게 요약하였습니다! 자세한건 링크로 확인해주세요! 게임사 1분기 실적 분석 넷마블- 매출 2.9% 감소- 흑자전환 성공- 영업비용 7.8% 감소로 효율화 컴투스- 매출 13.7% 감소- 흑자전환- 영업비용 20.2% 줄임 데브시스터즈- 매출 18.3% 증가- 흑자전환- 영업비용 7.2% 감소 넵튠- 매출 상승- 영업비용 16% 증가- 흑자 달성 크래프톤- 영업이익률 47%- '배틀그라운드' IP 성공적- 매출 지속 증가 엔씨소프트- 매출 16.9% 감소- 영업이익 68.5% 축소- 10종 신작 출시 계획 태그#게임사 #1분기실적 #넷마블더 자세한 내용을 보고싶다면? https://.. 2024. 5. 14. window에서 특정 포트 사용중인 프로세스 찾고 종료하기 목차 개요프론트엔드 개발을 하던도중 특정한 포트가 살아있어 동일한 포트의 서버가 실행이 되지 않는 이슈가 있었다.그래서 Window환경에서 개발을 하고있기에 Window상에서 해당 포트를 점유하는 프로세스를 찾아서 제거하려고한다. 1. 특정 포트를 사용중인 프로세스 찾기netstat -ano | findstr :7000위 코드 예시는 7000이란 포트를 예시로 둔 코드이다. 다른 포트로 바꾸려면 해당 7000을 다른 포트로 바꿔주자 TCP 0.0.0.0:7000 0.0.0.0:0 LISTENING 12345 TCP [::]:7000 [::]:0 LISTENING 12345.. 2024. 5. 14. 이전 1 2 3 4 5 6 7 8 9 다음
