WINK-(Web & App) (438) 썸네일형 리스트형 [2024 신입부원 기초 스터디] 김지나 #4주차 - DOM(Document Object Model): 웹 문서를 제어하기 위해 개발된 언어: 컨텐츠 변경, 추가, 제거 등 html 문서를 조작하기 위해 만들어진 언어: 스크립트 언어로 html 요소를 제어할 수 있도록 웹문서를 객체화한 것 - Document: 자바스크립트에서 DOM 접근을 위해 쓰이는 Interface let element, elements;element = document.getElementById("Id"); // id 속성값으로 요소 찾기elements = document.getElementByClassName("className"); // class 속성값으로 요소 찾기element = document.querySelector("selector") //셀렉터를 통해 요소 찾기e.. [2024 신입부원 기초 스터디] 김민서 #4주차 DOMJavaScirpt웹 문서를 제어하기 위해 개발컨텐츠 변경, 추가 제거 등의 html 문서 조작을 위해 만들어짐DOM(Document Object Model) - 스크립트 언어로 html 요소를 제어할 수 있도록 웹문서를 객체화 Document - 자바스크립트에서 DOM 접근을 위해 쓰이는 인터페이스 document.querySelector("#id"); 셀렉터를 통해 특정 id 속성값을 가진 요소를 찾음document.querySelector(".class-name"); 셀렉터를 통해 특정 class를 가진 요소를 찾음document.querySelector("input"); 셀렉터를 통해 특정 태그를 찾음 htmlhead - titlebody - h1, p append() : DOM에 새로운 .. [2024 신입부원 기초 스터디] 김태일 #4주차 본 글은 다음 수업자료를 참고하여 정리한 글입니다.01. javascript- 웹 문서를 제어하기 위해 개발된 언어- html문서를 조작하기 위해 만들어진 언어 02. dom- 스크립트 언어로 html요소를 제어할 수 있도록 웹문서를 객체화 한 것 03. document- 자바스크립트에서 dom접근을 위해 쓰이는 interface 04. 예제 Hello, world! How are you? let title = document.createElement("title"); //create Element를 통해 title요소 생성title.append("My first web page"); //title에 append를 이용해 "My .. [2024 React.js 스터디] 이서영 #4주차 리액트 입문 1. 리액트는 어쩌다가 만들어졌을까?DOM을 변형 : DOM Selector API를 사용, 특정 DOM선택 -> 특정 이벤트가 발생하면 변화를 주도록 설정만약 인터랙션이 자주 발생하고 이에 따라 동적으로 UI를 표현해야된다면 관리하기가 힘들어짐DOM을 직접 건드리면서 작업을 하면 코드가 난잡해지기 쉬움-> Ember, Backbone, AngularJS 등의 프레임워크가 만들어짐 - 자바스크립트의 특정 값이 바뀌면 특정 DOM의 속성이 바뀌도록 연결을 해줌 (업데이트 작업을 간소화 해줌) -> 리액트의 개발 - 어떠한 상태가 바뀌었을 때, 업데이트를 어떻게 할 지 규칙을 정하는 것 X - 그냥 다 날려버리고 처음부터 새로 만든다는 아이디어로부터 시작 -> 하지만 모든 걸 다시 새로 만들면 속도가 느림 .. [2024 React.js 스터디] 한승훈 #4주차 1. React는 어떻게 만들어졌을까React는 사용자와의 인터랙션이 있는 페이지를 위해 만들어졌습니다.요소의 관리가 더욱 편해집니다.2. 개발 환경과 시작개발 환경을 갖춘 후,npx create-react-app new-reactcd new-reactyarn start를 통해 바로 localhost로 실행이 가능합니다.3. 컴포넌트 만들기컴포넌트 상단에는import React from ‘react’ //리액트를 사용할거라는 의미하단에는 export default FileName // FileName이라는 이름으로 타 파일에서 접근할것임을 명시합니다.이를 FileName.js에 작성하고,App.js에서 FileName.js를 import해서 사용하는 것입니다.import React from 'react'.. [2024 React.js 스터디] 류상우 #4주차 01. 리액트는 어쩌다 만들어졌을까?JavaScript를 사용해 HTML로 구성한 UI를 제어할 때, 특정 DOM을 선택한 후 어떤 이벤트가 발생했을 때 변화를 주도록 설정한다.다음은 HTML과 JS로 만든 간단한 카운터이다.0 +1 -1const number = document.getElementById('number');const increase = document.getElementById('increase');const decrease = document.getElementById('decrease');increase.onclick = () => { const current = parseInt(number.innerText, 10); number.innerText = current + 1;.. [2024 Spring Boot 스터디] 김호 #1 주차 - Spring Boot 3 알아보기 (0 ~ 2장) 1. 인텔리제이(IntelliJ) 설치 및 개발 환경 구축 스프링 부트 실습을 위해 자바(Java) IDE인 인텔리제이를 설치한다. 1-1. JDK(Java Development Kit) 버전 설정 JDK 버전은 교재에 나온 17 버전으로 설정한다. 17 버전으로 설정해야 추후 formatted() 메서드나 instanceof 등의 키워드를 8 버전에 비해 편리하게 사용할 수 있다. 1-2. 그레이들(Gradle) 설정 그레이들 DSL(Domain Specific Language)을 Groovy로 설정한다. 1-3. 의존성(Dependency) 추가 plugins 블록 내에 스프링 부트 플러그인 'org.springframework.boot'와 스프링의 의존성을 자동 관리하는 'spring.depen.. [2024 React.js 스터디] 김지나 #4주차 "리액트 1~9" 01. 리액트는 어쩌다가 만들어졌을까?- 처리해야 할 이벤트, 관리해야 할 상태값, DOM이 다양해질수록 업데이트를 하는 규칙도 복잡해짐 -> Ember, Backbone, AngularJS 등의 프레임워크: 자바스크립트의 특정 값이 바뀌면 특정 DOM의 속성이 바뀌도록 연결, 업데이트 작업 간소화- 리액트는 어떠한 상태가 바뀌었을 때, DOM을 업데이트 하는 규칙을 정하는 것이 아니라 다 날려버리고 처음부터 모든 걸 새로 만들어서 보여주면 어떨까? 라는 아이디어에서 시작함.=> DOM을 어떻게 업데이트 해야 할지에 대한 고민을 하지 않아도 됨! 하지만 모든걸 다 날려버리고 새로 만들게 된다면 속도가 굉장히 느려질 것 ==> Virtual DOM 사용 Virtual DOM: 브라우저에 실제로 보여지는 D.. 이전 1 ··· 29 30 31 32 33 34 35 ··· 55 다음
