리액트에서는 태그의 Attribute처럼 속성을 붙일 수 있는데 이걸 리액트에서는 props 라는게 있는데 홈페이지에 가보면 개발문서에 컴포넌트와 프롭스에 대해 사용 할 수 있도록 정리 되어있다. 사용법은 나와있지만 정리해보려 한다 일단 내가 만든 컴포넌트 태그에 값을 넣어준다 그런 뒤에 원래 값이 들어가는 곳에 자신을 가르키는 this 그리고 프롭스라는 뜻에서 this.props 마지막으로 속성값의 이름을 적어 주면 컴포넌트 태그에 걸어둔 프롭스 값이 들어가게 된다. 이렇게 태그를 2개 입력해주면 속성값에 따라 내용이 바뀌는 것을 확인 할 수 있다.
이런 html 태그가 있다고 했을떄에 header 태그안에 있는 것이 1억개의 태그로 이루어져있다면 그 태그들은 어딘가에 감쳐두고 하나의 태그로 그것을 의미할 수 있다면 얼마나 좋을까? 그걸 해결하는 것이 컴포넌트이고 그 컴포넌트들을 사용할 수 있게 하는 것이 리액트의 기능이다. 위쪽에 class인 Subject를 만드는데 리액트의 클래스 Component를 상속 받고 꼭 render() 함수안에 return 값으로 넣고 싶은 html 코드를 만들어준다. 아래에 App 클래스에 div박스 안으로 Subject 태그를 넣어주면 끝 여기서 거의 유사 javaScript언어 같아 보이지만 실제로 클래스 Subject는 javaScript으로만 돌릴때는 문법상 틀려 오류를 일으키는데 리액트에서 사용할 수 있는 ..
처음 비트나미 wamp를 깐뒤에 C:\Bitnami\wampstack-7.3.28-0\apache2\htdocs 이경로안에 php 파일을 만들고 127.0.0.1/test.php 이렇게 url로 서버에 접속할 수 있다. 다음으로 php를 하기전에 환경설정을 할게 있는데 이 display_errors 를 On으로 바꾸게 되면 (앞에 대문자 주의) 뭔가 틀렸을 경우 오류 표시를 해준다 다만 사용자도 오류를 볼 수 있기 때문에 개인정보 노출 우려가 있기에 프로그램완성후 다시 Off로 처리해줘야 하지 않을까 싶다. opcache.enambel은 1 또는 2면 켜져있다. 0으로 바꿔서 꺼버리는 이유는 켜져있을경우 수정이 바로 변경되지않고 30초 10초 후에 바뀌기에 개발시에 불편하다 설정을 저장했다면 아파치 서버..
리액트를 본다면 아무것도 하지않았으매 리액트 자체에 좋은 개발환경을 위해 짜놓은 것으로 인해 1.7MB이라는 큰 용량으로 잡혀있다 그렇기에 배포할 때에 한번 빌드를 통해야한다. 터미널에 npm run build를 입력해주면 이렇게 build 라는 폴더가 생성되는데 이곳에 html css js 의 형태로만 파일이 남게 되는데 리액트에서 불필요했던 것들을 정리해서 용량을 줄인 폴더의 형태로 만들어준다 그런 뒤에 index.html을 그냥 여는 것이아닌 터미널에 npx serve -s build 적어주면 npx로 한번씩 사용할 수 있는 웹사이트 서버를 만들어준다 용량이 굉장히 줄어든 것을 확인 할 수 있다.
index.js파일안에 import를 살펴보면 ./index.css가 있다 경로를 찾아가 보도록하자 이렇게 index.js에 import 되어있는 css는 현재 index.html에 전체 css라 볼 수 있다. (아직까지 짐작에는 index.js는 html로 진입 전에 값을 받는 도구라고 생각된다 마치 스프링에서는 디스패처서블릿 같은 존재? 또는 컨트롤러 같은 존재같다) 그리고 index.js에서 컴포너트 값을 받은 App.js또한 css를 가지고있는걸 확인 할 수 있는데 이곳의 css는 컴포넌트의 디자인이 된다. 아래에 컴포넌트 값들에 css를 심어주는 import라 생각하면 된다.
먼저 프로젝트 폴더에 public 폴더를 보게 되면 index.html을 볼 수 있는데 그 곳에 id="root" 인 div 태그를 볼 수 있다 html을 안다면 이해를 할것이다. 이 div안에 아무 태그가 없지 않은가? 하지만 브라우저에 검사를 들어가게 되면 이렇게 id가 root 인 태그 안에 class = "App"이 들어와있다. 어디에서 온걸까? src폴더에 index.js를 눌러보자. 이런 코드로 되어있는데 여기서 주목 할 것은 //컴포넌트 , 위에 코드에 보이는 인데 이것을 컴포넌트라 말할 수 있다. 아래에 document.getElementById로 root를 선택해 가져오게 되는데 이 아이디에 App /을 넣는다고 생각하면 된다. 컴포넌트란 사용자 지정 태그라 하는데 이 App이라는 컴포넌..
툴은 비쥬얼 스튜디오 코드를 사용한다. 상단 바에 view -> Appearance -> show Panel 을 누르면 하단에 패널이 표시 되는데 그곳에 TERMINAL 을 사용할 수 있는데 명령어로 컴퓨터를 제어할 수 있는 프로그램이 내부적으로 설치 되기때문에 비주얼스튜디오코드를 사용합니다. 여기서 open folder로 react 프로젝트를 불러온다 ( 이전 글을 봤다면 creact-react-app을 설치한 폴더이다) 그 뒤에 TERMINAL에 npm run start를 입력해준다 성공시에 이렇게 나오게 된다. 그리고 이렇게 서버에 연결 된 웹이 뜨게 된다. 뜨지 않을시에 local 또는 on Your Network에 표시된 url을 브라우저에 입력해준다. ctrl+c 를 누르면 꺼진다. 다시 키고..
- Total
- Today
- Yesterday
- 리터럴
- filter
- HTTP
- 예외처리
- 로그인
- Java
- 향해플러스
- jpa api
- react실행
- 백엔드 개발자 역량
- 백엔드 개발자 공부
- 스프링공부
- 항해플러스
- 향해플러스백엔드
- rejectValue
- Intercepter
- BindingResult
- 항해99
- SpringBoot
- hypertexttransferprotocol
- JPA
- reject
- 컨트
- thymleaf
- ArgumentResolver
- 스프링부트
- exception
- 인터셉터
- React
- 향해99
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |