일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 쿠조사라
- 컨테이너
- 리엑트
- java17
- 세팅
- ubuntu
- 김어준
- 라이덴
- 간단정리
- 스팩
- 김용민
- docker
- Linux
- 도커
- 나는꼼수다
- 공연
- 원신
- 야란
- 리눅스
- java
- Smashing Pumpkins
- 프로그래밍
- 향릉
- 타이라니
- 인덱스와 제약조건 둘 다 삭제
- react
- 나꼼수
- 주진우
- 제프벡
- 개발
- Today
- Total
목록Programming Language/React (3)
다른
리엑트는 사용자 정의 태그를 만드는 언어다. 사용자 정의 태그를 리엑트에서는 컴포넌트 라고 부른다. 리엑트를 사용하는 것은 결국 컴포넌트를 만들고 사용할 줄 알아야 하는 것이다. 그럼 컴포넌트를 만들고 활용해 보자. App.js 의 내용을 위와같이 수정해보았다. 4~8라인의 funciotn Header 부분이 사용자 정의 테그를 정의한 것이다. 사용자 정의 테그를 만들때에는 함수 명칭의 첫 글자를 무조건 대문자로 해야 한다. 13라인의 부분이 위에서 정의한 Header 컴포넌트를 적용한 부분이다. 컴포넌트 명칭을 HTML 태그처럼 적어주기만 하면 바로 화면에 적용되는걸 볼 수 있다. 그러면 사용자 정의 태그를 좀 더 만들어보자. 위에서는 Header 부분을 만들었으므로 아래에서는 nav와 article ..
저번 시간에 create-react-app 설치를 끝내고 마지막에 설치 완료가 되었는지 확인하는 차원에서 실행했던 그 화면이 어떻게 나왔나 가볍게 살펴보자. 1. 수정 create-react-app 의 구조를 살펴보면 (좌측 폴더 트리) 프로젝트 명 아래에 여러 폴더가 있고, 그 중 src 폴더를 보면.. index.js 파일이 있다. 이 파일이 프로그램이 시작되면 자동으로 실행되는 파일로써 프로그램의 입구 라고 보면 된다. index.js 파일의 소스를 보면, 9라인에 라는 테그가 보이는데 이 테그는 4라인데 있는 import App from './App'; 라고 보면 된다. 이걸 하나씩 풀어보면 다음과 같다. import : 다른 경로의 파일이나 내부 함수등을 참조할 때 사용하는 명령어 App : i..
* React 공부를 위해 생활코딩의 강좌를 따라하면서 포스팅 하는 것 뿐이니 자세한건 생활코딩(https://www.youtube.com/c/생활코딩1)을 참고하시라. 시작하기에 앞서 React 란?? - 페이스북(현 meta)에서 개발한 javascript library. - 사용자 인터페이스 개발용 라이브러리. - 웹 뿐만 아니라 모바일, 가상현실 앱 등을 만들수 있다고 함. 사전 지식 - javascript library 이므로 당연히 javascript를 사용할 줄 알아야 함 - HTML, CSS 등의 기본 지식이 있어야 함. 내 개발환경 - 운영체제 : Windown10 - 개발 툴 : Visual Studio Code (Mac 에도 Visual Studio Code 가 있으므로 운영체제 상관..