본문 바로가기

분류 전체보기

 (138)
[Next.js] query 사용, 반복적인 랜더링 발생 프로젝트를 진행하는 와중에 무한 랜더링 오류가 발생했다. 상황 로비 페이지에서 null로 유저가 계속 갱신되고 새로운 값을 받을 수 없다. 즉 state가 null로 계속 입력되고 있다는 뜻. 하지만 데이터가 캐싱되고 있어 리뷰 페이지에서는 유저아이디를 추출할 수 있다. 오류 의심목록은 다음과 같았다. 1. 페이지 구조 - 하나의 폴더에 하나의 페이지가 아니라 폴더-페이지+폴더-페이지 형태로 만들어서 경로가 꼬였는지 확인 - 사실 이 구조는 널리 사용되는 구조라서 혹시나 하는 마음에 확인해봤다. 2. UUID로 랜덤하게 생성되는 ID들의 typescript 오류 - supabase는 uuid를 text 타입으로 만든다. - uuid가 입력되지 않았다는 오류가 뜨기 때문에 제시된 의문이었다. - 하지만 u..
[면접대비] GET, POST GET, POST 방식의 차이점에 대해서 설명해주세요. GET는 데이터를 http 요청하여 받는 방식이고, POST는 데이터를 전송하는 방식입니다. POST는 요청의 본문(body)에 포함되어 전송됩니다. URL에 노출되지 않습니다. GET:데이터는 URL뒤에 파라미터가 포함되어 전송되고,URL을 통해 전송되므로 보안에 취약합니다. 따라서 POST 방식은 로그인에 대한 정보를 다루는 등 보안이 필요한 경우, GET은 검색 결과를 보여주는 등 보안이 필요 없는 경우에 사용됩니다. GET은 캐싱처리가 되나 POST는 캐싱처리가 되지 않습니다. GET, POST의 개념과 함께 데이터 흐름에 대해서 설명해주세요. GET는 데이터를 서버에서 클라이언트로 HTTP 요청하여 받는 방식이고, POST는 클라이언트에서 ..
객체의 공통부분 제거하기 객체 사이의 서로 공통점이 있을 때 그 공통점을 비교해서 공통 부분을 제외한 리스트를 다시 얻고 싶을 때가 있다. 내가 참여한 방의 리스트를 제외한 미팅룸 리스트를 얻고 싶었다. 처음에 생각한 것은 이중 필터링 처리였다. meetingroom.filter((room) => myRoom.filter((myroom) => myroom.room_id !== room.room_id)) 그러나 작동하지 않았다. 이후에는 for문을 사용해서 작성해 보았지만.. 역시 작동하지 않았다. useEffect에서 해당 값이 모두 할당된 뒤에 실행되게 해야 하는데, 이 부분이 어려웠다. 결국 한번씩 걸러내야 해서 filter를 사용하는건 맞았다. some을 제안받은 것처럼 find로 같은 로직으로 작동하게 할 수 있었다. 동..
JSX 구성 요소로 사용할 수 없습니다. 컴포넌트 사용 중 오류가 발생했다. JSX 구성 요소로 사용할 수 없다는 것이 무슨 뜻일까. map 안에서 컴포넌트를 사용하고, key를 지정하고, props를 넘기는 것도 매우 일반적인 과정이었다. 그러나 void 형식을 적용할 수 없다는 오류가 발생했다. 컴포넌트로 넣은 카드에 유표성 검사를 한다고 return을 넣은 경우가 많았는데, 컴포넌트의 return은 결과를 표현하는 것이 중요했다. 도중에 조건을 걸어 return을 넣는 것은 적절한 사용법이 아니므로 다시 리펙터링이 필요하다.
[면접대비] 동기와 비동기, 브라우저 작동 방식 동기와 비동기의 차이에 대해 설명해주시고 비동기프로그래밍의 필요성에 대해 답변해주세요. 동기는 하나의 작업이 끝나면 다른 작업이 실행됩니다. 비동기는 한번에 여러 작업이 시작되며 이전 작업이 끝날 때까지 기다리지 않습니다. 모든 작업을 동기로 처리한다면 긴 시간이 걸리는 작업이 있는 경우 그 작업이 완료될 때까지 마우스 클릭 틍의 다른 이벤트를 실행할 수 없게 됩니다. 비동기는 이런 상황을 개선하여 성능을 향상시켜 효율적이며 반응성을 높이기 위해 사용합니다. (스케일링? 확장성?) 예를 들어 promise의 경우 작업을 완료하기 전에 pending 값을 반환하여 비동기적으로 작동할 수 있게 합니다. 브라우저의 작동방식에 대해서 설명해주세요. url을 입력하여 들어갑니다. 처음 방문하는 홈페이지는 DNS ..
[면접대비] 무한 스크롤, 호이스팅 데이터 10,000개를 가지고 무한 스크롤 구현시에 가장 중요하게 고려해야 할점은 무엇인가요? keyword: 데이터 조회 방식 구현하는 방법이나 구현 시, 사용할 라이브러리를 예시 들기 모든 데이터를 한번에 조회한다면 사용자가 일부만 조회할 수도 있는데도 사용하지 않는 데이터까지 조회하게 됩니다. 이런 경우 메모리의 낭비가 발생하며 대상 자바스크립트를 모두 받고 난 뒤 랜더링이 일어나므로 랜더링 속도가 늦어지게 됩니다. 따라서 조회하는 부분에만 일부 데이터를 랜더링하는 방식으로 무한 스크롤을 구현하는 것이 좋습니다. react-window, react-interSection Observer 등의 라이브러리를 사용할 수 있습니다. Javascript의 호이스팅에 대해 설명해주세요. 실행 컨텍스트, 변수,..
[면접대비] 변수, Promise, Async/await var, let, const의 차이에 대해 알려주세요. keyword: 호이스팅 스코프(Lexical Scope) var은 재선언과 재할당이 모두 가능하다. let은 재선언은 불가능하고 재할당은 가능하다. const는 재선언과 재할당이 모두 불가능하다. 또한 var, let은 초기 값을 입력하지 않아도 되지만 const는 선언할 때 값을 입력해야 한다. 호이스팅이 발생하면 세가지 변수의 선언 모두 최상단에 위치한다. 그러나 var은 undefined로 정의되나 let과 const는 undefined로 정의되지 않으며 정의되기 전에 사용하면 오류가 발생한다는 차이점이 있다. Async/Await와 Promise의 차이에 대해 설명해주세요. keyword: 콜백 헬(callback hell) Async/aw..
github 레포지토리 갱신하기 깃헙에서 직접 레포지토리에 새로운 브랜치를 생성시켰거나, 다른 사람이 생성한 브랜치를 이용하려면 우선 브랜치를 새로 갱신해줘야 한다. 갱신하지 않으면 로컬에 해당 브랜치가 없고, 따라서 접근할 수 없어 invalid reference라는 오류가 뜬다. git fetch를 사용하면 목록이 갱신된다. 목록을 갱신하면 switch로 옮겨가 pull 이나 push를 할 수 있다.
[면접대비] useRef, useEffect useRef에 대해 설명해주세요. keyword: react hook 저장공간, DOM 참조 useRef는 값을 DOM을 참조하여 저장할 수 있습니다. console.log에는 확인이 되지만 바로 반영이 되지는 않고 새로고침을 하면 반영이 됩니다. 메모리에 값을 일시적으로 저장되어 불필요한 리랜더링을 하지 않는 장점이 있으며, 따라서 유저가 볼 수 없는 정보를 다루는데 사용됩니다. useEffect의 실행 순서에 대해 설명해주세요. keyword: useEffect 훅에 대한 정의 useEffect 실행되는 시점 훅에 대한 프로세스 useEffect는 외부 시스템과 동기화하여 데이터를 최신상태로 유지시켜주기 위해 사용하는 리엑트 훅입니다. dependancy array가 없으면 모든 DOM 요소가 추가될..
[면접대비] 전역 상태 관리, 버츄얼 돔과 리얼돔 Redux 말고 다른 전역 상태관리 아는 것 하나와 차이점을 말해주세요 keyword: Zustand - 타입스크립트 지원 간단한 구조, Recoil - 비동기 상태관리 경량화 Recoil: 전역상태를 관리하는 도구로 useState와 작동하는 방식이 유사해서 더 직관적입니다. 이 값은 중복되지 않고 전역에서 관리할 수 있습니다. useState와 유사한 구조이므로 redux에 비해 보일러 플레이트의 양이 줄어듭니다. redux는 dispatch관리를 위해 redux-thunk 같은 미들웨어가 필수적이나 recoil은 설치하지 않아도 됩니다. 버츄얼 돔과 리얼 돔의 차이를 설명해주세요. keyword: memory 트리구조 rendering 추상화 리얼 돔: 실제 HTML 문서의 표현으로 컴포넌트의 구조..

티스토리툴바