본문 바로가기

전체 글

 (135)
📘 브라우저 호환성 이슈와 대처 방법, Polyfill 에 대한 설명 ✅ 브라우저 호환성 이슈웹은 다양한 브라우저 (Chrome, Safari, Edge, IE 등)와 기기에서 실행되는데, 브라우저마다 지원하는 기능이나 렌더링 방식이조금씩 다르다 보니 문제가 생기는걸 말한다.예 : 어떤 브라우저에서는 CSS 최신 속성이 적용되는데, 다른 브라우저에서는 무시되거나 깨짐 ✅ 대처방법은?1. 표준 준수 코드 작성W3C 웹 표준에 맞게 HTML,CSS,JavaScript를 작성하면 대부분의 브라우저에서 동일하게 동작 2. 벤더 프리픽스 사용예) -webkit-,-moz- 같은 접두사를 활용해 특정 브라우저에서 호환되도록 처리 3. 호환성 체크 도구 활용Can I use 같은 사이트에서 기능 지원 여부 확인 4. Graceful Defradation & Progressive Enh..
📘 HTML, CSS, JavaScript의 기본 개념과 특징 ✅ HTML (HyperText Markup Language)웹 페이지의 구조와 의미 ( 뼈대 ) 를 정의하는 마크업 언어 특징콘텐츠의 의미를 표현 ( 제목, 문단, 이미지, 링크 등)시맨틱 태그 제공 ( ,,,등) 접근성과 SEO 향상프로그래밍 언어가 아니라 마크업 언어 ✅ CSS (Cascading Style Sheets)웹 페이지의 스타일(디자인과 레이아웃)을 정의하는 언어 특징색상, 글꼴, 배경, 여백, 레이아웃 등을 꾸밈선택자(selector)를 통해 HTML 요소에 스타일 적용반응형 웹 구현 가능(미디어쿼리 사용)유지보수 편의성을 위해 외부 CSS 파일로 분리 가능 ✅ JavaScript웹 페이지에 동적인 기능과 로직을 부여하는 프로그래밍 언어 특징HTML & CSS 와 함께 웹 3대 핵심 기..
📘 웹 표준과 웹 접근성 ✅ 웹 표준(Web standards)웹을 만드는 데 필요한 기술 (HTML,CSS,JavaScript 등)을 국제적으로 통일된 규칙에 따라 작성하는 것표준은 주로 W3C(World Wide Web consortium) 와 같은 국제 기구에서 제정목적은 브라우저나 기기 환경에 상관없이 동일하게 동작하도록 하기 위함이다. 특징크로스 브라우징 보장 (Chrome, Safari, Edge, Firefox 등에서 같은 동작)유지보수 용이코드 재사용성 향상검색엔진 최적화(SEO) 에도 유리 -- 한마디로웹 표준에 목적은 웹 기술의 통일, 일관성 확보대상은 개발자 & 브라우저효과는 유지보수 확장성 SEO 향상 즉, 코드를 정석대로 작성하는 것 이다.✅ 웹 접근성(Web Content Accessibility Gui..
📘 옵셔널 체이닝(?.) ✅ 옵셔널 체이닝( Optinal Chaining, ?.)객체의 속성이나 메서드에 접근할 때, 해당 값이 null 또는 undefined 라면 에러 대신 undefined를 반환하는 연산자즉, 안전하게 속성에 접근할 수 있게 해주는 문법 이다. const user = { name: "홍길동", profile: { age: 25 } }; // 정상 접근 console.log(user.profile.age); // 25 // 잘못된 접근 (address가 없음) // console.log(user.address.city); // 에러 발생! // 옵셔널 체이닝 사용 console.log(user.address?.city); // undefined 그냥 user.address.city라고 쓰..
📘 Frontend Flow ✅ 프론트엔드 흐름(Frontend Flow)프로젝트 환경 세팅프레임워크 / 라이브러리 선택(React , Vue, Nextjs 등)패키지 설치(npm, yarn)빌드 도구(Vite webpack 등) 설정 UI 설계 & 컴포넌트 구조화화면을 나누고 재사용 가능한 컴포넌트 단위로 쪼갬예: Header, Footer, Sidebar, Card, Button 같은 것들디자인 가이드를 Figma 같은 툴에서 가져와 반영 라우팅(페이지 전환)URL에 따라 다른 화면을 보여주는 구조예: /home , /login, / profileRect -> react-router-dom, Next.js -> 내장 라우팅 상태 관리데이터가 컴포넌트 간에 오가야 할 때 정리예: 로그인 상태, 장바구니, 사용자 정보작은프로젝트 -..
📘 SSR (Sever-Side Rendering) ✅ 서버 사이드 렌더링 (SSR) 이란웹 애플리케이션을 서버에서 먼저 HTML을 생성해 클라이언트(브라우저)로 전달하는 방식을 말한다. 쉬운 설명웹 사이트 화면을 서버에서 먼저 만들어서 보내주는 방식 비유 CSR ( 클라이언트 사이드 렌더링)손님이 주문하면 -> 재료(데이터)만 주고 -> 손님이 직접 햄버거(화면)를 조립해야 함처음엔 빈 접시 ( 빈 화면)만 보이고, 다 조립되기 전까진 기다려야함 SSR( 서버 사이드 렌더링 ) 손님이 주문하면 -> 가게(서버)에서 햄버거(완성된 화면)를 만들어서 바로 내줌 손님은 받자마자 먹을 수 있음 ( 브라우저는 바로 화면에 보여줌 ) ✅ 기본 동작 흐름클라이언트 요청 : 사용자가 특정 URL에 접속서버 처리 : 서버가 해당 페이지의 데이터를 불러와서 HTML을 완..
📘React 흐름 ✅ React의 흐름도 (전체 과정)React 앱은 index.html 안의 하나만 존재main.jsx(또는 index.js) 에서ReactDOM.createRoot(document.getElementById('root')).render()로App 컴포넌트를 root에 렌더링✅ 컴포넌트 단위 구조React는 화면을 컴포넌트 (Component)라는 작은 단위로 나눈다.function App() { return ( ) }App -> Header, Main,Footer 처럼 트리 구조로 연결 된다.✅ 데이터(State) 흐름React는 단방향 데이터 흐름을 가진다.부모->자식 으로 props 전달컴포넌트 내부에서 useState 등으로 상태를 ..
📘React 실전 많이 사용되는것들 정리 ✅ 상태관리useState, useRedecer 로컬 상태 관리useContext + Context API 전역 상태 공유Redux / Zustand / Recoil 같은 외부 상태 관리 라이브러리 사용로그인 상태, 다크모드, 사용자 정보 같은 전역 데이터 관리 ✅ 데이터 통신fetch, axios API 호출React Query(TanStack Query) 서버 상태 관리, 캐싱, 자동 리페치Supabase / Firebase 같은 BaaS와 연결게시판 글 목록 불러오기, 무한 스크롤, 로딩/에러 처리 ✅ 라우팅React Router 페이지 이동, 동적 라우팅, URL 파라미터 처리useNavigate, useParams,Outlet 등/post/123 같은 상세 페이지 구현 ✅ 폼 처리react-ho..

티스토리툴바