전체 글

오늘은 현재 진행하고 있는 프로젝트에서 마주한 파이어베이스 트러블슈팅을 다뤄볼까합니다. 파이어베이스는 구글에서 만든 서버리스 서비스입니다. 개인이 진행하는 프로젝트에 아주 유용한 친구입니다! 파이어베이스는 DB의 역할을 해주고 다양한 모듈로 프론트엔드에게 편리한 CRUD를 제공합니다. (백엔드 친구가 없는 프론트에게 아주 유용합니다) 전 커머스 프로젝트를 개발하고 있었습니다. 커머스라고 한다면 DB에 있어야 할 데이터 필드의 종류는 다양한게 생각이 나실겁니다. 상품의 이름, 가격, 이미지, 유저의 정보, 좀 더 딥하게 생각한다면 주문목록도 DB에 저장되어야겠죠? 제가 마주한 트러블은 여기에서 시작됩니다. 장바구니를 구현하고 장바구니에 있는 상품을 구매합니다. 마이페이지에서는 본인이 구매한 상품의 목록을 ..

// 생활코딩님의 영상 내용을 정리하며 복습합니다. https://www.youtube.com/watch?v=QtOF0uMBy7k 오늘은 스코프 체이닝에 대해 알아보겠습니다. 위 사진은 개발자도구에서 소스탭에서 확인할 수 있는 요소들 중에 scope와 callStack 입니다. 간단하게 callStack은 디버그 중단점을 통해 위치를 파악한, 현재 진행되고 있는 줄이 속한 함수명이 출력됩니다. 다시말해 위 사진에서는 fn1함수 내에서 디버그를 출력하고 있다고 생각하시면 됩니다. 중요한건 scope입니다. js에서는 변수명, var, let, const를 통해 변수를 선언할 수 있습니다. 각각 저장되는 scope의 위치가 다릅니다. 이것이 포인트인데 먼저 함수 밖에서 변수명만 썼을때 ex) num0 = "..

Global CSS 이번에 개인프로젝트를 하면서 tailwind를 사용하게 되었습니다. 많은 컴포넌트를 제작하며 동일한 스타일을 반복적으로 지정해주는 것은 효율적이지못하다고 판단하여 global css를 통해 스타일을 지정할 수 있도록 구현해보았습니다. 먼저 global.css 파일에 아래 코드처럼 스타일을 변수에 저장할 수 있습니다. @tailwind base; @tailwind components; @tailwind utilities; @layer base { .componentTitle { font-size: xx-large; } } 현재 componentTitle이라는 스타일을 생성하여 font-size를 xx-large로 지정해놨습니다. 이를 적용시키고자 하는 태그의 className에 적용해주..

가상 돔과 실제 돔 실제 돔(Real DOM) 브라우저에서 관리 : 브라우저가 직접 관리하는 HTML문서의 트리구조로 이 구조는 HTML 문서의 요소들을 표현하고, 각 요소는 객체로 나타내어집니다. 직접 조작 : 변경이 있을 때 마다 브라우저가 실제 돔을 직접 조작하고, 이에 따른 리플로우와 리페인트가 발생합니다. 성능 이슈 : 복잡한 작업이나 다수의 엘리먼트를 조작할 때 성능문제가 일어날 수 있습니다. 가상 돔(virtual DOM) 메모리 상의 복제본 : 실제 돔의 가벼운 복사본으로, 메모리상에서 관리됩니다. 가볍고 빠른 동작 : 변경 사항을 빠르게 처리하기 위해 사용되며, 직접적으로 화면에 렌더링되지않습니다. 비교 및 패치 : 변경이 필요한 경우, 변경된 부분을 이전 가상 돔과 실제 가상돔을 비교하..

