대표적으로 2가지 방법으로 React에서 SVG 파일을 사용할 수 있습니다.그 중 전 2번째 방법 사용하기로 결정하였습니다. 🤗props로 값을 받아 다양한 크기, 색상을 사용할 수 있다는 장점이 존재하여 선택TypeScript Compiler에서 해당 모듈을 찾지

Suspense 는 lazy 메서드를 사용했을 경우 특정 이벤트가 발생했을 경우 분리된 정크파일을 해석하여 화면에 렌더링하게 되는데 그동안의 텀이 존재하고 그 텀에는 Suspense 의 fallback 어트리뷰트에 할당한 JSX.Element로 대체하여 사용자에게 보여

useEffect를 통해 목표정보를 서버로 요청하는 로직이 존재했었으나페이지 리로드를 하게 되면 정보를 받아오지 못하는 경우가 발생했다..알고보니 목표정보를 요청할 때 JWT 토큰이 필요했으나 JWT토큰을 axios.headers.common.Authorization에

PayloadAction: action.payload의 데이터 타입을 지정할때 사용한다.action: { payload: Member } 이렇게 작성하지 않고 조금더 깔끔하고 간단하게 action.payload의 타입을 지정해 줄 수 있다.

useSelector를 통해 redux의 store의 상태를 useState로 컴포넌트의 상태로 할당해주려 했으나 undefined를 반환하는 결과가 발생했다.문제점은 다음과 같았다.실행되는 시점의 문제useState: 컴포넌트가 렌더링 되기 전에 실행useSelect

React.ReactNode 대부분 이 타입으로 지정을 해주면 typescript ERROR를 피할 수 있었기에 JSX 문법을 사용하여 생성된 컴포넌트, 태그들을 return 받을 때 무의식적으로 사용해 주었다. 그 이유는 JSX.element, ReactEleme

React를 이용하여 드롭다운 메뉴관련 작업을 하던 중 발생했다..focus event 를 감지하여 드롭다운 메뉴를 보여준다.메뉴를 click 하면 원하는 state 를 변경해준다.focus event 가 해제되며 blur event 를 감지하여 드롭다운 메뉴를 다시

해결방법 event 는 target을 가지고 있지않다? 에러 발생 : ChangeEventHandler 해결 : ChangeEvent 지금까지 JavaScript 를 통해 진행했을 때 항상 event 는 target 을 프로퍼티로 가지고 있었다. 그러나 R

📚 Storybook + TailwindCSS 적용하기 Storybook과 TailwindCSS의 공식문서에 나와있는 가이드를 통해 설정을 완료를 하였음에도 yarn storybook 을 통해 Storybook 툴 내부를 확인하였으나 내가 생각한대로 css가 변경이

필자는 create-react-app 과 Tailwind를 사용하는 방식에 맞게 작성하였다.create-react-app을 사용하여 기본적인 개발환경을 직접 구축할 필요없이 편리하게 사용하겠다.css framework인 tailwind를 사용하기위해 필요한 패키지들을

이 포스트는 현재 추가중에 있습니다. :)단위 테스트는 테스트 가능한 가장 작은 단위로 나누어 예상대로 실행이 되는지 확인하는 테스트이다.정확하게 정해진 단위는 없다.일반적으로 메소드, 또는 클래스 단위로 진행한다.더 작은 단위로 나눌 수록 복잡성이 낮아지고 테스트하기

학습의 방향을 잡기위해 미리 작성해 놓은 포스트입니다.동적 경로

Next.js 공식문서를 보게 되면 pre_rendering 에 대해 매우 강조하며 자랑스러워 하고있다고 느껴진다.그럼 pre_rendering 이 대체 무엇일까?필자는 SSR 과 SSG에 대해 간략히 알아본다면 보다 쉽게 pre_rendering 에 대해 이해할 수

HTTP 상태코드란? 클라이언트가 보낸 요청의 처리에 대한 결과의 상태를 알 수 있는 코드 이다. 정확하진 않지만 쉽게 말해 브라우저가 보낸 요청에 대한 결과를 대략적으로 알 수 있는 코드이기 때문에 브라우저가 다음에 수행할 행동을 결정하는데 매우 중요한 역활을 한다.

서버로 보낼 요청에서 핵심이 되는 리소스가 무엇인지 파악하자.'정보를 받아오자.'의 경우 정보 가 리소스 가 될 것이다.그럼 '받아오자'는 어떻게 URI로 나타내야할까?이를 해결하기 위해 HTTP 프로토콜에서는 메서드를 지원해 해당 리소스에 대한 동작을 지시할 수 있다

프로그래머스의 신규 아이디 추천(카카오) 문제의 접하게 되었다.처음에는 문제에서 제시한 단계를 수행하는 함수를 생성한 다음 호출하여 결과값을 return 받게 로직을 작성했다.그러나 단계가 7단계가 주어지는 만큼 함수 또한 7개였으며 코드의 전체 길이도 수십줄에 달했다

URI(Uniform Resource Identifier): 통합 자원 식별자의 줄임말브라우저의 검색창에 담겨있는 주소가 URI 이다. (x)네트워크 상의 리소스를 식별할 수 있는 식별자를 의미한다.위 그림과 같이 URI 개념의 내부에는 대표적으로 URN, URL이 존

배열내의 요소 각각에 대하여 주어진 함수를 호출하여 전달받은 return 값을 모아 기존과는 다른 새로운 배열을 반환한다.배열내의 요소 각각에 대하여 주어진 함수를 호출하여 전달받은 return 값을 모아 전달받은 reutrn 값이 만일 다차원 배열일 경우(깊이가 다른

코딩테스트를 본격적으로 준비해보자라고 마음먹은지 일주일이 경과했다.오늘은 10시와 13시에 코딩테스트가 2개가 잡혀있었다..연습문제가 아닌 실전의 코딩테스트를 제대로 본 건 이번이 처음이었다.10시에 잡힌 코딩테스트는 프로그래머스에서 진행하는 2022 Summer Co

Babel is a JavaScript Compiler - 공식사이트 -자바스크립트를 다른 버전의 자바스크립트로 컴파일해주는 역활을 한다.자바스크립트 문법은 한가지가 아니다. es5, es6 등등 점점 변화하고 있다.그러나 사용자들의 사용환경은 모두 제각각이다. 어떤