WINK-(Web & App)/HTML & CSS & JS 스터디 (128) 썸네일형 리스트형 [2023 신입부원 기초 스터디] 박민규 #5주차 - JavaScript JavaScript에서의 주석 // 주석을 달 수 있다. 변수와 상수 변수의 선언 코드 let 변수명; or let 변수명 = 할당값; 변수명 = 할당값; 상수의 선언 코드 const 상수명 = 할당값; 변수는 계속 할당값을 바꿀 수 있고, 상수는 바꿀 수 없다. 원시 데이터 타입 const msg = "문자열" + 변수 + "문자열" + 변수 + "문자열" const msg = `문자열 ${변수} 문자열 ${변수} + 문자열` 위 두 코드의 출력값이 같다. console.log(typeof 변수); 를 통해 변수의 타입을 알 수 있음 변수에 조건식을 입력하면 ex) 10 < 20 그 타입은 boolean이다. null : 아무 값이 없음을 나타냄. undefined : 값이 아직 지정되지 않음을 나타냄.. [2023 신입부원 기초 스터디] 정찬우 6주차 - JS js에도 우리가 코딩할 때 사용하는 기본적인 if, switch, for, while문이 있다. 사용법도 c++과 동일하지만 한번 정리도 할겸 작성해봅니다~ If문 if 문에서 조건식을 거짓으로 취급하는 값은 크게 6가지가 있다. Switch 문 💡Switch 문을 사용할 때 주의해야 할 점은 break를 사용하지 않으면 끝까지 다 출력이 되니 break 문을 잊지 않고 써야 합니다. for 문 for(초기식; 조건식; 증감식){ 실행문; } for/in 문 과 for/of 차이점 while 문 while(조건절){ 실행문; } 함수 JS에서 함수를 선언하고 사용하는 방법은 세가지로 요약이 가능하다 선언적이고 명시적인 function 키워드 사용 함수를 객체 혹은 리터럴(함수식=함수 표현식)로 사용 객체.. [2023 신입부원 기초 스터디] 한승훈 5주차 - JS 안녕하세요, 한승훈입니다. 다들 좋은 하루 보내고 계신가요? 요즘 날이 많이 더워졌는데, 여러분 모두 더위 조심하세요! 토요일은 석가탄신일이였네요. 학교 안에 삼봉정사라고 절이 있는 거 아시나요? 성곡 옆인데 예쁘러다구요. 전 연등이 참 멋진 거 같습니다. 오늘부터는 JS스터디네요. 섹션 #0 JS 화이팅! 윙크 화이팅~ 섹션 #1 2강 함수 지정 let hi; hi='안녕하세요'; or let hi='안녕하세요'; 변수 지정 const 변수명 = '안녕하세요'; 변수는 함수와 달리 생성과 동시에 초기화를 해주어야 한다. 이름 생성시 유의사항 -변수나 상수 이름의 첫번째 글자는 영어,$,_만 가능하다. -첫 번째 말고는 숫자도 가능하다 -영어 대소문자는 구별 -let, const와 같이 예약어는 사용 불.. [2023 신입부원 심화 스터디] 김윤희 #5주차 - React.js 섹션 2. 컴포넌트 제작 1. 리액트가 없다면.. - 태그가 ,, 코드가 천만줄이라면 ? → 한눈에 코드가 안 들어와 ! - 코드상으로 simple! 하게 해주는 것 ! 2.컴포넌트 만들기 1, 2 class Subject extends Component { render() { return ( WEB ); } } class App extends Component { render() { return ( ); } } export default App; App이라는 클래스를 만들고, Component라는 클래스를 상속받자 ! render()라는 함수가 꼭 필요 ! 컴포넌트는 하나의 최상위 태그로 시작해야한다 ! 3.props → 컴포넌트의 속성을 표현 ! → {this.props.title(원하는 값의 이름)} {this.props... [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! );.. 이전 1 ··· 6 7 8 9 10 11 12 ··· 16 다음
