푸른영혼의별

HTTP(Hypertext Transfer Protocol) 는 클라이언트와 서버 간 통신을 위한 통신 규약입니다. 하지만, HTTP는 암호화되지 않는 평문 데이터를 전송하기 때문에 제 3자가 정보를 조회할 수 있다는 위험이 있습니다. 이를 해결하기 위해서 HTTPS가 등장했습니다.HTTPS(Hyertext Transfer Protocol Secure) 는 HTTP에 데이터 암호화가 추가되었습니다. 암호화된 데이터를 전송하기 때문에 제 3자가 볼 수 없도록 할 수 있습니다.HTTPS는 어떻게 적용할 수 있나요?HTTPS를 적용하기 위해서는 인증된 기관(Certificate Authority, CA)에게 인증서를 발급받아야 합니다. CA에 인증서를 요청하면 CA 이름, 서버의 공개키, 서버의 정보를 활용하..

undefined와 null은 둘 다 '값이 없다'는 의미를 담고 있지만, 그 쓰임새와 의미에는 차이점이 존재합니다. undefined는 자바스크립트에서 자동으로 할당되는 값입니다.변수는 선언했지만, 아직 아무 값도 할당하지 않았을 때, 자바스크립트는 그 변수에 undefined라는 값을 자동으로 부여합니다. 예를 들어 let a;라는 변수를 선언만 하고 값을 넣지 않으면, 자바스크립트가 자동으로 a에 undefined을 할당하게 됩니다.반면에 null은 개발자가 의도적으로 할당하는 값입니다. 특정 변수에 값이 없음을 명확하게 표현하기 위해 개발자가 null을 넣어줄 수 있습니다. 예를 들어 let b = null; 이라고 할 경우, 이는 b라는 변수에 일부러 값이 비어 있다는 의도를 나타내기 위해 nu..

interface는 객체의 형태를 확장하는 데 용이한 반면, type은 튜플, 인터섹션, 유니온 등을 이용하여 더 복잡한 타입 정의 및 조합을 표현하는 데 용이합니다.먼저, interface는 선언 병합을 지원해 여러 번 선언할 수 있어, 주로 객체 타입을 확장할 때 유리합니다. 동일한 이름을 가진 interface를 여러 번 선언하면, 이 속성들이 자동으로 합쳐집니다. 예를 들면 다음과 같습니다.interface Person { age: number; name: string; isBirthday: boolean;}interface Person { address: string;}const person1: Person = { age: 1, name: "abcd", isBirthday: fals..

스택(Stack) 은 후입선출이라는 개념을 가진 선형 자료구조입니다. 스택 자료구조에서 삭제(pop)는 가장 최상단(top)에서만 이루어집니다. 비어있는 스택에서 값을 추출하려고 시도하는 경우를 스택 언더플로우라고 하며, 스택이 넘치는 경우를 스택 오버플로우라고 합니다. 대표적인 활용 사례는 스택 메모리, 브라우저 뒤로가기 기능, 언두 기능, 수식 괄호 검사 등이 있습니다.자바에서 스택은 어떻게 사용할 수 있나요?Stack이라는 클래스를 사용할 수 있습니다. 하지만, Deque 인터페이스 구현체를 사용하는 것이 권장됩니다. 왜냐하면, Stack 클래스는 내부적으로 Vector를 상속 받고 있기 때문입니다. Vector를 상속받은 Stack은 인덱스를 통한 접근, 삽입, 제거 등이 실질적으로 가능합니다. ..

자바스크립트는 싱글 스레드 언어입니다. 즉, 한 번에 하나의 작업만을 처리할 수 있는 단일 콜 스택을 가집니다. 하지만 브라우저나 Node.js 환경이 제공하는 비동기 처리 메커니즘 덕분에 여러 작업을 동시에 수행할 수 있습니다.자바스크립트는 브라우저의 Web API나 Node의 libuv, 이벤트 루프, 태스크 큐를 이용하여 비동기 작업을 동시에 처리합니다.비동기 작업이 발생하면, 해당 작업(타이머, 네트워크 요청 등)은 브라우저의 Web API에 위임됩니다. 예를 들어, setTimeout이나 fetch와 같은 작업이 수행되면 자바스크립트 엔진은 이 작업들을 Web API에 넘기고 다른 코드 실행을 이어갑니다. Web API에서 비동기 작업이 완료되면, 그 작업은 태스크 큐에 들어가 대기합니다.이후 ..

서버 사이드 렌더링(SSR) 은 서버 측에서 렌더링하는 방식입니다. 클라이언트가 서버에 컨텐츠를 요청하면, 서버는 페이지에 필요한 데이터를 즉시 얻어와 모두 삽입하고, CSS까지 모두 적용해 렌더링 준비를 마친 HTML과 JS 코드를 응답합니다. 브라우저에서는 JS 코드를 다운로드하고, HTML에 JS를 연결합니다.이처럼 모든 데이터가 이미 HTML에 담긴 채로 브라우저에 전달되기 때문에 SEO에 유리합니다. 또한 JS 코드를 다운로드 받고 실행하기 전에 사용자가 이미 렌더링된 HTML을 볼 수 있으므로, JS 다운로드를 기다려야 하는 CSR에 비해 초기 구동 속도가 빠릅니다.클라이언트 사이드 렌더링(CSR) 은 클라이언트 측에서 렌더링하는 방식입니다. 클라이언트가 서버에 컨텐츠를 요청하면, 서버는 빈 ..

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

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

크게 세 가지의 방법을 말씀드릴 수 있습니다.첫째, 이미지 포맷 최적화입니다. 전통적인 JPEG나 PNG 대신, 압축 효율이 높은 WebP 또는 AVIF와 같은 최신 포맷으로 변환할 수 있습니다. 이 포맷들은 이미지 품질을 유지하면서도 파일 크기를 크게 줄여줍니다. 단, 일부 구버전의 브라우저에서는 최신 이미지 포맷을 지원하지 않지 않으므로, 호환성을 고려할 필요가 있습니다.둘째, 이미지 사이즈 조정입니다. 화면에 노출되는 크기에 비해 이미지가 과도하게 큰 경우 이미지를 작게 리사이징할 수 있습니다. 필요한 크기에 맞게 잘라 서버에서 내려줄 수 있습니다. 또한, 다양한 디바이스 해상도에 대응하기 위해 Responsive Images 기술, 즉 srcset과 sizes 속성을 활용할 수 있습니다. 이 경우..

기본적으로 @Transactional, @Cacheable, @Async 등의 애너테이션은 런타임에 동작하는 Spring AOP를 기반으로 동작합니다. Spring AOP가 제공하는 JDK Dynamic Proxy, CGLIB 방식 모두 타깃이 구현하는 인터페이스나 구체 클래스를 대상으로 프록시를 만들어서 타깃 클래스의 메서드 수행 전후에 횡단 관심사에 대한 처리를 할 수 있습니다.Spring은 빈 생성시, 해당 빈에 AOP 애너테이션이 있는지 검사하고, 있다면 프록시 객체를 생성하여 빈을 대체합니다. AOP 적용 대상인 클래스의 경우, 즉, @Transactional과 같은 AOP 애너테이션이 하나라도 선언된 클래스는 프록시로 감싸집니다.JDK Dynamic Proxy의 경우 타깃 클래스가 구현하는 인..