본문 바로가기

Frontend

 (278)
TIL 23.09.01 supabase 데이터 테이블 세팅 에러 문제점 데이터 테이블을 세팅할 때, insert로 값을 넣어주려고 했는데 다음과 같은 에러가 발생했다. 이는 유일하지 않은 키를 primary key 로 설정해놔서 insert 가 되지 않았음. 데이터 테이블 설계를 잘못해서 생긴 문제였다. code: "23505", details: "Key (product_uid)=(”키 넘버”) already exists.",…} code: "23505" details: "Key (product_uid)=(”키 넘버”) already exists." hint: null message: "duplicate key value violates unique constraint \"like_product_pkey\"" 시도해본 것 & 해결방안 유일한 값을 다루는 데이터 필드를..
TIL 23.08.31 기술 interview (9) 9. 데이터 10,000개를 가지고 무한 스크롤 구현시에 가장 중요하게 고려해야 할점은? 중요하게 고려해야 할 점은 여러가지가 있겠지만, 상황에 따라 다른 것 같다. 지금 내가 하고 있는 프로젝트는 next.js 로 진행하는데, SSR 이기 때문에 SEO 에 부정적인 영향을 미치는 무한 스크롤을 구현하는 것은 큰 의미가 없다. 일단 몇 가지 찾아보니, 1. 필요한 데이터 양만 로드 되도록 하는 것. 한번에 10000 개를 렌더링 하는 것이 아닌, 필요한 만큼을 렌더링 해주어야 한다. 2. 스크롤을 내릴 때 그 위치를 기억하고 새로고침이나 페이지 이동을 했다 돌아왔을 시에도 기억하고 있어야 한다. 3. 데이터 양이 많으므로 로딩할 때 사용자가 이를 인지할 수 있도록 로딩 표시에 대한 처리를 해야한다. 클라..
TIL 23.08.29 next.js 동영상 삽입하기 next.js 에 동영상을 삽입하려면 일반적인 방식인 src 하위폴더에 넣고 절대경로로 import 하는 것이 안된다. 해야하는 것 1. 라이브러리 설치하기... 대체 왜 라이브러리까지 설치해야 하나 싶지만 일단 해야되니까.. yarn add next-videos 2. next.config.js 에 다음 코드 추가 // video const withVideos = require("next-videos"); module.exports = withVideos(); 3. 동영상폴더를 public 안에 넣은 뒤 상대경로로 import 하기
TIL 23.08.28 기술 interview (5)~(6) 5. useRef에 대해 설명해주세요. useRef 는 React hook 중 하나로, 컴포넌트의 렌더링과 상관없이 값을 일정하게 유지되게 한다. useRef 를 사용하여 DOM 요소에 접근하고, DOM 조작이나 이벤트 처리가 가능하다. 또한 이전 값을 저장해서 상태가 변경될 때 비교할 수 있다. 6. useEffect의 실행 순서에 대해 설명해주세요. 1. 컴포넌트가 렌더링 되면서 useEffect 훅이 실행된다. 2. useEffect 안에 전달된 콜백함수가 실행된다. 이는 최초 렌더링 될때와, 의존성배열 안의 값이 변경 될 때 실행된다. 3. 이전 렌더링 시 실행되었던 cleanup 함수가 실행된다. 이전 콜백함수에서 생성된 리소스를 정리하거나 이벤트 리스너를 제거하는 작업을 한다. 최초 렌더링 시..
TIL 23.08.28 리액트 달력 라이브러리 react-calendar 리액트 달력 라이브러리 React calender 개발자 깃허브 참고 https://github.com/wojtekmaj/react-calendar/blob/main/package/README.md 1. 라이브러리 설치 yarn add react-calendar 2. date 를 원하는 형식으로 지정해줄 라이브러리 설치 (moment 등 여러가지가 있으나 나는 date-fns 사용함) yarn add date-fns 3. 다음과 같이 코드를 작성한다. 나는 일일미션이 있는데, 이에 해당하는 날짜에 highlight 되어야 해서 marks 에 해당하는 날짜 로직을 집어넣는 식으로 함수를 작성하였다. 각자 필요사항에 따라 적용하면 될 듯. format(date, "d")} // 일 제외하고 숫자만 보임 ti..
TIL 23.08.24 좋아요 버튼 및 숫자 구현 [좋아요 버튼 구현하기] 좋아요 구현이 이렇게 어려운 일인줄 몰랐는데 시간이 꽤 걸렸다. 만들고 나서도 리팩토링이 필요한 코드라는 것을 절실하게 느꼈지만 일단 기능은 동작하니까.. 어떻게 굴러가게 만들었는지 정리해보려고 한다. 좋아요 로직 1. 유저가 로그인한다. [로그인 한 유저에게만 좋아요를 누를 수 있는 권한이 부여됨] // 현재 유저정보 fetch const fetchUser = async () => { try { const { data: { user }, } = await supabase.auth.getUser(); if (!user) { setUser(false); } else { setUser(user); console.log(user); fetchUserLike(user); // 유저 정보..
TIL 23.08.23 기술 interview (3)/ Swiper Custom 하기 3. Redux 말고 다른 전역 상태관리 아는 것 하나와 차이점을 말해주세요. Recoil 은 페이스북에서 개발한 상태 관리 라이브러리로, React 컴포넌트 트리의 어디서든 상태를 공유할 수 있다. 리액트의 컴포넌트 컴포지션과 잘 통합되며, 비동기 처리 및 코드 스플리팅과 같은 고급 기능을 제공한다. Recoil 은 Redux 와 다르게 상태를 atom이라는 단위로 정의하고, 컴포넌트는 이를 선택적으로 읽고 쓸 수 있다. 또한 비동기작업을 할 때, Recoil 은 미들웨어가 따로 없으나 Redux 는 Redux Thunk 와 같은 미들웨어로 비동기 작업을 처리한다. navigation 은 .swiper-button-next swiper-button-prev 클래스 네임을 가지고 있으며, paginati..
TIL 23.08.22 기술 interview (1)~(2) 1. 상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요? 상태관리란 데이터를 관리하는 방법으로, 여러 컴포넌트간에 주고받는 데이터들을 한 곳에 관리하는 방법이다. 상태관리를 하는 이유에는 데이터가 업데이트 됨에 따라서 동적으로 UI를 관리할수 있고, 중앙에서 상태관리가 이루어지면 여러 컴포넌트에서 상태를 공유할 수 있다. 지역적으로 상태관리를 할 때는, useState 훅을 사용하여 state에 따른 컴포넌트 내에서 상태관리를 한다. 전역적으로 상태관리를 할 때는, Redux 상태관리 라이브러리를 사용하여 중앙에서 상태관리를 한다. 2. Redux가 무엇인가요, 왜 Redux를 사용하시나요? Redux란 상태관리 라이브러리며 주로 React, Vue, Angular 와 같은 프레임워크..

티스토리툴바