프레임워크와 라이브러리 프레임워크와 라이브러리는 소프트웨어 개발에서 코드의 재사용을 촉진하고 개발자가 더욱 효율적으로 작업할 수 있도록 도와주는 도구들입니다. 그러나 몇 가지 중요한 차이점이 있습니다. 프레임워크 제어역전 : 프레임워크가 주도하는 개발 스타일입니다. 개발자는 프레임워크가 제공하는 규칙과 구조를 따라야합니다. 컨텍스트 내에서의 사용 : 어플리케이션의 기본 구조와 제어흐름은 프레임워크에 의해 미리 정의되어있습니다. 뼈대 제공 : 개발자는 프레임워크가 제공하는 뼈대 안에서 자신의 코드를 작성하며, 프레임워크가 유동적으로 처리해주는 부분이 많습니다. 예시) Django (Python 웹 프레임워크), Angular (javaScript 라이브러리) 라이브러리 개발자 중심 제어 : 라이브러리는 프..

동기와 비동기에 대해 정리해보겠습니다! 동기(Synchronous) 동기는 말 그대로 동시에 일어난다는 뜻입니다. 요청과 그 결과가 동시에 일어난다는 약속입니다. 바로 요청을 하면 시간이 얼마나 걸리던지 요청한 자리에서 결과가 주어져야 합니다. 요청에 대한 응답(request)가 있어야 다음 요청을 보낼 수 있습니다. 순서에 맞춰 진행되는 장점이 있지만, 여러 가지 요청을 동시에 처리할 수 없습니다. 비동기(Asynchronous) 비동기는 동시에 일어나지 않는다를 의미합니다. 요청과 결과가 동시에 일어나지 않을 거라는 약속입니다. 하나의 요청에 따른 응답을 즉시 처리하지 않아도, 그 대기 시간동안 또 다른 요청에 대해 처리 가능한 방식입니다. 여러 개의 요청을 동시에 처리할 수 있는 장점이 있지만 동기..

삽입 정렬 삽입 정렬은 전체에서 하나씩 올바른 위치에 "삽입" 하는 방식입니다! 선택 정렬은 현재 데이터의 상태와 상관없이 항상 비교하고 위치를 바꾸지만, 삽입 정렬은 필요할 때만 위치를 변경하므로 더 효율적인 방식입니다! 이미 키 순으로 정렬된 사람들이 일렬로 쭉~ 서 있는데, 다음 원소가 그 정렬된 사람들 사이를 비집고 들어가면서 아 여기가 내 자리구나! 하면서 삽입하며 정렬하는 방식입니다. 아래 [5, 3, 8, 1, 2] 배열을 삽입 정렬하는 그림을 보시면 이해해보겠습니다. 삽입 정렬의 진행순서를 코드로 좀 더 자세히 알아보겠습니다 [4, 6, 2, 9, 1] # 정렬되지 않은 배열 1단계 : [4, 6, 2, 9, 1] 4는 현재 정렬되어 있는 부대원입니다. 그럼 이제 새로운 신병인 6을 받습니..

선택 정렬 선택정렬은 말 그대로 선택해서 정렬한다는 것입니다. 예를 들면, 초등학교 키번호르를 생각해보시면 됩니다. 학생들을 줄을 세우고 한번 쭉 둘러보며 키가 가장 작은 학생을 찾습니다. 가장 키가 작은 학생을 찾아 맨 앞으로 세우고 다시 줄을 쭉 둘러봅니다. 두 번째로 키가 작은 학생을 찾아 두 번째에 세우고 줄을 다시 둘러보며 세번째로 작은 학생을 찾습니다. 이러한 반복으로 정렬하는 방식이 선택정렬입니다. 선택 정렬의 진행순서를 좀 더 자세히 살펴보겠습니다. [4, 6, 2, 9, 1] # 정렬되지 않은 배열 1단계 : [4, 6, 2, 9, 1] 4와 6과 2와 9와 1을 차례차례 비교합니다. 그 중 가장 작은 1과 맨 앞 자리인 4를 교체합니다! [1, 6, 2, 9, 4] 이렇게요! 자, 그러..