반응형 ETC13 [웹개발] JavaScript 주요 메서드 2 Fetch API(비동기 요청)더보기메서드설명fetch(url)GET 요청(기본)fetch(url, { method: "POST", body })POST 요청fetch(url, { method: "PUT", body })PUT 요청fetch(url, { method: "DELETE" })DELETE 요청response.json()JSON 데이터를 파싱response.text()텍스트 데이터로 변환response.statusHTTP 상태 코드 반환response.ok응답 성공 여부(true/false)fetch("https://api.example.com/data") .then((response) => response.json()) .then((data) => console.log(data)) .c.. 2025. 4. 3. [웹개발] JavaScript 주요 메서드 1 문자열(String)더보기메서드설명length문자열 길이 반환toUpperCase()대문자로 변환toLowerCase()소문자로 변환trim()앞뒤 공백 제거slice(start, end)부분 문자열 추출substring(start, end)부분 문자열 추출replace("찾을값", "바꿀값")문자열 치환split("구분자")문자열을 배열로 변환includes("문자")특정 문자 포함 여부 확인indexOf("문자")특정 문자 위치 반환(없으면 -1)let text = " Hello JavaScript! ";console.log(text.length); // 19console.log(text.toUpperCase()); // " HELLO JAVASCRIPT! "console.log(text.trim().. 2025. 4. 3. [웹개발] JavaScript 요약 변수 선언더보기let name = "Alice"; // 변경 가능const age = 25; // 변경 불가능var city = "Seoul"; // (과거 방식, 사용 지양, 호이스팅 문제 발생 가능)자료형더보기// 기본 자료형 (Primitive Types)let str = "Hello"; // 문자열let num = 42; // 숫자let bool = true; // 논리값let nothing = null; // 값 없음let unknown = undefined; // 정의되지 않음let symbol = Symbol(); // 유일한 값// 객체 자료형 (Object Types)let obj = { key: "value" }; // 객체let ar.. 2025. 4. 3. [웹개발] CSS 2025. 4. 2. [웹개발] Frontend 키워드 정리 Frontend- Frontend: UI/UX를 구현하는 작업- HTML(웹페이지 구조 정의) / CSS(웹페이지 스타일 정의) / JavaScript(웹페이지에 동적 기능 추가) (개발 역량)- DOM 조작 및 이벤트 처리 / 반응형 웹 디자인(RWD) / 웹 성능 최적화(Lazy Loading, Code Splitting)- REST API 및 GraphQL 통신 / 상태관리(Redux, Recoil, Vuex, Zustand) / 웹보안(XSS, CSRF) (개발 환경)- 패키지 관리자(npm, yarn)- 번들러 및 빌드 도구(Webpack, Vite)- 스타일링(Tailwind CSS, Styled Components, Sass)- 테스트(Jest, Cypress, React Testing Li.. 2025. 4. 2. [웹개발] 번들러 Bundler- Bundler: 웹 애플리케이션을 개발하기 위해 필요한 HTML, CSS, JS 등의 모듈화된 자원들을 모아서 하나 혹은 최적의 소수 파일로 결합(번들링)하는 도구- Bundler는 결합을 위해 프로젝트를 해석하는 과정에서 불필요한 주석이나 공백 제거, 난독화, 파일 압축 등의 기본 작업과 함께 최신 문법이나 개발에 편리한 특수 기능 등을 브라우저가 지원하는 형태로 변환하는 작업도 수행- Webpack, Parcel, Rollup이 있음Webpack- 대표적인 JavaScript 번들러(Webpack 기능)- Module Bundling: 진입점에 연결된 단일 파일로 묶어 줌- Automatic Bundle Optimization: 번들 최적화를 통해 보다 더 작은 번들을 생성하고 그만큼.. 2025. 4. 1. [웹개발] DB 설계 1. 주제 선정1) 목적2) 주요 기능 2. 요구 수집 및 분석1) 요구 수집 명세서2) 업무 영역 분할도3) 업무별 데이터 및 트랜잭션 요구 분석 명세서 3. 개념적 설계1) 개념적 스키마 모델링- 개체 후보 식별: 주어나 목적어로 표현된 개체 후부 식별- 개체 후보 검토: 실제 데이터 수와 대표 속성을 파악하여 선정- 개체 선정: 식별된 개체 후보를 검토해서 속성이 없거나 관계로 표현하는 것이 더 적합한 것을 제외하고 선정- 관계 후보 식별: 동사로 표현된 관계 후보를 검토하여 선정- 관계 식별 목록: 선정된 관계 후보에 대해 관계 유형과 관계 설명 속성까지 결정- 최종 개체 목록- 최종 관계 목록 2) ER 다이어그램 작성 전 체크리스트더보기개체관련 관계관련 속성관련 3) ER 다이어그램 그리기 4.. 2025. 3. 31. [웹개발] 스트리밍 스트리밍- 스트리밍: 비디오 또는 오디오 데이터를 구성하는 데이터 패킷을 분해하고 각각을 해석하여 사용자 장치의 블레이어에서 비디오 또는 오디오로 실시간 재생하는 방식- 스트리밍을 통해 사용자는 콘텐츠를 지속적으로 시청하고 끊김 없는 시청 경험을 가능하게 함- 스트리밍 종류: 비디오, 오디오, 라이브- 라이브 스트리밍: 이벤트가 발생하는 시점의 비도오 또는 오디오 방송- 버퍼링: 연결이 잠시 중단되더라도 사용자가 계속해서 비디오를 보거나 오디오를 들을 수 있도록 미리 스트림의 일부를 로드하는 프로세스- 버퍼링은 네트워크 속도가 느리거나 연결이 끊어질 가능성이 있는 상황에서 유용- 대역폭: 매초 네트워크 연결을 통해 전송할 수 있는 최대 데이터 양(Mbps)- 일반적으로 비디오 스트리밍 사용시 네트워크에 .. 2025. 3. 31. [웹개발] Rendering 렌더링 과정1) HTML을 파싱해서 DOM 트리 구축- HTML은 부분적으로 실행2) CSS을 파싱해서 CSSOM 트리 구축- CSS는 렌더링 차단 리소스로 간주3) JavaScript 실행- JavaScript는 파서 차단 리소스(JavaScript에 의해 HTML 구문 분석 차단)- async로 비동기 로드하여 파서 차단 방지4) DOM과 CSSOM을 통합해서 Render 트리 구성- display:none을 사용한 숨겨진 요소는 포함하지 않음5) Redner 트리 기반으로 Layout 생성- 뷰포트의 크기 결정6) Screen에 Painting- 가시적인 내용을 픽셀로 표시- DOM의 크기와 적용되는 스타일에 따라 처리 시간이 다름7) Cirtical Rendering Path 과정 확인- DevT.. 2025. 3. 30. [Project] API 명세서 API 명세서- API: 서버와 클라이언트가 데이터를 주고 받을 수 있도록 도움을 주는 매개체- API 명세서: 어떤 용도로 만들어졌는지, 어떤 유형의 API 인지 어떤 요청 방식을 사용하는지 설명- endpoint 설명: endpoint는 API의 특정 동작을 수행. URL과 함께 해당 엔트포인트에서 수행되는 동작을 설명- parameter와 request body 설명: API 호출시 전달되는 매개변수와 요청바디에 대한 설명을 포함. 매개변수에 대한 설명, 데이터 타입, 기본값을 명시- response 설명: API의 응답에 대한 설명을 포함. 응답 코드와 함께 예상되는 응답 데이터에 대한 정보를 제공- API examples: 각 API 호출에 대한 예제를 제공. API 사용자가 API 호출을 어떻.. 2025. 3. 30. 반응형
