백고등어 개발 블로그

오늘은 많은 개발자분들이 한 번쯤은 겪는 동시성 이슈에 대해 이야기해볼까 합니다."어? 갑자기 재고 수량이 맞지 않네?"라는 상황, 한 번쯤 들어보셨죠? 이 글에서는 동시성 이슈가 왜 발생하는지, 그리고 이를 어떻게 해결할 수 있는지, 현실적인 비유와 함께 스프링 부트 예제 코드를 곁들여 쉽게 풀어보겠습니다!동시성 이슈란?먼저, 동시성 이슈란 여러 사용자가 동시에 같은 데이터를 읽고 수정하면서 발생하는 문제를 말합니다.현실 속 비유친구와 피자가게에서 전화로 주문을 하고 있다고 가정해보겠습니다! 친구 A가 전화로 피자를 주문하며 남은 재고가 몇 개인지 물어봅니다. 가게 직원은 "5개 남았어요!"라고 대답합니다. 친구 B도 동시에 전화를 걸어 "재고 몇 개 남았나요?"라고 묻습니다. 직원은 "5개 남았어..

⚠️ import 를 브라우저에서 테스트해보다가 아래와 같은 문제를 만났다. ⚠️ 첫 번째 문제 아래와 같이 JS코드와 html을 구성했을 때, 발생한 에러입니다. index.html test1.js const a = 10; export default a; test2.js import foo from "./test1.js"; console.log(foo); 🤯 에러 발생 자… 직역하면 모듈 외부에서 import 문을 사용할 수 없다는 말입니다 뭔소리야… 간단하게 말하면 script 타입의 속성을 module로 명시하지 않아서 생긴 문제입니다 💡 첫 번째 문제 해결방법 아래와 같이 script 태그에 type=”module” 속성을 추가해줍니다. index.html 근데 바로 두 번째 문제가 발생합니다. ..

