나만의 개발블로그

React1.1 프록시 서버 사용개발 환경에서 CORS 문제를 가장 쉽게 해결할 수 있는 방법은 프록시 서버를 사용하는 것입니다.React 애플리케이션에서 프록시를 설정하면 API 요청이 동일한 도메인에서 이루어지는 것처럼 보이도록 할 수 있습니다.설정 방법: package.json 파일에 프록시 설정 추가// package.json{ "name": "my-app", "version": "1.0.0", "dependencies": { // ... }, "proxy": "http://localhost:8080" // Spring Boot 백엔드 주소}설명: 이 설정은 React 앱이 http://localhost:3000에서 실행 중일 때, API 요청을 http://localhost:808..

이벤트 버블링(Event Bubbling)은 웹 개발에서 이벤트가 DOM 요소에서 발생할 때,이 이벤트가 상위 요소로 전파되는 과정을 설명하는 개념이다.이벤트 버블링의 작동 원리이벤트 발생: 사용자가 버튼을 클릭하거나 링크를 클릭하는 등 특정 이벤트가 발생한다.이벤트 전파: 이벤트가 발생한 요소(타겟 요소)에서 시작하여, 해당 요소의 상위 요소들로 순차적으로 전파된다.상위 요소 처리: 각 상위 요소는 이벤트를 감지하고, 해당 이벤트에 대한 핸들러를 실행할 수 있다.전파 종료: 이벤트는 최상위 요소인 document까지 전파된 후, 더 이상 전파되지 않는다.이벤트 버블링 예시아래는 이벤트 버블링을 보여주는 간단한 예시 코드이다. Parent Div Ch..

"체리픽(Cherry-pick)"은 주로 소프트웨어 개발에서 사용되며, 특정 커밋이나 변경 사항을 선택적으로 적용하는 작업을 의미.이 용어는 원래 농업에서 좋은 체리를 골라 수확하는 것에서 유래됨.체리픽의 주요 개념체리픽의 정의:체리픽은 특정한 커밋이나 변경 사항을 소스 코드의 다른 브랜치에 선택적으로 적용하는 작업이다.주로 버그 수정이나 기능 개선을 특정 브랜치에만 적용하고 싶을 때 사용된다.체리픽의 사용 사례:버그 수정: 특정 브랜치에서 버그를 수정하고, 이 수정 사항을 다른 브랜치에도 적용하고 싶을 때.기능 개선: 새로운 기능을 개발 중인 브랜치에서 특정 변경 사항을 안정적인 릴리즈 브랜치에 적용하고 싶을 때.체리픽의 예:Git에서 체리픽: Git에서는 git cherry-pick 명령어를 사용하여..

1. 100 Continue100 Continue는 클라이언트가 요청을 계속해도 괜찮다는 서버의 응답을 의미한다.이 상태 코드는 요청의 일부로 큰 데이터를 전송할 때 사용된다.클라이언트가 서버에 요청을 보내기 전에, 서버가 요청의 초기 부분을 검토하고 요청을 계속 진행해도 좋다고 판단한 경우에 사용된다.용도: 클라이언트가 큰 요청 본문을 전송하기 전에 서버가 요청의 헤더를 검토하고,          요청이 진행될 수 있음을 알려준다.예시: 클라이언트가 Expect: 100-continue 헤더를 포함해 요청을 보내면,          서버는 이 상태 코드로 응답하여 요청을 계속할 수 있음을 알린다.2. 200 OK200 OK는 요청이 성공적으로 처리되었음을 나타내는 가장 일반적인 상태 코드이다.서버가 클..

로컬 스토리지(Local Storage)와 쿠키(Cookies)는 웹 브라우저에서 클라이언트 측 데이터를 저장하는 두 가지 주요 방법이다.각각의 특징과 차이점을 이해하면 웹 애플리케이션에서 어떤 저장 방식을 선택할지 결정하는 데 도움이 된다.1. 로컬 스토리지 (Local Storage)로컬 스토리지는 웹 브라우저에서 클라이언트 측 데이터를 저장할 수 있는 메커니즘으로, 다음과 같은 특징이 있다:저장 용량: 브라우저마다 다르지만, 일반적으로 5MB에서 10MB까지 데이터를 저장할 수 있다.만료 시간: 데이터는 명시적으로 삭제되거나 브라우저 캐시를 지우기 전까지 유지된다. 세션이나 만료 시간이 설정되지 않는다.데이터 접근: 자바스크립트를 통해 클라이언트 측에서 쉽게 접근할 수 있다. localStorage..

