본문 바로가기

개발자 강화

(129)
[매일메일] 시맨틱 마크업이란? (FE.250124) (개발자 강화/프론트엔드) 2025. 1. 24. 20:10 시맨틱 마크업이란?HTML 요소를 사용하는 방식시각적 목적이 아닌 "요소의 의미를 잘 나타내도록" 작성하는 방식비시맨틱 태그: , 시맨틱 태그: , , , 시맨틱 마크업이 중요한 이유?접근성을 개선하기 위해접근성 도구(스크린 리더)에서 콘텐츠의 구조를 더 잘 해석할 수 있음웹 접근성을 개선해 다양한 사용자층(노인, 시각장애인)이 사이트 탐색을 도움SEO(검색 엔진 최적화)에 유리함HTML 시맨틱 태그로 페이지 구성을 파악함.검색 엔진이 페이지를 올바르게 파악하므로, 검색 결과에서 페이지가 더 잘 노출될 수 있음CSR(Client Side Rendering)에서도 시맨틱 마크업이 SEO에 영향을 미치는가?원래 CSR에서 대부분의 콘텐츠가 클라이언트 측에서 렌더링되므로, 검색엔진은 크롤링 시 초기 로딩 콘텐..
[매일메일] 타입스크립트의 타입과 인터페이스 차이? (FE.250123) (개발자 강화/프론트엔드) 2025. 1. 23. 23:52 타입스크립트(TypeScript)란?자바스크립트의 슈퍼셋(자바스크립트의 모든 기능을 포함하면서, 추가 기능을 제공한다.) 이다.정적 타입을 제공함. (변수나 함수의 타입을 코드가 실행되기 전 컴파일 단계에서 미리 확인할 수 있음.)코드의 안정성과 가독성을 높여줌.정적 타입을 정의하기 위해 타입과 인터페이스를 사용하고, 데이터 구조와 타입을 명시함.타입(Type)이란?복잡한 타입 정의 및 조항을 표현하는 데 용이함.type으로 선언한 경우, 동일한 이름을 중복 선언하면 에러가 발생함.튜플 같은 복잡한 타입 표현이 가능하고, 복잡한 타입 조합을 위해 인터섹션(&)과 유니온(|) 연산자 지원.type BasicInfo = { name: string; age: number;};type ContactInfo ..
[매일메일] Java의 Stack, Queue, Deque란? (BE.2501223) (개발자 강화/백엔드) 2025. 1. 23. 23:52 자료구조 전공 수업을 배우거나, 코딩 테스트 문제를 몇 번 풀어봤다면 주구장창 봤을 개념.Stack이란? 좁고 긴 통에 나무 블록을 넣었다면, 다시 꺼낼 땐 가장 최근에 넣었던 블록부터 꺼내게 될 것.후입선출 Last In First Out(LIFO). 삭제(pop)는 가장 최상단(top)에서 이루어짐.Stack Underrflow: 비어있는 스택에서 값을 추출하려고 시도하는 경우Stack Overflow: 스택이 넘치는 경우Stack 활용 사례: 스택 메모리, 브라우저 뒤로가기, undo, 수식 괄호 검사Java에서 Stack/Queue/DequeStack Class: 재귀 호출, 수식 계산, Undo/Redo, 문자열 역순 처리Java에 Stack이라는 Class가 있음.List Collection의..
🌟[상상개발] 무한스크롤을 어떻게 구현하는 게 좋을까? (개발자 강화/프론트엔드) 2025. 1. 23. 13:32 * 주의: 실제 개발하면서 정리한 것이 아니라, 구현을 어떻게 할 수 있을지 찾아보고 생각을 정리한 글입니다. React Query 사용특징QueryClient라는 객체에서 관리하고, 이는 브라우저 메모리에 존재함.Query Key를 기준으로 저장함. 데이터+상태(status, fetching, updateAt)을 메모리 캐시에 보관함.staleTime으로 캐시된 데이터가 오래된 상태인지 확인하고, 오래됐으면 서버로 데이터 갱신useInfiniteQuery: 페이지네이션 데이터 관리할 때, 각 페이지 데이터를 구분해 메모리 캐시에 저장함.invalidateQueries: 서버 데이터가 변경된 경우, React Query는 invalidateQueries를 통해 캐시를 무효화.Garbage Collecti..
[매일메일] SSR vs CSR, SPA vs MPA란? (BE.250122) (개발자 강화/백엔드) 2025. 1. 22. 20:48 SSR이란?서버 측에서 렌더링하는 방식.클라이언트가 서버에 컨텐츠를 요청할 때마다, 서버는 완성된 페이지를 생성해서 클라이언트에 제공함.CSS를 모두 적용하고 렌더링 준비를 마친 HTML과 JS 코드를 응답함.브라우저에서는 JS 코드를 다운로드하고, HTML에 JS를 연결함.모든 데이터가 HTML에 이미 담겨있기 때문에 SEO(검색 엔진 최적화)에 유리함.JS 코드를 다운로드 받고 실행하기 전에 사용자가 이미 렌더링된 HTML을 볼 수 있음(초기 로딩 속도 빠름) CSR이란?클라이언트 측에서 렌더링 하는 방식.클라이언트가 서버에 컨텐츠를 요청하면, 서버는 빈 뼈대만 있는 HTML을 응답함.클라이언트는 연결된 JS 링크를 통해 서버로부터 다시 JS 파일을 다운로드 받음JS를 통해 동적으로 페이지를 만들어 ..
[매일메일] Connection/Socket/Read Timeout이란? (BE.250121) (개발자 강화/백엔드) 2025. 1. 21. 22:48 Connection Timeout클라이언트가 서버에 연결을 시도할 때, 서버 장애나 응답 지연으로 일정 시간 내 연결이 이루어지지 않으면 발생함3-way handshake가 일정 시간 내에 완료되지 않으면 발생함 (클라이언트-서버 연결을 위해 확인하는 절차) Socket Timeout패킷이 전송되는 시간 간격 제한 내에 다음 패킷을 보내지 않으면 발생함.패킷: 클라이언트와 서버가 연결된 후, 서버에서 데이터를 전송할 때 데이터를 여러 패킷 단위로 쪼개서 전송함.시간 내에 다음 패킷이 오지 않으면 클라이언트는 연결 종료. Read Timeout클라이언트와 서버가 연결된 후, 특정 I/O 작업이 일정 시간 내에 완료되지 않으면 발생함.클라이언트는 서버의 응답이 지연되거나 I/O 작업이 길어져 요청이 처리되지..
[매일메일] 낙관적 업데이트란? (FE.250121) (개발자 강화/프론트엔드) 2025. 1. 21. 19:17 낙관적 업데이트성공적인 상태 업데이트가 이루어 질 것이라는 가정 하에 서버 응답 전 UI를 미리 업데이트 해둠. 대표적인 예시 - 좋아요 기능사용자가 좋아요 버튼을 눌렀을 때, 서버 응답을 기다리지 않고 화면에 바로 버튼 누름 상태 반영함.서버 응답이 성공적으로 돌아오면 유지하고, 실패하면 UI에서 해제하거나 오류 메시지를 보여줌 장점서버 응답 속도와 상관 없이 즉각적인 피드백을 제공해서 사용자가 시스템을 빠르게 쓸 수 있음네트워크 상태가 좋지 않거나 응답 시간이 길어도 사용자 경험에 영향이 덜 미침 단점서버에서 오류가 발생하면 잠시동안 화면에 잘못된 정보가 표시될 수 있음이를 대비해 오류 핸들링(rollback) 로직을 같이 설계해줘야 함 낙관적 업데이트를 사용해야 하는 경우요청이 성공할 가능성이 높고..
[매일메일] 자바스크립트의 호이스팅(feat. 인터프리터 언어)(FE.250110/241230) (개발자 강화/프론트엔드) 2025. 1. 20. 22:12 호이스팅이란?- 변수와 함수 선언이 실행 전에 scope의 맨 위로 끌어올려지는 것처럼 보이는 동작- 변수를 선언하기 전에 호출해도 에러가 발생하지 않음. 선언된 위치보다 상단에서 변수에 접근할 수 있는 것처럼 보임. 인터프리터 언어란?- 한 줄씩 읽어서 즉시 실행하는 언어. 소스 코드를 직접 실행함..- runtime에 에러 감지- Python, JavaScript, Ruby, PHP 등  반의어: 컴파일러 언어.       - 실행 전에 전체 코드를 기계어로 변환하는 컴파일을 거친 후, 실행 파일로 실행.       - compile 단계에서 에러 감지       - C, C++, Java 등 자바스크립트에서 호이스팅이 가능한 이유?[1] 컴파일 단계: 함수 및 변수 선언을 한 부분이 메모리에 할당 ..
[매일메일] React의 Controlled Component와 Uncontrolled Component의 차이점? (FE.241220) (개발자 강화/프론트엔드) 2025. 1. 20. 21:55 Controlled ComponentUncontrolled Component정의React state(상태)로 입력값을 제어함DOM 자체가 입력값을 제어함입력값 관리value(입력 요소 값)을 React state와 동기화onChange로 사용자 입력 시 state 업데이트.상태와 ui가 동기화됨. 예측 가능성 높음.value(입력 요소 값)은 DOM에서 직접 관리함.React는 관여하지 않음.간단한 입력 폼이나 초기값 설정 및 DOM 접근에 용이.방식useState로 input value 제어하는 경우.value는 React state로 관리onChange 이벤트 발생하면 state 업데이트ref를 사용해 DOM 요소에 직접 접근해 값 읽기/쓰기예시실시간 유효성 검증(이메일 형식 확인)폼 데이터를 동적으..
[매일메일] React의 StrictMode란? (FE.241226) (개발자 강화/프론트엔드) 2025. 1. 20. 21:12 import { StrictMode } from 'react';function App() { return ( );}React의 StrictMode란?- 개발 중에 발생할 수 있는 잠재적인 문제를 사전에 감지하고 예방하기 위해 사용됨.- 개발자가 안전하고 효율적인 코드를 작성할 수 있도록 도와줌. 1. 오래된 라이프사이클 메서드와 비권장 API의 사용을 감지함.- componentWillMount, componentWillReceiveProps 같은 더이상 사용이 권장되지 않는 메서드를 쓰는 경우 경고를 표시.   (컴포넌트 생성 직전 호출되어 초기 상태 설정, 컴포넌트가 새로운 p..