분류 전체보기 (669) 썸네일형 리스트형 [2024 React.js 스터디] 김지나 #4주차 "리액트 1~9" 01. 리액트는 어쩌다가 만들어졌을까?- 처리해야 할 이벤트, 관리해야 할 상태값, DOM이 다양해질수록 업데이트를 하는 규칙도 복잡해짐 -> Ember, Backbone, AngularJS 등의 프레임워크: 자바스크립트의 특정 값이 바뀌면 특정 DOM의 속성이 바뀌도록 연결, 업데이트 작업 간소화- 리액트는 어떠한 상태가 바뀌었을 때, DOM을 업데이트 하는 규칙을 정하는 것이 아니라 다 날려버리고 처음부터 모든 걸 새로 만들어서 보여주면 어떨까? 라는 아이디어에서 시작함.=> DOM을 어떻게 업데이트 해야 할지에 대한 고민을 하지 않아도 됨! 하지만 모든걸 다 날려버리고 새로 만들게 된다면 속도가 굉장히 느려질 것 ==> Virtual DOM 사용 Virtual DOM: 브라우저에 실제로 보여지는 D.. [2024 Spring Boot 스터디] 유태근#1 주차 - Spring? 섹션 1 - 객체 지향 설계와 스프링스프링이란?자바 기반의 프레임워크로 좋은 객체 지향 프로그래밍을 할 수 있도록 도와준다.이름의 유래는 이전에 기술의 복잡도가 증가해서 성능이 느렸던 시절을 "겨울"에 빗대어 겨울 후의 "봄"으로 새로운 시작한다는 것을 의미하는 스프링(봄)이 되었다고 한다.스프링 부트란?스프링 프레임워크 및 관련 스프링 라이브러리를 편리하게 사용할 수 있도록 지원한다.별도의 웹 서버를 설치하지 않아도 되며 관례에 의한 간결한 설정이 가능하다.객체 지향 프로그래밍이란?객체는 메시지를 주고 받으며 협력한다.유연하고 변경에 용이하다.객체 지향 프로그래밍의 특성 중 다형성이란? 특징역할(인터페이스)과 구현(구현 클래스)을 분리한다.클라이언트를 변경하지 않고, 서버의 구현 기능을 유연하게 변경할.. [2024 신입부원 기초 스터디] 정채은 #3주차 (JS) 자바 스크립트란? (js)- 웹페이지에 생동감을 불어넣기 위해 만들어진 언어!!!!!!자바 스크립트로 할 수 있는 것?1.웹의 요소 제어• HTML, CSS로 처리할 수 없는 것들을 JS로 처리2. 다양한 프레임워크, 라이브러리 사용• React, Vue3. 백엔드(서버) 개발• Node JS ‒ Express JS 자바스크립트 사용 방법html 내부script> console.log("Hi");script> html 외부!ㅡㅡ index.html ㅡㅡ>body> script src="test.js">script>body> // test.jsconsole.log("Hi"); 자바스크립트 문법실행문은 세미콜론(;)으로 구분let str1 = "Hi";let str2 = "World";console.log(.. [2024 신입부원 기초 스터디] 강보경 #3주차 JavaScript란?웹 페이지에서 복잡한 기능을 구현할 수 있는 스크립팅 또는 프로그래밍 언어HTML, CSS와 함께 웹을 구성하는 요소클라이언트 단에서 웹 페이지가 동작하게 하는 것을 담당 JavaScript의 사용1. HTML 내부 2. HTML 외부 // test.jsconsole.log("Hello World!"); JavaScript 문법자바스크립트 실행문은 세미콜론(;)으로 구분한다.let str1 = "Hello";let str2 = "World!";console.log('${str1} ${str2}'); 1. 주석주석 또는 코멘트(comment)는 프로그래밍에 있어 내용을 메모하는 목적으로 쓰인다.소스 코드를 더 쉽게 이해할 수 있게 만드는 것이 주 목적이며, 협업할 때 .. [2024 React.js 스터디] 박지민 #4주차 "리액트 입문 1-9" 1. 리액트는 어쩌다 만들어졌을까?처리해야 할 이벤트, 관리해야 할 상태값, DOM까지 다양해지게 된다면 이에 따라 업데이트하는 규칙도 복잡 -> 업데이트 간소화 필요리액트는 어떠한 상태가 바뀌었을때, 그 상태에 따라 DOM을 어떻게 업데이트 할 지 규칙을 정함 X, 아예 다 날려버리고 처음부터 모든걸 새로 만들어서 보여준다는 아이디어에서 시작정말로 동적인 UI를 보여주기 위해서 모든걸 다 날려버리고 새로 만들게 된다면, 속도가 굉장히 느림 -> 리액트에서는 Virtual DOM이라는 것을 사용- Virtual DOM가상의 DOM으로, 브라우저에 실제로 보여지는 DOM X그냥 메모리에 가상으로 존재하는 DOM - 그냥 JavaScript 객체 -> 작동 성능이 실제로 브러우저에서 DOM을 보여주는 것보다.. [2024 신입부원 기초 스터디] 황수민 #3주차 JavaScript(자바스크립트)란?웹페이지에 생동감을 불어넣기 위해 만들어진 언어HTML, CSS로 처리할 수 없는 웹의 요소들을 처리할 수 있음.React, Vue 등 다양한 프레임워크, 라이브러리 사용 가능백엔드(서버) 개발에도 사용할 수 있음. (Node.js + Express)JS는 HTML파일 내부와 외부에서 사용이 가능하며, 각각의 사용 방법은 아래와 같다. 1. HTML 내부 2. HTML 외부 //test.jsconsole.log("Hello, world!"); JS 실행문은 세미콜론(;)으로 구분한다. (생략해도 동작은 한다.) 주석//주석은 이렇게 '//'로 작성할 수 있습니다. 변수 선언 var 변수1 = "var 사용은 권장되지 않음";let 변수2 = "변수는 let으로!";c.. [2024 신입부원 기초 스터디] 백채린 #3주차 (JS) 자바스크립트란?- Ecma International의 프로토타입 기반의 프로그래밍 언어로, 스크립트 언어에 해당- 웹 페이지가 동작하는 것을 담당→ "웹 페이지에 생동감을 불어 넣기 위해 만들어진 언어" 자바스크립트는?- 웹의 요소 제어• HTML, CSS로 처리할 수 없는 것들을 JS로 처리- 다양한 프레임워크, 라이브러리 사용 - 다양한 프레임워크, 라이브러리 사용• React (오픈 소스 자바스크립트 라이브러리),• Vue (자바스크립트로 개발된 프론트엔드 프레임워크)- 백엔드(서버) 개발• Node JS - Express JS* Node JS: 브라우저 안에서만 작동하던 JavaScript를 브라우저 외의 환경에서 작동할 수 있게 만들어 준 런타임 환경* ExpressJS: Node.js 환경을 .. [2024 React.js 스터디] 정호용 #4주차 "React.JS 맛보기" 1장. 리액트 입문1. 리액트는 어쩌다가 만들어 졌을까?✅ 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;};decrease.onclick = () => { const current = parseInt(number... 이전 1 ··· 37 38 39 40 41 42 43 ··· 84 다음
