package.json은 프로젝트의 정보와 패키지 매니저(npm, yarn)로 설치된 모듈(이름, 버전)을 관리하는 파일이다.package.json에서 모듈 버전은 Semenantic Versioning(SemVer)를 따른다.SemVer은 버전 번호를 통해 소프트웨어

인증(Authentication) / 인가(Authorization) 쿠키 세션 JWT 관한 글인증(Authentication) : 서비스를 이용하려는 유저가 등록된 회원인지 확인하는 절차 \-> 로그인 기능을 생각하면 됨 인가(Authorization) : 인증을 받

UX 향상 짧은 시간 간격으로 연속해서 이벤트가 발생했을 때 과도한 이벤트 핸들러 호출을 방지하는 기법 setTimeout()을 활용해 구현,원리이해, 적용까지 해보자 Throttling Debouncing Throttling 짧은 시간 동안 연속해서 발생한 이벤트들을 일정시간 단위(delay)를 통해 그룹화 하여 처음 또는 마지막 이벤트 핸들러만 호출되...

여기 있는 것들은 내가 직접 써보질 않아서 써볼 때 다시 세세하게 공부하고 지금은 이런게 있구나 하고 넘어가야겠다. 다운로드 UI가 있을 때, 또는 UX를 저하시키는 불필요한 네트워크 요청을 제거하기 우위해 사용된다. 대용량 fetching을 중간에 취소하거나, 사용하

적절한 UI를 보여주지만 다음과 같은 문제가 존재한다. 상태 관리의 복잡성 컴포넌트 내에서 직접 로딩, 에러, 데이터를 관리하는 상태 등 여러 상태를 직접 관리 해야 한다.상태 관리가 복잡하고, 각 상태에 따른 로직이 컴포넌트 내부에 분산되어 있어 코드가 복잡하다.중복

동기요청과 응답이 순차적으로 일어나는 방식 요청을 보내면 응답이 올 때까지 대기한 후 다음 작업을 진행 일의 순서가 중요한 경우는 동기처리를 한다. 처리 순서가 보장되지만, 응답을 기다리는 동안 다른 작업을 수행할 수 없기 때문에 비효율적일 수 있다.비동기요청과 응답이

Redux를 꾸준히 공부하면서 사용해보려고 노력해봤는데 생각보다 쉽지 않아 이번 글을 통해서 내가 redux를 쓰기 위한 가이드라인을 작성해봄 두가지 방향으로 글을 작성해볼 예정 1\. Redux만 사용 2\. RTK(redux toolkit)를 사용Redux temp

크로스 브라우징 이슈를 해결하기 위한 css reset 브라우저 (크롬, 파이어폭스, 브레이브, 오페라...)는 기본적으로 default style을 제공함 텍스트 크기, margin 등.. 브라우저의 호환성을 위한 기본 스타일을 제거하기 위한 작업아래 코드 외에도 r

JavaScript를 확장한 문법JavaScript의 모든 기능이 포함되어 있으며, React Element를 생성하기 위한 문법const element = <h1>Hello, world!</h1>;엘리먼트는 단순히 화면에 그려지는 HTML적 요소아래처럼 나

리액트로 프로젝트를 만들다보면 번들 사이즈가 커져서 성능이 크게 저하된다. 이를 해결하기 위한 방법 중 하나로 동적 임포트가 있다.정적 import는 보통 코드의 맨 상단에 위치시켜 사용한다. 그래서 때로는 어떤 컴포넌트를 가져오면 거기에 딸려오는 import들이 있어

Reduce()는 네 개의 인자를 가짐누산기 (acc)현재 값 (cur)현재 인덱스 (idx)원본 배열 (src)누산기 구문 arr.reduce(callback\[, initialValue])acc값이 순회하는 내내 callback됨sort() 메서드는 배열의 요소를

socket.io로 통신할 때 기억 해야할 두가지받는 코드는 on, 보내는 코드는 emit예제로 빠르게 알아보자 (진짜 쉬움) 아래 코드는 Express를 이용한 백엔드 서버다.vscode에서socket.on() on에 마우스 커서를 올리면 아래 사진에서 알려주듯이 2

socket.io를 이용해서 채팅앱을 만드는 과정 중 발생한 이벤트 중복 등록. useState로 만든 배열에 요소가 2번씩 들어갔다.왜 발생하나 계속 찾아보던 와중 socket.io docs에서 답을 찾았음https://socket.io/how-to/use-

기존 Express 세팅은 했었는데 TS로 하려니깐 애먹어서 적음프로젝트 정보와 의존성(dependencies)를 관리하는 문서 nodemonexpresstypescript - TS 컴파일러 설치ts-node - TS 전용 Node.js@types/node - Node

출처 : 링크

1. Installation Would you like to use 'src/' directory? No / Yes : 링크 >src디렉토리는 모든 애플리케이션 개발에 필요한 코드가 들어있는 곳 최상위 루트 디렉토리를 깔끔하게 쓰고싶으면 Yes하면 됨. Creating directories file-system-routing : 애플리케이션의 route...

form 태그가 정확히 어떤식으로 쓰일 수 있는지 좀 공부해보자로그인할때랑 뭐 연결할 때 가장 많이 쓰이는 것 같음 conform이라는 lib도 존재하는거보면 공부할 가치 있다고 판단.

비동기 함수를 하나씩 실행함비동기 함수를 병렬실행 누가 먼저 시작했던 끝나는 시간은 동시에.

React : hydrate > Hydration JS 코드들이 DOM 요소 위에 물을 채우듯 필요로 하던 요소들을 채운다하여 붙여진 이름이라고 한다 보통 건조된 dummy html코드(백엔드에서 SSR로 받아온 것들)에 수분을 공급시켜준다. 여기서 말하는 수

React는 라이브러리? Nextjs는 프레임워크? Nextjs는 React기반인데 왜 Nextjs가 프레임워크야? Nextjs를 배우기전까지 이런 생각을 했다.(전형적인 개발초보)이 글에서는 라이브러리의 대표자는 React로 프레임워크는 Nextjs로 설정각 공식 홈