🌱성호's 블로그

Deployment

[Netlify] FirebaseError: Firebase: Error (auth/invalid-api-key). 에러 해결

2023.08.31

🔥 발생한 에러 Uncaught FirebaseError: Firebase: Error (auth/invalid-api-key). 로컬에서는 잘 동작했지만 Netlify에 배포 후 확인해보니 다음과 같은 에러가 발생했다. 배포할 때 참고한 사이트(https://create-react-app.dev/docs/deployment#netlify) 원인 분석 해당 에러에 대해 글을 쓴 여러 블로그를 찾아서 읽어보니 다음의 경우에 이러한 에러가 발생한다고 한다. .env 파일이 루트에 없는 경우 API 키가 잘못된 경우 firebaseConfig를 export하고, 다른 JS 파일에서 import 할 경우 로컬에서는 잘 동작했기 때문에 Netlify에서 내가 설정한 환경 변수를 제대로 인식하지 못하고 있을 것 같..

Frontend/React

[React] 리액트의 Key에 대해 알아보자

2023.08.16

한 회사의 기술 인터뷰에서 리액트의 key에 대한 질문을 받았다. 해당 질문에 대한 대답을 하는 과정에서 그동안에 프로젝트를 진행하면서 리스트의 각 항목에 key를 할당하는 것을 너무 당연시한 것 같다는 생각이 들어 이에 대해 알아보려고 한다. 배열에서 데이터 렌더링 const people = [ { id: 0, name: 'Creola Katherine Johnson', profession: 'mathematician', }, { id: 1, name: 'Mario José Molina-Pasquel Henríquez', profession: 'chemist', }, ]; export default function List() { const listItems = people.map((person) =>..

Backend/Sequelize

[Sequelize] Sequelize findAndCountAll 메서드 사용 시 count가 예상보다 더 많이 카운팅 되는 문제 해결

2023.06.29

🔥 발생한 문제 getBoards 함수는 카테고리에 해당하는 게시글 전체를 페이징 처리하기 위한 함수다. (가독성을 위해 관련 없는 코드 일부 생략) /* 페이징 처리를 위한 함수들(참고용) const getPagination = (page, size) => { const limit = size ? +size : 10; // 가져올 데이터 양 const offset = page ? page * limit : 0; // 가져올 데이터의 초기 위치값 return { limit, offset }; }; const getPagingData = (data, page, limit) => { // count: where 절, 연결 관계 등의 조건에 부합하는 레코드의 전체 개수 // rows: where 절, 연결 관..

Frontend/React

[React] onKeyDown, onKeyUp 이벤트, 한글 입력 시 함수 두 번 실행되는 문제 해결

2023.06.21

🔥 발생한 문제 텍스트를 입력하고 엔터(Enter) 키를 누르면 목록에 새롭게 추가되고 input 창은 비워지도록 구현했는데 왠지 모르게 함수가 두 번 실행되면서 기존 텍스트의 마지막 글자가 목록에 추가되는 문제가 발생했다❗️ 원인 분석 검색해본 결과 이러한 문제는 크롬 브라우저에서 한글을 사용하는 경우에만 문제가 발생한다. (영어로 입력하면 키 이벤트가 중복으로 발생하지 ❌) 구체적으로 위 GIF를 보면 한글 입력 시 입력 중인 글자 아래 검은 밑줄이 생기는데 해당 밑줄이 있는 상황에서 키 이벤트가 발생하면 함수가 두 번 실행되는 문제가 발생한다. 한글의 경우 자음과 모음의 조합으로 만들어지는 조합 문자이기 때문에 글자가 조합 중인지 조합이 끝난 상태인지를 알 수 없어 생기는 문제이다. 🧯 해결 방법 ..

Frontend/JavaScript

[JavaScript] 무한 스크롤 구현하기(Intersection Observer API)

2023.05.19

무한 스크롤(Infinite Scroll)이란? 사용자가 페이지 하단에 도달했을 때, 콘텐츠가 계속 로드되는 사용자 경험(UX) 방식이다. 한 페이지 아래로 스크롤 하면 끝없이 새로운 화면을 보여주게 되고 이로 인해 많은 양의 콘텐츠를 스크롤 해서 볼 수 있다. 페이지네이션이 아닌 무한 스크롤로 구현하려는 이유❓ 상품 목록에서 상품을 보여주고자 할 때 페이지네이션, 무한 스크롤 중 무엇이 사용자 경험을 더욱 좋게 할 수 있을지 고민한 끝에 모바일 환경을 고려해서 무한 스크롤을 사용하기로 했다.(차후에 프로젝트를 반응형으로 리팩터링 할 계획🙇🏻) 또한, 다음 상품을 보기 위한 사용자의 클릭을 최소화하고 더 쉽게 다양한 상품을 볼 수 있을 것이라고 판단했다. 구현하는 과정 무한 스크롤을 구현하는 방법은 스크..

회고

[회고] Ticket Want it!(티켓원잇!) 프로젝트 회고

2023.05.14

1차 프로젝트 발표를 마친 후 리팩터링 시간을 가지면서 회고를 작성해보고자 한다. 프로젝트 소개 프로젝트 주제 온라인 티켓 구매 서비스를 제공하는 쇼핑몰 프로젝트명 티켓원잇!(Ticket Want it!) 제작 기간 2023.04.17 ~ 2023.04.28(1차 제작기간, 최소 기능 구현) 2023.04.29 ~ 2023.05.20(2차 제작기간, 기능 추가 및 리팩터링) 팀 구성 담당 포지션 : 팀원, 프론트엔드 Frontend(3명) : 이성호, 윤우정, 김윤중 Backend(3명) : 유하영, 이민영, 정혜린 기술 스택 구현 기능 회원가입, 로그인, 회원정보 수정 및 탈퇴 등 사용자 관련 CRUD 상품(제품) 관련 CRUD, 카테고리 관련 CRUD, 주문 관련 CRUD 장바구니 관련 기능(장바구니..

Frontend/React

[React] [Immer] "An immer producer returned a new value and modified its draft. Either return a new value or modify the draft." 에러 해결

2023.05.10

🔥 발생한 에러 Uncaught Error: [Immer] An immer producer returned a new value and modified its draft. Either return a new value or modify the draft. 에러를 번역하자면 immer 제작자는 새로운 값을 리턴하거나 기존 상태를 수정하거나 둘 중 하나만 해야된다는 것이다. 원인이 되는 코드 분석 immer 라이브러리를 사용하여 불변성 상태의 트리를 손쉽게 변경하던 중 위와 같은 에러가 발생했다. updatePerson((person) => person.mentors.push({ name, title })); 화살표 함수는 중괄호를 써주지 않으면 자동으로 return 키워드가 붙는다. 즉, 위의 코드는 기존..

Frontend/JavaScript

[Axios] Axios 인터셉터 적용하기

2023.05.10

인터셉터(Interceptors)란? then 또는 catch로 처리되기 전에 요청과 응답을 가로챌 수 있다. Axios 인터셉터를 적용하려는 이유❓ 토이 프로젝트를 진행하면서 서버에 토큰 인증을 필요로 하는 API 요청을 할때마다 HTTP Authorization 요청 헤더에 토큰을 넣어줘야하고 401(Unauthorized) 에러가 서버로부터 들어오면 토큰을 갱신해준 후 재요청을 보내는 과정을 한 곳에서 모두 처리하여 중복 코드를 제거하고 유지보수성을 향상시키기 위해 Axios 인터셉터를 적용하기로 했다. 사용자 지정 config로 새로운 Axios 인스턴스를 생성하여 사용하니 더욱 편리했다. (baseURL, timeout 설정) 적용하는 과정 1) Axios 인스턴스 생성 const instanc..

전체 글

[Netlify] FirebaseError: Firebase: Error (auth/invalid-api-key). 에러 해결

[React] 리액트의 Key에 대해 알아보자

[Sequelize] Sequelize findAndCountAll 메서드 사용 시 count가 예상보다 더 많이 카운팅 되는 문제 해결

[React] onKeyDown, onKeyUp 이벤트, 한글 입력 시 함수 두 번 실행되는 문제 해결

[JavaScript] 무한 스크롤 구현하기(Intersection Observer API)

[회고] Ticket Want it!(티켓원잇!) 프로젝트 회고

[React] [Immer] "An immer producer returned a new value and modified its draft. Either return a new value or modify the draft." 에러 해결

[Axios] Axios 인터셉터 적용하기

티스토리툴바