![]()
주제: webAPI의 dialog box인 alert(), confirm() 메소드는 window나 document 없이 바로 사용할 수 있는 이유 찾아보기 alert(), confirm() 등의 메소드는 명시적으로 참조 없이 사용할 수 있는 이유는 전역 객체의 속성으로 존재하기 때문이다. 전역 객체는 웹 브라우저에서 전체 페이지 접근 가능한 내용을 담고 있는 객체이다. (전역 범위에 항상 존재하는 객체) window 객체를 통해 전역 범위에 있는 변수와 함수에 접근할 수 있기 때문에, 전역 객체를 직접 명시하지 않아도 되는 것이고 웹 브라우저 환경에서 전역 객체가 window 객체인 이유는 브라우저에서 JS가 실행되는 동안 전역 범위에 있는 모든 변수와 함수는 window 객체의 프로퍼티가 되기 때문이..
![]()
노드 간의 관계를 이용하여 접근하는 방법 노드 리스트(node list) getElementsByTagName() 메소드나 childNodes 프로퍼티의 값으로 반환되는 객체 이 객체는 HTML 문서와 같은 순서로 문서 내의 모든 노드를 리스트 형태로 저장하고 있다. 리스트의 각 노드는 0부터 시작 노드를 추가하는 방법 특정 위치에 새로운 노드를 추가할 수 있다. appendChild() : 새로운 도느를 해당 노드의 자식 노드 리스트의 맨 마지막에 추가 insertBefore() : 새로운 노드를 특정 자식 노드 바로 앞에 추가 insertData() : 텍스트 노드의 텍스트 데이터에 새로운 덱스트를 추가 노드를 생성하는 방법 createElement() createAttribute() createTe..
![]()
주제.1 html 문서 앞에 참고 코드를 보면 head 다음에 js 코드가 작성되어 있다. 하지만 코드를 실행하고 개발자 도구를 열어보면 이것 처럼 요소가 안에 있는데 불어와져 있는걸 볼 수 있다.. 왜일까?? 브레이크 포인트를 걸어놓고 확인해 보자 새로 고침을 해보면 js 코드에서 브레이크를 걸어놔서 body가 안나온다 분명이 11번째 줄 지났을때 개발자 도구에서는 에 있는 요소들이 출력이 안된다 하지만 getElementsByTagName 메소드는 HTMLCollection 이다. 아래 참고 링크 처럼 HTMLCollection 는 실시간으로 반영된다. querySelector vs getElementsByClassName (NodeList vs HTMLCollection) For this blog ..
![]()
Web API의 Document 객체 Document 객체는 웹 페이지 그 자체를 의미합니다. 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작한다. (HTML 요소들은 다 document 안에 있기 때문에) Document 메소드 HTML 요소와 관련된 작업을 도와주는 다양한 메소드를 제공한다. HTML 요소의 선택 HTML 요소의 생성 HTML 이벤트 핸들러 추가 HTML 객체의 선택 HTML 요소의 선택 메소드 설명 document.getElementsByTagName 해당 태그 이름의 요소를 모두 선택함 document.getElementById 해당 아이디의 요소를 선택함 document.getElementsByClassName 해당 클래스에 속한 요..
![]()
강의 함수(Function) 지역 변수(local variable) 함수 내에서 선언된 변수 변수가 선언된 함수 내에서만 유효하고, 함수가 종료되면 메모리에서 사라진다. function printX() { let x = 10; console.log(x); // 10 } printX(); console.log(x); // ReferenceError: x is not defined 전역 변수(global variable) 함수의 외부에서 선언된 변수 프로그램의 어느 영역에서나 접근할 수 있고, 실행코드가 닫혀야만 메모리에서 사라진다. let x = 10; function printX() { console.log(x); // 10 } printX(); console.log(x) // 10 호이스팅(hoisti..
![]()
강의 연산자 (operator) 논리 연산자(logical operator) 논리 연산자 설명 && 모두 참이면 참(논리 AND 연산) || 하나라도 참이면 참(논리 OR 연산) ! 참이면 거짓, 거짓이면 참(논리 NOT 연산) 제어문 (Control Flow statements) 조건문 조건이 충족할떄만 특정 구문을 실행할때 사용 논리적인 로직을 표현할 때 가장 중심이 되는 구문이다 조건에 들어가는 값은 항상 불리언 연산이 적용된다. if문 if (조건) { 만약 조건(condition)이 참일 경우 실행할 코드 } if / else 문 x가 양수인 경우 "양", 음수인 경우 "음" 라는 메시지를 출력합니다. if / else 문은 조건이 참인 경우와 거짓인 경우 각각 다른 코드를 실행함 let x =..
![]()
강의 JavaScript 개요 JavaScript의 특징 객체 기반의 스크립트 언어 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어 Node.js와 같은 프레임워크를 사용하면 서버 프로그래밍으로 사용가능 인터프리터 언어 C언어와 같은 언어는 소스 파일를 컴파일하여 사용자가 실행할 수 있는 실행파일로 만들어 사용 하지만 인터프리터 언어는 이러한 컴파일 작업을 거치지 않는다. 자바스크립트는 웹 브라우저에 포함된 자바스크립트 인터프리터가 소스 코드를 직접 해석하여 바로 실행해 줌 DOM(Document Objects Model) HTML, XML 와 같은 문서를 프로그래밍 언어를 이용해 표현, 저장, 조작 등.. 이러한 것들을 할 수 있도록 해주는 인터페이스 Node.js Chrome V8 JavaScr..
![]()
실시간 강의 2023.07.20 - [캠프/AI 웹개발 취업캠프] - [AI 웹개발 취업캠프] 4Day - css 꾸미기(1) [AI 웹개발 취업캠프] 4Day - css 꾸미기(1) 해야할 작업들. 스크롤 내렸을때 상단에 헤더가 고정 로고 좌측, 메뉴 우측 main 과 side 구분 및 아래 footer 부분까지 변경된 코드 내부 스타일 시트가 아닌 외부 스타일 시트 사용을 위해 헤드부분 gorangcodingstory.tistory.com 작업 내용 폰트 변경 (D2Coding 폰트 사용) 섹션 부분 헤더에 가려지지 않게 섹션에 마진 값 추가 웹 폰트 가져오기 @font-face { font-family: 'D2Coding'; src: url('https://cdn.jsdelivr.net/gh/pro..
![]()
해야할 작업들. 스크롤 내렸을때 상단에 헤더가 고정 로고 좌측, 메뉴 우측 main 과 side 구분 및 아래 footer 부분까지 변경된 코드 내부 스타일 시트가 아닌 외부 스타일 시트 사용을 위해 헤드부분에 코드추가 헤더에 로고랑 메뉴 구분을 하기 위에 각각의 클래스명 부여 logo 메뉴 1 메뉴 2 메뉴 3 메뉴 4 메뉴 5 오늘은 구역만 나눠보기로 했다 header { position: fixed; top: 0; left: 0; right: 0; background-color: #f0f0f0; padding: 10px; } nav { display: flex; justify-content: space-between; align-items: center; } .Logo { flex: 1; } .Lo..
![]()
오늘 과제 만들고 싶은 사이트 - 단축주소, (일단 생각 안남) 등등 서비스를 지원하는 사이트 참고사이트 - https://url.kr/ 참고사이트는 헤더, 메인, 푸터로 이루어져있지만(?) 내가 만들 사이트는 회원까지 필요해서 사이드에 로그인창 및 다른 요소를 넣을 예정 대략적인 와이어프레임 코드 logo 메뉴 1 메뉴 2 메뉴 3 메뉴 4 메뉴 5 Main Sidebar Footer 파일 본 후기는 정보통신산업진흥원(NIPA)에서 주관하는 과정 학습/프로젝트/과제 기록으로 작성되었습니다.
![]()
첫날 과제 1. 본 강의를 참여하게 된 계기는 무엇인가요? 부트캠프 수료 이후 취업과정에서 기본기랑 cs 지식이 부족한거 같아 참여하게 되었습니다. 2. 강의를 이수하고나서 기대되는 변화가 있나요? ai 활용한 프로젝트 이력 3. 개발자란 무엇일까? 본인이 생각하는 개발자는? 없던거를 만들어내는 사람 4. 개발자가 된다면 무엇을 개발하고 싶고 어떤 회사/일을 다니고 싶은가요? 내가 개발자로서 성장할수있는 회사 5. 본인이 만들고 싶은 웹사이트가 있다면 간략하게 소개해주세요. 비슷한 웹사이트나 제품이 있다면 참고할만한 url 혹은 자료를 첨부해주세요. 단축 url 서비스 등 각종 서비스를 지원하는 웹사이트 본 후기는 정보통신산업진흥원(NIPA)에서 주관하는 과정 학습/프로젝트/과제 기록으로 작성되었습니다.
![]()
오늘 10시부터 저녁6시까지 발대식이 있었지만.. 놀러왔다가 폭우로 기차가 다 운행중지..???!! 그래서 미참석했지만 자료를 받아 안내에 따라 진행했다 이전 캠프에서 ZEP, 노션, 슬랙을 사용해서 유데미 계정만 새로 만들었다. 이번 AI + 웹개발 취업캠프를 참여하게 된 이유는 취업과정에서 CS가 많이 부족한걸 느꼈고 번아웃도 오고... 그래서 (왜 포지션제안은 다른 직무에서만 올까.. ㅋㅋ ㅎㅎ) 혼자로썬 추가적인 공부를 하기 힘들거 같아 같이 공부할 사람들이 있다면 동기부여가 될거같아 참여하게 되었다. 본 후기는 정보통신산업진흥원(NIPA)에서 주관하는 과정 학습/프로젝트/과제 기록으로 작성되었습니다.
