Today, What I learned? 내 기능 구현도 하고 팀원들 에러도 봐주다보니 살살 녹는 하루... 🫠🫠🫠 프로젝트를 진행하며 파이어베이스에서 실시간으로 DB를 반영이 필요한 기능이 있었다. 오늘은 이 부분에 대해서 정리해보려고 한다! 파이어베이스에서 실시간으로 DB 반영하기 onSnapShot() 이라는 메서드를 이용한다. 이 메서드는 문서 스냅샷을 즉시 생성하고, 내용이 변경될 때마다 다시 호출되어 문서 스냅샷을 업데이트한다. 자세한 내용은 아래 파이어베이스 문서에서 확인해볼 수 있다. https://firebase.google.com/docs/firestore/query-data/listen Cloud Firestore로 실시간 업데이트 받기 | Firebase Firebase Summit..

FirebaseError: Missing or insufficient permissions. 오늘 프로젝트를 진행하다가 파이어베이스에서 Cloud Firestore를 이용해서 데이터를 가져오려 하는데 만난 파이어베이스 에러다. 이 에러는 파이어베이스의 DB 접근과 관련해서 관련된 권한이 없어서 발생한 것이다. 그래서 파이어베이스 DB에서 보안규칙을 변경 해주어야 한다. 해결! 파이어베이스 보안 규칙 설정 아마 firestore를 생성했다면 이렇게 기본적으로 설정이 되어있을 것이다. 여기서 5번째 줄을 allow read, write: if true; 로 변경한다. 하지만 이 설정은 모든 사람이 권한없이 DB를 읽고 쓸 수 있는 것이기 때문에 테스트 환경에서만! 유효한 해결방법이라는 점... 일단 나는 테..

Today, What I learned? 바닐라 JS로 SPA를 구현하는 프로젝트 진행 중!.. 담당 페이지를 마크업 하고, 버튼을 클릭했을 때 이벤트 일어나는 것을 SPA 방식으로 어떻게 구현하는가.. 🤔 에 대해서 좀 헤맸던 지라 오늘은 이것에 대해 정리해보려 한다. Cannot read properties of null (reading 'addEventListner') 오늘 만난 에러. 이 전에도 한 번은 만난 적이 있던 것 같은 녀석.. 일단 저 에러는 이런 이유로 발생한다. html이 로드되기 전에 script를 먼저 불러왔다. 아직 html이 로드되기 전이기 때문에 addEventListener를 부여할 DOM을 찾지 못했다. 고로 null 값이 뜬다. 이 경우는 보통 script 태그를 ht..

Today, What I learned? 본격적으로 프로젝트가 시작된 첫날.. 😂 기획과 와이어프레임을 잘 잡고~ 프로세스와 스레드에 대한 강의를 들었다. 쉽지 않은 개념인데 나름대로 풀어서 정리해본다. 프로세스? 운영체제로부터 할당받은 작업의 단위를 말한다. 이 각각의 작업들은 운영체제로부터 시스템 자원을 할당받는데, 자원이라는 것은 CPU 시간과 실행에 필요한 메모리 영역이다! 쉽게 말하면 프로세스는 실행되고 있는 하나의 프로그램이다. 아래와 같이 윈도우의 작업 관리자나 맥의 활성 상태 보기에서 실행되고 있는 많은 프로세스들을 볼 수 있다. 프로세스 주소공간 각각의 메모리를 할당받은 프로세스는 메모리를 관리하기 위한 프로세스 주소 공간을 갖는다. 프로세스 주소 공간은 이렇게 구성되어 있다. Code ..

Today, What I learned? 프로젝트 시작을 앞두고 파이어베이스 특강을 들었다..! 파이어베이스에서 제공하는 많은 기능 중에서 몇 가지에 대해 정리해보려 한다. 그 몇 가지는 바로 Authentication, FireStore, Storage 다!.. 왜 이것만 다루냐면 일단 당장 쓸 것들이기 때문 ㅎ Authentication 이 서비스는 파이어베이스에서 제공하는 회원가입과 로그인을 위한 인증 서비스다. 아래와 같이 다양한 방법들을 추가해서 인증할 수 있다. 이 인증 서비스를 이용해서 회원가입, 로그인뿐만 아니라 프로필 관리까지도 가능하다. authService.currentUser 라는 객체에 다양한 정보들이 담겨있기 때문이다!.. 프로젝트 때 주구장창 써먹는 객체이지 않을까 싶다. Fi..

