Frontend

createPortal {createPortal(children, domNode, key?)} createPortal이란 게임 포탈에 나오는 것처럼 '선택된 dom 노드'에 자식요소를 렌더링할 수 있게 해줍니다. 첫번째인자에는 렌더링하고싶은 자식 요소를, 두번째인자에는 렌더링할 dom 노드를 입력합니다. (세번째 인자는 포탈의 구별 key인데 react query의 key같은 역할을 합니다. 선택사항이기도 하고 보통은 안쓰이는 듯 합니다.) 구현과정 Modal.tsx 작성 /* eslint-disable react/jsx-no-useless-fragment */ import { Dispatch, SetStateAction } from 'react'; import { createPortal } from '..

문제점 이번 프로젝트에서는 아이디찾기페이지와 비밀번호찾기페이지가 분리되어있지않고, 통합되어있었습니다. 통합된 페이지안에서 아이디 찾기 버튼을 누르느냐, 비밀번호 찾기버튼을 누르느냐에 따라 컴포넌트만 설정시켜주면 됩니다. 이건 문제가 아니었습니다. 문제는, 아이디찾기버튼을 누르면 라우팅이 된다음 아이디찾기컴포넌트가 나와야하고, 비밀번호찾기버튼을 누르면 라우팅이 된다음 비밀번호찾기컴포넌트가 나와야하는데, 이 두 컴포넌트가 한 페이지에 있으니 라우팅을 어떻게 시켜야하는지입니다. 조금은 애매했습니다. 해결책 제가 생각한 방법은 두가지였습니다. 1. 이전에 아이디찾기 or 비밀번호 찾기 버튼을 클릭하면 state로 값을 저장시키고, 아이디/비밀번호찾기 페이지에서 저장된 state를 불러와서 해당 state에 따라..

다음과 같은 자동완성기능을 구현해야했슴다. 문제는.. 유저가 행정구역의 정식명칭을 철자 그대로 입력할것이라고 기대하면 안된다는 것이죠... 예를들어 유저가 '서울', '서울시'등 정식적인 행정구역명을 입력하지않더라도 '서울특별시'의 데이터로 필터링돼야 합니다. 문제는 여기서 발생합니다. JavaScript의 메서드인 includes는 저러한 기능을 수행하기에는 너무너무 부족합니다. 예를들어 유저가 입력한 '서울'은 includes메서드로 '서울특별시'를 필터링할 수 있겠지만, 만약 유저가 '서울시'를 입력한다면 '서울특별시'로 걸러주지 못합니다.. 시/군/구 단위 뿐만 아니라 법정동 단위도 문제였습니다. 단편적인 예로 목동같은경우 목1동, 목2동..등등 이있고 창신동도 정식적인 명칭으로 세분화하자면 '창..

출처: https://www.youtube.com/watch?v=d8CTMD2aang 위 유튜브 영상을 보고 정리한 글입니다. debounce 디바운스는 이벤트중에서도 특히 연속된 이벤트를 처리할때 유용하게 사용됩니다. 실생활에 가까운 예시를 들자면, 네이버의 검색창의 자동완성 기능이 있습니다. 사용자의 키보드이벤트가 끝난 시점을 자동완성기능에 굳이 debounce를 사용해야 합니까? '자동완성'이라는 키워드로 자동완성을 나타내기 위해서는 onChange를 통해 ㅈ, 자, 자ㄷ, 자도, 자동, 자동ㅇ....등등 모든 연속적인 키보드 이벤트마다 request를 보내기보다는 자,자동,자동완,자동완성 등 의미있는 철자를 통해 request를 보내는 것이 서버비용에도, 클라이언트의 성능상 문제에도 적합할 것입니..

useContext + Context API 일반적으로 클라이언트 상태관리 라이브러리 혹은 context API를 사용하지 않는한 props는 부모 컴포넌트에서 하위 컴포넌트에게 단계를 거쳐서 내려줘야 한다. 아래와 같이 2~3단계라면 뭐 그냥 넘어갈 수도 있겠지만, 이정도 규모이상의 프로젝트가 되면 props를 일일히 내려주는게 번거로워진다. 내려주는 것 뿐 아니라, 유지보수할 일이 생기면 저 prop를 사용하는 컴포넌트를 일일히 다 고쳐줘야한다는 수고스러움도 있다. Context API는 일일히 props를 전달하지 않아도 필요한 곳에서만 사용할 수 있도록, 해준다. 하지만 다음과 같은 문제때문에 남발하는 것은 좋지않다. Context를 사용하면 컴포넌트를 재사용하기 어려워질 수 있다. -> cont..

const validateCertificate = (password: string) => { if (password.trim() === '') { return null; } if (certificationNum === password) { return 'pass'; } return 'fail'; }; const handleSmsVerification = () => { setSmsVerification([ validateCertificate(certificatedNumText), '인증번호가 일치하지 않습니다.', ]); }; 핸드폰 문자인증에서 문자가 올바르게 인증되었는지 확인하는 로직이고, 이렇게 set된 state를 하위 컴포넌트에게 넘겨주려 했다. 그런데 다음 코드에서 타입오류가 났다. 알고보니, ..

공용컴포넌트 만들어보기(카카시하기) 프로젝트중 팀원분이 공용으로 쓰이는 HTML, CSS를 묶어 컴포넌트화시킨것을 보고 따라해봤다. 원리는 어렵지는 않았지만, 여러곳에서 쓰이는 컴포넌트를 쉽게 사용할 수 있게 해주는 아이디어가 좋아보였다. 팀원분은 flex에 자주 쓰이는 설정들이나 공용에서 쓰이는 버튼같은 것들을 따로 묶어 컴포넌트화하셨는데 나도 마침 로그인페이지에 적용할 구실이 생겨서 연습해봤다. (태진님 좋은 기술 전파해주셔서 감사함다.) 우선, 나는 회원가입/로그인페이지에서 쓰일 비슷비슷하지만 조금씩은 다른 버튼컴포넌트가 필요했다. 색상이랑, border-round만 다른거아냐?? 싶으시겠지만, 폰트크기나 색 그리고 font-bold처리도 약간약간씩 달랐다; 로그인페이지밖에 안쓰이지만, 로그인페이지..

Intercepting Routes Intercepting Routes은 현재 페이지의 레이아웃을 유지하면서 현다른 페이지의 경로를 불러올 수 있게 해준다. -> 예를 들어 피드 내에서 사진을 클릭하면 피드에 오버레이되는 모달이 사진과 함께 표시되게 하고싶을때 Next.js는 /feed 경로를 가로채고 이 URL을 '마스킹'하여 /photo/123을 대신 표시한다. (경로는 바뀌지만 화면에 비추는 모습은 마치 모달) NextGram nextgram.vercel.app Convention Intercepting Routes는 (..)컨벤션을 따르면 된다. Next개발팀이 ../에서 영감을 받은 듯 하다. (..) 는 파일 시스템이 아니라, route segment다. -> 경로로 작용한다는 소리 사용방법 ..