자바스크립트 언어를 사용하는 개발자라면 기본적인 동작원리를 알고 있어야지 더 효율적으로 프로그래밍을 할 수 있다.기본적으로 싱글 스레드 언어이기 때문에 한 번의 하나의 작업만 처리할 수 있다.예를 들면, 여러 집에서 짜장면을 주문했고 배달원은 먼저 주문한 첫 번째 집에

코드의 간소화와 모듈화를 함으로써 보여지는 가독성을 극대화하기 위해 Custom Hook에 React Query를 적용시켜봤다.아울러 현재 v3 를 적용시켰으나, 두 단계를 점프업해서 v5로 마이그레이션을 해봤다.v3 에서는 useQuery를 useQuery(key,

기존에는 별도의 form 라이브러리를 사용하지 않고 직접 onChange를 관리하는 훅과 유효성 검사를하는 훅을 별도로 만들어서 관리했는데 이 둘 모두를 관리해 줄 뿐더러 코드가 더 간결해질 수 있다는 react-hook-form 라이브러리가 있었다는 사실을 뒤늦게 알

Next.js 는 Image 컴포넌트를 제공하여 이미지 최적화를 기본으로 지원하고 있다. 그러기에 더 편하게 개발할 수 있도록 부담을 덜어준다.이미지 최적화는 빌드 타임이 아닌 런타임에 요청이 들어왔을 때 최적화를 진행한다. 그렇기 때문에 최초 1회 요청은 응답이 느릴

소개 페이지 최종 시안이 나와서 작업을 바로 들어갔다. 중간에 와이어 프레임대로 짜 봤지만 역시 전체를 다 바꿔야 했고 css keyframe으로 하기엔 리소스가 많이 들어서 framer-motion 라이브러리를 사용하기로 했다.마우스 스크롤 y축은 콘솔에 찍어보며 계

현재 구현 완료된 키오스크 반응형 웹 페이지를 실제 앱 화면처럼 보이도록 PWA를 적용시킨 전체하에 웹이 아닌 앱에서도 푸시 알림을 보내고자 FCM을 사용했다.사실 AOS에서는 푸시 알림이 왔지만 IOS에서 푸시 알림을 받으려면 Safari에서 웹 사이트에 접속하고 가

메뉴를 주문하면 완료됐다는 푸시 알림을 구현하고자 리액트 네이티브는 광범위 하다고 느꼈고 PWA라는 기술을 선택해 구현했다.프로그레시브 웹 어플리케이션으로 앱처럼 보이고, 직접 홈 화면에 저장도 가능하고, 스플래시 화면도 있고, 오프라인 지원 등등 모든 작업을 수행할

유저가 사이트를 이용 하다가 불편한 사항이 생기면 해결 방법을 제시해야 하는데 이메일 전송으로 고객의 소리를 받기로했고 이를 간편하게 하고자 emailJS 라이브러리를 사용했다.https://www.emailjs.com/ 접속회원가입 후 관리 페이지로 들어감E

UI/UX 디자이너 님과 회의 중 일부 페이지 시안이 수정되어 셀렉트 박스도 기본 스타일이 아닌 직접 디자인을 해야하는 시안으로 변경되어 직접 커스텀 아니면 내부 option 디자인을 건드릴 수가 없기에 셀렉트 박스를 커스텀 하기로했다. POS 관리자 페이지를 제작하

현재 진행 중인 프로젝트에서 맡은 파트 중 일부 로그인 & 회원가입, 비밀번호 찾기 등 인증 관련 파트가 있고 기능 개발은 끝난 뒤 다른 기능을 개발하던 도중 필요한 코드를 참고 하려고 들어가봤더니 너무 맘에 들지 않길래 당장 리팩토링 에 들어갔다.기존 개발 일지: 회

평소에는 포스로 운영하고 관리 토글을 눌렀을 때, 관리자 모드로 전환되어 관리자 페이지가되는 형태의 웹사이트에서는 빼 놓을 수 없는 관리자 카테고리 그러기 위해서는 카테고리 사이드 바가 필요했다.※ 구현 시 고려해야할 조건사이드 바 안에도 토글이 들어가서 기존 토글 상

홈 페이지 하단 영역이 길어지는 만큼 사용자 경험 측면을 고려해서 Top 버튼 이 필요했다.먼저 show/hide 처리를 하기 위해 useState로 버튼 상태 관리를 진행했고 window 내장 API인 scrollTo로 클릭 핸들러를 생성해서 페이지 상단으로 부드럽게

메인 페이지의 심심함에서 벗어나고자 스크롤 애니메이션을 덧붙였다.원래는 react-scroll-motion 라이브러리를 사용해 봤지만 css @keyframe 을 사용하는 게 더 익숙해서 별도의 라이브러리는 사용하지 않았고 스크롤 시 화면 감지를 위해 Intersect

클라이언트 전역 상태 라이브러리 zustand를 사용하다가 에러가 발생했다. 원인 supabase Authentication session API를 사용해서 조건부 렌더링을 하던 도중 해당 에러를 마주하게 됐다. zustand persist 스토리지의 저장하기 위

첫 진입 시 보여지는 마케팅(소개) 페이지 레이아웃을 디자이너분과 같이 잡았고페이지 내에서 분리해야할 컴포넌트를 나열 후 이를 토대로 섹션을 잡았다. 현재는 추가 구현 중인 상태이다.헤더의 역할은 로고 뿐이었다..임시 더미 데이터를 생성해서 가운데 영역의 들어갈 빈 내

Auth input, form 컴포넌트 모듈화 & 코드 리팩토링기존 form 양식에 중복되는 input이 많다 보니 form 전용 input을 재사용 하기 위해 별도의 컴포넌트로 분리하면 어떨까라는 생각을 했었다.각 input 속성으로 들어 갈 내용들을 객체로 정리 하

Auth 기능 개발 (회원가입, 로그인, 로그아웃 등)공공데이터포털 사업자등록번호 조회 API 연동회원가입을 하려면 이메일, 비밀번호 외로 사업자등록번호 11자리를 입력 후 인증이 되어야 회원가입을 완료할 수 있다.그러기에 구현하는 사이트에 적합한 API를 제공해주기

API 라우터는 API를 호출할 수 있는 엔드포인트를 생성해준다. 파일 기반 라우팅과 동일하게 파일 기반으로 엔드포인트가 생성된다. pages/api 폴더 내부에 파일을 생성하고 함수를 작성하면 함수를 기반으로 API를 내려줄 수가 있다. 페이지 라우터 코드 예시

Next.js는 데이터를 가져와서 페이지를 렌더링하는 방법에 대한 여러 옵션을 제공한다. 그 중에서도 getServerSideProps & getStaticProps & getStaticPaths 3가지에 대한 함수들이 가장 많이 쓰인다. SSR getServerS

타입 확장 타입 확장은 기존 타입을 사용해서 새로운 타입을 정의하는 것을 말한다. 기본적으로 타입스크립트에서는 `interface`, `type` 키워드를 사용해서 타입을 정의하고 `extends`, 교차 타입, 유니온 타입을 사용하여 타입을 확장한다.