따꿍의 프로젝트

문제서버를 MongoDB랑 연결하려니까 문제가 생겼다.db pw랑 연결 링크도 제대로 넣었는데 계속 이 문제가 떴다. AI는 예상했지만 이런 문제에는 도움이 안되서 오랜만에 구글 서치 들어갔다. 발생 이유와 해결방법https://www.reddit.com/r/mongodb/comments/1qojt61/querysrv_econnrefused_when_connecting_mongodb/?show=original Reddit의 mongodb 커뮤니티mongodb 커뮤니티에서 이 게시물을 비롯한 다양한 콘텐츠를 살펴보세요www.reddit.comReddit 포스트를 보니까 Windows Node v24가 Mongodb와 문제가 생기나보다. https://github.com/nodejs/node/pull/61..

전반적인 구조위는 Critical Rendering Path (CRP)로브라우저가 HTML -> 화면 픽셀로 바꾸는 과정 중처음 화면을 그리기까지 필요한 핵심 단계를 의미한다. (최소 렌더링 과정)DOM (Document Object Model): HTML과 다르게 JS로 조작 가능한 객체 형태이다. 이 CRP가 느리면- First Paint 늦어짐- UX 나빠짐- SEO에도 영향이 감=> Blocking(다 받아야 다음단계로 넘어감)한 CSS

한줄 정리이벤트 버블링은 이벤트가 발생한 요소에서부터 부모로 전파되며 상위요소의 이벤트 핸들러가 실행되는 현상을 뜻합니다. 브라우저의 이벤트 흐름은 캡처링 → 타겟 → 버블링 순서로 이루어지며,버블링 단계에서 자식에서 발생한 이벤트가 부모로 전달됩니다.이를 방지하기 위한 방법은 바로 e.stopPropagation()입니다. 설명안에 있는 버튼을 클릭했는데 밖의 부모의 onClick이 발동하는 경우를 보셨을겁니다. 이게 바로 Event 버블링을 고려하지 않아서 발생한 문제인데요,브라우저가 어떤 식으로 이벤트를 인식하는지 이해하면 어렵지 않은 개념입니다. 브라우저의 이벤트 DOM 트리에서 캡처링 단계에 자식까지 내려갔다가자식에서 다시 root인 html로 다시 돌아가는 버블링과정에서 이벤트를 인식해내..

한줄 정의Promise는 비동기 작업을 완수하는데 사용하는 JS 내장 객체입니다.JS 컴파일러 자체가 싱글 스레드라 자체적으로 비동기를 지원하지 않는데,이를 위해 JS는 이벤트 루프, Web API, 그리고 Task Queue를 사용합니다. 이러한 흐름에서 Promise는 비동기 결과를 다루기 쉽게 하는 객체입니다. 이러한 Promise는 3가지 단계가 있는데, 바로Pending, Fulfilled와 Rejected 단계입니다.executor 함수 안의 resolve와 reject를 통해서 상태를 변경하며, 한번 상태가 결정되면 이후에 변하지 않습니다. 처음에는 Pending(대기 상태)이고,작업이 성공하면 Fulfilled, 실패하면 Rejected 상태로 전이됩니다.이러한 Promise의 상태는 H..

스프린트 내용https://github.com/quothraven1122/13-sprint-mission-fe/issues/32 feat: create market page · Issue #32 · quothraven1122/13-sprint-mission-fe💬 기능 설명 Figma 디자인 중고마켓 페이지를 작성할 계획입니다. 🎬 작업 흐름 공통 컴포넌트 생성 버튼 생성 상품 컴포넌트 생성 검색창 생성 dropdown 생성 페이지 구성 생성 Header 작성하기 Bodygithub.com 작업 흐름- vite로 프로젝트 생성하기 (React + JS Compiler)- vite starter template 지우기- layout 만들고 header와 footer만들기 MainLayout이라는걸..

