프론트엔드 개발자 youkn0wthat 님의 블로그

임정희 - 눈물이 안났어 😭SEO는 검잭엔진이 내 페이지를 이해하도록 돕는 작업검색엔진이 내 사이트를 크롤링(수집) → 인덱싱(저장/이해) → 검색결과에 노출 하는 과정에서, 내 콘텐츠를 더 잘 찾고 이해하게 만드는 작업 SEO의 기본 원칙1. 검색 의도 충족 - 사용자가 뭘 찾는지에 맞춰서 페이지 주제/답이 명확해야 함 2. 구조/마크업으로 의미 전달 - 검색엔진이 이해하기 쉬운 Title, Descripton, H1 ~ H3, 시맨틱, 구조화 데이터 등3. 크롤/인덱스/성능 - 수집, 발견, 상태코드, 구글은 페이지 경험/코어웹바이탈도 시스템에 사용됨 0. 시멘틱 태그- 검색엔진이 이 페이지의 핵심 본문, 글, 내비게이션 같은 영역을 더 쉽게 구분함- header, nav, mian, secti..

미리보기 비교 요약) HTML을 언제?초기 로딩 속도SEO서버 부하최신 데이터사용하는 곳CSR브라우저에서 JS로 렌더느림(첫 진입 시 / 이후 빠름)나쁨낮음매우 좋음인터랙션 중심SSR요청마다 서버가 HTML 생성빠름 (첫 진입 시)좋음높음매우 좋음검색 및 SEO 중요한 페이지, 실시간 데이터 중요SSG빌드 시 HTML 생성매우 빠름 매우 좋음낮음낮음변동 적은 컨텐츠ISR빌드 + 일정 주기 빠름 좋음 중간중간가끔 갱신 컨텐츠 - CSR : 대시보드 / 관리자 페이지 / 마이페이지 / 장바구니 / 검색&필터 / 편집 화면(글 작성,수정, 업로드)- SSR : 검색 결과 페이지 / 상세 페이지 / 카테고리, 목록 페이지 / 예약,주문 완료 페이지 - SSG : 블로그 / 문서 / 가이드- ISR : 상세 페이..

1. Accessibility란 무엇인가? 2. 프론트 엔드 개발자는 무엇을 신경 써야 할까? 3. 프론트 개발자가 접근성에서 챙일 우선 순위는 어떻게 될까 Accessibility란 무엇인가?최대한 많은 사람이, 다양한 환경과 보조기기를 통해 동등하게 웹을 사용할 수 있도록 하는 것- 예를 들어 시각 / 청각 / 지체 / 인지 장애 또는 노령, 저속 네트워크, 모바일 환경 등 모든 사용자의 제약 정책 기준• 국제 표준: WCAG 2.2 • 한국 표준: KWCAG - 인식 가능한(Perceivable), 운용 가능(Operable), 이해 가능(Understandable), 견고성(Robust) 프론트엔드 개발자는 무엇을 신경 써야 할까?1. 인식 가능한(Perceivable)• 시매틱 구조스크린 리..

1. 인증 & 인가 무엇이 다른가?2. 주요 인증 방식3. 로그인 후 상태 유지4. 인가 방식 정리5. 스키마 구조 1. 인증 & 인가 무엇이 다른가?현대의 웹 서비스는 단순한 로그인 기능을 넘어서 정교한 인증과 인가 메커니즘을 요구한다. 개념의미예시인증 (Authentication)당신은 누구인가?이메일/비밀번호/QR 로그인 및 생체 인증(얼굴, 지문 인식)인가 (Authorization)당신이 뭔데 ?인반 사용자는 관리자 페이지 접근 불가 - 먼저 인증을 통해 사용자의 신원을 확인- 이후 인가를 통해 해당 사용자가 특정 페이지나 기능에 접근할 권한이 있는지 판단 2. 주요 인증 방식엔 무엇이 있는가?인증에는 어떤 방식으로 로그인을 하고 그 뒤에 어떻게 인증값을 유지할건지도 중요하다. A. 이메..

목차1. TypeScript란 무엇인가?2. 컴파일러와 타입 시스템3. Type 과 Interface 차이점4. 타입 종류1. TypeScript란 무엇인가?)타입스크립트는 자바스크립트에 정적 타입을 더한 슈퍼셋 언어. - 모든 자바스크립트 코드를 타입스크립트에서 그대로 사용할 수 있음.- 실제로 실행될 때는 TypeScript 컴파일러가 .ts 코드를 순수 자바스크립트로 변환하고, 그 결과물을 실행시킴 정작 vs 동적 타입)TypeScript는 실행 전부터 검사하는 정적 타입언어let value: number = 1;value = "나는 1등"; // 즉시 에러 발생 // 컴파일 단계에서 에러 발생 - 변수/파라미터/리턴값에 타입을 명시하거나- 명시하지 않아도 타입 추론으로 타입이 정해지고- 그 타..

