인터뷰를 진행한 곳의 CTO님께서 넷플릭스나 무신사처럼 영상 데이터,상품 이미지 데이터 등 고용량의 데이터를 빠르게 가져오는 것을 볼 수 있는데어떤 개념이 사용되어 이렇게 빨리 이미지를 로드할 수 있을까? 라는 질문을 받게 되었다. 사용되지 않는 이미지는 lazy 처리를 해주고 필수적으로 보여져야 하는 이미지만 초기에 로드한다고 답했고,이후에 받게 된 꼬리 질문으로 다른 방법이나 개념은 없을까요? 라고 질문을 받았다.10초가 넘게 답을 못하자 CDN이란 무엇인지 알고있는지 물어보셨고 그제서야 질문의 의도를 파악할 수 있었다. CDN이란?Content Delivery Network지리적인 제약 없이 전 세계 사용자에게 빠르고 안전하게 컨텐츠 전송을 할 수 있는 기술.이를 통해서 컨텐츠의 병목현상을 피할 수..

제공되는 문자열을 받아 배열의 요소를 모두 더한 값을 리턴하는 문제. 문제 자체는 쉬웠지만 string type의 배열 요소를 number로 변환해주는 작업이 필요했다. 메서드를 사용해 형변환을 해주는 건 불필요하다 생각해 자바스크립트의 특징인 암묵적 형변환을 통해 해결할 수 있었다. * Answer /** * @param {string[]} operations * @return {number} */ var calPoints = function(operations) { const ops = operations; let arr = []; for(let i=0; i number type 변환이 필요. JS의 암묵적 형변환 사용. arr.push(+ops[i]); } } // 완성된 배열을 모두 합산하기 위한..

지금껏 map과 forEach, 둘 다 원본 데이터를 기반으로새로운 데이터를 만든다고 알고있었고최근에 인터뷰를 진행하며 내가 잘못 알고있었다는 점을 깨닫게 되어정리를 해보았다.결론map은 배열을 리턴하는 callback,forEach는 순회하는 배열의 요소와 index를 기준으로내부 스코프에서 정의한 코드를 수행하고 아무것도 반환하지 않는 콜백이다.예시1) mapconst testArray = [1,2,3,4,5]const result = testArray.map((item, index) =>{ const eachItem = item*2; return eachItem;});// testArray 배열을 기준으로 순회하며 각 배열의 요소를 2씩 곱한 새로운 배열 생성console.log(result); ..

토이 프로젝트로 사용했던 firebase의 실시간 DB 액세스 만료 메일을 받았다. 무슨 일인가 해서 서칭을 해보니 DB 액세스 기간이 지정되어있다는 점을 알게되었다. 설정을 하지 않으면 firebase DB를 사용하지 못하니 꼭 설정을 해줘야 한다. 서칭 결과 대부분의 블로그 포스팅을 보면 이런 내용으로 액세스 기간이 표기되어있었다. 위의 내용은 Cloud Storage를 사용했을 때의 설정이므로 내가 사용하는 RealTime DB를 사용했을 때의 설정을 봐야했다. Firebase 공식 문서를 참조했고 공개 및 비공개 액세스 혼합(=Mixed public and private access) 문단에서 힌트를 얻었다. 내가 이해한 바로는 Boolean 값으로 프론트 측에서 DB 제어권 설정을 할 수 있다고..

토이프로젝트에서 동적 라우팅을 적용하며 Next.js의 기초인 getStaticPath와 getStaticProps에 대해 복습하며 정리를 해보았다. getStaticPath와 getStaticProps getStaticPaths는 페이지의 경로를 정적으로 생성한다. Yarn build로 next project를 빌드할 때 getStaticProps 내부의 API로 받은 또는 json으로 받은 데이터를 확인한 후 필요한 모든 경로에 대해 페이지를 프리 렌더링 해둘 수 있도록 해주는 역할을 한다. 또한 getStaticProps도 빌드 타임에 동작하므로 모든 경로에 대한 페이지가 미리 만들어져있게 된다. 하지만 빌드가 끝난 뒤 DB에 새로운 교회가 추가될 수 있는데, 그럴 때마다 next 전체를 빌드해서 ..

naver Maps를 사용한 프로젝트를 만들며 배포를 먼저 시도했을 때 해당 에러를 마주하게 되었다. 2. 문제 인지 및 해결 배포 시 환경변수도 추가를 해줬기에 문제가 일어나는 부분은 네이버 클라우드측이라 확신했고, 역시 네이버 클라우드에 도메인을 추가해주지 않아서 발생한 에러였다. 네이버 클라우드에서 Web 서비스 URL 부분에 배포한 주소를 넣어줘 저장 후, 다시 도메인으로 돌아가 새로고침을 하면 정상 동작하는 것을 확인할 수 있다.

localhost에서 작동하던 google signin 기능이 vercel 배포 후 에러가 발생하는 것을 발견했다. //에러 내용 FirebaseError: Forebase: Error (auth/unauthorized-domain). 에러 내용에서 도메인 관련된 내용이 들어있는 것을 보니 firebase 도메인 설정과 연관이 있을거라 판단했다. 에러 해결 방법 1. firebase 프로젝트에 들어간다 2. Build > Authentication으로 들어간다. 3. settings에서 승인된 도메인을 클릭 후 배포 주소를 추가해준다. 이후 배포된 주소로 접속 후 정상 동작하는지 확인하면 된다.

Stack LIFO(Last In, First Out) 방식의 자료 구조 - 데이터가 쌓이며 가장 마지막에 push된 자료가 가장 먼저 pop 되는 구조를 지닌다. - top으로 정한 곳으로만 접근 가능하다. - 새로 push되는 데이터는 top이 가리키는 최상단에 쌓이며, pop 되는 데이터 또한 최상단부터 처리된다. Queue FIFO(First In, First Out) 방식의 자료 구조 - 먼저 들어온 데이터가 먼저 나가게 되는 구조를 지닌다. - 데이터가 들어오는 입구와 출구가 구분되어져있다. - 입구로 들어온 데이터는 출구로 나가진다. JS에서의 Stack과 Queue array를 사용하면 Queue와 Stack 둘 다 다룰 수 있게 된다. 위의 자료구조를 통해 array의 처음이나 끝에 요소..