발단여행 갔다오고 부캠 때문에 지쳐하다보니작업을 거의 팀원이 다했다. (미안해)그래서 그간 쌓인 PR 리뷰를 확인했는데조금 코드를 정리할 필요가 있어 보였다. 일단 이번주 스프린트 작업은 끝내야하니 중요한거 버그 외에는 어푸했다.이번 스프린트를 넘겼으니,그간 작업을 면밀히 검토하고 이해해보며 리팩토링을 진행해볼 계획이다. 작업1. 어떤 파일에 작업했는지 확인하기작업을 확인하려면 어디에 작업했는지 알아볼 필요가 있다. 그래서 git diff --name-only HEAD dev해서현재 브랜치 (feature/editor)와 dev 브랜치의 차이를 보았다. Editor로 글 작성하는 것과 관련된 코드1. WritePostPage와 EditPostPage에서 추가된 내용1) AttachmentBar에 e..

한줄 정의Lexical Scope는 함수가 정의된 위치에서 스코프가 결정되는 특성을 의미합니다. 동적 스코프인 Bash와 Shell Script와 달리, 선언된 위치와 방식에 따라 스코프가 결정됩니다. 렉시컬 스코프 (JavaScript): - 함수가 정의된 위치에서 스코프 결정 - 코드를 보면 알 수 있음 동적 스코프 (일부 언어): - 함수가 호출된 위치에서 스코프 결정 - 실행해봐야 알 수 있음 이거와 관련되어서 클로저라는 기법도 있으니 알아보면 좋을 듯 하다.https://capprojectfactory.tistory.com/115✅ 핵심 정리렉시컬 스코프 = 함수가 선언된 위치를 기준으로 스코프가 결정된다.중첩된 함수는 외부 함수의 변수에 접근할 수 있다.호출 위치는 스코프에 영향을 주지 않는..

한줄 정리this는 메서드(객체 안에 있는 함수)에서 자신이 들어가 있는 객체를 부를때 사용하는 키워드입니다.다른 말로, 호출의 주체를 지칭하는 키워드입니다. 다양한 상황에서 지칭하는게 달라집니다. 설명1. 메서드가 아닌 함수일 경우이때는 함수가 객체에 들어있지 않아, 호출의 주체가 없습니다. 이 경우에 this는 전역 객체가 됩니다.브라우저에서는 strict mode에서는 undefined, non-strict에서는 Window객체가 되고, Node.js에서는 global 객체가 됩니다. console.log(this); //Windowfunction f1 () { console.log(this);}f1(); //Window 2. 메서드일 경우메서드가 화살표 함수가 아닌, 일반 함수인 경우에는..

발단try-catch-finally를 모든 API에 실행하고 싶지 않았다. 그래서 이 처리를 한 곳에 하고 싶었는데이게 현직에서도 사용되는 패턴인지 궁금했다. 찾아보니 API 호출 공통 래퍼라고,Axios는 interceptor로 처리하고,Fetch는 직접 만든 Fetch Wrapper로 처리한다고 한다. 내가 작성한 Fetch Wrapper- body가 가장 까다로웠다. GET / POST / PATCH / PUT / DELETE 중에 GET은 body가 없어야하는데 body가 있는 경우에만 fetch options 객체에 body attribute를 추가하는 방법을 고안해 내는것이 어려웠다. - 근데 생각해보니 fetch에서 options (config로 이름 바꿈)을 따로 ..

발단npm으로 js 코드를 실행하는 것은 많이 해봤다. package.json에 들어가서 scripts에 npm start를 node index.js로 해두면 되는 간단한 문제이다. { "scripts": { "start": "node index.js" }} 근데 js 코드가 아니라, html 코드는 어떻게 여는가?우클릭으로 live server 열어 왔었는데, 위와 같은 코드 명령어 방식으로 실행하려면 어떻게 해야할까? Run Live Server via Npm Scripts1. Install liver-server packagenpm install live-server --save-dev 2. Add script to package.json{ "scripts": { "start": "..