단의 개발 블로그

리액트 애플리케이션에서 API 서버를 연동할 때 API 요청에 대한 상태도 관리해야 한다. 요청 시작 시 로딩, 성공 실패에 따른 각각 응답 상태 관리를 해야한다는 뜻이다. 미들웨어를 사용하여 효율적이고 편하게 상태 관리를 할 수 있다. 아래 패키지를 추가한다.yarn add redux react-redux redux-actions  리덕스 생성import {createAction, handleActions} from "redux-actions";const INCREASE = 'counter/INCREASE';const DECREASE = 'counter/DECREASE';export const increase = createAction(INCREASE)export const decrease = crea..

💡 문제자연수 n이 매개변수로 주어집니다. n을 3진법 상에서 앞뒤로 뒤집은 후, 이를 다시 10진법으로 표현한 수를 return 하도록 solution 함수를 완성해주세요.💡 제한 조건n은 1 이상 100,000,000 이하인 자연수입니다. 입출력 예  입출력 예 설명✨ 풀이class Solution { public int solution(int n) { int answer = 0; String str = ""; while(n != 0) { str += n % 3; n /= 3; } answer = Integer.parseInt(str, 3); return answer; }}..

💡 문제길이가 같은 두 1차원 정수 배열 a, b가 매개변수로 주어집니다. a와 b의 내적을 return 하도록 solution 함수를 완성해주세요.이때, a와 b의 내적은 a[0]*b[0] + a[1]*b[1] + ... + a[n-1]*b[n-1] 입니다. (n은 a, b의 길이)💡 제한 조건a, b의 길이는 1 이상 1,000 이하입니다.a, b의 모든 수는 -1,000 이상 1,000 이하입니다. 입출력 예  입출력 예 설명입출력 예 #1a와 b의 내적은 1*(-3) + 2*(-1) + 3*0 + 4*2 = 3 입니다.입출력 예 #2a와 b의 내적은 (-1)*1 + 0*0 + 1*(-1) = -2 입니다.✨ 풀이class Solution { public int solution(int[] ..

💡 문제어떤 정수들이 있습니다. 이 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes와 이 정수들의 부호를 차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다. 실제 정수들의 합을 구하여 return 하도록 solution 함수를 완성해주세요.💡 제한 조건absolutes의 길이는 1 이상 1,000 이하입니다.absolutes의 모든 수는 각각 1 이상 1,000 이하입니다.signs의 길이는 absolutes의 길이와 같습니다.signs[i] 가 참이면 absolutes[i] 의 실제 정수가 양수임을, 그렇지 않으면 음수임을 의미합니다. 입출력 예  입출력 예 설명입출력 예 #1signs가 [true,false,true] 이므로, 실제 수들의 값은 각각 4, -7, 12입니다...

💡 문제두 정수 left와 right가 매개변수로 주어집니다. left부터 right까지의 모든 수들 중에서, 약수의 개수가 짝수인 수는 더하고, 약수의 개수가 홀수인 수는 뺀 수를 return 하도록 solution 함수를 완성해주세요.💡 제한 조건1 ≤ left ≤ right ≤ 1,000 입출력 예 입출력 예 설명✨ 풀이class Solution { public int solution(int left, int right) { int answer = 0; for(int i=left; i출처https://school.programmers.co.kr/learn/challenges

전역 상태관리리액트에서 상태관리는 부모 컴포넌트가 진행한다. 그러면 결국 app 루트에서 자식 컴포넌트로 전달 과정을 여러번 거치게 된다. 이를 방지하고자 전역에서 상태 관리하는 방법이 고안됐다. 단순히 ContextAPI로 작업을 해도 되지만, 보통 리덕스라는 리액트 상태 관리 라이브러리를 많이 사용한다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있기 때문이다. 액션상태에 어떤 변화가 필요하면 액션이란 것이 발생한다. 하나의 객체로 표현된다. 리듀서변화를 일으키는 함수다. 액션을 만들어서 발생시키면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아온다. 그리고 두 값을 참고하여 새로운 상태를 만들어 반환한다. 스토어프로젝트에 리덕..

💡 문제네오와 프로도가 숫자놀이를 하고 있습니다. 네오가 프로도에게 숫자를 건넬 때 일부 자릿수를 영단어로 바꾼 카드를 건네주면 프로도는 원래 숫자를 찾는 게임입니다.다음은 숫자의 일부 자릿수를 영단어로 바꾸는 예시입니다.1478 → "one4seveneight"234567 → "23four5six7"10203 → "1zerotwozero3"이렇게 숫자의 일부 자릿수가 영단어로 바뀌어졌거나, 혹은 바뀌지 않고 그대로인 문자열 s가 매개변수로 주어집니다. s가 의미하는 원래 숫자를 return 하도록 solution 함수를 완성해주세요.참고로 각 숫자에 대응되는 영단어는 다음 표와 같습니다.💡 제한 조건1 ≤ s의 길이 ≤ 50s가 "zero" 또는 "0"으로 시작하는 경우는 주어지지 않습니다.retu..

💡 문제새로 생긴 놀이기구는 인기가 매우 많아 줄이 끊이질 않습니다. 이 놀이기구의 원래 이용료는 price원 인데, 놀이기구를 N 번 째 이용한다면 원래 이용료의 N배를 받기로 하였습니다. 즉, 처음 이용료가 100이었다면 2번째에는 200, 3번째에는 300으로 요금이 인상됩니다.놀이기구를 count번 타게 되면 현재 자신이 가지고 있는 금액에서 얼마가 모자라는지를 return 하도록 solution 함수를 완성하세요.단, 금액이 부족하지 않으면 0을 return 하세요.💡 제한 조건놀이기구의 이용료 price : 1 ≤ price ≤ 2,500, price는 자연수처음 가지고 있던 금액 money : 1 ≤ money ≤ 1,000,000,000, money는 자연수놀이기구의 이용 횟수 coun..

라우팅라우팅은 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 의미한다. 보통 애플리케이션은 여러 페이지로 구성되어 있는데, 페이지 별로 컴포넌트를 분리해서 관리할 때 필요하다. 리액트에서 사용되는 라우팅은 두가지 방식이 존재한다.리액트 라우터 : 라우팅 관련 라이브러리들 중에 가장 오래됐고, 많이 사용된다. 컴포넌트 기반으로 라우팅 시스템을 설정한다.Next.js : 리액트 프로젝트의 프레임워크다. 프로젝트 설정 및 라우팅 시스템, 최적화, 다국어, 서버 사이드렌더링 등 다양한 기능을 제공한다. 리액트 라우터 대안으로 많이 사용된다.SPASingle page Application이란 하나의 페이지로 이루어진 애플리케이션이다. 멀티 페이지 애플리케이션은 사용자가 다른 페이지로 이동할 때마다 ..

💡 문제0부터 9까지의 숫자 중 일부가 들어있는 정수 배열 numbers가 매개변수로 주어집니다. numbers에서 찾을 수 없는 0부터 9까지의 숫자를 모두 찾아 더한 수를 return 하도록 solution 함수를 완성해주세요.💡 제한 조건1 ≤ numbers의 길이 ≤ 90 ≤ numbers의 모든 원소 ≤ 9numbers의 모든 원소는 서로 다릅니다. 입출력 예  입출력 예 설명입출력 예 #15, 9가 numbers에 없으므로, 5 + 9 = 14를 return 해야 합니다.입출력 예 #21, 2, 3이 numbers에 없으므로, 1 + 2 + 3 = 6을 return 해야 합니다. ✨ 풀이class Solution { public int solution(int[] numbers) { ..