전체 글 (91) 썸네일형 리스트형 웹 개요 웹이란? 문서와 리소스를 공유 스트리밍 서비스, 이메일 웹은 케이블을 통해 전달되는 것 중 하나 Transfer Protocol: HTTP, Hypertext 소통이 이루어지는 규칙 웹서버: 웹을통해 들어오는 요청을 충족시킴 브라우저는 클라이언트일 수도 있고 서버일 수도 있다. request를 보내면, 브라우저가 해당 지침을 받아 웹페이지를 구축함. 브라우저는 지침을 이해하고 이것을 인간이 알아볼 수 있게 바꾸는 것. 프런트앤드/백엔드 *front end 요청을 보내면, google 서버에 도착함. *back end 요청을 받은 google 서버가 검색 결과가 무엇인지, 어떤 정보들을 제공할 지 응답을 구성함. -모든 웹페이지의 구성도구: HTML, CSS, JS ex) Purple(CSS: adject.. React 공부 10일차 Crypto Tracker 클론 코딩 실습 오늘은 지금까지 배웠던 개념들을 가지고 간단한 Coin Trakking Application을 구현하는 실습을 해볼 것이다. coinpaprika API를 사용해 만들어 보자. 1) 환경 SetUp React Query 패키지를 설치한다. 얘는 훨씬 편리하고 좋은 방식으로 data를 fetch할 수 있게 도움을 준다. npm i react-router-dom react-query npm i --save-dev @types/react-router-dom *에러 일지(버전업으로 발생한 에러) : ... is not a component. All component children of must be or 에러 그대로 의 자식 컴포넌트로는 만 올 수 있다. ver5->.. 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) 실행하지 않도록 막.. 이전 1 ··· 7 8 9 10 11 12 다음
