WINK-(Web & App)/React.js 스터디 (95) 썸네일형 리스트형 [2024 여름방학 React.js 스터디] 김민서 #3주차 리액트 Virtual DOM을 사용해 작동 성능이 실제로 브라우저에서 DOM을 보여주는 것 보다 속도가 훨씬 빠르다 npx create-react-app begin-reactcd begin-reactnpm start 리액트 컴포넌트 만들기 // Hello.jsimport React from 'react'; // 리액트 불러오기function Hello() { return 안녕하세요}export default Hello; // 컴포넌트 내보내기 (다른 컴포넌트에서 불러오기 가능)// App.jsimport React from 'react';import Hello from './Hello';function App() { return ( );}export default Ap.. [2024 여름방학 React.js 스터디] 백채린 #3주차 1장. 리액트 입문 1. 리액트는 어쩌다 만들어졌을까? HTML/JS로 만들어진 카운터 예시// index.html0 +1 -1// index.jsconst 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 = parse.. [2024 여름방학 React.js 스터디] 백채린 #2주차 섹션 8~9 섹션 8. 모듈화 구문 1. import와 export 소개 import, export: 자바스크립트의 코드를 모듈화 할 수 있는 기능* 모듈화: 다른 파일에 있는 자바스크립트의 기능을 특정 파일에서 사용할 수 있는 것 2. import와 export 기본 문법 실습 - exportexport 변수, 함수// 다른 파일에서 가져달 쓸 함 수 앞에 export 작성 - import export된 파일을 improt로 불러와 사용import { 불러올 변수 또는 함수 이름 } from '파일 경로';// export된 변수나 함수를 {}에 선언한 뒤 해당 파일이 있는 경로를 적어줌 3. import와 export 문법으로 여러개 거내기 // math.js 파일let pi = 3.14;function s.. [2024 여름방학 React.js 스터디] 이종윤 #2주차 import와 export: 자바스크립트를 묘듈화 할 수 있는 기능이다. export{변수, 함수} : 현재 파일에서 특정 변수를 공유한다.import{변수, 함수} from "파일경로" : 현재 파일로 특정 변수를 가져온다.* import와 export는 구문 내에서 여러가지 변수, 함수가 들어갈 수 있다.default 문법: 위에 쓴 import와 export 같은데 파일에서 하나만 꺼낸다면 이 문법을 사용한다.export default 변수, 함수 : 현재 파일에서 특정 변수를 공유한다.import 변수, 함수 from "파일경로" : 현재 파일로 특정 변수를 가져온다.import와 export를 사용해서 라이브러리 가져오기* 라이브러리: 개발자가 편하게 구혈할 수 있도록 미리 만들어 놓은 기능들 .. [2024 여름방학 React.js 스터디] 김민서 #2주차 import, export 자바스크립트의 코드를 모듈화 할 수 있는 기능export { 변수, 함수 };// 다른 파일에서 가져다 쓸 변수나 함수import { 변수, 함수 } from '파일경로';// 익스포트된 변수나 함수를 불러옴 export default 파일에서 하나를 꺼낼 때 사용export default 변수나 함수;import 변수나 함수 from '파일경로'; import와 export를 이용한 라이브러리 사용 import 라이브러리 이름 또는 기능 from "라이브러리 이름";// package.json에 설치되어 있는 라이브러리 이름을 그대로 사용한다 비동기 처리 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성// #1co.. [2024 여름방학 React.js 스터디] 강보경 #2주차 08. 모듈화 구문 import & export : 자바스크립트 코드를 모듈화 할 수 있는 기능 모듈화 : 다른 파일에 있는 자바스크립트 기능을 특정 파일에서 사용할 수 있는 것 코드를 모듈화하면 코드 재사용성이 높아지고 유지보수가 용이해진다 export를 통해 모듈 내부의 함수, 변수, 객체 등을 내보내고 import를 통해 다른 모듈에서 가져와 사용함 하나의 모듈에서 여러 개의 값을 내보내고(export) 이를 선택적으로 가져올 수 있음(import) default는 모듈당 하나의 값만 내보낼 때 사용할 수 있고, export랑 다르게 export default를 사용하면 중괄호{} 없이 임의의 이름을 가져올 수 있음 09. 비동기 처리 비동기 처리 : 프로그래밍에서 하나의 작업이 완료.. [2024 여름방학 React.js 스터디] 김태일 #2주차 08. 모듈화 구문08- 1 Import & Export - 자바스크립트의 코드를 모듈화 할 수 있는 기능- 모듈화 : 다른 파일에 있는 자바스크립트의 기능을 특정 파일에서 사용할 수 있는 것을 의미 1. Export & Import 기본 문법//math.jslet pi = 3.14;export {pi};//index.jsimport {pi} from "./math"; //math라는 파일에서 pi라는 변수를 꺼냄console.log(pi); 2. 여러개 꺼내기- 파일 안에서 선택적으로(개수에 상관없이) 꺼내 쓸 수 있음//math.jslet pi = 3.14;fuction sum(a,b) { return a + b;}export {pi, sum};//index.jsimport {pi, sum} fr.. [2024 여름방학 React.js 스터디] 백채린 #1주차 섹션 0~7 섹션 0. 강의 오리엔테이션 • 자바스크립트란?- 브라우저 안에서 화면을 동작시키기 위한 프로그래밍 언어- 사용자의 입력에 반응할 수 있게끔 만들어주는 역할 섹션 1. 변수 • 변수(variable) - 어떤 값을 저장하기 위해 사용- 예약어는 변수의 이름으로 사용 X (예약어: 프로그래밍 언어에서 미리 점유한 단어들) var message = 'hi' // 변수 선언, 값 할당console.log(message); // hi 출력const mag = 'hello'; // const: 예약어 • const와 let의 차이점- let은 한 번 선언 후 값 변경 가능- const(상수)는 한 번 선언 후 값 변경 불가능 const a= 10;a // 10 출력let b = 20;b // 20 출력b .. 이전 1 ··· 3 4 5 6 7 8 9 ··· 12 다음