아래 글은 주홍철 저자의 "실시간 모니터링 시스템을 만들며 정복하는 MEVN" 책 내용의 일부분을 인용하여 작성하였습니다. 이터러블(Iterable) 이터러블은 일반적으로 어떤 요소들을 순회하며 쉽게 탐색할 수 있는 자료구조를 말합니다. 자바스크립트에서는 이터러블 프로토콜이라는 규칙을 준수한 객체를 말합니다.(즉, 해당 규칙을 준수하지않은 객체는 이터러블하다고 할 수 없습니다.) 그 규칙이란 어떤 객체가 Symbol.iterator 메서드를 가짐을 뜻합니다. 그 메서드는 next()라는 메서드를 가지고 있는 객체를 반환하고 해당 객체는 value와 done 프로퍼티를 가지고 있습니다. 대표적으로 배열은 Symbol.iterator 메서드를 가지고 있습니다. *다른말로 배열은 빌트인 이터러블(built-i..

웹 서버 클라이언트(웹 브라우저)로 부터 http 방식으로 요청 받아 정적인 컨텐츠를 제공해주는 프로그램이다 또 자체적으로 처리할 수 없는 동적인 자원을 웹 컨테이너로 넘겨주고 웹 컨테이너에서 처리한 결과를 다시 받아 클라이언트에게 제공해주는 역할을 합니다 웹 컨테이너 웹 서버가 보낸 동적 자원(jsp, php, asp.net 등)을 실행하고 수행 결과를 다시 웹 서버로 보내주는 역할을 합니다 대표적으로 톰캣, RESIN, 웹로직, 웹투비 등이 있습니다 웹 어플리케이션 서버(WAS) WAS는 웹 서버와 웹 컨테이너가 합쳐진 형태로서, 웹 서버 단독으로는 처리할 수 없는 데이터베이스의 조회와 같은 동적 컨텐츠 처리를 제공한다 덕분에 사용자의 다양한 요구에 맞춰 웹 서비스를 제공할 수 있습니다 웹 서버와 W..

더보기 💡 React에서 SSR(Server Side Rendering)을 쉽게 하기 위해 만들어진 프레임워크입니다. 😄 0. SSR 과 CSR 에 관하여 우선, SSR에 대한 간단한 설명과 그리고, CSR 과의 차이점을 알아보겠습니다 SSR(Server Side Rendering): 사용자가 웹 페이지를 방문했을 때 브라우저에서 자바스크립트 코드를 다운받아 해석할 때까지 기다리지 않고, 서버에서 보여질 HTML을 미리 준비해 클라이언트(브라우저)에 응답하는 방식입니다 장점 검색 엔진 최적화 가능 ⇒ 페이지가 로딩될 때 데이터도 함께 로드되기 때문에 검색엔진에 해당 데이터들이 걸리기 때문 한 번에 렌더링 되기 때문에 초기 로딩 속도가 빠르다 단점 페이지 이동 시 페이지를 요청할 때마다 중복되는 파일을 내..

목표 - 사내 관제 프로그램 기능 개선 및 개인 실력 향상

제목을 보시고 바로 게시글 목록을 보지 말아주세요 부끄러우니까요 (이게 저의 신입 개발자 첫 번째 후기입니다...) 취업을 하고나서 벌써 7개월 가까이되는 시간이 지났다 그동안 너무 바빠서(귀찮아서) 블로그 글을 못쓰고 있었지만 잠깐 시간이나서 취업 후기를 써볼려고 한다 나는 취업전에 개발자 부트 캠프를 수료했는데, 여기서 javascript, node.js, express, react.js, mongodb 등의 기술들을 배웠고 해당 기술들로 두 번의 프로젝트를 진행했었다 지금 다니고 있는 회사엔 백엔드로 지원을 했는데, 인사팀쪽에서 풀스택 개발자로 지원 변경을 권유해주셨고, 풀스택 개발도 희망하고 있었기에 지원 변경을 했다 첫 날 출근했을 때 사수분께서 현재 개발 환경에 대해서 이것저것 설명해주셨다 현..

MongoDB 인덱싱에 대해서 조금더 자세히 알게 됐다 - 핵심은 DB 의 검색을 빠르게 해주고, 인덱스로 설정한 필드에만 유효하며, write 작업에는 느릴 수 있으므로 read 작업 위주의 애플리케이션에만 사용하길 권장한다 이틀 연속 재택을 하다가 몸이 더 쪼그라 들기전에 출근을 했다(그래도 재택이 좋다) 점심으로 회사주변 센터필드의 한국집이라는 식당에서 된장찌개를 먹었는데 너무 맛있었지만 입천장은 지키지 못했다 만약 언주로 센터필드를 본다면 꼭 한국집에 들러보시길 바랍니다 (사진을 못찍었다...)

칼럼 구성 Id: 댓글 인덱스는 게시글 번호와 상관없이 댓글 혹은 대댓글이 작성되면 auto_increment 로 1씩 증가되어 저장됩니다.(PK) Title: 댓글의 제목을 담을 칼럼입니다. Ref: 대댓글의 그룹번호(부모의 Id를 따라가며, Null 또는 1을 기본값으로 설정한다) 마지막 Ref 값 + 1 값으로 설정한다 Step: 들여쓰기의 Level depth 와 같으며, 부모 depth + 1 값을 가진다 ex) 부모 RefOrder: 같은 그룹내에서의 순서 기본값은 0으로 설정하며, 대댓글은 부모의 RefOrder + 1 값을 가진다 AnswerNum: 대댓글의 개수(부모가 가지고 있는 전체 대댓글의 개수) 손자글까지의 개수가 아닌 바로 아래의 자식글 개수만 해당 ParentNum: 대댓글에서..

RxJS는 Reactive Extensions For JavaScript 라이브러리이다. 여기서 Reactive Extensions 는 ReactiveX 프로젝트에서 출발한 리액티브 프로그래밍을 지원하기위해 확장했다는 뜻이다. ReactiveX 는 Observer 패턴, Iterator 패턴, 함수형 프로그래밍을 조합하여 제공한다. - Observer 패턴이란? 객체의 상태 변화를 관찰하는 관찰자들, 즉 옵저버들의 목록을 객체에 등록하여 상태 변화가 있을 때마다 메서드 등을 통해 객체가 직접 목록의 각 옵저버에게 통지하도록 하는 디자인 패턴이다(무슨말이지????) 라고 위키에 쓰여있다 간단히 말하자면, 어떤 객체의 상태가 변할 때 그와 연관된 객체들에게 알림을 보내는 디자인이 패턴이라고 할 수 있다. 예..