본문 바로가기

리액트3

[세미나] 왜 리액트인가? 사내에서 진행했던 세미나 발표 자료, 스크립트 정리0. 왜 리액트인가?오늘 주제는 "왜 리액트인가?"입니다. 리액트는 웹 개발에서 가장 인기 있는 기술 중 하나로, 전 세계의 수많은 개발자들과 기업들이 선택하고 있는 기술입니다. 2024년 스택오버플로우 개발자 조사에 따르면, 지난 1년 동안 어떤 웹 프레임워크와 웹 기술로 광범위한 개발 작업을 했으며, 내년에 어떤 작업을 하고 싶으신가요? 라는 설문에서 약 40%가 React를 선택했습니다. 2024년 뿐만 아니라, 리액트는 등장 이후로 꾸준히 순위가 증가하여, 현재까지도 높은 순위를 유지하고 있습니다.이런 통계는 리액트가 단순히 유행으로 많이 사용되었던 것이 아니라, 현재까지도 발전하며 많은 사람들에게 사용되고 있다는 것을 보여줍니다. 따라서 오늘 발.. 2024. 8. 29.
[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.