클라이밍하는 개발자

undefined와 null의 차이점에 대해서 설명해주세요.

undefined와 null의 차이점 쉽게 정리 ✨자바스크립트 프론트엔드 개발에서 자주 헷갈리는 undefined와 null! 둘 다 “값이 없음”을 뜻하지만, 의미와 사용법에 차이가 있어요. undefined란? 🤷‍♂️변수는 선언했지만 아직 값을 할당하지 않았을 때 자바스크립트가 자동으로 부여하는 값이에요.즉, “아직 값이 정해지지 않았다”는 상태를 의미합니다. null이란? 🚫개발자가 “여기는 일부러 비워둘 거야!”라고 명확하게 의도해서 직접 넣는 값이에요.“값이 없음을 명시적으로 표현”할 때 사용합니다.비교 연산자에서의 차이느슨한 비교(==)에서는 undefined == null이 true입니다.엄격한 비교(===)에서는 undefined !== null이므로 false가 나와요.메모리 관리 ..

HTTPS에 대해서 설명해주세요.

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

시맨틱 마크업이란 무엇이며, 왜 중요한가요?

시맨틱 마크업이란 무엇이며, 왜 중요한가요?프론트엔드와 관련된 질문이에요.시맨틱 마크업은 HTML 요소를 사용하는 방식으로, 단순히 시각적 목적이 아닌 요소의 의미를 잘 나타내도록 작성하는 방식을 말합니다. 예를 들어, 와 같은 비시맨틱 태그가 아닌, , , , 같은 시맨틱 태그를 사용하여 문서 구조와 콘텐츠의 역할을 명확하게 하는 것입니다. 시맨틱 마크업이 중요한 이유는 크게 두 가지입니다.첫째, 접근성을 개선하기 위함입니다. 시맨틱 요소들은 스크린 리더와 같은 접근성 도구에서 콘텐츠의 구조를 더욱 잘 해석할 수 있게 해 주어 시각장애인이나 노인 등 다양한 사용자층이 사이트를 효과적으로 탐색할 수 있게 합니다. 이러한 요소를 올바르게 사용하면, 더 많은 사람들에게 접근 가능한 웹 환경을 제공할 수 ..

WAS와 웹 서버의 차이점은 무엇인가요?

WAS와 웹 서버의 차이점은 무엇인가요?백엔드와 관련된 질문이에요.웹 서버는 정적 컨텐츠(HTML, CSS, JS, 이미지 등)를 제공하는 역할을 수행합니다. 동적 컨텐츠 요청 시 요청을 WAS로 전달할 수도 있습니다. 대표적인 웹 서버로는 Apache, Nginx 등이 있습니다. 반면, 자바 진영에서 WAS(Web Application Server) 는 서블릿 컨테이너 기능을 제공하고, 동적 컨텐츠를 생성하거나, 애플리케이션 로직을 실행하는 데 특화되어 있습니다. 대표적인 WAS로는 Tomcat이 있습니다. 정리하자면, 웹 서버는 정적 컨텐츠 제공에 특화되어 있으며, WAS는 동적인 컨텐츠 생성과 데이터 처리에 특화되어 있습니다.WAS도 정적 컨텐츠를 제공할 수 있는데 웹 서버가 따로 필요한 이유는 무..

타입스크립트의 타입과 인터페이스의 차이점을 설명해주세요.

타입스크립트 type vs interface 차이 한눈에 보기 👀타입스크립트에서 type과 interface는 모두 타입을 정의할 때 자주 사용됩니다. 하지만 각각의 특징과 쓰임새에는 분명한 차이가 있습니다!interface의 특징 🧩객체의 구조(Shape) 확장에 특화interface는 객체의 타입을 정의할 때 주로 사용하며, 같은 이름으로 여러 번 선언하면 자동으로 병합(Declaration Merging)되어 속성이 합쳐집니다.확장(extends)과 구현(implements)에 적합클래스와 결합해서 객체지향적으로 사용하거나, 라이브러리/외부 API 타입 정의에 많이 쓰입니다.오직 객체 타입만 정의 가능원시 타입(예: string, number)이나 튜플, 유니온 타입 등은 정의할 수 없습니다./..

자료구조 스택에 대해서 설명해주세요.

🤔 스택이란 무엇인가요?안녕하세요! 오늘은 프로그래밍의 기본 자료구조 중 하나인 스택(Stack)에 대해 알아보겠습니다.스택은 접시를 쌓는 것처럼 데이터를 순서대로 쌓아올리는 구조입니다. 가장 중요한 특징은 후입선출(LIFO: Last In, First Out) 방식으로 동작한다는 점입니다.📚 스택의 주요 특징과 용어핵심 동작push(item) 👆: 스택의 맨 위에 요소를 추가합니다pop() 👇: 스택의 맨 위에 있는 요소를 제거하고 반환합니다peek() 👀: 스택의 맨 위 요소를 제거하지 않고 확인만 합니다isEmpty() 🕳️: 스택이 비어있는지 확인합니다주의해야 할 상황스택 오버플로우(Stack Overflow) 💥: 스택의 용량을 초과하여 데이터를 넣으려 할 때 발생스택 언더플로우(S..

서버 사이드 렌더링과 클라이언트 사이드 렌더링의 차이점은 무엇인가요?

🚀 서버 사이드 렌더링 vs 클라이언트 사이드 렌더링🤔 두 렌더링 방식의 간단한 비교안녕하세요! 오늘은 웹 개발에서 중요한 두 가지 렌더링 방식인 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)에 대해 알아보겠습니다.📊 한눈에 보는 비교구분 서버 사이드 렌더링(SSR) 클라이언트 사이드 렌더링(CSR)렌더링 위치서버브라우저(클라이언트)초기 로딩 속도⚡ 빠름🐢 느림초기 이후 속도🐢 느림⚡ 빠름SEO 최적화👍 좋음👎 나쁨서버 부하🔴 높음🟢 낮음사용자 경험초기 화면 빠름페이지 전환 부드러움🖥️ 서버 사이드 렌더링(SSR)이란?📝 작동 방식사용자가 웹 페이지를 요청합니다. 🙋서버는 완전히 렌더링된 HTML을 생성합니다. 🏭브라우저는 이미 모든 내용이 준비된 HTML을 받아..

자바스크립트는 싱글 스레드 언어인데, 어떻게 동시에 여러 작업들을 수행하나요?

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

Connection Timeout, Socket Timeout, Read Timeout의 차이점은 무엇인가요?

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

낙관적 업데이트에 관하여 설명해주세요.

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