즉 , Redux에서는 Action -> Dispatch -> Reducer -> Store 순서로 데이터가 단방향으로 흐른다.Provider는 store를 손쉽게 사용할 수 있게 하는 컴포넌트이다.Reducer는 Dispatch에게서 전달받은 Action 객체의 ty

문자열 s가 입력되었을 때 다음 규칙을 따라서 이 문자열을 여러 문자열로 분해하려고 합니다.먼저 첫 글자를 읽습니다. 이 글자를 x라고 합시다.이제 이 문자열을 왼쪽에서 오른쪽으로 읽어나가면서, x와 x가 아닌 다른 글자들이 나온 횟수를 각각 셉니다. 처음으로 두 횟수

둘만의 암호 (프로그래머스 Lv1) 문제설명 > 두 문자열 s와 skip, 그리고 자연수 index가 주어질 때, 다음 규칙에 따라 문자열을 만들려 합니다. 암호의 규칙은 다음과 같습니다. 문자열 s의 각 알파벳을 index만큼 뒤의 알파벳으로 바꿔줍니다. in

코니는 영어 단어가 적힌 카드 뭉치 두 개를 선물로 받았습니다. 코니는 다음과 같은 규칙으로 카드에 적힌 단어들을 사용해 원하는 순서의 단어 배열을 만들 수 있는지 알고 싶습니다.원하는 카드 뭉치에서 카드를 순서대로 한 장씩 사용합니다.한 번 사용한 카드는 다시 사용할

코딩테스트를 준비하는 머쓱이는 프로그래머스에서 문제를 풀고 나중에 다시 코드를 보면서 공부하려고 작성한 코드를 컴퓨터 바탕화면에 아무 위치에나 저장해 둡니다. 저장한 코드가 많아지면서 머쓱이는 본인의 컴퓨터 바탕화면이 너무 지저분하다고 생각했습니다. 프로그래머스에서 작

휴대폰의 자판은 컴퓨터 키보드 자판과는 다르게 하나의 키에 여러 개의 문자가 할당될 수 있습니다. 키 하나에 여러 문자가 할당된 경우, 동일한 키를 연속해서 빠르게 누르면 할당된 순서대로 문자가 바뀝니다.예를 들어, 1번 키에 "A", "B", "C" 순서대로 문자가

숫자로 이루어진 문자열 t와 p가 주어질 때, t에서 p와 길이가 같은 부분문자열 중에서, 이 부분문자열이 나타내는 수가 p가 나타내는 수보다 작거나 같은 것이 나오는 횟수를 return하는 함수 solution을 완성하세요.예를 들어, t="3141592"이고 p="

위와 같이 파일업로드를 하였을때 input태그에 파일이름이 출력되게끔 구현 하고 싶었다.하지만 에러가 발생하였고 해결하기 위해 여러가지 방법을 써본 결과 방법을 찾았다.우선 나는 react-hook-form 라이브러리를 사용하여 구현중이다.input file 태그는 &

저번 프로젝트를 하며 로그인페이지부분을 맡아 구현을 했었는데,일반 로그인기능은 구현을 맡고 다른팀원이 소셜로그인을 맡아 하지못했었다.그래서 이번 사이드프로젝트를 진행할땐 소셜로그인도 같이 꼭 하고 싶어OAuth를 학습하며 사용해 보려고 한다.OAuth 2.0(Open

사이드 프로젝트중에 이런 에러를 만나게 되었는데 의외로 간단하게 해결 할 수 있었다.React.Js는 - 문자가 있을때 읽을 수 없다는 에러이다.이미지파일을 받아오려고 프로젝트 폴더내부에 assets/icon.svg 들을 다수 넣어뒀는데,거기서 에러가 나온것이다.다른

즉 Next.js는 SSR(server-side rendering)방식으로 서버에서 렌더링 시키고 브라우저단 CSR(client-side rendering)에서 렌더링된 것 과 일치하지 않아서 발생하는 에러이다.에러를 해결할 방법으로 React 버전을 17버전으로 다

CSR과 SSR의 차이로 인한 에러!Next.js는 client-side 렌더를 하기전에 server-side 렌더를 수행한다.Next.js에서 제공하는 Server Side Rendering(SSR)에선 client-side에 존재하는 window, document

전에 프로젝트를 할때 팀원이 MSW를 쓰자하여 따라해보긴 했었다.MSW를 써보니 express로 Mock 서버를 만드는것보다 간단하고 편리했다.그래서 이번 사이드프로젝트를 하며 MSW를 써보기로 하였다.MSW는 서비스 워커(Service Worker)를 사용하여 네트워

이번 React 사이드프로젝트에 적용시켜본 Next.js를 하며 느꼈던 차이는 우선 라우팅하는 방식이었다.Next.js는 pages폴더 내부의 폴더or파일명이 자동으로 path가 설정되기 때문에 처음엔 당황하였지만 전에 React프로젝트에서 Routes, Route,

Typescript를 사용하며 axios get 요청에 params를 넣어 보내면MSW에서 req.params가 빈객체로 나온다...URLSearchParams 를 사용해 변수에 담고 get 을 사용해 key값을 입력해주면 해당 key의 value를 불러오는 것이 가능

interface는 상호 간에 정의한 약속 혹은 규칙을 의미함.\->abc()의 인자가 좀 더 명시적으로 바뀌었다.abc() 의 인자는 carInfo 라는 타입을 가져야한다.위 코드에선 다음과 같은 typescript 에러가 나온다.\->'{ brand: string;

Typescript 에서는 함수의 인자를 모두 필수 값으로 간주한다.따라서, 함수의 매개변수를 설정하면 undefined 나 null이라도 인자로 넘겨야하며 컴파일러에서 정의된 매개변수 값이 넘어왔는지 확인한다.\-> 즉, 정의된 매개변수 값만 받을 수 있고 추가로 인

아래와 같이 : 으로 타입을 정의하는 방식을 타입표기(Type Annotation) 이라고 한다.제네릭 표기법Tuple은 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식을 말한다.모든 타입에 대해서 허용한다는 의미를 갖고 있다. any 만 쓴다면 ty

우선 props를 내려준다.styled-components 에서 props를 받아준다.\-> interface로 분리하여 타입지정 하는 것 외에 사용법 동일!

에러 > 매개 변수에는 암시적으로 'any' 형식이 포함됩니다.ts(7006) 위처럼 useCheckPw 함수의 매개변수로 func라는 콜백함수를 받아올 때 에러가 나왔다. 일반적인 js 에서는 문제가 없었지만 typescript에서는 에러가 나왔다. type을 지