profile
프론트엔드 엔지니어로 거듭나기 프로젝트

알고리즘 이진 탐색 구현하기

이진 탐색은 알고리즘에서도 많이 보이는 형태이다. 데이터가 정렬된 상태에서 빠르게 검색해야 하는 경우에 유용하다. 또한, 데이터베이스나 정렬된 리스트에서 특정 값의 위치를 찾을 때 이진 탐색의 효율성은 증가한다.그로써 이진 탐색을 고민하다가 공부한 거를 토대로 구현을

2024년 2월 6일
·
0개의 댓글
·
post-thumbnail

프론트엔드 기술 질문 정리 - Javascript

크게 전역 스코프에 대해서 차이가 있는데 var는 재할당 재선언이 가능하고 선언 위치보다 위에 있어도 호출이되는 호이스팅이 가능합니다. let은 재할당은 되지만 재선언이 되지 않는 키워드이고 const 재선언 재할당 둘 다 불가능하고 주로 변하지 않는 상수값으로 많이

2024년 2월 5일
·
0개의 댓글
·
post-thumbnail

로그인, 회원가입 React-Hook-Form으로 변경하기

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

2024년 2월 3일
·
0개의 댓글
·
post-thumbnail

프론트엔드 기술 질문 정리 - CS 지식

HTTP는 클라이언트와 서버 간에 데이터를 주고받기 위한 프로토콜이자 서로 다양한 메서드를 사용해서 텍스트 형식으로 클라이언트는 서버로 요청을 보내고 서버는 그에 맞는 상태 코드를 포함해서 응답을 보냅니다. 둘 다 각각 헤더에는 필요에 따른 메타데이터가 들어가고 본문에

2024년 1월 31일
·
0개의 댓글
·
post-thumbnail

Next.js 이미지 최적화에 대하여

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

2024년 1월 31일
·
0개의 댓글
·
post-thumbnail

Magic POS 프로젝트 배포하기

현 시점 기준 기획 단계에서 구현하기로한 기능들이 테스트까지 마치고 완성되어 배포하려고 한다.배포는 vercel에서 진행했고 호스팅kr 에서 도메인을 구입했다.도메인을 구매할 때 .site .shop 등 보다는 .com 을 원했고 우리 팀원 모두 만장일치 해서 결정됐다

2024년 1월 30일
·
0개의 댓글
·
post-thumbnail

Framer-motion으로 애니메이션 다루기

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

2024년 1월 29일
·
0개의 댓글
·
post-thumbnail

Next.js에서 PWA 기반 FCM 푸시 알림 보내기

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

2024년 1월 26일
·
1개의 댓글
·
post-thumbnail

Next.js로 PWA 기술 적용하기

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

2024년 1월 25일
·
0개의 댓글
·
post-thumbnail

문의하기 기능 - 이메일 전송하기 (emailJS)

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

2024년 1월 24일
·
0개의 댓글
·
post-thumbnail

프론트엔드 기술 질문 - 자문 자답 (2)

DNS가 뭐에요?도메인을 컴퓨터가 이해할 수 있는 IP 주소로 변환하거나 반대로 IP 주소를 도메인 이름으로 변환하는 역할을 합니다.언급 할만한 키워드: 브라우저 입력에 행위, 브라우저 서버, GET 요청, 해당 본사 서버와 매핑Web Server를 설명해 보세요.HT

2024년 1월 23일
·
0개의 댓글
·
post-thumbnail

셀렉트 박스 커스텀 하기 (feat. react-select)

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

2024년 1월 22일
·
0개의 댓글
·
post-thumbnail

프론트엔드 기술 질문 - 자문 자답 (1)

현재 부트캠프 최종 프로젝트를 진행하면서 향후 받을 질문들과 면접 시 예상 질문들을 자문 자답해봤다.SSR은 매번 요청 시 서버에서 페이지를 렌더링하므로 항상 최신 데이터를 받아오고 서버에서 미리 HTML을 만들고 화면에 생성하다 보니 검색 엔진(SEO)의 최적화에 유

2024년 1월 19일
·
0개의 댓글
·
post-thumbnail

회원 인증 폼 관련 리팩토링 (로그인, 회원가입 등)

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

2024년 1월 18일
·
0개의 댓글
·
post-thumbnail

관리자 카테고리 사이드 바 만들기 (feat. zustand)

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

2024년 1월 17일
·
0개의 댓글
·
post-thumbnail

탑 스크롤 만들기 (feat. 이벤트 최적화 적용 - debounce, useCallback)

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

2024년 1월 16일
·
0개의 댓글
·
post-thumbnail

스크롤 애니메이션 구현 (Intersection Observer)

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

2024년 1월 14일
·
0개의 댓글
·
post-thumbnail

[개발 일지] 이슈 사항 - 서버 & 클라이언트 렌더링 구성 요소 비교 에러 (feat. Text content does not match server-rendered HTML)

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

2024년 1월 12일
·
0개의 댓글
·
post-thumbnail

[개발 일지] 메인 페이지 레이아웃 잡기 (크로스 슬라이더)

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

2024년 1월 11일
·
0개의 댓글
·
post-thumbnail

[개발 일지] 관리자/운영 모드 토글 버튼 만들기

현재 담당하고 있는 기능 중 관리자 모드와 운영 모드를 제어하는 역할을 맡게 돼서 토글 버튼을 구현 ON/OFF 형태로 만들어봤다.토글 기능: 기본 값은 관리자 모드이고, 토글 클릭 시 운영 모드로 전환되어 좌측 사이드바 (카테고리 섹션)가 사라지는 기능총 3개의 컴포

2024년 1월 10일
·
0개의 댓글
·