분류 전체보기 (646) 썸네일형 리스트형 [2023 신입부원 심화 스터디] 조현상 #5주차 React.js 섹션2 컴포넌트 제작 HTML로 코딩을 했을 때 겪게 되는 문제점들은 1. 반복되는 코드들 2. 코드가 길어질수록 한 눈에 들어오지 않음 3. 코드를 감출 수 없음 과 같은 문제점들이 있다. 리액트는 HTML에서 생기는 문제점들을 보완하고자 만들어졌다. 리액트의 장점 1.코드의 간결화와 재사용성 WEB world wide web! 우리가 만약 이러한 코드를 html에서 만들었다고 했을 때 리액트는 import React, { Component } from 'react'; import './App.css'; class Subject extends Component { rendor(){ return( WEB world wide web! ); } } class App extends Component { render() { retu.. [2023 신입부원 심화 스터디] 정호용 #5주차 react - section 0 ~ 2 📌section 0 사용자 정의 태그 -> React에서는 Component라고 함. 1. 가독성이 좋다. 2. 재사용성이 높다. -> 한 번 정의해 두면 다른 곳에서 재사용할 수 있다. 3. 유지보수가 좋다. -> 실시간으로 변경된 내용이 업데이트 된다. 📌section 2 🎮1. 리액트가 없다면? public 디렉토리 -> npm run start 했을 때 파일을 찾는 디렉토리 semantic code 나 와 같이 기능은 없지만 의미를 파악하기 쉽게 구분한 코드 만약 html 코드가 1000만줄, 1억줄이라면 코드가 한눈에 안 들어온다. -> 혼란스러움 코드를 안보이게 감춰두고 심플하게 표현하고 싶다! -> 그걸 가능하게 해주는 것이 리액트 🎮2. 컴포넌트 만들기 1 import React, {Com.. [2023 신입부원 심화 스터디] 황현진 #5주차 - React.js 섹션 2. 컴포넌트 제작 리액트가 없다면 🤔💭 만약 코드가 65만 줄, 65억 줄이 된다면 코드를 한 눈에 알아볼 수 없다..😢 → 헉❗ 이 코드를 한 태그로 만들 수 있었으면 좋겠다.. ⇒ 이게 바로 리액트 💻 ex) 컴포넌트 만들기 → 어지러웠던 코드를 정리정돈해주는 것이라고 생각하면 쉽다🧹 주의할 점: 컴포넌트를 만들 때, 항상 최상위 태그로 묶여있어야 한다. ex) 시맨틱 태그 사용하기 참고할 점: 이 코드는 js 코드가 아니다 → 그러므로 콘솔창에 복붙해서 실행해도 실행되지 않는다. import React, { Component } from "react"; import "./App.css"; class Subject extends Component { {/* 컴포넌트를 만드는 기본 틀 */} render() { retu.. [2023 신입부원 심화 스터디] 이정욱 #5주차 React.js ~ 섹션2 컴포넌트 제작 컴포넌트 만들기 컴포넌트란 리엑트에서 화면에 UI 요소 중 가장 작은 단위를 Compoenent라고 한다. 컴포넌트는 class component와 function component 두가지 방식이 있다. 우리가 진행할 방식은 class component 방식이다. class component 의 특징 class 키워드를 사용 Component 클래스를 상속받아 사용한다. render() 메소드를 꼭 사용해야한다. // import logo from './logo.svg'; import { Component } from "react"; import "./App.css"; class Subject extends Component { render() { return ( WEB world wide web! );.. [2023 신입부원 심화 스터디] 박지민 #5주차 React.js 섹션 2 컴포넌트 제작 1. 컴포넌트 만들기 React의 핵심 기능 - 긴 코드들을 사용자 정의 태그를 사용하여 간결하게 만듦 - pure.index WEB world wide web! HTML CSS JavaScript HTML HTML is HyperText Markup Language. - App.js header, nav, article 태그 부분 사용자 태그로 바꿔줌 import React, {Component} from 'React'; import './App.css'; // html에서 태그 부분을 subject라는 이름으로 바꾸고 싶음 class Subject extends Component { // 클래스 이름은 대문자로 시작 // 자바 스크립트에서 클래스 안에 있는 함수는 function 안붙여도 됨 rend.. [2023 신입부원 심화 스터디] 신진욱 #5주차 - 어 리액트 왔어 0,1 섹션은 어떻게 공부할 지와 환경설정에 대한 내용이라 블로깅은 건너 뛰었습니당. 1. 리액트의 중요성 - 유지보수 좋음 - 코드의 복잡성 제거 - 성능 향상 ... 2. 컴포넌트 생성 - React의 핵심 기능 - 긴 코드들을 사용자 정의 태그로 간결하게 만들기 위함 pure.html WEB world wide web! HTML CSS JavaScript HTML HTML is HyperText Markup Language. App.js header, nav, article 태그 부분 사용자 태그로 바꿔주기 import React, {Component} from 'React'; import './App.css'; // html에서 태그 부분들을 subject라는 이름으로 바꾸고 싶다. // 클래스 .. [2023 신입부원 기초 스터디] 도승준 4주차 -JS는 사실 ... JavaScript의 약자이다 JMH 보고이써? 나 사실 HTML CSS보다 JS가 훨씬 적성에 맞는거가타...... 1.변수 변수 선언 let 변수명; 변수 초기화 변수명 = '값'; (숫자 자료형일경우 따옴표는 쓰지 않는다.) 변수 선언과 초기화 동시에 let 변수명 = '값'; 상수 선언과 초기화 동시에 const 상수명 = '값'; console.log() -> 콘솔에 괄호 안의 값을 출력해준다. 값을 바꿀때, let을 다시 쓰면 변수를 재할당해주는 것이므로 오류가 난다. 상수를 선언해주었을때는 수정이 불가능하고, 선언과 초기화가 동반 되어야 한다. 변수 선언 규칙 1. 변수나 상수이름의 첫번째 글자는 영어,$, _ 만 가능하다. (숫자 불가) 2. 첫 글자를 제외하고는 숫자도 사용 가능하다. 3. 소문자와 대문자는 구별하여 .. [2023 신입부원 기초 스터디] 박승환 #4주차- js야 안녕!!^^ @@드디어 HTML과 CSS를 배우고 Java Script를 배울 시간이 왔다...! 처음에는 파이썬과 비교하면서 자바스크립트를 배우려 했지만 다시 생각해봤더니 그냥 자바스크립트 그대로를 처음 프로그래밍 언어를 배우는 것 처럼 배워야겠다는 생각이 들었다. 새로운 프로그래밍 언어인 만큼 기초를 탄탄하게 잡아야겠다!!!!@@ 확장자 파일 --> 확장자파일명.js 변수 변수를 할당할 때는 let 변수명 = 값;으로 변수를 할당한다. let hi = '박승환'; hi = '안녕하세요'; 변수의 값을 변경하기 위해서는 그다음 줄에 변수명 = 값2;를 작성 하면 되는데 여기서 중요한 것은 또 다시 let 변수명 = 값2를 하면 에러가 뜬다는 것이다. html파일에 script 태그 를 이용하여 js파일을 연결하고 .. 이전 1 ··· 54 55 56 57 58 59 60 ··· 81 다음
