개발하는 동그리

개발 방식웹 애플리케이션 개발 방식에는 SSR(Server Side Rendering)과 CSR(Client Side Rendering)이라는 두 가지 대표적인 렌더링 방식이 존재합니다. 각각의 렌더링 방식은 데이터 처리 시점, 사용자 경험, SEO 최적화, 초기 로딩 속도 등에서 차이를 보이며, 개발 환경에 따라 적절히 선택되어야 합니다. 서버 사이드 렌더링 (SSR)서버 측에서 렌더링은 이름 그대로 서버에서 HTML을 렌더링한 후 브라우저에 전달하는 방식입니다. 페이지에 필요한 데이터를 즉시 가져옴HTML 구조에 데이터를 삽입CSS까지 적용된 완성된 HTML 문서를 브라우저에 응답브라우저는 전달받은 HTML을 바로 렌더링할 수 있으며, JS 파일은 이후 다운로드되어 작동합니다.장점 :SEO에 유리 :..

자바 스크립트는 싱글 스레드 언어이다. 즉, 한 번에 하나의 작업만을 처리할 수 있는 단일 콜 스택을 가집니다. 브라우저나 Node.js 환경이 제공하는 비동기 처리 메커니즘 덕분에 여러 작업을 동시에 수행할 수 있습니다.자바스크립트는 브라우저의 Web API or Node의 libuv, 이벤트 루프, 태스크 큐를 이용하여 비동기 작업을 동시에 처리합니다. 동작 메커니즘 비동기 작업이 발생하면 해당 작업(예: 타이머, 네트워크 요청 등)은 브라우저의 Web API 또는 Node.js의 백그라운드 API(libuv)에 위임된다.자바스크립트 엔진은 이 작업들을 위임한 뒤 나머지 코드를 계속 실행한다.위임된 작업이 완료되면, 콜백 함수는 태스크 큐(Task Queue)에 등록된다.이벤트 루프는 콜 스택이 비어..

private 메서드에서 트랜잭션은 동작할까?-> 아니요. 동작하지 않습니다 이유 1. Spring AOP는 프록시 기반이며, private 메서드는 프록시가 가로챌 수 없습니다.Spring AOP는 런타임에 프롤시 객체를 생성하여 부가기능(transactional, @Cashable, @Async)을 적용합니다.JDK 동적 프록시는 인터페이스 기반의 public 메서드에만 적용됩니다.CGLIB 프록시는 클래스 상속 기반으로 public, protected, package-private 까지만 적용됩니다.즉, private 메서드는 대상이 되지 않습니다. 이유 2 .Self-invocation 문제 (같은 클래스 내부 호출)클래스 내에서 자신의 메서드를 호출하면, 프록시를 거치지 않고 직접 호출됩니다.이..

렌더링 속도 개선하는 방법 5가지! 렌더링 속도 개선 방법 5가지이미지 포멧 최적화이미지 사이즈 조정css 스타일지연 로딩(Lazy Loading)CDN 이미지 포멧 최적화기존의 JPEG 또는 PNG 대신 WebP, AVIF 등의 고효율 이미지 포맷을 사용하면, 동일한 품질 수준에서 더 작은 용량의 이미지를 제공할 수 있습니다.단, 일부 구버전 브라우저에서는 최신 이미지 포멧(WebP, AVIF)을 지원하지 않기 때문에, 호환성 문제가 발생할 수 있습니다.// 위 구조를 통해 브라우저는 지원되는 최신 포맷(WebP 또는 AVIF)을 우선적으로 로드하고, // 그렇지 않을 경우 JPEG 등의 표준 포맷으로 자동 전환하는 방법 이미지 사이즈 조정실제 노출 화면에 비해 과도하게 큰 이미지 파일은 불..

낙관적 업데이트낙관적 업데이트는 성공적인 상태 업데이트가 이뤄질 거라는 가정 하에 서버 응답 이전에 UI를 미리 업데이트하는 방법입니다. 사용자 요청을 서버가 성공적으로 처리할 거라고 미리 예상하고, UI를 즉각적으로 변경해서 사용자에게 빠른 반응을 보여줍니다.낙관적 업데이트의 대표적인 예시로 좋아요 기능을 들 수 있습니다. 예를 들어, 사용자가 좋아요 버튼을 클릭하면 서버 응답을 기다리지 않고, 화면에 바로 좋아요 클릭에 대한 상태를 보여주는 것입니다. 서버 응답이 성공적으로 돌아오면 그대로 두고, 혹시나 실패하면 UI에서 해당 좋아요 상태를 다시 해제하거나 오류 메시지를 보여주는 방식입니다.낙관적 업데이트의 장점은, 서버 응답 속도와 관계 없이 즉각적인 피드백을 제공해서 사용자들이 시스템을 빠르게 쓸..

