솔적솔적

터미널을 새로 오픈하여 | 기존리액트 + 타입스크립트 추가 설치 명령어 npm install --save typescript @types/node @types/react @types/react-dom @types/jest | 리액트 + 타입스크립트 설치 명령어 npx create-react-app 프로젝트작명 --template typescript 한 뒤 .js file을 → .ts file로 바꿔서 사용합니다. | 타입관련 버그 예방 타입지정 - JSX 타입지정 let 박스 :JSX.Element = let 버튼 :JSX.Element = - button 등 기본 태그들 간단하게 타입지정할 때 기본 태그들은 JSX.IntrinsicElements라는 이름의 타입으로 사용 let 박스 :JSX.Intri..

안녕하세요, 오늘은 지금까지 배웠던 리액트를 기반으로 프로젝트를 하나 개인 연습으로 생성하여 프로토타입을 기반으로 홈페이지 구조와 기능들을 만들어 보려고합니다. 자, 차근히 진행하도록 하겠습니다. ​ 1. 프로젝트 생성 새로운 파일하나를 만들고 1) Ctrl + shift + ` 를 눌러 npx create-react-app test(원하는 파일명으로 설치) 2) npm 대신에 쓸 수 있는 소프트웨어, yarn 을 구글에 검색 yarn https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable Yarn Fast, reliable, and secure dependency management. classic.yarnpkg.com 노란 현광색으로 표시된..

안녕하세요. 저번 시간에 모달을 만들면서 Component의 장점을 배웠습니다요. Conponent를 만들면 한 묶음씩만든 것을 볼 수 있어 전보다 눈이 편하고 관리가 용이하다는 것, 그럼 단점은? → Component의 단점은, state를 바로 받아 사용할 수 없다는 것. 전에 만들었던 '아범'변수를 방금 만든 아범모달안에 데이터바인딩 할 수 있을까? 없다. 예) 아범은 변수x를 함수1()에다 선언을 한 것이므로 함수2() 안에 바로 데이터바인딩을 할 수 없다. 불러오고싶다면? 데이터를 전해주는 방법이 있다. 그것은 props. 원한다면 함수1()안에 선언된 변수의 데이터를 함수2()에게 넘겨줄 수 있다. ​ APP 컴포넌트 안에 있는 이라는 컴포넌트를 만들었는데(저번시간 코드내용으로 그대로 진행),..

안녕하세요, 오늘은 Component문법을 사용하여 모달창을 만드는 방법을 알아가봅시다. ​ 1. 모달창 만들기 1. 작성한 글 바로 밑에 로 하나의 영역을 만들기 2. 안에 작성할 내용 넣기 3. App.css 디자인 근데, 이 모달을 한 번만 하진 않을텐데 계속 div를 만들면 헷갈리고 복잡하지 않을까? 그래서 리액트에서는 그 문제를 간편하게 만들 수 있는 방법, HTML를 한 단어로 축약할 수 있는 Component문법을 방법을 사용한다. 내가 정하고 싶은 단어로 정해서 한 줄로 넣어놓을 수 있다. 아범은 Model이라고 했지만 명을 어떻게 지어도 무관하다는 것. ​ 4. function APP의 return 부분 괄호까지 끝나는 부분쯤에 Component를 만든다. 이것이 컴포넌트 문법이다. 1...