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

문제 최빈값은 주어진 값 중에서 가장 자주 나오는 값을 의미합니다. 정수 배열 array가 매개변수로 주어질 때, 최빈값을 return 하도록 solution 함수를 완성해보세요. 최빈값이 여러 개면 -1을 return 합니다. 입출력 예시를 보면 최빈값이 1개인 경우에는 그 최빈값에 해당하는 원소를, 최빈값이 여러 개일 때는 -1을 반환하도록 한다. 풀이 과정 자료구조 중 하나인 Map을 이용해서 풀려고 했는데, 70점까지밖에 받지 못해서 (4개의 테스트 케이스 실패 😂...) 결국 비슷한 방법으로 풀이한 분을 참고해서 Map 초기화 부분을 추가했다. ㅠㅠ 처음에 생각한 과정은 이랬다. Map 객체를 생성한다. 배열을 순회하며 Map에 빈도수를 업데이트한다. 최대 최빈값을 찾는다. 최빈값이 여러 개인지..

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 알고리즘에서는 이제 공간복잡도보다 시간 복잡도를 더 필수적으로 챙겨야 하는데, ..

Today, What I learned? 본격적인 알고리즘 등반 다시 시작이다.. 🥹 오늘 여러 알고리즘 문제를 풀었는데, 음 역시 쉽지 않다... 오늘 튜터님의 특강을 들으며 리마인드 하고 싶은 부분은 이렇다. 1. 코드는 짧게 짜는 게 핵심! 쉽고 빠르고 간결하게 프로그램을 짜는 게 프로그래머의 본질! 2. 나의 현재 실력을 자기 객관화를 하자! 프로그래머스, 백준 등을 이용해 정량적 체크는 덤 3. 한글로 로직을 먼저 생각해보고 코드를 짜자. 오늘 풀었던 몇몇 문제들 중 파이썬으로도 풀고, 자바스크립트로도 다시 풀어본 문제를 정리해본다. 문장 내 알파벳 최대 빈도수 구하기 문장 안에서 알파벳 별로 빈도수를 카운트해서 가장 빈도수가 높은 알파벳을 반환하는 문제다. 이 문제는 파이썬으로 풀면 이런 방법..