반응형 javascript18 [로드맵] 웹 개발 - 학습로드맵 웹 기본1. 프로그래밍 언어- Java + Coding Convention(Google)- JavaScript + Coding Convention(Airbnb)- 디자인 패턴 2. 알고리즘 && 코딩테스트(Java)- [교재] 코딩 테스트 합격자되기(Java 편)- [교재] 코딩 테스트 문제 풀이 전략(자바 편)- [Site] Programmers- [Site] Baekjoon Online Judge- [Site] Softeer 3. 네트워크- [교재] 이기적 네트워크관리사 1,2급 필기+실기 올인원- [교재] 후니의 쉽게 쓴 시스코 네트워킹- [교재] 혼자 공부하는 네트워크- [Video] 혼자 공부하는 네트워크→ [자격증] 네트워크관리사 2급 4. 운영체제/컴퓨터구조- [교재] 혼자 공부하는 컴퓨터 .. 2025. 4. 9. [JavaScript] DOM(문서 객체 모델) Reference- [TCP School] 문서 객체 모델- [MDN] 문서 객체 모델- [ModernJS] 브라우저: 문제, 이벤트, 인터페이스(브라우저 환경과 다양한 명세서) - DOM(Document Object Model): XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스. W3C의 표준 객체 모델로 계층 구조로 표현됨- DOM 종류: Core DOM / HTML DOM / XML DOM- Document 객체: 웹 페이지 자체를 의미- HTML DOM은 Node라고 불리는 계층적 단위에 정보 저장- HTML 문서의 모든 것은 Node (Document 메서드)더보기메서드설명document.getElementsByTagName(tag_name)해당 태그 이름의 요소를 모두 선택do.. 2025. 4. 6. [JavaScript] JavaScript 주요 메서드 1 변수 선언더보기더보기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" }; // 객체.. 2025. 4. 4. [JavaScript] 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" }; // 객체.. 2025. 4. 4. [웹개발] 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. [웹개발] 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. [코딩테스트] JavaScript - 추천 문제 1회더보기문제문제 링크풀이미로 탈출 명령어(150365)문제 링크풀이택배 배달과 수거하기(150369)문제 링크풀이개인정보 수집 유효기간(150370)문제 링크풀이2회더보기문제문제 링크풀이110 옮기기(77886)문제 링크풀이쿼드압축 후 개수 세기(68936)문제 링크풀이없는 숫자 더하기(86051)문제 링크풀이3회더보기문제문제 링크풀이불량 사용자(64064)문제 링크풀이k진수에서 소수 개수 구하기(92335)문제 링크풀이거리두기 확인하기(81302)문제 링크풀이4회더보기문제문제 링크풀이코딩 테스트 공부(118668)문제 링크풀이두 큐 합 같게 만들기(118667)문제 링크풀이숫자 게임(12987)문제 링크풀이5회더보기문제문제 링크풀이보석 쇼핑(67258)문제 링크풀이파괴되지 않은 건물(92344)문제 .. 2025. 3. 16. [JavaScript] BOM(브라우저 객체 모델) Window 객체 Navigator 객체더보기/* 사용자 정보 확인 */const user = navigator.userAgent;/* 정규표현식: /(슬러쉬)내 문자가 ver내에 있는지 판단. 대소문자 구분 */const isIE = /trident/i.test(ver);/* Explore 접속시 경고 표시 */if(isIE) { alert("익스플로러 브라우저로 접속하셨네요. 이 웹페이지는 익스플로러를 지원하지 않습니다. 다른 브라우저로 접속해 주세요.");} 2025. 3. 6. [JavaScript] 태그 속성값 제어 태그 속성값 제어더보기/* 속성값 확인하기 */const tag = document.querySelector("선택자");const tagAttr = tag.getAttribute("속성명");/* 속성값 변경하기 */const tag = document.querySelector("선택자");tag.setAttribute("속성명", "값"); 2025. 3. 6. 이전 1 2 다음 반응형