가비지 컬렉션이란? 더 이상 접근할 수 없는 객체를 자동으로 찾아 메모리를 회수하는 메모리 관리 기법 JS 엔진은 Generational + Mark-Sweep-Compact + Incremental,Concurrent 기법을 조합해일시 중지를 줄이면서 자동으로 메모리를 관리함, GC가 있다고 해서 메모리 누수가 사라지는 건 아니고참조를 끊지 않는 채로 오래 붙잡는 경우는 직접 관리해야함 1. 가비지 컬렉션은 왜 필요한가? - 수동 메모리 관리는 빠르고 세밀하지만 해제 누락, 이중 해제, UAF 같은 오류가 치명적임 - JS,Java,Python처럼 GC언어는 더이상 사용하지 않는 객체를 자동으로 해제 하기 때문에개발 생산성과 안정성을 향상 - 언제 해제될지는 보장하지 않음, 지연/일시중지 등 성..

자바스크립트의 메모리 구조란? 자바스크립트는 자동 메모리 관리 언어로 개발자가 직접 malloc 또는 free 같은 명령으로메모리를 할당하거나 해제하지 않아도, 가비지 컬렉터가 알아서 관리합니다. 1. Stack(스택) 메모리스택은 고정된 크기의 메모리 영역으로, 원시 타입 데이터가 저장되는 공간 number, string, boolean, null, undefined, symbol, bigint이러한 타입 7개는 불변성 타입으로 값(Value)에 바로 저장됨(불변성으로 인해 한 번 생성되면 그 값을 바꿀 수 없) - LIFO(Last In, First, Out)구조→ 함수 실행 시 새로운 스택 프레임이 새익고, 함수가 끝나면 스택에서 제거됨 - 데이터 크기가 고정되어 있고 접근 속도가 매우 빠름 - ..

RESTful API 란?REST 원칙을 더 엄격하고 명확하게 지킨 APIREST API 란?아키텍처 스타일로 리소스를 URL로 표현하고, 그걸 HTTP 메서드로 조작하는 개념 1. RESTful API 원칙 - 명확한 URI 경로 사용→ URL(주소), URN(이름)을 명확하게 정의해서 사용 - HTTP 메서드 사용 → GET 조회 / POST 생성 / PUT 전체 수정 / PATCH 일부 수정 / DELETE 삭제 - 상태 코드 사용 → 200 성공 / 201 생성 완료 등.. 네트워크 HTTP 응답 상태 코드에 대해서 알아보자🔵 100번대 : 처리중의미설명100계속 진행서버가 헤더를 받고 클라이언트에 계속하라고 응답101프로토콜 변경예시) HTTP → WebSocket 전환 요청 🟢 200..

fetch 옵션에는 무엇이 있고 언제 사용할까? 1. method 값설명"GET"데이터 조회"POST"데이터 생성"PUT"전체 데이터 교체"PATCH"일부 데이터 수정"DELETE"데이터 삭제 메서드를 사용하여 데이터를 어떻게 사용할건지 2. headers값설명Content-Type요청 데이터 형식 / JSON 전달시 Content-Type : "application/json"Accept응답 데이터 형식Authorization인증 토큰 전달Cookie세션 쿠키 전달X-CSRF-TokenCSRF 방지 토큰 요청/응답 형식 및 인증 정보를 어떻게 전달할건지. 3. body값설명JSON.stringify()JSON 데이터 전송FormData파일 업로드URLSearchParams쿼리스트링 방식 데이터를 어..

useEffect란 ? useEffect는 React 컴포넌트가 렌더링 된 이후에 실행되는 사이드 이펙트 처리 함수입니다.(API 호출, 이벤트 리스너 등록 및 해제, 로컬스토리지, 타이머, 라이브러리 호출 ) 즉, 컴포넌트가 렌더링이 됐을때 특정 동작을 실행 시키는 React Hook(변수는 특정 동작을 실행 시켰을때 작동한다면이 hook은 컴포넌트가 렌더링 되면 실행 또는 의존성 배열에 값을 지정해 그 값이 호출된다면 다시 실행 시킴) 1. 사용 이유 A. 렌더링이 되었을때 특정 값이나 행동이 무조건 필요함- 화면에 진입 하자마자 초기 데이터가 필요한 경우(변수로 불러오기에는 특정 동작이 필요함.) B. 다른 변수로 인해 특정 행동을 더 취해야 될 때- 의존성 배열에 그 값을 넣고 사용(의존성 배열에..