웹공부 (18) 썸네일형 리스트형 React 공부 9일차 TypeScript JavaScript를 기반으로 한 프로그래밍 언어, strongly-typed language JS 거의 복붙인데 거기에 새로운 기능만 살짝 추가됐다고 생각하면 된다.(Type에 관해서...) const plus = (a, b)=>a + b; JS는 이대로 코드를 실행시켜도 문제 없이 결과를출력한다. a, b의 자료형이 달라도 상관없이 말이다. 하지만 저대로 코드를 실행하면, TypeScript는 error message를 출력한다. TypeScript 코드가 발동하기 전에 protection이 일어나고, 별 문제가 없으면 JS 코드를 return한다. const plus = (a: number,b: number)=>a + b; TypeScript는 strongly-typed한 특성을.. React 공부 8일차 React 입문자 강의로 리액트란 무엇인가에 대해 간단하게 찍먹하고, 본격적으로 React 공부를 시작해보려 한다. 터미널에 아래 코드를입력해 새 react project를 만들어주었다. npx create-react-app react-masterclass Styled Components 이걸 사용하기 전에는 style을 아래 3가지 방법을 이용해 적용해왔다. 1) styles.css 파일을 js 파일에 import해서 style 적용 2) html 태크에 style 속성을 직접 입혀줌 3) css module 사용: className이 겹쳐도 상관이 없다는게 큰 장점 ${fileName}.module.css -> 모듈 안의 className들을 object의 속성인 것처럼 사용하면 됨. 1) Style.. React 공부 7일차 라우팅이란? 웹 어플리케이션에서의 개념은 사용자가 요청한 url에 따라 알맞은 페이지를 보여주는 것이다. 블로그같이 여러 페이지로 구성된 웹 어플리케이션을 만들 때 각 페이지별로 컴포넌트들을 분리해가면서 관리하기 위해 필요하다. props는 object일 뿐이고, 사용자는 그걸 열어서 item을 꺼내 쓰는 것. component를 rendering하는 것은 함수를 불러오는 것. App.js에 "react-router-dom" import하기 function App(){ return ( {/* Switch는 Route(url)을 찾으면 component를 rendering함 */} {/* user가 movie path에 있으면, movie component를 보여줘라. */} ); } export defa.. React 공부 6일차 App.js import {useState, useEffect} from "react"; import Movie from './components/Movie'; //자식 component 파일 import 해주는 거 잊지 말기!! function App(){ const [loading, setLoading]=useState(true); const [movies, setMovies]=useState([]); const getMovies = async()=>{ const json = await(await fetch("https://yts.mx/api/v2/list_movies.json")).json(); setMovies(json.data.movies); setLoading(false); } useEffec.. React 공부 5일차 JSON이란? Java Script Object Notation = 자바 스크립트 객체 표기법 즉, 데이터를 쉽게 ' 교 환 '& ' 저 장 ' 하기 위한 텍스트 기반의 데이터 교환 표준 텍스트 기반, 다양한 프로그래밍 언어에서 data를 교환, 저장할 수 있다. 기본적으로 객체 형태 { key : value } 이며 number, string, boolean, object, arary, null등 다양한 타입의 자료형을 사용한다. 1) JSON.stringify(arg): 객체 ------>문자열 변환 2) JSON.parse(arg): 문자열 ------>객체 변환 (단, JSON.parse(arg) 사용 시 문자열이 반드시 JSON 형식이어야 함.) https://codingazua.tistory... React 공부 4일차 *복습: form은 기본적으로 submit이라는 event를 갖고있음. import {useState, useEffect} from "react"; function App(){ const[toDo, setToDo]=useState(""); //매번 입력받는 to-do list 항목 하나를 저장하는 state const [toDos, setToDos]=useState([]); //to-do list 전체 항목이 담긴 배열을 저장하는 state const onChange=(event)=>setToDo(event.target.value); const onSubmit=(event)=>{ event.preventDefault(); //form의 default event들을(ex) submit) 실행하지 않도록 막.. React 공부 3일차 *useEffect(arg1, []) 함수: 코드가 state 변화에 상관없이 딱 한번만 실행될 수 있도록 보호해줌. useEffect(arg1, arg2); arg1: 실행하고자 하는 코드 or 함수 arg2: ReactJS가 변화가 생겼나 계속 지켜보는 element useEffect(() => { console.log("CALL THE API...") },[]); import {useState, useEffect} from "react"; function App(){ const [counter, setValue] = useState(0); const onClick = () => setValue((prev)=>prev+1); //state가 변할 때마다 매번 실행 console.log("I RUN A.. React 공부 2일차 *component란 어떤 JSX를 반환하는 함수라고 생각하면 된다. -km miles -minutes hours -단위 변환에 필요한 flip 버튼 생성 -옵션 변경 위한 select 생성하기 -새롭게 배운 const [A , B] = React.useState()개념 사용 A: state값 B: state값 재설정하는 modifier useState에서 modifier함수를 실행하면 해당 component가 새로 rendering됨. DOCTYPE html> //flipped인 상태: hours를 입력받는 상태(!flipped = min을 입력받는 상태) function MinutesToHours(){ const [amount, setAmount]=React.useState(0); const [fli.. 이전 1 2 3 다음
