본문 바로가기

전체 글109

Geospatial data and B-Tree https://github.com/POODADAK/poodadak-client 팀프로젝트를 진행하면서 사용자의 위치정보(위도, 경도)기반으로 주변에 있는 화장실을 찾아주는 기능을 개발해야할 일이 있었다. 그런데 위치정보라는 것은 일반적인 데이터가 아니기 때문에 DB 에서 검색을 할때 "특정 위도/경도 포인트의 주변 500m 내의 존재하는 위도/경도 포인트들" 을 어떻게 가져와야 할지 고민을 했었다. 조금 조사를 해봤더니 몽고DB 에서는 기본적으로 Geospatial 데이터타입과 2dsphere 인덱싱을 지원해서 관련된 쿼리또한 네이티브로 지원해서 편하게 기능 구현을 할 수 있었다. https://www.mongodb.com/docs/manual/geospatial-queries/ Geospatial Qu.. 2022. 3. 31.
바닐라코딩 9주차 정리 강의 이번주의 수업내용은 nodejs, express, mongodb였습니다. Nodejs 자바스크립트는 언어가 생성된 목적자체가 브라우저에서 구동가능한 언어를 만드는 것이었기 때문에 웹브라우저 외에서는 구동이 불가능했습니다. 그러나 라이언 달이 구글의 V8자바스크립트엔진을 기반으로 브라우저가 아닌 환경에서도 자바스크립트가 구동가능한 런타임을 구현했으며 그것이 바로 Nodejs입니다. 브라우저밖에서 자바스크립트를 구동 가능하다는 것은 "자바스크립트로 C처럼 컴퓨터의 자원(파일)에 직접접근이 가능해짐 -> 자바스크립트로도 서버를 만들수 있음"을 의미하게 됩니다. https://nodejs.org/api/ Index | Node.js v17.3.0 Documentation nodejs.org Express .. 2022. 1. 3.
바닐라코딩 6주차 정리 강의 이번주의 강의 내용은 주로 리액트의 useCallback, useMemo와 같이 성능 최적화에 관련된 부분이었습니다. useCallback 리액트에서 함수형 컴포넌트는 리렌더링이 일어 날때 마다 재실행 됩니다. 함수가 재실행 되면 해당 함수내에서 선언된 함수는 다시 선언되고, "함수 === 참조형" 이므로 만약 하위 컴포넌트에 해당 함수를 prop으로 넘겨주거나 할 경우 해당 하위컴포넌트는 새로운 prop이 들어온것으로 판단해 불필요한 리렌더링이 발생할 수 있습니다. 이럴 경우 useCallback으로 해당 함수를 감싸주고 디펜던시 리스트를 설정해주면 함수를 무조건 적으로 재생성 하지 않기 때문에 효율적으로 리렌더링을 관리 할 수 있습니다. https://reactjs.org/docs/hooks-r.. 2021. 12. 12.
바닐라코딩 5주차 정리 강의 이번주부터 3주간 front-end 주간으로 리액트를 학습하게 됩니다. 리액트란? 자바스크립트를 통해 UI를 선언적(Declarative) 으로 그려나갈 수 있는 라이브러리입니다. 여기서 선언적으로 UI를 그린다는게 무엇을 의미하는지 한번 생각해보고 가봅시다. 일반적으로 자바스크립트를 통해 UI를 그리려면(조작하려면) 아래와 같은 과정을 거치지 않을까 싶습니다. 1. createElement로 필요한 DOM 엘리먼트 생성하기 2. 해당 엘리먼트에 addEventListener 붙이기. 3. 해당 엘리먼트가 들어가야할 위치에 appendChild 등을 통해 DOM 트리에 붙이기. 위와 같이 모든 단계를 일일히 절차적으로 거치는 것을 imperative(절차적/명령형)라고 합니다. 리액트의 경우는 다릅.. 2021. 12. 5.
바닐라코딩 3주차 정리 강의 이번주의 강의 내용은 기본적인 정렬알고리즘과 프로그래밍 패러다임에 관한 내용이었습니다. Bubble Sort - 총 n개의 입력이 주어졌을때 n-1, n-2,....,1 만큼 자기옆의 원소와 비교연산을 수행하여 정렬을 수행합니다. - 위의 과정때문에 시간 복잡도는 O(n^2)입니다. - 장점 in-place 방식 이기 때문에 별도의 메모리 공간을 차지하지 않습니다. 인풋이 이미 정렬된 상태일경우 시간복잡도가 O(n)이기 떄문에 정렬이 이미 되어있던 정도를 확인 가능합니다. -단점 시간복잡도가 O(n^2)으로 느립니다. Insertion sort - 버블 소트와 마찬가지로 현재 선택된 원소를 원쪽의 원소들과 비교해 나가며 올바른 자리에 삽입 하는 정렬 방식입니다. - 위의 과정때문에 시간 복잡도가 O.. 2021. 11. 20.
바닐라코딩 2주차 정리 강의 이번주의 강의 내용은 자료구조였습니다. Stack -First In Last Out - 삽입: O(1) - 삭제: O(1) - 조회: O(n) - 사용처: 브라우저의 앞/뒤로가기기능, 자바스크립트의 콜스택 등등... Queue -First In First Out - 삽입: O(1) - 삭제: O(1) - 조회: O(n) - 사용처: 대기줄, 자바스크립트의 콜백큐 등등... Linked List - 삽입: O(1) - 삭제: O(1) *여기서 말하는 삭제는 원하는 값을 '조회' 후 삭제하는것이 아니라 말그대로 해당 노드를 삭제 하는 행위만을 의미 합니다. - 조회: O(n) - 사용처: 해시테이블의 충돌 해결법, 웹브라우저의 히스토리 저장방식 등등.. Hash Table - 삽입: O(1) - 삭제:.. 2021. 11. 14.