본문 바로가기

Frontend

 (290)
TIL 23.09.06 react-query 리팩토링 중간발표가 끝나고 전체적인 UI를 반응형으로 변경하려고 한다.. 그 전에 정말로 해야될 것은 리팩토링 이었음. supabase 를 컴포넌트에 그대로 갖다 쓴 죄로... 이번에 typeScript + react-query 콜라보로 리팩토링 작업을 했다. 단순히 정보를 받아오고 갱신하는 건 괜찮은데, 그밖에 내가 추가동작을 해야하는 것들 (좋아요) 같은것들은 DB 설계의 중요성도 뼈저리게 느끼게 만들었다. 같은 조 분께서 supabase 로 타입정보도 잘 불러와주시고, auth 훅도 만들어주셔서 남발하는 코드 없이, 상대적으로 편하게 작업할 수 있었다. 오늘 한 작업을 간단하게 요약하면, 오늘은 한 페이지에서 다양한 제품의 좋아요 숫자를 업데이트 하는 로직을 react-query로 리팩토링했다. 일단 물품 ..
23.09.05 기술 interview (11) / 프로필 업데이트 구현 11. 동기와 비동기의 차이에 대해 설명해주시고 비동기프로그래밍의 필요성에 대해 답변해주세요. 동기와 비동기의 차이는, 일단 동기는 프로그램이 순서대로 실행되는 것으로 현재 작업이 끝날 때 까지 기다린 후 다음으로 넘어가는 것이다. 비동기는, 작업이 순서대로 진행되지 않고 독립적으로 진행된다. 작업이 완료되면 콜백함수 또는 promise 로 결과가 처리된다. - 비동기 작업이 필요한 이유는, 앱의 성능 향상 및 대용량 데이터 처리 및 네트워크 작업에 유용하다. - 또한 속도도 동기 프로그래밍에 비해 빠르다. - 비동기 작업을 하면 동시에 여러가지 작업을 처리 할 수 있다. 프로필 업데이트 구현 프로필 업데이트는 firebase 로만 해 봤는데, supabase storage 를 통해 이번에 기회가 되어 ..
TIL 23.09.04 기술 interview (10) 중간발표 회고 10. Javascript의 호이스팅에 대해 설명해주세요. 호이스팅은 코드가 실행되기 전, 변수 및 함수 선언이 스코프의 최상단으로 올라가는 것을 뜻한다. 변수는 선언부와 할당부를 나누어 선언부를 끌어올리고, 함수선언은 함수 전체를 끌어올린다. var랑 함수와는 다르게 let과 const가 호이스팅된것 같지 않은 이유는 초기화 단계 이전인 선언단계까지만 진행된 상태이므로 선언문을 만나기 전까지 변수를 사용할 수 없기 때문이다. 변수 호이스팅 console.log(x); // undefined var x = 5; 함수 호이스팅 sayHello(); // "Hello, World!" function sayHello() { console.log("Hello, World!"); } 중간발표 회고록 1. 처음 진..
TIL 23.09.02 supabase Storage 에 이미지 업로드시 unauthorized 에러 문제점 프로필 이미지 등록 기능을 구현하던 중, supabase Storage에 이미지를 업로드할 때, unauthorized 에러가 발생하여 이미지 업로드가 되지 않았다. 시도해본 것 & 해결방안 authorized 권한 설정에 대한 문제라고 생각해서, 유튜브에 검색해서 해결방안을 찾았다. 프로필 이미지를 넣는 Public storage 에 들어가서, storage policies 설정을 해주면 된다. Policy name 을 지정해주고, 허용할 operation 을 선택한 뒤, 다음과 같이 설정을 저장해준다. Storage 에 사진이 잘 들어가는 것을 확인할 수 있다.
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 함수가 실행된다. 이전 콜백함수에서 생성된 리소스를 정리하거나 이벤트 리스너를 제거하는 작업을 한다. 최초 렌더링 시..

티스토리툴바