WINK-(Web & App)/React.js 스터디 (118) 썸네일형 리스트형 [2025 1학기 React.js 스터디] 이상래 #3주차 벌써 3주차... 후딱 해치워 버리겠습니다 ㅋ ㄴ 후딱 안되네... 🔍 리액트 탄생 이유우선 지난주에 했던 최종 프로젝트만 보더라도 HTML로 구성된 UI를 제어하려면 DOM을 변형시켜서 제어를 했는데요,,하지만 웹 애플레케이션의 규모가 커지면 이런 코드들도 많아지고, 모두 DOM을 직접 건드리기 때문에 처리 할 이벤트/ 관리해야 할 상태값/ DOM 이 모두 다양해지게 됩니다. 이에 따라 업데이트를 하는 규칙도 복잡해지게 됩니다 !! 기존 프레임 워크와의 차별점 기존 Ember, Backbone, AngularJS 등의 프레임 워크 : JS 특정 값이 바뀌면 특정 DOM의 속성이 바뀌도록 연결 => 업데이트 하는 작업 간소화React : 어떤 상태가 바뀜 => 처음부터 새로 만들어서 보여준다- Vi.. [2025 1학기 React.js 스터디] 이종민 #2주차 임시저장이 날아가고 전생한 이종민입니다 다시 써보자 아자아자 화이팅 !!!!!!! for ... of 문배열의 요소를 순서대로 반환함const를 사용하는 이유 : num값에 계속 myArray의 값이 새로 들어가서 사용됨 for ... in 문객체의 키들을 순서대로 반환함 화살표 함수function으로 정의한 함수와는 세부적으로는 기능이 다름한줄로 표현 가능한 코드는 위 사진처럼 표현 가능 HTML 요소들 선택하기 document.getElementsByTagName('section'); 태그명으로 선택 document.getElementsByClassName('plant');클래스명으로 선택 document.getElementById('sweets');아이디로 선택 querySelector, quer.. [2025 1학기 React.js 스터디] 백채린 #2주차 9. 반복문 : 주어진 조건이 충족되는 동안 특정 작업을 반복해서 수행 for 문 for (let i = 0; i let i = 0; → 변수의 선언 및 할당i ➡️ 참일 시 블록 안의 코드 실행 - for ... of 문 : 배열의 요소를 순서대로 반환 const myArray = ['한놈', '두시기', '석삼', '너구리', '오징어'];for (const item of myArray) { // 상수명은 자유 console.log(item);} - for ... in 문: 객체의 키들을 순서대로 반환 const person1 = { name: '김철수', age: '25', married: false}for (const key in person1) { console.log(key,.. [2025 1학기 React.js 스터디] 강민지 #2주차 2주차 블로깅!!!입니다 1. 반복문1-1. for 문for (let num = 0; num 이때, 0은 초기값중첩 사용의 예> 구구단for (let i = 1; i 1-2. continue & breakfor (let num1 = 0; num1 10) break; // 10 이하까지만 console.log(num1);} 1-3. for ... of 문 : 배열의 요소 순서대로 반환const myArray = ['한놈', '두시기', '석삼'];for (const item of myArray) { console.log(item);} 1-3. for ... in 문 : 객체의 키 순서대로 반환const person1 = { name: '강민지', age: '22', married: false}fo.. [2025 1학기 React.js 스터디] 정채은 #2주차 9. 반복문 for 문 중첩 사용 1. i2. j break : 멈추게 한다.for ... of 문 const myArray = ['한놈', '두시기', '석삼', '너구리', '오징어'];for (const item of myArray) { // 상수명은 자유 console.log(item);} for (const (상수명) of (배열이름) ) for ... in 문 for (const key in person1) { console.log(person1[key]);} 여기서 1번째 줄 key(상수 지정) 와 2번째 줄 key(문자열로 인)는 다름!!!!!!!! while 문 조건을 먼저 확인 → 실행 do ... while 문 먼저 실행 → 조건 확인 10. 함수function [함수이름] ().. [2025 1학기 React.js 스터디] 최은희 #2주차 # 반복문1. for 문for 문은 가장 일반적인 반복문으로, 반복 횟수가 정해져 있을 때 유용for (초기화; 조건; 증감) { // 실행할 코드}2. while 문while 문은 조건이 true인 동안 계속 실행됩니다. 주로 반복 횟수가 정해지지 않은 경우에 사용while (조건) { // 실행할 코드} 3. do...while 문do...while 문은 while 문과 비슷하지만, 조건을 확인하기 전에 코드 블록을 한 번은 무조건 실행do { // 실행할 코드} while (조건);4. for...in 문 (객체 순회)for...in 문은 객체의 속성을 반복할 때 사용for (let 변수 in 객체) { // 실행할 코드}5. for...of 문 (배열 순회)for...of 문은 배열, 문자.. [2025 1학기 React.js 스터디] 이가인 #2주차 1. 반복문2. 함수3. DOM, html 요소 선택 4. 요소 조작5. 이벤트6. 최종 프로젝트 반복문 1. for문 괄호 안 ( 1.변수의 선언 및 할당, 2.종료조건, 3.참일 시 블록 안의 코드 이후 실행할 것 )// 💡 변수이므로 let이 사용됨for (let i = 0; i 중첩 반복 바깥쪽이 열(세로), 안쪽 반복문이 행(가로줄)이라고 생각하기 - continue : 한 루프를 건너뜀!!!!!!!- break : 루프 종료 for (let i = 0; i 10) break; // 루프 종료 console.log(i);}12457810 - for ... of 문➡️ array의 요소를 순서대로 반환!!const 상수명 of 배열이름const myArray = ['한놈', '두시기', .. [2025 1학기 React.js 스터디] 이승준 #2주차 ❤️반복문for문for (let i = 1; i 괄호 안 요소들(;으로 구분)변수 선언; 종료조건; 참일 시 블록 안의 코드 이후 실행할 것for (let i = 10; i > 0; i -= 2) { console.log(i);}continue & breakfor (let i = 0; i 10) break; // 루프 종료 console.log(i);} for ... ofconst myArray = ['한놈', '두시기', '석삼', '너구리', '오징어'];for (const item of myArray) { // 상수명은 자유 console.log(item);}배열의 요소를 순서대로 반환 (위 요소들 차례대로 출력)for ... inconst person1 = { name: '김철수', age: .. 이전 1 2 3 4 ··· 15 다음 목록 더보기
