sharingStorage

useId 접근성 속성에 전달되는 특별한 ID를 만드는 hooks import { useId } from 'react'; function PasswordField() { const passwordHintId = useId(); Usage 접근성 attributes 를 위한 특별한 ID를 만들기 위해 몇개의 관련된 elements 에 대한 ID를 만들기 위해 모든 생성된 ID들에 대한 접두사를 지정하기 위해 클라이언트와 서버가 같은 접두사 ID를 사용하기 위해 Parameters useId는 어떠한 parameter도 존재하지 않습니다. Returns useId는 컴포넌트 내에 useId 호출과 관련된 특별한 ID string을 반환합니다. 주의 사항 useIdHook이므로 컴포넌트의 최상위 수준 이나 자..

들어가기전에.. nextjs는 13버전 이전과 13버전 이후가 완전히 다른 프레임워크라고 해도 무방할 정도로 큰 차이가 있습니다. 일반적으로 나와있는 아티클들은 구버전일 가능성이 높아서 공부하실 때 nextjs 공식문서 - Using App Router부분을 참고해서 크로스체크하시는걸 추천드립니다! 또한 제가 작성한 아티클이 틀린 부분이 없는지, 버전이 맞는지 잘 검수하려고 노력했지만 혹시 구버전에 대한 설명이 있다면 피드백주시면 감사하겠습니다. What? Next.js란 풀 스택 어플리케이션을 개발하기 위한 리액트 프레임워크입니다. Next.js는 번들링, 컴파일 등과 같이 React에 필요한 도구를 추상화하고 자동으로 구성하고 이는 곧 개발자에게 애플리케이션 개발에 집중하도록 도와줍니다. How? A..

React 커스텀훅 what ? 컴포넌트간의 hook 로직을 공유하기 위해 사용하는 사용자가 커스텀한 hook입니다. 다음은 공식문서에서 발췌한 예시 코드입니다. import { useState, useEffect } from 'react'; export default function StatusBar() { const [isOnline, setIsOnline] = useState(true); useEffect(() => { function handleOnline() { setIsOnline(true); } function handleOffline() { setIsOnline(false); } window.addEventListener('online', handleOnline); window.addEve..

쿠키를 사용한 상태관리 HTTP는 stateless 프로토콜이기 때문에 과거에 교환했던 리퀘스트와 리스폰스의 상태를 관리하지 않습니다. 이는 과거 상태를 근거로 한 현재 리퀘스트 처리는 어렵다는 것을 뜻합니다. 쿠키 이러한 stateless한 특성으로 인해 발생하는 문제를 해결하기 위해 도입된 시스템. 리퀘스트와 리스폰스에 쿠키 정보를 추가해서 클라이언트 상태를 파악하기 위한 시스템 서버에서 리스폰스로 보내진 Set-Cookie라는 헤더 필드에 쿠키를 클라이언트에 보존하고 다음 리퀘스트 요청에 자동으로 쿠키 값을 넣어서 송신 이로 인해 서버는 클라언트가 보낸 쿠키를 확인하여 어느 클라이언트가 접속했는지나 서버상의 기록을 확인할 수 있다. 쿠키 추가 공부 쿠키는 브라우저에 저장되는 작은 크기의 문자열로, ..

vite + yarn 환경에서 배포 전 모바일로 개발환경을 보고싶을 때의 방법을 기록해두려고 합니다. 많은 참고 링크가 있었지만 결국 너무 기초적인 부분을 해결을 안했어서 이 글이 누군가에게 도움이 되길 바라며,,, 0. 데스크탑과 모바일 같은 와이파이 연결 우선 기본적으로 모바일과 데스크탑이 같은 와이파이에 연결돼있어야 합니다. 제일 먼저 yarn dev로 로컬환경을 실행했을 때 이렇게 나오는데 이걸 무시하고 별짓을 다하고 돌아보니 --host 옵션을 사용해야 한다는 것이였습니다. 아마 이걸 놓치지 않았다면 아래에 과정들을 아무것도 안해도 됐을텐데 오히려 좋네요 1. yarn dev --host 명령어 사용 2. cmd 창을 켜서 ipconfig 명령어 사용 3. 모바일로 IPv4 주소 + :5173 ..

styled-components를 사용하다보면 너무 많은 컴포넌트가 생성하면서 아래와같이 classname으로 구분이 힘들어질 때가 생깁니다. 이때마다 안의 CSS 내용을 보고 파일을 찾아갔었는데 그래서 좋은 방법이 없을까 하고 찾아보다가 이에 해당하는 bable plugin이 존재한다는 것을 찾게 되었고 적용하는 방법을 기록해볼까 합니다. Create-react-app 환경 create-react-app에는 다음과 같이 import하면 끝 import styled from 'styled-components/macro'; 이번에 vite를 사용하며 초기세팅해본 결과 cra와는 다르게 vite.config에도 동시에 설정해야되는 것이 많음 (ex: tsconfig baseUrl ) 설정과정 vite-plu..

들어가며 현재 모던 프론트엔드에서 대부분의 리액트 코드는 서버와의 통신 상태에 따라 View를 나누어 보여주어야하기 때문에 아래와 같이 작성하는 경우가 빈번합니다. /** React */ return ( {isLoading && } {apiError && } {data && } ) 기본적으로 React 17에서의 Suspense는 Data Fetching을 위한 Pending Handler가 아니라, 기존의 워터폴 방식으로 이루어져있는 Render방식을 개선해주는 역할이기때문에, 위의 상황에서 활용하기에는 문제가 있으나, React-Query나 Recoil에서 React 18부터 정식 릴리즈되는 Suspense를 활용해 명령형이 아닌 선언형으로 서버와의 통신 상태에 따라 View를 나누어 보여줄 수 있게..

Package Manager 패키지 매니저란? 패키지를 관리하는 작업을 자동화, 안전처리 하기 위해 사용되는 도구 패키지 관리란 ? 프로젝트가 의존하고 있는 패키지를 효과적으로 설치, 관리, 갱신, 삭제하는 작업 패키지 매니저가 필요한 이유 ? 어떤 패키지가 동작하기 위해서 필수적으로 필요한 다른 패키지를 의존성(dependency)라고 하는데 이는 수동으로 관리하기 불가능하기 때문에 각각 패키지가 자신의 의존성 정보를 가지게 하여 패키지 매니저가 자동으로 설치해준다. 패키지는 코드의 배포를 위해서 사용되는 코드 묶음이며 일반적으로 라이브러리, 실행파일, 컴파일한 binary, 환경설정(configuration)정보, 의존성 정보 등을 포함한다. 자바스크립트 패키지 매니저 프론트엔드 개발자가 가장 흔히 ..

label 태그와 그 역할 태그사이에 위치한 text, checkbox, radio 등 클릭 가능 영역이 텍스트로 확장됩니다 label for 속성을 통해 다른 요소와 결합할 수 있으며, 이때 요소의 for속성값은 결합하고자 하는 요소의 id 속성값과 같아야 합니다. 이러한 요소는 브라우저에 의해 일반적인 텍스트로 렌더링 되지만 사용자가 마우스로 해당 텍스트를 클릭할 경우 과 연결된 요소를 곧 바로 선택할 수 있어서 사용자의 편의성을 높일 수 있습니다. 사용예시 label의 for 속성이 input의 id속성과 일치하므로 “분” 텍스트를 클릭해도 input에 focus가 맞춰지는 것을 볼 수 있습니다. 분/시 변환기 분: setMinute(e.target.value)} /> 사용예시 2 label 태그의..

팀 프로젝트를 진행하는 도중 매일 9시부터 10분씩 데일리 스크럼을 하는데 팀원 한분이 저에게 왜 proccess.env.PUBLIC_URL을 사용하냐고 여쭤보시더군요. 일반 public/asstes/ ,,, 으로 사용해도 되는데 말이죠 분명 저는 전자로 배우고 사용했었는데 막상 질문 받으니 한마디도 할 수 없었어요. 그래서 CRA(create-react-app)의 문서를 뒤져보고, stack overflow와 github의 create-react-app/issue 도 참고하여 이해한 것을 바탕으로 글을 적어봅니다. create-react-app은 CRA로 명칭해서 글을 작성하겠습니다. 1. public폴더와 src폴더 이 문제를 시작하기 앞서 CRA을 통해 만들어진 파일 구조와 쓰임을 확인해보겠습니다...