본문 바로가기

학원수업107

02/03 47회차 수업 오늘은 웹서비스에 필요한 컨셉을 느껴보는 시간^^ DOM 이란? 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다. html문서 전체를 가리키는 내장객체가 있다. BOM 브라우저의 내장객체 브라우저 객체 모델(Browser Object Mode.. 2023. 2. 3.
02/02 JavaScript (forEach, filter) Node.js V8은? 오픈소스 자바스크립트 엔진이다. 구글이 만들었다. 버블링과 캡쳐링 부모한테 이벤트가 발동되는것 : 버블링 자식한테 이벤트가 타고 내려오는것 : 캡쳐링 태그-순서가 없다. 비상태 Query String 쿼리스트링이란? 사용자가 입력 데이터를 전달하는 방법중의 하나로, url 주소에 미리 협의된 데이터를 파라미터를 통해 넘기는 것을 말한다. query parameters( 물음표 뒤에 = 로 연결된 key value pair 부분)을 url 뒤에 덧붙여서 추가적인 정보를 서버 측에 전달하는 것이다. 클라이언트가 어떤 특정 리소스에 접근하고 싶어하는지 정보를 담는다 물음표 뒷부분이 쿼리 스트링이다. get방식으로 가져온다. Restful API를 사용해서 가져오는것이다. Object J.. 2023. 2. 2.
02/01 naver API 이용신청하기 환경 기억해놓기 포스트맨에 가서 request 랑 npm express가 설치 되어있어야한다. 랜덤으로 네이버에서 캡차 이미지를 계속 받아온다. 로그인기능 구현시 API활용이 가능하다. 유저가 요청을 하면 네이버 서버에서 보여준다. 굳이 내가 이미지를 다운 받지않는다. const express = require("express"); const app = express(); const client_id = "RDDdbMBfUtlavWmyBD_e"; //개발자센터에서 발급받은 Client ID const client_secret = "비밀^^"; //개발자센터에서 발급받은 Client Secret const code = "0"; app.get("/captcha/nkey", function (req, res).. 2023. 2. 1.
02/01 UI시험 정리 서술형문제 텍스트노드 문자열을 표시하는것이다. 문자열도 내부 구성요소라서 노드이다. 노드 네임은 없고 노드 벨류만 있다. html에서는 노드를 태그라는 말로 주로 사용하고있다. html DOM tree는 node라는 계층적 단위에 정보를 저장하고있다. html문서의 정보는 node tree라고 불리는 계층적 구조에 저장된다. 노드 트리는 최상위 레벨인 루트 노드로부터 시작하여, 가장 낮은 레벨인 텍스트 노드까지 뻗어 내려간다. html의 문서의 모든 텍스트는 텍스트 노드이다. 이름이 없고 value값만 있다. 요소노드 : 태그 텍스트노드 : 텍스트노드 포트폴리오 문제 공지사항 작성하기 제목 내용 첨부파일 번호 제목 작성자 작성일 조회수 9 공지사항제목 9 바로가기 user01 2021-03-29 34 6.. 2023. 2. 1.
01/31 44회차 수업 JSON, RestfulAPI, JSP, Servlet CSS선택자 태그선택자 h1{ } 클래스 선택자 .title{ } 아이디 선택자 #title{ } HTML에는... window -document -write document.write("") 자바에서는 main()->exe파일->실행->로컬프로그램 system.out.println("룰루");--->PC 내컴퓨터에서만 실행이 된다. 클라우드 프로그래밍을 해야한다. 로컬에만 머무르면 안된다. 브라우저에서 실행을 해야한다. 웹 혁명 2.0이다. -효율적이다. 퍼포먼스중요하다. 브라우저->브라우저객체 API->폰에 내장이 되어있다. 자바를 브라우저에서 쓰려면 JSP문법이 필요하다. 통신-프로토콜이 필요-http, https 프론트앤드 개발은 즉, 브라우저에 쓰기이다. 브라우저는 인터프리터이다. 해석을 해주는.. 2023. 1. 31.
01/30 44회차 수업 HTML, CSS, JS CSS 트랜지션 사용하기 CSS 트랜지션은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니다. 예를 들어, 여러분이 어떤 요소의 색상을 흰색에서 검은색으로 변경한다면, 변화는 대개 즉시 일어납니다. CSS 트랜지션을 이용하면, 모두 커스터마이즈 가능한 어떤 가속도 곡선을 따르는 시간 주기마다 변화가 일어납니다. 두 상태 사이의 트랜지션을 포함하는 애니메이션을 종종 암묵적 트랜지션이라고 부르는데, 이는 시작과 종료 상태 사이의 상태를 브라우저가 암묵적으로 정의하기 때문입니다. 반응형 웹 연습 내 이력서 페이지 만들어보기 home me skills project contact 반응.. 2023. 1. 30.
01/27 국비학원 43회차 JavaScript수업 (DOM모델, This ) Filter로 내가 정의하는 Array.prototype.forEach() forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다. arr.forEach(callback(currentvalue[, index[, array]])[, thisArg]) 구조분해할당 복습 ...연산자 자바스크립트 구조 window : 가장 최상위 객체 document : html : 루트태그 head body : 화면을 그려주는태그 DOM (문서 객체 모델)이란? 문서 객체 모델, 즉 DOM은 웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스입니다. 즉 자바스크.. 2023. 1. 27.
01/26 국비학원 42회차수업 JavaScript (호이스팅, 함수, css) JavaScript는 독립적인 언어가 아니라 스크립트 언어로써, 특정한 프로그램 안에서만 동작을 할 수 있는데, 크롬, 파이어폭스, 사파리, 익스플로러 등 이런 웹 브라우저가 없으면 사용할 수 없는 단점이 공존했다. 따라서 client개발을 위한 용도로만 국한되어 있었다. Node/js는 터미널 프로그램(원도우 cmd, mac terminal 등)에서 node를 입력하여 브라우저 없이도 실행할 수 있게 됐다. 내가 지금 쓰는 nodemon이 이것이다. 크롬(Chrome)과 Node.js는 따라서 같은 엔진(Google의 V8 엔진)을 공유하지만, 다른 런타임(runtime) 환경, 즉 크롬(Chrome)과 Node.js라는 다른 실행 환경을 가지고 있다고 할 수 있다. 컴파일 고급언어를 저급 언어로 바꾸.. 2023. 1. 26.
01/25 국비학원 41회차 JavaScript수업 (nodemon사용하기, 스프레드 연산자) 동적타입 javascript는 느슨한 동적언어이다. 자바스크립트의 변수는 어떤 특정한 타입과 연결되지않으며 모든타입의 값으로 할당 가능합니다. 컴파일을 하지않는다. 컴파일을 한다는것은 타입체크를 한다는 뜻이다. 자바스크립트는 타입체크를 하지 않는다. 어떤 타입을 넣어도 다 들어간다. 함수도 객체취급을 받는다. 변수선언시에 함수도 객체취급을 받는다. const(변수선언하는거) 자바스크립트에서 함수는 객체이다. var는 쓰지마라. const나 let으로 바꾸어서 사용한다. JavaScript 의 타입 Boolean 타입 Null 타입 Undefined타입 Number BigInt String Symbol 원시형 타입에서 문자열이면 트루이다. //참 거짓 //>>> //1)false //2)0---0은 거짓이.. 2023. 1. 25.
01/20 국비학원 40회차 수업 MyBatist, Tomcat, Gson Front-End RoadMap html - (View계층) 일괄적인 디자인(CSS) 이벤트처리 할 수 없다 단방향서비스(1문, for문 지원안됨) - 정적페이지 동적페이지(jsp, 서블릿, spring:실력차감춤-F/-추, 인 ) Javascript(변수(let, const:배열, 함수, 객체,....컴파일안함.타입체크-CastingException-에러잡기-안전함) 제어문, 객체, 함수 자기주도학습 메타인지 로드맵 프레임워크가 제어 흐름의 권한을 가지고 있다. 출처 : https://cocoon1787.tistory.com/745 [개발상식] 프레임워크(Framework) 와 라이브러리(Library)의 차이 🚀 "프레임워크와 라이브러리의 차이를 아시나요?"" "음... 프레임워크는 뼈대이고 라이브러.. 2023. 1. 22.

티스토리툴바