Connection TimeoutConnection Timeout 은 클라이언트가 서버에 연결을 시도할 때, 일정 시간 내에 연결이 이루어지지 않으면 발생하는 타임아웃입니다. TCP 소켓 통신에서 클라이언트와 서버가 연결될 때, 정확한 전송을 보장하기 위해 사전에 세션을 수립하는데, 이 과정을 3-way-handshake라고 합니다. Connection Timeout은 이 3-way-handshake가 일정 시간 내에 완료되지 않을 때 발생합니다. 즉, 서버의 장애나 응답 지연으로 인해 연결을 맺지 못하면 Connection Timeout이 발생합니다.정의 : 클라이언트가 서버와 연결을 시도할 때, 정해진 시간 안에 3-way-handshake가 완료되지 않았을 때 발생.원인 : 서버 다운, 방화벽 차단..

프론트엔드 E2E 테스트란? 🤔프론트엔드 E2E(End-to-End) 테스트는 애플리케이션의 사용자 경험을 처음부터 끝까지 시뮬레이션하여 테스트하는 방식입니다. 단위 테스트나 통합 테스트와 달리, E2E 테스트는 사용자 관점에서 전체 애플리케이션이 의도한 대로 작동하는지 검증합니다. 브라우저 환경에서 실제 사용자 동작을 흉내 내어 다양한 시나리오를 테스트하며, 버튼 클릭, 페이지 이동, 데이터 입력 등을 포함합니다. 보통 E2E 테스트는 Cypress, Playwright과 같은 도구를 이용해 작성합니다.E2E 테스트를 진행하면 사용자와 동일한 방식으로 애플리케이션을 테스트하므로, 사용자에게 직접적인 영향을 미치는 오류를 조기에 발견할 수 있습니다. 이는 프로덕트의 안정성을 높이고, 실제 배포 후 발생..

리버스 프록시 (Reverse Proxy) 란?서버에 가까운 프록시클라이언트는 실제 서버가 아닌, 리버스 프록시에게 요청하고 리버스 프록시가 알맞은 백엔드 서버에 요청을 전달리버스 프록시의 핵심 기능 중 하나는 로드 밸런싱다수의 백엔드 서버로 트래픽을 분산시켜 서버 과부하를 방지하고, 서비스의 고가용성을 유지할 수 있습니다.또한 외부에서 직접 백엔드 서버에 접근하지 못하게 하여 DDos 공격이나 해킹 시도로부터 서버를 보호할 수 있습니다.SSL 종료는 리버스 프록시의 중요한 기능SSL/TLS 암호화를 리버스 프록시에서 처리함으로써 백엔드 서버의 부담을 줄이고, 중앙에서 인증서를 관리할 수 있습니다.리버스 프록시는 캐싱 및 콘텐츠 최적화 기능을 통해 정적 콘텐츠를 캐싱하여 응답 속도를 향상하고 서버 부하를..

CATCH 1. (감기 등의 전염병에) 걸리다.I think I catught a cold.I think I'm catching a cold or something. 2. (못, 문 등에 옷이) 걸리다.My jaket got caught in the car door.My pants got caught on a nail.  3. (~을) 듣다.I'm sorry I didn't catch your name.I'm sorry I didn't catch your last question. 4. (~가 ... 하는것을) 보다.I caught het dabbing her eyes with a tissue. I caught her sneaking out late one night.  5. (불이) 붙다This mat..

SSR(Server Side Rendering) 이란? SSR(Server Side Rendering) 방식은 서버에서 완성된 정적 HTML을 클라이언트에 내려주는 방식입니다. 클라이언트 측에서는 해당 HTML을 파싱만 하여 화면을 그리게 됩니다.반면, CSR(Client Side Rendering) 방식은 브라우저가 서버로부터 비어있는 뼈대 HTML을 받아온 후, 필요한 자바스크립트 번들을 다운로드하고 번들을 실행하여 동적으로 컨텐츠를 채우는 방식입니다.Next.js에서는, SSR 방식으로 정적인 html을 내려주어 초기 화면을 빠르게 렌더한 이후, hydration을 통해 이벤트 리스너 부착 등의 자바스크립트 작업을 수행하여 정적인 화면을 동적으로 전환하는 작업을 수행하기도 합니다.SSR의 장점은 무..