useNavigate는 양식이 제출되거나 특정 event가 발생할 때, url을 조작할 수 있는 <span style="color:이렇게 작성한다고 합니다. 이 코드에서의 url이 www.naver.com 이었다면 이는 www.naver.com/comment/i

그림에서 보는것과 같이 ?? 왼쪽이 undefined, null 이면 오른쪽에 있는걸 대신 보여줘!라는 문법이다.여기서 우린 || 하고 ?? 차이를 알아 두시면 더 좋습니다.간략히 얘기하면 전자는 0, "", false, undefined 같은 falsy 값을 전부 검

react-query는 서버 상태를 다루는 라이브러리다. redux, mobx 등은 클라이언트 상태를 다루는 라이브러리다. 즉, react-query는 전역 상태관리 라이브러리가 아니라 서버와 클라이언트 간의 비동기 작업을 쉽게 해주는 라이브러리다. 다만 react-

https://yrnana.dev/post/2021-08-21-context-api-redux옛날옛적 호랑이 담배피던시절(?) 리액트의 러닝커브를 올리는 주범은 redux라고 해도 과언이 아닐 정도로 리덕스는 리액트를 개발하려면 react-router-dom과

html 작성 시, 입력한 문자로 시작하는 클래스명들을 보여준다.vscode에서 tailwind 클래스명들을 속성별로 검색 확인할 수 있다.이와 비슷한 플러그인으로는 Tailwind Docs가 있는데, 이는 vscode에서의 바로 확인은 아니고, 검색한 클래스의 설명이

memoization이란 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말한다.memoization을 절적히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수

React Hook Form은 React에서 Form을 쉽게 만들기 위한 라이브러리로 공식문서에 적혀있는 그대로 성능이 좋고 유연하며 유효성 검사에 아주 탁월합니다.적은 코드로 더 좋은 퍼포먼스를 낼 수 있다.다른 라이브러리 혹은 React에 비해 Re-render 수

속성 은 Element.scrollLeft요소의 콘텐츠가 왼쪽 가장자리에서 스크롤되는 픽셀 수를 가져오거나 설정합니다.요소 direction가 rtl(오른쪽에서 왼쪽으로)인 경우 스크롤 막대 scrollLeft가 0가장 오른쪽 위치에 있을 때(스크롤된 콘텐츠의 시작 부

CSS는 같은 속성을 여러 번 정의했을 때, 나중에 설정한 값이 적용됩니다. 만약 나중에 설정한 값이 적용되지 않게 하려면 속성값 뒤에 !important를 붙입니다.예를 들어 다음은 마지막에 설정한 color의 값이 blue이므로, red는 무시하고 문단의 글자색을

여러 개의 프라미스를 동시에 실행시키고 모든 프라미스가 준비될 때까지 기다린다고 해봅시다.복수의 URL에 동시에 요청을 보내고, 다운로드가 모두 완료된 후에 콘텐츠를 처리할 때 이런 상황이 발생합니다.Promise.all은 이럴 때 사용할 수 있습니다.문법:Promis

위와 같이 코드를 작성했을 때 정상인 것처럼 브라우저에는 렌더링되지만 Missing "key" prop for element in iterator 와 같은 warning message가 뜨고, 터미널에는 사진과 같이 컴파일되었지만 warning이 있다는 메세지가 뜬다!

jsx는 JavaScript 확장 문법JavaScript안에서 HTML 사용 가능jsx 사용이 필수는 아니지만 추천 (리액트 공식 홈페이지 - 문서 - JSX 소개 탭)기능적인 차이는 없으나 팀 내 협의의 문제리액트를 공부할 때 js보다 jsx를 쓰는 이유가 "자바스크

<span style="color: yarn add @badrap/bar-of-progress npm i @badrap/bar-of-progress<span style="color: <span style="color: <span style=

하나의 셀 또는 행을 여러 열로 나누고 둘 이상의 열로 합병하기 위해서 사용합니다.즉, 테이블의 셀을 가로로 합병.하나의 셀을 두개 이상으로 확장하거나 셀을 여러 행으로 나눌 때 사용합니다.테이블의 셀을 세로로 합병.colspan은 헤더셀이나 데이터셀에 상관없이 가로로

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely

vscode의 settings로 들어간다. command + ,검색창에 css.lint.unknownAtRules 를 검색한다.옵션을 ignore 로 변경한다.vscode issues 참고

정리하자면 느낌표 두개(!!) 연산자는 확실한 논리결과를 가지기 위해 사용합니다.예를 들어 정의되지 않은 변수 undefined 값을 가진 내용의 논리 연산 시에도 확실한 true / false를 가지도록 하는게 목적입니다.javascript 에서 '!!' 를 사용하지

구글 광고에 자주 뜨던 tabnine 을 설치해봤다.흔한 자동완성 플러그인이라고 생각했는데, 링크를 타고 들어가자 예전부터 관심있게 보던 GTP-2 기반 자동완성 플러그인이라는 소개글을 보고 깜짝 놀라서 설치하게 되었다.tabnineGTP-2에 대한 소개글은 아래에서.

일급 객체로서 함수가 가지는 가장 큰 특징은 일반 객체와 같이 함수의 매개변수에 전달할 수 있으며, 함수의 반환값으로 사용할 수도 있다는 것이다. 이는 함수형 프로그래밍을 가능케 하는 자바스크립트의 장점 중 하나이다.외부 상태를 변경하지 않고 외부 상태에 의존하지도 않

활용도가 높아지는 웹 프론트엔드 언어, 타입스크립트(TypeScript) 2012년 마이크로소프트가 발표한 타입스크립트(TypeScript)는 자바스크립트(JavaScript)를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어이입니다. 요즘은 대형 SI 프로젝트에서