강의20 [React JS 마스터클래스] #3 TYPESCRIPT 정리 #3.0 Introduction - 타입 문법과 함꼐하는 자바스크립트 - 추가 : 타입 체크, 자동 완성, 인터페이스, JSX 문법 - 언어 작동 전에 타입 확인함 => stongly-type - 브라우저는 자바스크립트만 이해할 수 있음 => 타입스크립트는 이해 X - 컴파일 시 자바스클비트로 변경 -> 실행 전에 타입 체크 하고 오류 알려줌 #3.1 DefinitelyTyped CRA로 타입스크립트 프로젝트 생성 1. [npx or yarn] create-react-app [내 앱 이름] --template typescript 2. yarn add styled-components 로 스타일드 컴포넌트 먼저 설치 3. yarn add @types/styled-components -D 으로 타입스크립트 타.. 2024. 1. 23. [React JS 마스터클래스] #2 STYLED COMPONENTS 정리 #2.0 Why Styled Components 스타일드 컴포넌트를 사용하는 이유와 장점 스타일 적용하는 방법 : 직접 자바스크립트로 스타일 입혀주는 방식, 글로벌 css 파일 import, css 모듈 import #2.1 Our First Styled Component yarn add styled-components로 설치 import styled from " styled-components" 임포트 const Box = styled. ` (css 코드) ` 형식으로 사용 가능 실제 코드에서는 자동으로 클래스를 생성하여 스타일 삽입 #2.2 Adapting and Extending 스타일 컴포넌트와 props 사용하기 - 스타일 컴포넌트로 props를 보내고, css 내에서 표현식으로 값 사용 확장가.. 2024. 1. 21. [리액트 숙련주차] 2-21~23 비동기 프로그래밍 2-21 비동기 프로그래밍 입문 1. 동기 방식과 비동기 방식 동기적(synchronous) 방식 - 현재 실행중인 코드가 끝나야 다음 코드를 실행하는 방식 - 일반적 프로그래밍 세계에서 코드는 모두 동기적으로 실행됨 비동기적(not synchronous) 방식 - 실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식 - setTimemout, addEventListner 등 - 별도의 요청, 실행 대기, 보류 등과 관련된 코드는 모두 비동기적 코드 - 대표적으로 서버 통신과 관련된 로직들을 포함함 ex) 중식집에서 배달 후 배달원이 다먹을때까지 기다렸다가 그릇을 회수하지 않고, 다른 집도 갔다가 다시 찾으러 오는 것과 비슷함 2. 콜백지옥 - 콜백함수를 익명함수로 전달하는 과정이 반복.. 2023. 7. 11. [리액트 숙련주차] 2-19~20 React Router Dom (1), (2) 1. React Router Dom 이란? - 페이지를 구현할 수 있게 해주는 패키지 - routing 2. React Router Dom 설치 yarn add react-router-dom 3. React Router Dom 사용하기 1. 페이지 컴포넌트 작성 - src 폴더에 pages 폴더를 만들고, 내부에 여러 페이지가 될 컴포넌트 파일을 만든다. 2. Router.js 파일 구현 - 브라우저에 url을 입력하고 이동했을 때 원하는 페이지 컴포넌트로 이동하게끔 만들어주기 -> 즉 url 1개당 페이지 컴포넌트를 매칭해주는 것 Route - src 폴더에 shared 폴더를 생성하고, Router.js 파일을 생성한다. import React from "react"; import { BrowserR.. 2023. 7. 1. 이전 1 2 3 4 5 다음