Sock.js와 Stomp.js를 함께 사용했던 이유와 요즘은 Stomp.js만 사용해도 괜찮은 이유웹 소켓(WebSocket)은 클라이언트와 서버 간의 양방향 통신을 가능하게 하는 프로토콜이다.이 과정에서 Sock.js와 Stomp.js라는 라이브러리를 함께 사용하는 것이 일반적이었다.왜 두 라이브러리를 함께 사용했는지, 그리고 요즘은 Stomp.js만으로도 충분한 이유를 살펴보겠다.1. Sock.js와 Stomp.js를 함께 사용했던 이유Sock.js는 웹 소켓을 지원하지 않는 브라우저에서도 폴백(fallback) 메커니즘을 통해 안정적인 통신을 제공하기 위해 사용되었다.웹 소켓을 직접 지원하지 않는 환경에서는 **XHR(Long Polling)**이나 Iframe 같은 기술로 대체하여 서버와 통신을..

SSE(Server-Sent Events)와 Sock.js는 모두 클라이언트와 서버 간의 실시간 통신을 가능하게 하지만, 사용하는 기술과 목적이 다르다.이 두 가지 기술의 차이점과 각각의 구현 기능에 대해 알아보자.1. SSE(Server-Sent Events)SSE는 서버에서 클라이언트로 단방향 스트림을 전송하는 기술이다.주로 서버가 클라이언트에게 지속적으로 데이터를 푸시해야 하는 상황에서 사용된다.작동 방식: 클라이언트가 서버에 연결을 요청하면, 서버는 text/event-stream 형식의 데이터를 지속적으로 전송한다.클라이언트는 이 스트림을 받아들이며, 실시간으로 업데이트되는 데이터를 처리할 수 있다.연결이 끊어지면 클라이언트는 자동으로 다시 연결을 시도한다.장점: HTTP 기반이라 브라우저 호환..

CSR(Client-Side Rendering)와 SSR(Server-Side Rendering)의 차이점웹 개발에서 CSR과 SSR은 웹 페이지를 렌더링하는 두 가지 주요 방법입니다. 이 둘의 차이점은 페이지가 렌더링되는 위치와 시점에 있습니다. 각각의 특징과 차이점을 알아보고, 예시를 통해 이해해보겠습니다.1. CSR (Client-Side Rendering)CSR은 클라이언트 측, 즉 브라우저에서 웹 페이지를 렌더링하는 방식입니다. 이 방법은 주로 현대적인 프론트엔드 프레임워크(예: React, Vue.js)에서 사용됩니다.작동 방식: 서버는 단순히 HTML과 JavaScript 파일을 클라이언트(브라우저)에게 전송합니다.                  이후 브라우저가 JavaScript를 실행하여..

아스키 코드 -> 문자문자 -> 아스키 코드 변환 방법에 대해선 파이썬 아스키 코드 -> 문자 => chr()문자 -> 아스키 코드 => ord()자바에선 어떻게 하는지 확인해보니형변환만 하면 되는 간단한 방법으로 아래와 같다아스키 코드 -> 문자 =>  (int)public class AsciiExample { public static void main(String[] args) { char ch = 'A'; int ascii = (int) ch; System.out.println("The ASCII value of " + ch + " is: " + ascii); }}문자 -> 아스키 코드 => (char)public class AsciiExample {..

자바는 따로 교육을 받은 경험이 없어 기초적인 내용 또한 잘 다져놔야 이후 내용을 잘 습득할 것으로 생각하여 포스팅 자바에서 List, ArrayList, 그리고 LinkedList는 자주 사용되는 컬렉션 클래스들로, 각각의 사용 목적과 특징이 다르다. 이들 중 어떤 것을 선택해야 하는지는 주로 사용 시나리오와 성능 요구 사항에 따라 달라짐. 아래는 각 컬렉션 클래스의 주요 특징과 사용 사례애 대한 설명. 1. ListList는 인터페이스로, ArrayList, LinkedList 등 다양한 리스트 구현체들이 이를 구현합니다.List 자체는 객체를 저장하는 순서가 중요할 때 사용됩니다. 일반적으로 List를 타입으로 사용하고, 실제 구현체는 ArrayList나 LinkedList를 사용합니다.List l..