전체 글 (281) 썸네일형 리스트형 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 함수가 실행된다. 이전 콜백함수에서 생성된 리소스를 정리하거나 이벤트 리스너를 제거하는 작업을 한다. 최초 렌더링 시.. 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.. 이전 1 2 3 4 5 6 7 ··· 36 다음
