프로그래밍을 할 때 가장 신경 써야할 것 중 하나가 코드 중복을 제거하고 재사용하여 변경,확장을 용이하게 만드는 것이다. 그리고 코드 재사용 기법으로 제일 널리 사용되는 것이 상속과 합성이다. 상속이란 객체 지향 4가지의 특징 중하나로 클래스 기반의 프로그래밍에서의 개

프로젝트를 개발하며 페이지를 이동시키거나 상세페이지를 생성하는 등 항상 신경써야하는 부분은 라우팅 부분이었다. 이때 항상 등장하는 URL 파라미터, 쿼리 스트링, react-router에서 제공되는 훅들까지... 동작만 잘하면 된다는 마인드로 코드를 작성하였다. ✅ 나

채팅 앱의 핵심 기술이자 이번에 처음 써보는 Socket.io란 무엇일까? Socket.io란 WebSocket을 기반으로 클라이언트와 서버의 양방향 통신을 가능하게 해주는 기술이다. WebSocket을 그대로 사용해도 좋지만, Socket.io에는 편의 기능이 많이

🚀 Start Channel

채널 초대

Start ChatBox mention reverse scroll ImageDrag & Drop

이제 가장 채팅 앱의 메인페이지의 레이아웃을 그려보자.

웹팩은 어플리케이션의 모든 파일들을 묶고 압축하여 하나의 결과물을 만들어주는 번들러이다.💡 번들러 : 각각의 모듈들에 대해 의존성 관계를 파악하여 하나 또는 여러개의 그룹으로 묶어주는 웹 개발 도구그리고 이를 통해 HTTP 요청 수를 감소하여 웹사이트 성능을 향상시킬

기술 공부를 하는중 웹소켓에 대해 알게 되었다. 그리고 Socket.io를 이용하여 실시간 채팅 기능과 같은 양방향 통신을 구현할 수 있다는 사실을 알았다. 지금까지는 이와 관련된 프로젝트를 진행해본 적은 없었는데 마침 제로초님의 강의(https://www.i

디바운싱과 스로틀링은 애플리케이션 및 브라우저 성능을 최적화하기 위한 자바스크립트 기술이다. ✅ 필요한 기술인가?예를 들어 마우스 움직임, 스크롤링, 검색창 텍스트 입력 등에 의해 발생하는 이벤트가 있다.이런 상황에서 모두 이벤트 발생을 처리하면 다음과 같은 문제점이

useTransition 과 useDeferredValue는 React 18에서 도입된 새로운 훅이다. React 18에서는 동시성이라는 새로운 핵심 개념을 도입했다. React 18 이전에는 React의 렌더링은 동기식이었다. 즉, React가 렌더링을 시작하면 구성

React 공식문서를 읽다보니 조금 생소한 훅이 있었다. 바로 useImperativeHandle 이라는 훅이다.imperative: 피할수 없는분명 쓸모있는 훅이니까 React에서 제공하는 것일테니 한 번 알아보자~✅ 공식 문서useImperativeHandle은 r

가장 많이 사용하면서도 깊게는 알지 못했던 hook이 바로 useEffect였다. 그러다 useEffect의 동작원리, 문제점 등에 대해 공부하다보니 자연스럽게 useLayoutEffect라는 훅을 알게 되었다. 둘의 기능은 같지만, 명확한 차이점을 구분할 줄 알아야한

🚀 Start useQuery의 속성인 isLoading, isError를 통해 데이터 상태를 UI로 구현하여 사용자 경험을 개선시킬 수 있었다. 하지만, query 요청이 필요한 컴포넌트마다 useQuery의 속성을 사용해야하므로 이는 비효율적이라는 생각이 들었다

지금까지 여러방법으로 스타일링을 진행하였다. 가장 일반적인 방법으로는 CSS, Module CSS, SaSS 그리고 요즘들어 가장 간편하게 사용하고 있는 TailwindCSS, 마지막으로 간단하게 JS파일에 작성하는 Styled Components가 있었다.코드를 작성

지연 평가 + Promise - L.map, map, take

https://gingerkang.tistory.com/123

GraphQL을 사용하기 위해서는 반드시 알아야할 개념이 있다. 바로 Resolvers, Schema 이다. GraphQL의 API를 설계하기 전에 항상 사용할 스키마를 먼저 정의해햔다. 왜냐하면 GraphQL 쿼리의 형태는 리턴되는 값과 거의 일치한다. 어떤 필드를

🚀 Start 앞서 구현해본 쿼리 무효화를 통한 데이터 업데이트는 한가지 단점이 존재한다. 아래의 network 관리창을 확인해보면 appointments 데이터가 두번 통신한 것을 확인할 수 있다. 왜냐하면 한번은 기존의 데이터가 요청되었다가 무효화되었고, 새