Today, What I learned? 특강에서 프레임워크를 이용하지 않고 바닐라 JS로 SPA를 구현하는 법과, hashed url path에 대해 배웠다! 이후 좀 찾아보니 생각보다 SPA를 구현하는 방법에 대한 글과 영상이 많았다. 🤔 개인 프로젝트에 적용해보았으면 좋았을 텐데 싶은 아쉬움... 기회가 되면 리팩토링 할 수 있으면 좋겠다.. 일단 오늘 배운 것에 대한 정리 시작! MPA와 SPA 우선 이 두 주제에 대해서는 이전에 따로 정리해보았던 글이 있다. (부족함이 있을 수 있음) https://i-ten.tistory.com/174 MPA,SPA 부터 CSR, SSR 까지 들어가며 상태 관리에 대해서 알아보기를 결심!.. 어디서부터 이미 먼저 작성된 많은 글들을 둘러보다 보니 음.. 🤨 먼..

느닷없이 몇 분 전까지만 해도 잘 되던 소스트리가 갑자기 혼자서 튕겨서 강제 종료되더니만 다시 실행해도 반복적으로 아래 리포트만 띄워놓고 튕기는 현상이 발생했다. 😇 또 소스트리를 재설치 ?!.... 할 수는 없었기 때문에 뭐 구글링 해야지.. 이 분의 글이 나를 무한 튕김에서 구제해주었다. 🙌 https://heroeswillnotdie.tistory.com/15 [Git] Mac 'Sourcetree 응용 프로그램이 예기치 않게 종료되었습니다' 해결방법 저장소 초기화해서 다시 클론하고 재설정하고를 반복해도 2~3주마다 계속 소스트리 저장소 클릭하면 튕기는 오류가 나길래 진짜 부들부들 대고 있었는데 힙겹게 구글링으로 해결했다.. 링크 -> h heroeswillnotdie.tistory.com 한국어 ..

Today, What I learned? 알고리즘 꾸준히 쌓아가기 💪 ... 를 계속하며 오늘은 세 가지의 정렬 알고리즘에 대해 js로 구현해보았다. 추가적으로 네이버 메인페이지 코드를 분석하다가 알게 된 display: table에 대해서 정리해본다. 정렬 알고리즘 정렬 알고리즘은 모든 요소가 정렬되어야 하고, 그 안에서 각 요소별로 순차적으로 비교되기 때문에 이중 for문을 이용한다. 따라서 시간 복잡도는 모두 O(n^2)를 가진다. 버블 정렬 버블 정렬은 모든 요소들을 대상으로, 인접한 두 값을 비교해서 왼쪽의 값이 더 크다면 자리를 바꾸는 과정을 반복해서 정렬하는 방식이다. 아래 이미지를 참고하면 이해가 좀 더 편하다! js로 구현하기 function bubble_sort(arr) { let an..

Today, What I learned? 창민 튜터님의 CS특강과 계속되는 알고리즘과의 전쟁.. 🔥 오늘은 CS 특강에서 들은 CPU와 이진 탐색, 재귀함수에 대해서 정리한다! 특강 관련해서만 정리해도 양이 꽤 많긴 하지만.. 정리 시작! 👏 CPU 흔히들 컴퓨터 견적을 따질 때 많이 보는 것들 중에 하나로 익숙할 수 있다!.. Central Processing Unit의 약자로 중앙 처리 장치를 말한다. CPU는 컴퓨터의 두뇌라고 할 수 있다. 컴퓨터 시스템 전체를 제어하며 명령어를 수행하고 데이터를 처리한다. 처리장치와 제어장치로 구성되어 있고, CPU에는 캐시 같은 부가 장치도 포함되어 있다. 왜 CPU는 싱글 코어에서 멀티 코어가 되었는가? 결론적으로 싱글코어만으로 낼 수 있는 퍼포먼스에 한계가 ..

Today, What I learned? 어제에 이어서 알고리즘 공부를 계속!... 자료구조 중 연결 리스트에 대해 정리해보고 구현해보는 시간을 가졌다. 튜터님의 알고리즘과 자료구조에 대한 코멘트와 연결 리스트에 대해 정리해보려 한다. 🙌 시간 복잡도와 공간 복잡도 시간 복잡도와 관련해서는 예전에 블로깅을 한 적이 있다. https://i-ten.tistory.com/154 알고리즘의 시간복잡도와 Big-O 들어가며 기왕이면 가장 빠른 길로 가자! 출퇴근을 하거나, 친구와의 약속 등등. 어딘가를 향할 때 우리는 항상 목적지로 가는 빠른 루트를 찾아보는 경향이 있다. 컴퓨터도 마찬가지다. 프로그 i-ten.tistory.com 알고리즘에서는 이제 공간복잡도보다 시간 복잡도를 더 필수적으로 챙겨야 하는데, ..